This week in our series on Reaction Architecture, we’ll be exploring the customer-facing side of the Product Detail Page (also known as PDP) in Reaction. If you haven’t already done so, I encourage you to start from last week’s Part 1 post, where we took an in-depth look at the Product Schema. Feel free to check out my other engineering posts here.
As with most of these architecture posts, I'll be referencing this Lucidchart diagram frequently during the course of this post.
You'll need a free Lucidchart account to view this diagram interactively, but I will also inline images of the PDP diagram so you can follow along without having to leave this article.
Here's a key to reading the Lucidchart diagram:
- Dark grey lines indicate functionality that is either complete or in progress in core Reaction.
- Blue lines indicate functionality that is on our roadmap, but not yet in progress. These are features that we'd love to collaborate on if you feel like contributing!
- Red lines indicate functionality that is not currently on our Core team roadmap, but that we think would add a lot of value to the platform. We'd love to see community-led plugins that focus on these features.
How we map the customer journey
When developing for the PDP, it’s helpful to map out the various behaviors, actions, and journeys a shopper might possibly take. Some questions to consider may include:
How does a shopper end up on the PDP?
- By clicking on a product from the Product Grid
- By searching for a product
- By clicking from on a product under ‘Related Products’
- By clicking a link that leads directly to the product or one of its variants
- Organic search
- Paid search or display ads
- Social media
- Reviews, blogs, or other content-related sites
What are some actions a shopper can take on the PDP?
- Share this product on social media
- Add this product to a wishlist
- Browse images of this product
- Add this product to the cart
Where does the shopper go from here?
- Back to the Product Grid
- Clicking back on their browser
- A tag on the current product or in the navigation
- View wishlist
- A different Product's detail page
- A related or recommended product
- To checkout
- Clicking ‘checkout’ after adding a product to the cart
- Clicking ‘checkout’ from the dropdown or sidecar-style cart
Products, variants & options
Every product in Reaction must have at least one variant. For instance, if you sell a shirt that only comes in one color, eg. Blue, then that color is your product’s single variant. For more info on Variants, refer back to Part 1 of this series.
Variants can have child variants. Reaction refers to these child variants as options. For instance, a t-shirt might have a color variant (Blue, Green, Red), and each color variant may have multiple size options, eg. small, medium, large. Reaction supports unlimited nesting, although our current UI is limited to displaying only two levels of variants. It’s not mandatory for products to include multiple options.
Once a variant has been selected, then the PDP will display any associated options available for that particular variant. When a single-variant product, eg. a single Blue Shirt, doesn’t have any options, then that product can be directly added to cart by a shopper. However, when a product features multiple options, the customer will need to select an option, eg. a Small Blue Shirt, before they’re able to add that product to cart.
How to track what shoppers are doing on the PDP
As is the case for most of our platform’s events, operators can hook triggered events into third-party plugins, all without touching or editing any of the core code. For instance, many of the events we list below are linked in Segment, Google Analytics, and Mixpanel. So when a shopper views the PDP of a particular product, a
Product Viewed event is triggered in Segment. And when the page’s product images load, a
Product Media Viewed event is similarly triggered.
For more details on event tracking, event hooks, and analytics integrations, read my post on Events. Or, visit our Docs.
How to take advantage of events on the PDP
All mapped actions taken on the PDP trigger an event. For instance, when a shopper clicks on a product variant, this triggers a
Variant Selected event, which checks for all media associated, eg. product photos. If the event finds any media, then that becomes the primary image in the Media Gallery. This also triggers another
Product Media Viewed event.
When a shopper clicks the Add to Cart button, we run the handleAddToCart function. This function performs client-side checks to make sure the product is available and in stock. Then, it calls the cart/addToCart method. Adding a product to the cart will trigger either the
Product Added To Cart or
Wishlist Product Added To Cart event, depending on whether or not the product is in a wishlist for the customer.
What’s Next for PDP
PDP would not be where it is today if it wasn’t for the help of our community. Here are a few features we'd love some help on. If you're interested in contributing to Reaction, these features are a great place to get started. Pull requests are encouraged!
We'd love to see someone in the community implement a Product Reviews plugin. There's an open issue #516 for this, but if you have specific ideas or needs that you'd like to see in a Product Reviews plugin, leave those ideas in that issue. We welcome any contributions.
There are lots of different ways you could go about implementing a Related Products plugin. We'd love to see a community-led plugin that implements some kind of similar or related products functionality. There's an open issue for this as well, and even if you currently don't have the time to develop or code something like this, you can always help out by adding ideas to this issue #518.
I hope this post has been helpful. It may seem a little mundane to go through information that may seem a bit obvious, but I believe that understanding the PDP from a customer’s point of view is crucial. Having this perspective help us tackle how the PDP works for shop administrators.
If you have questions or ideas about the Product Detail Page, leave a comment below, or join us on Gitter or in our Forums. You can also join our bi-weekly Community Call, where we talk about what the Reaction engineering team is currently working on and planning to work on. It’s a great opportunity to ask us any detailed questions that might come up.