Product list actions perform an action on product options, such as selecting or deselecting a specific product type, filtering by any value: price, color, etc, and how the customer wants to see the products – in a list or in a grid view. Mainly product list actions includes layered navigation and sorting functionality.
<aside> ℹ️ Usually, styling this element takes from-to: 4-8h
</aside>
A product list of actions can be found on the following elements:
The product list actions should be displayed accounting for the following:
Please account for the following states:
Most of the category product list filters reside in the CategoryFilterOverlay → CategoryConfigurableAttributes → ProductConfigurableAttributes component. Please, take into account that, ProductConfigurableAttributes is also re-used in multiple places of the app, so if designs are not common, make sure to isolate your styles.
PLP
PDP
PLP
The ResetAttributes component is responsible for rendering reset items. The ResetButton component is responsible for rendering the reset button.
Method in CategoryConfigurableAttributes.renderDropdown is responsible for rendering select filters.
The renderLayoutButtons method of the CategoryPage component renders the layout options.
The CategoryConfigurableAttributes component is responsible for rendering filters. It extends the ProductConfigurableAttributes component and defines additional logic on top. Individual values in the dropdown are rendered by ProductAttributeValue.
ProductAttributeValue.renderColorValue renders the color swatches.
ProductAttributeValue.renderStringValue renders the text swatches.
ProductAttributeValue.renderImageValue renders the picture swatches.
Theme the CategorySort component.
<aside> ➡️ NOTE: The price slider is not supported by the default ScandiPWA for now therefore it should be done by the internal team.
</aside>
CategoryConfigurableAttributes.renderPriceSwatch renders the price filters.