Select Variants by Clicking Image in Supply Theme

New Member
1 0 1

Hello,

I am trying to make it so if you click a variant image, it loads the variant instead of staying on the variant you were already on. Shopify has directions for that here, but they do not work in Supply. Does anyone know how to make it work in the Supply Theme? 

If it helps, my product.liquid looks like this:

{% include 'breadcrumb' %}

<div class="grid" itemscope itemtype="http://schema.org/Product">;
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: '1024x1024' }}">

  <div class="grid-item large--three-fifths">
    <div class="grid">
      <div class="grid-item large--eleven-twelfths text-center">
        <div class="product-photo-container" id="productPhoto">
          {% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
          <img id="productPhotoImg" src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" {% if settings.product_image_zoom_enable %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}>
        </div>
        {% if product.images.size > 1 %}
          <ul class="product-photo-thumbs grid-uniform" id="productThumbs">

            {% for image in product.images %}
              <li class="grid-item medium-down--one-third large--one-third">
                <a href="{{ image.src | img_url: '1024x1024' }}" class="product-photo-thumb">
                  <img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endfor %}

          </ul>
        {% endif %}

      </div>
    </div>

  </div>

  <div class="grid-item large--two-fifths">

    <h2 itemprop="name">{{ product.title }}</h2>

    {% if settings.product_vendor_enable %}
      <p class="product-meta" itemprop="brand">{{ product.vendor }}</p>
    {% endif %}

    <div class="product-description rte" itemprop="description"> <!--moved above itemprop="offers" to put description over price/buy-->
      {{ product.description }}
    </div>
    
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">;

      {% assign variant = product.selected_or_first_available_variant %}

      <meta itemprop="priceCurrency" content="{{ shop.currency }}">
      <meta itemprop="price" content="{{ variant.price | money_without_currency }}">

      <ul class="inline-list product-meta">
        <li>
          <span id="productPrice" class="h1">
            {% include 'price' with variant.price %}
          </span>
        </li>
        {% if product.compare_at_price_max > product.price and settings.product_show_saved_amount %}
        <li>
          <span id="comparePrice" class="sale-tag large">
            {% assign compare_price = variant.compare_at_price %}
            {% assign product_price = variant.price %}
            {% include 'price-sale' %}
          </span>
        </li>
        {% endif %}
        {% if settings.product_reviews_enable %}
          <li class="product-meta--review">
            <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
          </li>
        {% endif %}
      </ul>

      <hr id="variantBreak" class="hr--clear hr--small">

      <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

      <form action="/cart/add" method="post" enctype="multipart/form-data" id="addToCartForm">
        <select name="id" id="productSelect" class="product-variants">
          {% for variant in product.variants %}
            {% if variant.available %}

              <option data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

            {% else %}
              <option disabled="disabled">
                {{ variant.title }} - {{ 'products.product.sold_out' | t }}
              </option>
            {% endif %}
          {% endfor %}
        </select>

        {% if settings.product_quantity_enable %}
          <label for="quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
          <input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">
        {% endif %}

        <button type="submit" name="add" id="addToCart" class="btn">
          <span class="icon icon-cart"></span>
          <span id="addToCartText">{{ 'products.product.add_to_cart' | t }}</span>
        </button>
        {% if settings.product_quantity_message %}
          <span id="variantQuantity" class="variant-quantity"></span>
        {% endif %}
      </form>

      <hr>

    </div>

    {% if settings.social_sharing_products %}
      {% include 'social-sharing' %}
    {% endif %}

  </div>
</div>

