Swatches

Steps to integrated Standard Product Variant and Product Group Swatches.

Standard Product Variant Swatches

1. Standard Product card swatches based on Color Variants can be easily integrated from Frenzy Dashboard.

2. Go to Search & Collections -> Filter Settings -> Filter Options.

3. Open the filter settings and enable 'Product Grid Swatch' and choose the Appropriate settings for 'Filter display' and 'Swatch style' and click 'Save'.

1. Once the data is synced go to the Swatches Section to assign color value to the Filter Options.

1. To insert the Color Variant Swatches into Product Card insert the following into the Product Card HTML.

<div class="frenzy_swatch_wrap">
 <span class="frenzy_swatch_label">Available Colors</span>
 <div class="frenzy_product_swatch">[[product_available_colors]]</div>
</div>

Product Group Swatches

1. Stores using Product Group Swatches can be integrated using Shopify Liquid.

2. Create Product based Shopify template like product.group_swatch_view.liquid that will contain the Product Swatch HTML.

3. NOTE- If you already have Product Page Swatches, you can also repurpose the same code for creating the product.group_swatch_view.liquid.

4. Use the window.FrenzyProductGridChangeCallBack function to make a fetch API call (e.g. product_url?view=group_swatch_view) to get the Product Swatch HTML.

5. Use this API response to fetch the Swatches for the respective products.

6. Update the Product Grid HTML to display the respective Swatches.

7. In case you find any issues during the integration, feel free to reach out to Frenzy Support.

Example for product.group_swatch_view.liquid

# code response for product.group_swatch_view.liquid

<div>
    <div class='swatch-1'>
        <img src= '...'>
    <div>
    
    <div class='swatch-2'>
        <img src= '...'>
    <div>
<div>

Example for window.FrenzyProductGridChangeCallBack function

# code to make a fecth reqest and integrate the Product Swatches

var frenzy_product_grid_swatch = window.location.origin+Shopify.routes.root+"products/" + handle + "?view=frenzy_product_grid_swatch";
   const response = await fetch(frenzy_product_grid_swatch, {
      method: "GET",
  });
  const result = await response.text();
  if(result){
    document.querySelectorAll('.frenzy_product_item[data-id="'+sku+'"]').forEach(function(this_click){
      this_click.querySelector('.frenzy_swatch').innerHTML = result;
    })
  }  

Reload Product Card Data

For cases, when the user clicks on the swatch and the Product Card needs to be updated for new Image, Title, Price, etc.

1. Add a 'click' event listener on the Swatch.

2. When clicked, make an API call (e.g. URL- {STORE_URL}/products/{product_handle}.json) to get the Product Data from Shopify.

3. Find the Parent element responsible for the click using the JavaScript function node.parentElement

4. Using the Parent Element, access the elements for the Image, Title, Price, etc.

5. Update these elements (change Inner HTML) using the Shopify Data.

Sample Code for Product Group Swatches

1. Add the shortcode below to the product grid where you want to display the color swatches.

<div class="frenzy_swatch" data-id="[[product_id]]" data-collection-swatches data-collection-swatch-group data-master-handle></div>

1. After adding the shortcode, you need to create a product template that will return the color swatches using your theme’s logic. We used “master_handle_metafields.liquid” name for that template. Below is the example code we are using. Pls note the code below makes some assumptions that the Related Products are stored in the metafield product.metafields.related.colors. You can customize the logic based on your requirements.

{% layout none %}
{% assign all_text = '' %}
 {% unless product.has_only_default_variant %}
    {% for option in product.options_with_values %}
      {% if settings.variant_type == 'button' %}
        {%- assign swatch_file_extension = 'png' -%}
        {%- assign is_color = false -%}
        {%- assign color_swatch_drop = option -%}
        {%- assign color_option_index = 0 -%}
        {%- if settings.product_color_swatches -%}
          {%- for option in product.options_with_values -%}
            {%- if option == color_swatch_drop -%}
              {%- assign color_option_index = forloop.index0 -%}
              {%- assign downcased_option = color_swatch_drop.name | downcase -%}
              {%- if downcased_option contains 'color' or downcased_option contains 'colour' -%}
                {%- assign is_color = true -%}
              {%- endif -%}
            {%- endif -%}
          {%- endfor -%}
        {%- endif -%}
        {%- assign other_colors = '' -%}
        {%- if product.metafields.related.colors -%}
          {%- for other_product in product.metafields.related.colors.value -%}
            {%- for other_option in other_product.options_with_values -%}
              {%- assign other_option_name = other_option.name | handleize -%}
              {% assign variant_option = '' %}
              {% for variant in other_product.variants %}
                 {%- capture variant_option -%}{{ variant_option }}{% if variant_option != blank %},{% endif %}{""option_2"":""{{ variant.option2 }}"",""available"":""{{ variant.available }}"",""price"":""{{ variant.price }}"",""sku"":""{{ other_product.id | append: '_' | append:variant.id }}""}{% endcapture %}
              {% endfor %}
              {%- if other_option_name == 'color' or other_option_name == 'colour' -%}
                {%- assign other_option_value = other_option.values[0] -%}
                {%- assign color_image = other_option_value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first -%}
                {%- assign color_swatch_fallback = other_option_value | split: ' ' | last | handle -%}
                {% assign f_image = other_product.featured_image | img_url: 'master' | prepend: 'https:' %}
                {% assign secondary_image = other_product.images[1] | img_url: 'master' | prepend: 'https:' %}
                  {%- capture other_colors -%}{{ other_colors }}{% if other_colors != blank %},{% endif %}{""featured_image"":""{{ f_image }}"",""secondary_image"":""{{ secondary_image }}"",""color_image"":""{{ color_image }}"",""color_swatch_fallback"":""{{ color_swatch_fallback }}"",""product_handle"":""{{ other_product.url }}"",""product_title"":""{{ other_product.title }}"",""variant_option"":[{{ variant_option }}]}{%- endcapture -%}
              {%- endif -%}
            {%- endfor -%}
          {%- endfor -%}
        {%- endif -%}
        {%- assign option_index = forloop.index -%}
        {%- assign option_accesor = 'option' | append: option_index -%}
        {%- assign optionHandle = option.name | handle -%}
        {%- for value in option.values -%}
           {%- if is_color -%}
             {% assign variant_option = '' %}
              {% for variant in product.variants %}
                 {%- capture variant_option -%}{{ variant_option }}{% if variant_option != blank %},{% endif %}{""option_2"":""{{ variant.option2 }}"",""available"":""{{ variant.available }}"",""price"":""{{ variant.price }}"",""sku"":""{{ product.id | append: '_' | append:variant.id }}""}{% endcapture %}
              {% endfor %}
             {%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first -%}
            {%- assign color_swatch_fallback = value | split: ' ' | last | handle -%}
            {% assign f_image = product.featured_image | img_url: 'master' | prepend: 'https:' %}
            {% assign secondary_image = product.images[1] | img_url: 'master' | prepend: 'https:' %}
            {%- capture other_colors -%}{""featured_image"":""{{ f_image }}"",""color_image"":""{{ color_image }}"",""secondary_image"":""{{ secondary_image }}"",""color_swatch_fallback"":""{{ color_swatch_fallback }}"",""product_handle"":""{{ product.url }}"",""product_title"":""{{ product.title }}"",""variant_option"":[{{ variant_option }}]}{% if other_colors != blank %},{% endif %}{{ other_colors }}{%- endcapture -%}
             {% assign all_text = other_colors %}
           {% endif %}
        {% endfor %}
        
      {% endif %}
    {% endfor %}
 {% endunless %}
{""product_master_handle"": [{{ all_text }}]}"

1. After creating a page template, you need to add the callback function that will append the color swatches that we will get from that product template. Below is the example code we are using. Pls replace {STORE_URL} - with the actual url.

window.FrenzyProductGridChangeCallBack = async function(html, data){
 let swatch_product_hanlde = data.org_prod_url?.split('?');
   swatch_product_hanlde = swatch_product_hanlde[0];
   frenzySwatch(data.sku,swatch_product_hanlde,html);
}
const frenzySwatch = async function(sku,handle,html){
  var masterHandleMetafieldUrl = ""https://{STORE_URL}/products/"".concat(handle, ""?view=master_handle_metafields"");
   const response = await fetch(masterHandleMetafieldUrl, {
      method: ""GET"",
  });
  const result = await response.text();
  const result_trim = result.trim();
  const result_stringify = JSON.stringify(result_trim);
  const resultJson = JSON.parse(JSON.parse(result_stringify));
  var swatchHTML = '';
   if(resultJson?.product_master_handle){
     if(resultJson?.product_master_handle.length > 1){
        resultJson?.product_master_handle.forEach(function(value, key){
            var selected_class = '';
            swatchHTML += '<div class=""variant-input"">';
              swatchHTML += '<a href=""javascript:void(0)"" onclick=""event.preventDefault();frenzychangeSwatch(this);"" class=""variant__button-link '+selected_class+'"">';
                swatchHTML += ""<span data-title='""+value.product_title+""' data-handle='""+value.product_handle+""' data-variant='""+JSON.stringify(value.variant_option)+""' data-src='""+value.featured_image+""' data-secondary_image='""+value.secondary_image+""' class='variant__button-label color-swatch color-swatch--link' style='background-image: url(""+value.color_image+""); background-color: ""+value.color_swatch_fallback+"";'></span>"";
              swatchHTML += '</a>';
            swatchHTML += '</div>';
        });
     }
   }    
    document.querySelectorAll('.frenzy_swatch[data-id=""'+sku+'""]').forEach(function(this_click){
      this_click.innerHTML = swatchHTML;
    })
}

