SHARE
TWEET

Untitled

a guest Sep 20th, 2019 3 in 215 days
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. {% comment %}
  2. Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
  3. {% endcomment %}
  4.  
  5. {% assign file_extension = 'png' %}
  6.  
  7. {% if swatch == blank %}
  8. <div class="swatch error">
  9.   <p>You must include the snippet swatch.liquid with the name of a product option.</p>
  10.   <p>Use: <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
  11.   <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
  12. </div>
  13. {% else %}
  14.  
  15. {% assign found_option = false %}
  16. {% assign is_color = false %}
  17. {% assign option_index = 0 %}
  18.  
  19. {% for option in product.options %}
  20. {% if option == swatch %}
  21. {% assign found_option = true %}
  22. {% assign option_index = forloop.index0 %}
  23. <style>
  24.   label[for="product-select-option-{{ option_index }}"] { display: none; }
  25.   #add-to-cart-form .selector-wrapper {display:none}
  26.   #product-select-option-{{ option_index }} { display: none; }
  27.   #product-select-option-{{ option_index }} + .custom-style-select-box { display: none !important; }
  28. </style>
  29. <script>//jQuery(window).load(function() { jQuery('.product-shop .selector-wrapper:eq({{ option_index }})').hide(); });</script>
  30. {% assign downcased_option = swatch | downcase %}
  31. {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
  32. {% assign is_color = true %}
  33. {% endif %}
  34. {% endif %}
  35. {% endfor %}
  36.  
  37. {% unless found_option %}
  38. <div class="swatch error">
  39.   <p>You included the snippet swatch.liquid with the name of a product option — <code>'{{ swatch }}'</code> — that does not belong to your product.</p>
  40.   <p>Use <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
  41.   <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
  42.   <p><strong>This is case-sensitive!</strong> Do not put in <code>'color'</code> if your product option name is <code>'Color'</code>.</p>
  43. </div>
  44. {% else %}
  45. <div class="swatch clearfix" data-option-index="{{ option_index }}">
  46.   <div class="header">{{ swatch }}: </div>
  47.   {% assign values = '' %}
  48.   {% for variant in product.variants %}
  49.   {% assign value = variant.options[option_index] %}
  50.   {% unless values contains value %}
  51.   {% assign values = values | join: ',' %} 
  52.   {% assign values = values | append: ',' | append: value %}
  53.   {% assign values = values | split: ',' %}
  54.   <div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
  55.     {% if is_color %}
  56.     <div class="tooltip">{{ value }}</div>
  57.     {% endif %}
  58.     <input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
  59.     {% if is_color %}
  60.     <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_url }})">
  61.       <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
  62.     </label>
  63.     {% else %}
  64.     <label for="swatch-{{ option_index }}-{{ value | handle }}">
  65.       {{ value }}
  66.       <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
  67.     </label>
  68.     {% endif %}
  69.   </div>
  70.   {% endunless %}
  71.   {% if variant.available %}
  72.   <script>
  73.     jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
  74.   </script>
  75.   {% endif %}
  76.   {% endfor %}
  77. </div>
  78.  
  79. {% endunless %}
  80.  
  81. {% endif %}
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top