-
Notifications
You must be signed in to change notification settings - Fork 5
/
swatch.liquid
128 lines (122 loc) · 5.22 KB
/
swatch.liquid
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
{% comment %}
Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}
{% assign file_extension = 'png' %}
{% if swatch == blank %}
<div class="swatch error">
<p>You must include the snippet swatch.liquid with the name of a product option.</p>
<p>Use: <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
<p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
</div>
{% else %}
{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}
{% for option in product.options %}
{% if option == swatch %}
{% assign found_option = true %}
{% assign option_index = forloop.index0 %}
<style>
label[for="product-select-option-{{ option_index }}"] { display: none; }
#product-select-option-{{ option_index }} { display: none; }
#product-select-option-{{ option_index }} + .custom-style-select-box { display: none !important; }
</style>
{% assign downcased_option = swatch | downcase %}
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
{% assign is_color = true %}
{% endif %}
{% endif %}
{% endfor %}
{% unless found_option %}
<div class="swatch error">
<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>
<p>Use <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
<p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
<p><strong>This is case-sensitive!</strong> Do not put in <code>'color'</code> if your product option name is <code>'Color'</code>.</p>
</div>
{% else %}
<div class="swatch clearfix" data-option-index="{{ option_index }}">
<div class="header">{{ swatch }}</div>
{% assign values = '' %}
{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
<div option="{{ downcased_option }}" variants="{% for var in product.variants %}{% if var.title contains value %}{{ var.title | remove: value | remove: " / " }}{% endif %}{% endfor %}"
data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
{% if is_color %}
<div class="tooltip">{{ value }}</div>
{% endif %}
<input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if variant.selected %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
{% if is_color %}
<div class="swatch-wrapper">
<label id="{{ value | escape }}" for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | escape }};opacity:0.7;{% comment %}background-image: url({{ value | handle | append: '.' | append: file_extension | asset_url }}){% endcomment %}">
<img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
</label>
</div>
{% else %}
<label for="swatch-{{ option_index }}-{{ value | handle }}">
{{ value }}
<img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
</label>
{% endif %}
</div>
{% endunless %}
{% if variant.available %}
<script>
jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
</script>
{% endif %}
{% endfor %}
</div>
{% endunless %}
<script>
$(".swatch-element").click(function() {
var option=$(this).attr("option");
var variant=$(this).attr("variants");
$('.swatch-element').each(function() {
if ($(this).attr("option")!=option){
if (variant.includes($(this).attr("data-value"))){
$(this).removeClass("soldout");
$(this).addClass("available");
}else{
$(this).removeClass("available");
$(this).addClass("soldout");
}
}
});
setTimeout(function(){
if ($("#button-cart").hasClass("disabled")){
$("#button-cart").text("Sold Out");
}else {
$("#button-cart").text("Add To Cart");
}
}, 200);
});
</script>
<script>
$( document ).ready(function() {
setTimeout(function(){
$("label").each(function() {
if($(this).css("background-color") == "rgb(13, 13, 13)"){
var option= $(this).parent().attr("option");
var variant= $(this).parent().attr("variants");
$('.swatch-element').each(function() {
if ($(this).attr("option")!=option){
if (variant.includes($(this).attr("data-value"))){
$(this).removeClass("soldout");
$(this).addClass("available");
}else{
$(this).removeClass("available");
$(this).addClass("soldout");
}
}
});
}
});
}, 300);
});
</script>
{% endif %}