Product Specific CSS Classes - ecellar/remote-widgets GitHub Wiki

The product editor in the ACP has a ‘CSS Class’ input field on the Web Info tab. CSS class names entered there can be used by you to create custom styling for products rendered by these SPA views:

• categorieslist
• products
• product
• cart
• checkout (order review step)

For example, let’s say that you have some ‘wine-bottle’ products you would like to style one way and some ‘wine-collection’ products you would like to style a different way.

In your Designer Widgets site, you could create CSS classes like these:

.wine-bottle { <your style here> }
.wine-collection { <your style here> }

Then in the product editor, you could add the relevant class name(s) to each desired product. What you enter will be used to populate a {message:css_class} placeholder in the class="<classes>" attribute of the outermost <div> of these HTML templates:

CategoriesList__Product
- used by ‘categorieslist’ view

CategoryWithProducts__Product
- used by ‘products’ view

ProductDetail
- used by ‘product’ view

GeneralCart__Product_A
GeneralCart__Product_B
- used by ‘cart’ view

OrderReview__CartItem
- used by ‘checkout’ workflow, order review step

Here is an example of the placeholder in the outermost <div> of the ProductDetail HTML template:

<div class="ecp-component ecp_ProductDetail {message:css_class}">

and in the CategoryWithProducts__Product HTML template:

<div class="ecp-list-item {message:css_class}" data-ecp-id="{message:product_id}">

Note: if you created custom versions of any of the HTML templates listed above before 8/1/2019, you will not automatically have the {message:css_class} placeholders, but you can add them to your custom versions of the templates.

You may go even deeper by creating style variations for each of the supported views.

For example, let’s say that you want a product with the ‘wine-collection’ class to look different from other products only in the product detail view. You could do this:

.ecp_ProductDetail.wine-collection { <your style here> }

Here are some other examples for creating component-specific styles for products that appear in different views:

.ecp_CategoriesList .wine-bottle { <your 'categorieslist' view bottle style here> }
.ecp_CategoriesList .wine-collection { <your 'categorieslist' view collection style here> }

.ecp_CategoryWithProducts .wine-bottle { <your 'products' view bottle style here> }
.ecp_CategoryWithProducts .wine-collection { <your 'products' view collection style here> }

.ecp_GeneralCart .wine-bottle { <your 'cart' view bottle style here> }
.ecp_GeneralCart .wine-collection { <your 'cart' view collection style here> }

.ecp_OrderReview .wine-bottle { <your 'checkout > order review' bottle style here> }
.ecp_OrderReview .wine-collection { <your 'checkout > order review' collection style here> }