{% if settings.related_products_enable %}
  {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
  {% include 'related-products' %}
{% endif %}

{% if settings.product_reviews_enable %}
  <hr>
  <div id="shopify-product-reviews" data-id="{{ product.id }}">{{ product.metafields.spr.reviews }}</div>
{% endif %}

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>

  // Pre-loading product images, to avoid a lag when a thumbnail is clicked, or
  // when a variant is selected that has a variant image.
  Shopify.Image.preload({{ product.images | json }}, '1024x1024');

  var selectCallback = function(variant, selector) {

    var $addToCart = $('#addToCart'),
        $productPrice = $('#productPrice'),
        $comparePrice = $('#comparePrice'),
        $variantQuantity = $('#variantQuantity'),
        $quantityElements = $('.quantity-selector, label + .js-qty'),
        $addToCartText = $('#addToCartText'),
        $featuredImage = $('#productPhotoImg');

    if (variant) {
      // Update variant image, if one is set
      // Call timber.switchImage function in shop.js
      if (variant.featured_image) {
        var newImg = variant.featured_image,
            el = $featuredImage[0];
        $(function() {
          Shopify.Image.switchImage(newImg, el, timber.switchImage);
        });
      }

      // Select a valid variant if available
      if (variant.available) {
        // We have a valid product variant, so enable the submit button
        $addToCart.removeClass('disabled').prop('disabled', false);
        $addToCartText.html({{ 'products.product.add_to_cart' | t | json }});

        // Show how many items are left, if below 10
        {% if settings.product_quantity_message %}
        if (variant.inventory_management) {
          if (variant.inventory_quantity < 10 && variant.inventory_quantity > 0) {
            $variantQuantity.html({{ 'products.product.only_left' | t: count: '1' | json }}.replace('1', variant.inventory_quantity)).addClass('is-visible');
          } else {
            $variantQuantity.removeClass('is-visible');
          }
        }
        else {
          $variantQuantity.removeClass('is-visible');
        }
        {% endif %}


        $quantityElements.show();
      } else {
        // Variant is sold out, disable the submit button
        $addToCart.addClass('disabled').prop('disabled', true);
        $addToCartText.html({{ 'products.product.sold_out' | t | json }});
        $variantQuantity.removeClass('is-visible');
        $quantityElements.hide();
      }

      // Regardless of stock, update the product price
      var customPriceFormat = timber.formatMoney( Shopify.formatMoney(variant.price, "{{ shop.money_format }}") );
      {% if settings.product_show_compare_at_price %}
        if (variant.compare_at_price > variant.price) {
          customPriceFormat += ' <small><s>' + timber.formatMoney(Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}")) + '</s></small>';
        }
      {% endif %}
      $productPrice.html(customPriceFormat);

      // Also update and show the product's compare price if necessary
      if ( variant.compare_at_price > variant.price ) {
        var priceSaving = timber.formatSaleTag( Shopify.formatMoney(variant.compare_at_price - variant.price, "{{ shop.money_format }}") );
        {% comment %}
        priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';
        {% endcomment %}
        $comparePrice.html({{ 'products.general.save_html' | t: saved_amount: '[$]' | json }}.replace('[$]', priceSaving)).show();
      } else {
        $comparePrice.hide();
      }

    } else {
      // The variant doesn't exist, disable submit button.
      // This may be an error or notice that a specific variant is not available.
      $addToCart.addClass('disabled').prop('disabled', true);
      $addToCartText.html({{ 'products.product.unavailable' | t | json }});
      $variantQuantity.removeClass('is-visible');
      $quantityElements.hide();
    }
  };

  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
    {% endif %}

    // Hide selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
      $('.selector-wrapper').hide();
    {% else %}
      $('#variantBreak').removeClass('hr--clear');
    {% endif %}
  });
</script>

{% if settings.product_image_zoom_enable %}
  {{ 'jquery.zoom.min.js' | asset_url | script_tag }}
{% endif %}

{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
(function($) { 
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    optionValue;
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
       }
    {% endfor %}
    $(function() {
      thumbnails = $('img[src*="/products/"]').not(':first');
      if (thumbnails.size()) {
        thumbnails.bind('click', function() {
          var image = $(this).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
          if (typeof variantImages[image] !== 'undefined') {
            {% for option in product.options %}
            optionValue = variantImages[image]['option-{{ forloop.index0 }}'];
            if (optionValue !== null && $('.single-option-selector:eq({{ forloop.index0 }}) option').filter(function() { return $(this).text() === optionValue }).length) {
              $('.single-option-selector:eq({{ forloop.index0 }})').val(optionValue).trigger('change');
            }
            {% endfor %}
          }
        });
      }
    });
})(jQuery);
</script> 
{% endif %}

1 Like
Highlighted
Tourist
29 0 3

I am having the same issues with the Debut Theme - any help out there?

 

0 Likes
Tourist
7 0 1

So what would you do if you have Supply theme but you don't have a theme.js.liquid file?

0 Likes