Retina product-form swatch help

New Member
3 0 0

I'm having trouble with adding the correct product to my cart. The process works when I have am choosing a product that only has 1 option (just color), but does not work for my product that has two options (i.e. leg size, and color). the UI is fine, but it is just adding the incorrect variant to the cart (adds the first one). here are my product-form.liquid and product-swatch.liquid. 

product-form.liquid

{% if section.settings.show_payment_button %}
  {% assign show_payment_button = true %}
{% elsif show_payment_button_quickshop %}
  {% assign show_payment_button = true %}
{% else %}
  {% assign show_payment_button = false %}
{% endif %}


{% assign variant = product.selected_or_first_available_variant %}
{% include 'size-chart-popup' %}

<div class="clearfix product_form init
      {% if product.variants.size > 1 or product.options.size > 1 %}product_form_options{% endif %}"
      id="product-form-{{ product.id }}{{ section.id }}{{ block.id }}"
      data-money-format="{{ shop.money_format }}"
      data-shop-currency="{{ shop.currency }}"
      data-select-id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}"
      data-enable-state="{% if template contains 'product' %}true{% else %}false{% endif %}"
      data-product="{{ product | json | escape }}"
      {% if settings.limit_quantity or settings.display_inventory_left %}
        data-variant-inventory='[{%- for v in product.variants -%}{"id":{{v.id}},"inventory_quantity":{{v.inventory_quantity}},"inventory_management":"{{v.inventory_management}}","inventory_policy":"{{v.inventory_policy}}"}{% if forloop.last == false %},{% endif %}{%- endfor -%}]'
      {% endif %}
      data-product-id="{{ product.id }}">
  {% form 'product', product, id: "product-form" %}

    {% if product.available %}
      {% if settings.display_inventory_left %}
        <div class="items_left">
          {% if variant.inventory_management != blank and variant.inventory_quantity > 0 %}
            {% capture items_left_text %}
              {% if variant.inventory_quantity == 1 %}
                {{ 'products.product.items_left_count.one' | t }}
              {% else %}
                {{ 'products.product.items_left_count.other' | t }}
              {% endif %}
            {% endcapture %}
            {% if variant.inventory_quantity <= settings.inventory_threshold %}
              {{ variant.inventory_quantity }} {{ items_left_text }}
            {% endif %}        
          {% endif %}
        </div>
      {% endif %}
    {% endif %}

  
    {% if settings.product_form_style == "swatches" and product.variants.size > 1 or settings.product_form_style == "swatches" and product.options[0] != "Title" %}
  		<div class="product-flex">
        <div class="swatch_options">
          {% for option in product.options %}
          <div class="flex-center swatch_options">
            {% if option == 'color' %}
          		<p>{{ option }} | </p><p id="color-value" class="text-12">loading...</p>
          	{% else %}
                <p>{{ option }} | </p><p id="leg-value" class="text-12">loading...</p>
            {% endif %}
          </div>
          	{% include 'product-swatch' with option %}
          		<div class="select">
                  <select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id" class="multi_select">
                    {% for v in product.variants %}
                      <option class="selected-option" value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
                    {% endfor %}
                  </select>
                  
            	</div>
          {% endfor %}
        </div>

        {% if settings.display_product_quantity %}
          <div class="purchase-details__quantity">
            <label class="quantity-unset" for="quantity">{{ 'products.product.quantity' | t }}</label>
            <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" {% if settings.limit_quantity and variant.inventory_management != blank and variant.inventory_policy == "deny" %}max="{{ variant.inventory_quantity }}"{% endif %} />
          </div>
        {% endif %}
     </div>
    {% endif %}

    <div class="purchase-details smart-payment-button--{{ show_payment_button }}">

      <div class="purchase-details__buttons">
        {% if settings.cart_action == 'reload_page' %}
          <input type="hidden" name="return_to" value="back" />
        {% elsif settings.cart_action == 'redirect_checkout' %}
          <input type="hidden" name="return_to" value="/checkout" />
        {% endif %}

        {% capture add_to_cart_label %}{% if collection_handles contains 'pre-order' %}{{ 'collections.general.pre_order' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endif %}{% endcapture %}
        <button type="{% if settings.cart_action == 'ajax' %} button {% else %} submit {% endif %}" name="add" class="{% if settings.cart_action == 'ajax' %} ajax-submit {% endif %} action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %}" data-label={{ add_to_cart_label | json }}>
          <span class="text">{{ add_to_cart_label }}</span>
        </button>
        {% if show_payment_button %}
          {{ form | payment_button }}
        {% endif %}
      </div>
    </div>
  {% endform %}
  <script type="text/javascript">
      $( document ).ready(function() {
        let color = $( '.swatch-element' ).attr('data-value');
        if (!!color) {
          let colorSplit = color.split("-");
          if(colorSplit.length > 1) {
              $( '#color-value' ).text(colorSplit[0] + ' resin/' + colorSplit[1] + ' legs');
          } else {
              $( '#color-value' ).text(colorSplit[0] + ' resin');
          }
        }
        $( '#leg-value' ).text($('.swatch-element-length').attr('data-value'));
      });
    
    
      $( '.swatch-element' ).click(function() {
          let color = 	$(this).attr('data-value');
          let colorSplit = color.split("-");
        if(colorSplit.length > 1) {
            $( '#color-value' ).text(colorSplit[0] + ' resin/' + colorSplit[1] + ' legs');
        } else {
            $( '#color-value' ).text(colorSplit[0] + ' resin');
        }
      });
        
      $( '.swatch-element-length' ).click(function() {
          let length = 	$(this).attr('data-value');
          $( '#leg-value' ).text(length);
      });       
  </script>
</div>

product-swatch.liquid

{% comment %}
  Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}

