30 likes | 145 Views
The swatch display type is used to show a color or texture for a product or one of its attributes. It’s commonly used for products that are available in different colors or materials. For example, you could use swatches to let your customers select from available patterns of fabric.
E N D
Show color swatches on category pages in Bigcommerce The swatch display type is used to show a color or texture for a product or one of its attributes. It‟s commonly used for products that are available in different colors or materials. For example, you could use swatches to let your customers select from available patterns of fabric. Setting Up the Option Go to Store Setup › Design, than click Edit HTML/CSS.
Find Category.html, Copy below code and paste the code before </body> <script type=”text/javascript”> /* Ajax in Product Color Options */ $(„#frmCompare ul.ProductList > li‟).each(function(index, el) { var _this = $(el); var thisProductName = _this.find(„.ProductName‟); var thisProductURL = thisProductName.find(„> a‟).attr(„href‟); // AJAX to this product $.ajax({ url: thisProductURL, type: „GET‟, dataType: „html‟, async: false }) .done(function(data) { // find “color” swatches
var thisSwatches = $(„.productAttributeRow‟, data) .filter(function() { return $(this).find(„.productAttributeLabel .name‟).text().trim() == “Color:”; }) .find(„.productAttributeValue .previewContent span.swatchColour‟); // Append swatches if (thisSwatches.length > 0) { thisSwatches.wrapAll(„<div class=”colorGrid”></div>‟).parent().appendTo(thisProductName); } // end if }); // end ajax done }); // end each </script> Save the changes and its Done. Color swatches on category pages in Bigcommerce