This week in our Reaction Architecture series, we'll be getting into the admin side of the Product Detail Page (PDP). We'll also illustrate what makes our platform's product architecture unique when compared to other commerce solutions.
If you missed either of the past two posts, then you'll probably want to give Part 1 and Part 2 a quick overview so you're all caught up. If you still haven't signed up for a free Lucidchart account, I promise you—it's worth it. We're going to be referencing my expansive PDP chart, which you can view and interact with here with your free account. I'll continue to inline images of this chart when applicable, but you'll be missing out on the full experience.
This post will describe the way the PDP admin currently works. It will also touch on how things will work in the near future, as there are some big things in the works for product admin. I'll get into this in a bit.
When you're logged in as an admin, Edit Mode is turned on by default. When you're in Edit mode, you can edit the title, description, and other product fields in place.
Drag and drop files to upload new images to the product and its variants, or rearrange the order in which your products are shown.
Use the Action View menu to edit variants and options of products.
When Edit Mode is turned off on the PDP, the Product page is displayed as how a potential customer might see it. This allows operators to quickly switch between editing products and previewing the Product page.
When Edit mode is on, users with the
createProduct role will be able to see the product editing tools when viewing the PDP.
Some of the icons in Edit mode have different states, depending on whether there are changes pending or not:
- Gold icons indicate that changes need to be published, which means they're not visible yet to customers.
- Grey icons indicate that nothing has changed since the last publish.
These behaviors apply to the visibility toggle, indicated by the eye icon, and the edit icon, indicated by the pencil.
Some of the text in the PDP also changes into edit-in-place fields when edit mode is turned on.
If the Product being viewed has one or more Tags or Details, then the edit buttons for those will appear in the PDP as well, otherwise they have to be edited from the Action View panel.
Edit Mode Action View
With the exception of the fields that can be edited in place, properties for a product and its variants and options are edited in the Action View panel. The Action View is contextual and will permit editing of the top-level product, its variants, or options of its variants, depending on what is selected.
When editing a top-level product, you're given the opportunity to edit things, such as the template it should use, social sharing messages, permalinks, tags, and other information that doesn't change from variant to variant.
When you use the Action View to edit a variant, you're given a different set of fields and are able to create and edit options within the variant here as well.
If no options exist for a given variant, then the variant is responsible for the quantity, price, weight, dimensions, and other specific properties that get calculated when going through checkout.
However, if options do exist for a given variant, then the price, quantity, etc. get bubbled up from the options, and the variant is not responsible for managing its own properties. When an option does exists, the option is what ultimately gets added to the cart. This is what controls price, inventory availability, and other specific properties at checkout.
When at least one option exists for a variant, the input fields for quantity and price get disabled, since they're linked to the options and are not editable at the variant level. If all the options for a particular variant get archived, then you can control price and inventory at the variant level again.
Media can exist on products, variants, and/or options. You can upload and attach images specifically to any level.
Bulk Product Editing and the Product Tree
If you read Part 1 of this three-part exploration of Products, you'll remember that Reaction stores all products, variants, and options as documents in the Products collection. You may also remember that these products are connected via the
ancestors field that exists on each document. This gives us a tree-like structure for products and their variants, where each product is connected to its ancestors via the ancestors field.
When you clone a Product, you'll be able to create a connection from the product back to the product it was cloned from.
But wait! I hear you asking, "Why is this relevant to the Product Admin blog post?"
The bulk and advanced product administration tools we're building will permit you to administer products in all sorts of ways that relate directly to the structure seen above. When you clone a product or create a new child variant or option, each field automatically inherits all of the properties of the product it was cloned from. Great! You only have to update the fields that are actually different. For some products, this might just be updating the price and the title. For others, it might mean updating a lot of fields.
Let's say you're a shirt company, and you have to change shirt manufacturers, but your prices and options aren't changing. You'll have to go through all of your products and update the manufacturer for each one, and maybe change one or two attributes. Our bulk editor will permit you to update all products that exist on the same tree. You'll be able to select your base product—maybe a t-shirt in this case—and everything else that was cloned from this product or has this product as an ancestor will get updated in a single action. You'll be able to update all products that were cloned from the same product. If not all products in the tree have the same value for the field, you'll be prompted to either overwrite all of them, overwrite only those that share the same field value, or cancel your action.
This wraps up my three-part miniseries on Products and the PDP. I hope it's been useful for you. Products are such an important part of commerce. I'm sure we'll continue to touch on various other aspects as we dig into the cart and checkout in the coming months, but these three posts should give you a solid foundation for how Reaction treats products, variants, and options. Next time, we'll continue our larger series, the Core Commerce funnel, and start looking at the cart and how that works in Reaction.
I always love hearing about how these posts are helping you, so if this has been useful for you, let me know in the comments below! If you've been around Reaction for a while and have any other tips or questions, feel free to leave those in the comments as well.