Adding variant selection in collection page - shopify

variant-collection.liquid

//Product grid
<div id="product-colors-{{product.id}}" class="product-colors">

    {% capture variant_data %}
    {% for variant in product.variants %}
    {{ variant.option1 | escape | handleize | remove: "-amp"}}|{{variant.id}}
    {% if forloop.last == false %}::{% endif%}
    {% endfor %}
    {% endcapture %}

    {% assign variant_array = variant_data | split: '::'  %}	
  
    {% for variant in variant_array %}
      {% assign variant_val = variant | split: '|' %}
      {% assign color =  variant_val[0] | join: ', '%} 
      
      {% assign id = variant_val[1] | join: ', ' %}
      {% assign strip_color = color | strip %}
      {% if strip_color != 'default-title' %}
        <div class="image-color">
          <img src="{{strip_color | append:'.jpg' | strip  | asset_img_url: '25x' }}" color="{{color | strip }}" id="{{ strip_color }}-{{id | strip }}" variant-image="" alt="{{ strip_color }}" title="{{ strip_color | capitalize | replace: '-', ' ' }}">
        </div>
      {% endif %}
      
    {% endfor %}


    <script>

      $(document).ready(function(){
        var parsed_variant;

        {% for variant in product.variants %}

          var variant_json = '{{variant | json }}';
          parsed_variant = JSON.parse(variant_json);
        
          var color = parsed_variant.option1+'-'+parsed_variant.id;
          var handleizeColor = color.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/-$/, '').replace(/^-/, '');
          
          if(parsed_variant.featured_image != null) {
            //console.log(parsed_variant.featured_image.src);

            var seen = {};  
              
            $('#product-colors-{{product.id}}').children().each(function(){

              var color = $(this).find('img').attr('color');
              //console.log(color)
              if (seen[color])
                  $(this).remove();
              else
                  seen[color] = true;

              $(this).find('#'+handleizeColor).attr('variant-image', parsed_variant.featured_image.src);

            });
          }
        
        {% endfor %}
        
      });

    </script>

  </div>
  
  <style>
  .variant-swatches-wrapper {

    .variant-swatches {

        display: flex;

        span {
            margin-right: 5px;
            font-size: 12px;
        }

        input {
            display: none;
    
            &:checked + label {
                border: 1px solid #cccccc;
            }
    
        }
    
        label {
            max-height: 44px;
            margin-right: 5%;
        
            &:last-child {
                margin-right: 0%;
            }
        }
    
        img {
            height: 100%;
            width: 100%;
        }

    }
    
}
</style>


//Collection page
<script>
// Start of Variant color switching
    function colorVariantSelect() {
      $('.product-colors').children().each(function(){
      
        $(this).click(function(e){
          e.preventDefault()
          selected_variant_image = $(this).children('img').attr('variant-image');
          var img_wrapper = $(this).parents('.product-card').find('.product-card__image-with-placeholder-wrapper').find('img')
          $(img_wrapper).attr('src', selected_variant_image);
          $(img_wrapper).attr('data-srcset', selected_variant_image)
          $(img_wrapper).attr('srcset', selected_variant_image)
        })
      
      });
    }
</script>