1. After adding the above JS, you need to add the swatch click event that will change the title, price, variants, image etc. Here is the example code:

function frenzychangeSwatch(this_click){
  this_click.closest('.frenzy_product_item').querySelectorAll('.variant-input').forEach(function(this_click_e){
    this_click_e.querySelector('.variant__button-link').classList.remove('is-selected');
  })
  this_click.classList.add('is-selected');
  var image = this_click.querySelector('span').getAttribute('data-src');
  var secondary_image = this_click.querySelector('span').getAttribute('data-secondary_image');
  var variant = this_click.querySelector('span').getAttribute('data-variant');
  var handle = this_click.querySelector('span').getAttribute('data-handle');
  var title = this_click.querySelector('span').getAttribute('data-title');
  if(this_click.closest('.frenzy_product_item').querySelector('.frenzy_img_first')){
   this_click.closest('.frenzy_product_item').querySelector('.frenzy_img_first').setAttribute('src', secondary_image); 
  }
  if(this_click.closest('.frenzy_product_item').querySelector('.frenzy_img_second')){
   this_click.closest('.frenzy_product_item').querySelector('.frenzy_img_second').setAttribute('src', image); 
  }
  if(this_click.closest('.frenzy_product_item').querySelector('.frenzy-mobile-image-grid')){
    if(this_click.closest('.frenzy_product_item').querySelector('.frenzy-mobile-image-grid').querySelector('.swiper-slide.swiper-slide-active')){
      this_click.closest('.frenzy_product_item').querySelector('.frenzy-mobile-image-grid').querySelector('.swiper-slide.swiper-slide-active').querySelector('.frenzy_img').setAttribute('src', secondary_image);
    }
  }
  if(this_click.closest('.frenzy_product_item').querySelector('.frenzy-mobile-image-grid')){
    if(this_click.closest('.frenzy_product_item').querySelector('.frenzy-mobile-image-grid').querySelector('.swiper-slide.swiper-slide-next')){
      this_click.closest('.frenzy_product_item').querySelector('.frenzy-mobile-image-grid').querySelector('.swiper-slide.swiper-slide-next').querySelector('.frenzy_img').setAttribute('src', image);
    }
  }
  
  this_click.closest('.frenzy_product_item').querySelector('.frenzy_product_title a').setAttribute('href', handle);
  this_click.closest('.frenzy_product_item').querySelector('.frenzy_product_title a').innerText = title;
  this_click.closest('.frenzy_product_item').querySelector('figure a').setAttribute('href', handle);
  var variant_option = JSON.parse(variant);
  var variant_option_button = '';
  var f_config_id = this_click.closest('.frenzy_product_item').querySelector('figure a').getAttribute('data-config_id');
  var f_request_id = this_click.closest('.frenzy_product_item').querySelector('figure a').getAttribute('data-request_id');
  var f_sku_id = this_click.closest('.frenzy_product_item').querySelector('figure a').getAttribute('data-sku');
  
  variant_option.forEach(function(val,key){
    var disabled= '';
    if(val.available != ""true""){
      disabled = 'disabled';
    }
    variant_option_button += '<button '+disabled+' onclick=""frenzyQuickAddEvent(this)""data-name=""collection"" data-image="""" data-config_id=""'+f_config_id+'"" data-request_id=""'+f_request_id+'"" data-price=""'+val.price+'"" data-sku=""'+val.sku+'"">'+val.option_2+'</button>';  
  });
   document.querySelector('.frenzy_product_item[data-id=""'+f_sku_id+'""] .frenzy_variant_option .frenzy_product_option').innerHTML = variant_option_button;
}