Ad

How To Insert The Corresponding Image To Color Swatch Using Javascript?

- 1 answer

I am trying to insert the corresponding background image for my color swatch in Shopify. Right now, I have my icons ready with the proper link to each color, but the icons dont have their corresponding image, like this. I am trying to insert the images that I have in my assets file, each image is already named in the same way as the color variation. How do I assign each image to their corresponding icon through Javascript? I know I can do it in Liquid, but it does not work for me as all the html are generated by Javascript. Here is my html

<ul class="new-variant-swatchs">
  <li class="new-variant-swatch js-new-variant-swatch is-active" data-val="Army Green" data-select="js-option-selector-0"></li>
  <li class="new-variant-swatch js-new-variant-swatch" data-val="Burgundy" data-select="js-option-selector-0"></li>
  <li class="new-variant-swatch js-new-variant-swatch" data-val="Camel Beige" data-select="js-option-selector-0"></li><li class="new-variant-swatch js-new-variant-swatch" data-val="Candy Red" data-select="js-option-selector-0"></li>
  <li class="new-variant-swatch js-new-variant-swatch" data-val="Caramel Brown" data-select="js-option-selector-0"></li><li class="new-variant-swatch js-new-variant-swatch" data-val="Charcoal Grey" data-select="js-option-selector-0"></li>
  <li class="new-variant-swatch js-new-variant-swatch" data-val="Heather Grey" data-select="js-option-selector-0"></li><li class="new-variant-swatch js-new-variant-swatch" data-val="Ivory White" data-select="js-option-selector-0"></li>
  <li class="new-variant-swatch js-new-variant-swatch" data-val="Muted Black" data-select="js-option-selector-0"></li><li class="new-variant-swatch js-new-variant-swatch" data-val="Navy Blue" data-select="js-option-selector-0"></li>
  <li class="new-variant-swatch js-new-variant-swatch" data-val="Rose Pink" data-select="js-option-selector-0"></li>

</ul>

I am a total noobie to Javascript, this is what I am trying to write, I know it is wrong, I am just trying to give an idea, thanks!

$(function() {
    if($(".new-variant-swatchs").length) {

        $(".new-variant-swatchs").each(function(i) {
            var $thisSelect = $(this);
            var $currentOption = $thisSelect.val();

            $thisSelect.find("li").each(function() {
                var $this = $(this);
                var $liText = $this.text();
                var $liVal = $this.val();

                $this.style.backgroundImage = "url({{ $liVal | handle | append: '.' | append: png | asset_url }}"

            }
        });
    }
});

Thank you in advance!

Ad

Answer

You might need to rename your images to match the data-val attribute value. For instance as of now Camel-Beige.png might need to be renamed to Camel Beige.png.

Next u will need to change your javascript code accordingly as below :

$(function() {
    if($(".new-variant-swatchs").length) {
        $(".new-variant-swatchs").each(function(i) {
            var $thisSelect = $(this);
            var $currentOption = $thisSelect.data('val');
            $thisSelect.find("li").each(function() {
                var $this = $(this);
                var $liText = $this.text();
                var $liVal = $this.data('val');
                $this.css('background', 'url(/assets/'+$liVal+'.png) no-repeat');       
            });
        });
    }
});

You may have to put proper asset relative path though.

Ad
source: stackoverflow.com
Ad