Product actions - block on the PDP which contains main information about the product and main functionality for manipulation with the product. The common actions are selecting or deselecting a specific product type, adding to cart, adding to wishlist, etc.
<aside> ℹ️ Usually, styling this element takes from-to: 5-8h
</aside>
Product gallery can be found on the following elements:
Bundle product options
Grouped product options
Wishlist and Compare
Add to cart
Configurable product options
Title, SKU, stock status, short description
The product actions should be displayed accounting for the following:
Please account for the following states:
ProductActions is a separate component that renders related elements, there are different methods for desktop and mobile:
In the scope of this part, you should theme elements from this list that are listed in the designs: title, SKU, short description, stock status, and additional data which are in the designs and are available by default or implementation requires only FE adjustments.
The ProductBundleItems component renders the bundle product options.
Grouped products are rendered by the GroupedProductList component.
Configurable options are rendered by the ProductConfigurableAttributes component.
<aside>
➡️ The ProductConfigurableAttributes component is also used on the product list page. Keep that in mind while changing its styles, the designs might be different there.
</aside>
The attribute can be rendered as a swatch list or as a dropdown.
If the attribute is to be rendered as a swatch list, the ProductAttributeValue component will be rendered for each swatch. There, numerous functions can be called depending on the configurable option attribute_type.
If you just want to change some basic styles for the swatches, just changing some variables might be enough. For that:
ProductAttributeValue.style.scss as ProductAttributeValue.override.style.scss .:root {
--option-background-color: <OPTIONS DESIRED BACKGROUND COLOR>;
--option-check-mark-background: <CHECKMARK BACKGROUND COLOR>;
--option-size: <SIZE OF EACH OPTION>;
--option-text-color: <TEXT COLOR>;
--option-border-color: <BORDER COLOR>;
@include mobile {
--option-border-color: <BORDER FOR MOBILE>;
}
}
<aside> ➡️ Note that depending on the swatch type, some of these styles might not be applied. i.e. background color for color swatches.
</aside>
If it is to be rendered as a dropdown, the ProductConfigurableAttributeDropdown component will be rendered.
The wishlist button is rendered by the ProductWishlistButton component.
The HeartIcon is responsible for rendering the heart icon in the wishlist button.
To change the icon simply override the render method and replace the old path with the desired one.
The ProductCompareButton component renders the product compare button.
The CompareIcon component is responsible for rendering the compare icon.
To change the icon simply override the render method and replace the old path with the desired one.
The AddToCart component renders the add to cart button.
For changing spacing, orientation, the display, remove or even add some elements, look for the ProductActions component, in there the renderAddToCartActionBlock() function is responsible for rendering the add to cart block on desktop and renderAddToCartMobile(), for mobile.
The example above is a real implementation where the wishlist and compare button were removed and the a new button was added:
renderAddToCartActionBlock() {
return (
<div
block="ProductActions"
elem="AddToCartWrapper"
mods={ { isPrerendered: isSSR() || isCrawler() } }
>
{ this.renderQuantityChanger() }
{ this.renderAddToCartButton() }
{ this.renderMoreDetailsButton() }
</div>
);
}
<aside>
➡️ Be aware that the AddToCart component is also used by the ProductCard. So, keep in mind that any changes to this component are also going to be reflected there. Good to use mixin base on passed prop from the route or navigation state to differ element’s location and separate styles
</aside>