Image-based Swatches

use the script tp see how to create image bases swatches

<script>
const COLOR_VARIANT_NAME = "Color";
const IMAGE_VARIANT_NAME = "imgs";



var __isp_options = {
isp_serp_with_product_attributes: '1', // load product attributes

isp_serp_callback: data => {
$jquery_isp(".isp_grid_product").each(function () {
const product_id = $jquery_isp(this).attr("product_id");
const variants = ISP_PRODUCTS[product_id].vra;

/* create custom variant swatches by images*/
$jquery_isp(this).find('.product-color-swatch').each(function () {
let swatch_image = getImageByColor(variants, $jquery_isp(this).attr("title"));
if (swatch_image) {
$jquery_isp(this).css("background-image", `url(${swatch_image})`);
$jquery_isp(this).addClass("custom_swatch");
}
});

/* add available sizes */
//if (!$jquery_isp(this).hasClass("size-list")) {
// $jquery_isp(this).find("img").after(getSizeTable(getSizeList(variants)));
// $jquery_isp(this).addClass("size-list");
//}
});
},
};

const getImageByColor = (variants, color_name) => {
for (let i = 0; i < variants.length; i++) {
let color_found = variants[i][1].find(value => {
return value[0] === COLOR_VARIANT_NAME && value[1][0] === color_name
});
let image_found = variants[i][1].find(value => {
return value[0] === IMAGE_VARIANT_NAME
});

if (color_found && image_found) {
return image_found[1][0]
}
}
return false;
};


</script>
<style>


ul#isp_search_results_container li.isp_grid_product .isp_product_color_swatch .product-color-swatch {
width: 25px;
height: 25px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 0 2px white, 0 0 0 3px #cccccc;
margin: 5px;
}

ul#isp_search_results_container li.isp_grid_product div#single_swatch {
visibility: visible;
}

ul#isp_search_results_container li.isp_grid_product .isp_product_color_swatch {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
}


</style>