The Core Commerce Funnel: Product Grid
Let’s dive into a new section of my Reaction Architecture series: the Core Commerce Funnel.
We'll spend the next six weeks looking at the different parts of our commerce funnel, exploring how each part is built to optimize conversions. We'll also discuss how to hook into the different methods within the funnel. Like every post in the series, I'll be referring to this flow diagram, which will require logging in to your LucidChart account to view. Sign up for free.
Last month, we explored some of the concepts that you'll see throughout the rest of this series, so if you missed anything, I'd recommend at least skimming through some of my previous posts, just so you have a reference point for the different terms I'm using.
Today, we're focused on the Product Grid. The Product Grid diagram is broken into two primary segments: 1) the product grid that all users can shop from and interact with, and 2) the product grid settings view of the Action Panel, which I'll dig into in a bit. We'll go through this diagram and spend some time introducing some of the new components being reused throughout Reaction.
Introducing the Product Grid
When the Product Grid is viewed, we trigger a
Product List Viewed event, which is also linked to the Segment.io Product List Viewed event, as well as the Google Analytics Enhanced Ecommerce event. You can also hook into this event from a plugin. For more details, read our Events blog post, or check out our Docs.
Permissions to view the Product Grid are controlled by the
tag permission, defined in the product-variant plugin. This permission is granted by default to all users—anonymous, guest, and administrative. You can change this, but we're not going to get into that in this post.
Users can filter products shown in the grid. We're actively working on implementing a better UI for filtering, but for now, you can easily filter products by price: below, above, or in between a certain price. You may also use tag filtering to quickly and easily add filtering for other product attributes, such as color, size, or material. Filtering products will trigger a Product List Filtered event (Segment docs), which will then allow you to start sorting your merchandise.
With our new filtering UI, you'll be able to easily sort products by price or other attributes. You can already implement this on your own fairly easily, and most shops on Reaction already have some form of sorting and filtering built in. We expect most bigger shops to customize sorting and filtering to match their specific shop, but we wanted to build in basic functionality for shops that don't need a custom sorting or filtering solution. Sorting products will trigger a Product List Filtered event and pass the
Searching for Products
Reaction’s basic search performs text searches of products. It searches titles, variant and option labels, descriptions, vendors, etc. If you need a more advanced search, we recommend using Elasticsearch or something similar. Or, you can build your own custom plugin to connect with third-party search capabilities. If you have, let us know!
Searching products will trigger a Products Searched event (Segment docs).
Interacting With Items
Other than filtering, sorting, and searching, every interaction within the Product Grid involves an item on the grid, typically a product. We plan to support integrating content alongside products in this grid once our as part of our content management.
The ability to add a product to a wishlist is on our roadmap. Users must be logged in and have the
wishlist permission, which is granted by default, to add a product to a wishlist. I'll come back and expand on this section in a couple months, once our wishlist functionality is completed.
Adding a product to the wishlist will trigger a Product Added to Wishlist event. This event will trigger a confirmation alert and permit the user to link directly to their wishlist from the alert.
Click a Product to View Product Details
Clicking anywhere on the grid item will take the customer to the Product Detail View for that product and trigger a Product Clicked event (Segment docs).
If a user is logged in and has the
createProduct permission for the active shop, clicking an item on the Product Grid will open up the Action View panel, with the selected item as the context.
While a product is selected, clicking another product will add that product to the selection, while clicking an empty space in the grid will deselect any currently selected products.
Product Grid Controls - Action View Panel
The Action View panel is where much of the admin functionality for Reaction happens. While viewing the Product Grid, the Action View panel permits the following actions for the select products:
- Toggling visibility
- Changing the grid image size
- Adding tags
- Changing common attributes
All changes made to products from the Product Grid settings panel require changes to be published before they are made visible to users without
createProduct permissions. As you can see from the Product Grid flow diagram, most of these changes trigger an event.
It's probably better to think of the Product Grid as a component for showing multiple products vs. just a plain grid. Want to view your products as a list or in some formation other than a grid? This is where you'll do it. In fact, we're currently working on a "list" view for the product grid as a part of core.
This is also the component you should use if you want to show related, suggested, or other sets of products embedded in other views, such as the Product Detail view. And if you want, you can also change sizes of the grid image, or even add additional image sizes (docs coming soon).
For more info on components, check out the Reaction Style Guide.
Next week, we'll look into the Product Detail view.