{% assign file_extension = 'png' %}

{% assign swatch = product-swatch %}
{% assign is_color = false %}
{% assign is_size = false %}
{% assign option_index = 0 %}

{% for option in product.options %}
  {% if option == swatch %}
    {% assign option_index = forloop.index0 %}
    {% assign downcased_option = swatch | downcase %}
    {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
      {% assign is_color = true %}
	{% elsif downcased_option contains 'leg size' or downcased_option contains 'size' %}
	  {% assign is_size = true %}
    {% endif %}
  {% endif %}
{% endfor %}

<div class="swatch clearfix flex_swatch" data-option-index="{{ option_index }}">
  <div class="option_title">{{ swatch }}</div>
  {% assign values = '' %}
  {% for variant in product.variants %}
  <div class="{{ variant.options[option_index] }}"></div>
    {% assign value = variant.options[option_index] %}
    {% unless values contains value %}
      {% assign values = values | join: ',' %}
      {% assign values = values | append: ',' | append: value %}
      {% assign values = values | split: ',' %}
      <input class="maybeThisWorks" id="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}{{ section.id }}{{ block.id }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} />
  	{% if is_color %}
      	     <div data-value="{{ value | escape }}" class="swatch-element {% if is_color or is_size %}color {% endif %}{{ value | handle }}-swatch {% if variant.available %}available{% else %}soldout{% endif %}">
        {% elsif is_size %}
             <div data-value="{{ value | escape }}" class="swatch-element-length {% if is_color or is_size %}color {% endif %}{{ value | handle }}-swatch {% if variant.available %}available{% else %}soldout{% endif %}">
        {% endif %}
        {% if is_color or is_size %}
          <div class="tooltip">{{ value }}</div>
        {% endif %}
        {% if is_color or is_size %}
          <label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}{{ section.id }}{{ block.id }}" style="background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' | prepend: 'https:' }}); background-color: {{ value | split: ' ' | last | handle }};">
            <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" alt="" />
          </label>
        {% else %}
          <label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}{{ section.id }}{{ block.id }}">
            {{ value }}
            <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
          </label>
        {% endif %}
      </div>
    {% endunless %}
    {% if variant.available %}
      <script type="text/javascript">
        $('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}-swatch', '#product-form-{{ product.id }}{{ section.id }}{{ block.id }}').removeClass('soldout').addClass('available').find(':radio');
      </script>   
  	{% endif %}
  {% endfor %}
</div>
0 Likes
Shopify Partner
1142 93 139

hi,

try this step

https://help.shopify.com/en/themes/customization/products/features/add-color-swatches

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes