We are on the eve of the next release in our CrystalCommerce Admin redesign, and this one is sure to be a big one. We are proud to introduce the next phase of our project, the new Inventory > Products page. Every element on this page has been re-architected and brought into alignment with the aesthetic and philosophy of our new Admin. Learn more about this process by checking out the previous two releases:
I’ll dive into the Inventory page update in depth in a moment, but let’s hit the high points:
- It’s responsive down to tablet sized screens
- We used accordions to nest large banks of controls (think search filters)
- We tucked less-used controls into ‘drawers’ to keep them out of the way
- We simplified clutter-y data, but you can still see that data by hovering/clicking (tooltips abound)
- We re-organized information into more intuitive groupings
The easiest way for you to see what changed is to actually look at it! To lay the groundwork for our comparison between these two versions of the inventory page, let’s look at the same set of search results in both:
At first glance, the layout might seem familiar: categories on the left, filters in the middle, batch update controls on the right, and search results below. The major changes are within each of those areas, so we’ll break them down one by one.
The category filters are some of the most regularly used on this page, but one common complaint emerged: browsing through the list of categories proved to be difficult. In this release, we have opted for a nested accordion version of the category tree. An arrow appears on the right side of categories that contain children — click on that arrow to expand the category. To select a category (and all of its children), click on the category name text.
After performing a search, any categories that you have expanded/selected will remain expanded, even after a page refresh.
Aside from the expand/contract behavior, you may also type into the filter text box to see categories that match. This filter works just as it did before: type into it to see a list of all categories whose name matches your query. When you type into the text filter, the categories that you see are not nested.
Product, Product Type, and Variant Filters
These three groups of filters are the heart of the page, and the primary searching mechanism for your entire inventory. To establish clear boundaries between each group, and to keep the page as clean as possible, we have broken these filters up into three accordion panels. Any filters that are active in a search will now appear with a yellow background, and each accordion panel possesses an indicator to show how many filters are active (even after the page refreshes).
The product filters area shows you a set of filters that are applicable to all products — this is the only set of filters that never changes, regardless of what you search. There are quite a few product filtering options, and our research helped us understand and prioritize the filters that members use the most. Those filters are visible by default, while the rest are tucked into a ‘drawer’ that you can open by clicking the ‘Show More Filters’ button located in the same panel.
Product Type Filters
The filters that appear are different from the generic product filters: there are the descriptors for the selected product type. In the old version of the Inventory page, these would often appear out of nowhere, causing the page size to shift awkwardly. To address these two factors, we have opted to tuck these away into their own accordion section (away from the generic Product Filters).
Just like Product and Product Type filters, these inhabit their own unique accordion section. A set of generic variant filters are always present, and specific variant filters appear when the user selects a product type.
Batch Update Controls
The batch updates panel received similar redesign to the filters area: controls that are used the most are shown first, and the rest are tucked away in the drawer. Product and Variant batch update actions are grouped together, with help text to explain what each tab does.
Each batch update control is toggled on with a checkbox (all are off by default). Enqueue a job for the batch update by clicking the blue ‘Perform Batch Update’ button.
The search results on the product page may have received the biggest re-design of anything in the entire page, so let’s walk through each detail together:
Viewing/editing a product
The previous product row showed the product name as static text, and had the word ‘edit’ as the link to edit the product. This time around, we decided to turn the product name into the link for viewing/editing product details. Other important actions (view log, delete, etc) are listed as links below, similar to before.
Another way we’ve reduced the complexity and clutter for the new Product Row is by simplifying the previous “stats” column into the new “net change” column. The purpose of this column was to give the user an idea of the stock level of that product is trending up or down over the past 6 weeks. However, unless you can do the math really quickly in your head, this wasn’t the most easy-to-use tool. In the new version, each product’s net change has been boiled down to a single color-coded number. Hovering or clicking on that number will show a more detailed breakdown of that activity.
Sell/Buy Price Columns and Market Prices
The main updates to both of the price columns are in our treatment of the market prices. The previous Product Row has two market price columns: legacy market price (low, medium, high), and beta market price (broken down by channel). We love the extra data that the beta market price column contributes, but stuffing it all into the row causes odd fluctuations in height. This was another opportunity to simplify!
Important: batch updates for sell and buy prices still use the legacy market price.
The Admin 2.0 market price is a single column with two numbers, both with hover/click-able additional details. Beta market price is the top spot, with the legacy market price on the bottom. It is important to note that the legacy market price is still the market price used for batch updates. As the information in the Beta market pricing tool becomes more complete, we will transition to use the new market price breakdown as the primary tool.
Buy prices are included in the Beta market price data, so for the first time ever a market buy price is displayed where applicable as well.
To see the quantities you have for a given product, you have to expand the product variants. In the old product row, there were two dropdowns that allowed users to specify exactly which variants they wanted to see, and a button labeled ‘manage’ which expanded the selected variants. In the vast majority of test cases, users would click ‘manage’ directly (which opens the default variants) without ever using the dropdowns. The new product row tries to simplify this process: click directly on the total quantity in any product row to expand the default variants. To specify exactly which variants you would like to see (if not the default), click the dropdown arrow next to the total quantity and select the variant you would like to see using the controls within.
Next up for an overhaul: the variant row. Once upon a time, the controls for your variants were scattered far and wide. If you wanted to change a variant’s quantity, you would ‘manage’ that variant. If you wanted to set the same variant to have infinite quantity, you had to … edit the product? That’s right, but we have eliminated those kinds of issues in this update.
All variant controls are collected into the variant row, including reserved and infinite quantity. We’ve also fully re-vamped the way that you set a variant-specific pricing algorithm.
Default/Custom Pricing Algorithm
You may not know this, but each variant’s price is automatically calculated based on something called The Default Pricing Algorithm that is set in each Product Type. It’s a great tool for specific scenarios, but is called upon infrequently enough that we have decided to tuck it out of sight in the variant sell/buy price dropdown. The controls still work just like before, and the sell/buy prices for variant with a custom pricing algorithm will have a yellow background.
Edit/Create New Product
The final major change for this update is the screen you come to when you create a new product, or edit an existing one. The new layout flows better, and remedies the tragic overlapping text issue that was fairly common in the legacy version. We also moved the shipping controls into the main page, eliminated the need for any tabs (variant info had already been moved). The result is a neater, more user-friendly page.
We have fielded a variety of requests in this development window, and some of those have made it into this release.
Fully Hide the Sidebar
While most of the feedback on the new layout has been good, one common frustration was the inability to fully hide the sidebar. For this release, we’ve added that option. Up at the top of the page, the ‘X’ tucks the sidebar all the way off-screen, and the ‘☰’ opens it back to its previous state. This setting is saved and will persist throughout your session
Full Order Details on the Orders Search Page
Several members have requested that we allow them to show the full order details in the expandable search results area, and we’ve added that in this update.
One-Click Copy Shipping Address
The order details page is sporting a new ‘copy address’ option that copies the entire customer name and shipping address to the clipboard in the following format:
Bob Bobson 123 FAKE LANE AVENUE SEATTLE, WA 98125
Thanks for taking a look at our latest update! As always, we want to hear your feedback. Feel free to comment below, or send a message to firstname.lastname@example.org .