├── T-Shirts.zip
├── Cuda Project.zip
├── Sass Class Project.zip
├── CSS-and-the-shadow-dom.jpg
├── Themekit Template Theme.zip
├── Example Bootstrap Project.zip
├── squarespace-base-template.zip
├── Shopify-Theme-Structure-Diagram-2019.jpg
├── image.liquid
├── creators.liquid
├── page.metafields.liquid
├── products1.csv
├── shoes-and-shirt.csv
└── product.liquid


/T-Shirts.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/christopherdodd/Skillshare/HEAD/T-Shirts.zip


--------------------------------------------------------------------------------
/Cuda Project.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/christopherdodd/Skillshare/HEAD/Cuda Project.zip


--------------------------------------------------------------------------------
/Sass Class Project.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/christopherdodd/Skillshare/HEAD/Sass Class Project.zip


--------------------------------------------------------------------------------
/CSS-and-the-shadow-dom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/christopherdodd/Skillshare/HEAD/CSS-and-the-shadow-dom.jpg


--------------------------------------------------------------------------------
/Themekit Template Theme.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/christopherdodd/Skillshare/HEAD/Themekit Template Theme.zip


--------------------------------------------------------------------------------
/Example Bootstrap Project.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/christopherdodd/Skillshare/HEAD/Example Bootstrap Project.zip


--------------------------------------------------------------------------------
/squarespace-base-template.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/christopherdodd/Skillshare/HEAD/squarespace-base-template.zip


--------------------------------------------------------------------------------
/Shopify-Theme-Structure-Diagram-2019.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/christopherdodd/Skillshare/HEAD/Shopify-Theme-Structure-Diagram-2019.jpg


--------------------------------------------------------------------------------
/image.liquid:
--------------------------------------------------------------------------------
 1 | <img
 2 |     srcset="{%- if image.width >= 165 -%}{{ image | img_url: '165x', scale: 2 }} 165w,{%- endif -%}
 3 |     {%- if image.width >= 360 -%}{{ image | img_url: '360x', scale: 2 }} 360w,{%- endif -%}
 4 |     {%- if image.width >= 535 -%}{{ image | img_url: '535x', scale: 2 }} 535w,{%- endif -%}
 5 |     {%- if image.width >= 750 -%}{{ image | img_url: '750x', scale: 2 }} 750w,{%- endif -%}
 6 |     {%- if image.width >= 1070 -%}{{ image | img_url: '1070x', scale: 2 }} 1070w,{%- endif -%}
 7 |     {%- if image.width >= 1500 -%}{{ image | img_url: '1500x', scale: 2 }} 1500w,{%- endif -%}"
 8 |     src="{{ image | img_url: '750x', scale: 2 }}"
 9 |     sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc(50vw - 130px), calc(50vw - 55px)"
10 |     alt="{{ image.alt | escape }}"
11 |     loading="lazy"
12 |     width="{{ image.width }}"
13 |     height="{{ image.height }}"
14 |     {% if class != blank %}
15 |         class="{{ class }}"
16 |     {% endif %}
17 | >
18 | 


--------------------------------------------------------------------------------
/creators.liquid:
--------------------------------------------------------------------------------
 1 | <div class="page-width creators">
 2 |   {% for creator in creators %}
 3 |     <div class="creator">
 4 |       <div class="creator-image"></div>
 5 |       <h2 class="creator-title"></h2>
 6 |       <p class="creator-paragraph"></p>
 7 |       <h3>Creator of...</h3>
 8 |       <div class="creator-products">
 9 |         {% for product in products %}
10 |           <a href="" class="creator-product"></a>
11 |         {% endfor %}
12 |       </div>
13 |     </div>
14 |   {% endfor %}
15 | </div>
16 | 
17 | <style>
18 |   .creators {
19 |     margin-top: 5rem;
20 |     margin-bottom: 5rem;
21 |     display: flex;
22 |     justify-content: center;
23 |     column-gap: 20px;
24 |   }
25 |   .creator {
26 |     text-align: center;
27 |     box-shadow: rgba(0, 0, 0, 0.23) 0px 2px 5px 5px;
28 |     padding: 20px;
29 |   }
30 |   .creator-products {
31 |     display: flex;
32 |     column-gap: 15px;
33 |     justify-content: center;
34 |   }
35 |   .creator-product {
36 |     display: flex;
37 |     flex-direction: column;
38 |     justify-content: flex-end;
39 |     text-decoration: none;
40 |     color: rgb(var(--color-foreground));
41 |   }
42 | 
43 | </style>
44 | 
45 | {% schema %}
46 |   {
47 |     "name": "Creators",
48 |     "settings": []
49 |   }
50 | {% endschema %}
51 | 


--------------------------------------------------------------------------------
/page.metafields.liquid:
--------------------------------------------------------------------------------
  1 | {% layout false %}
  2 | <div class="metafields-demo">
  3 |     <div class="section">
  4 |       <h2 class="heading">
  5 |         Text
  6 |       </h2>
  7 |       <div class="section-inner">
  8 |         <div class="label">Simple text</div>
  9 |         <div class="section-right">
 10 |           <div class="metafield input">
 11 |             {% raw %}  {% endraw %}
 12 |           </div>
 13 |           <div class="metafield">
 14 |             {{ '' }}
 15 |           </div>
 16 |           <div class="metafield input">
 17 |             {% raw %}  {% endraw %}
 18 |           </div>
 19 |           <div class="metafield">
 20 |             {{ '' }}
 21 |           </div>
 22 |         </div>
 23 |       </div>
 24 |       <div class="section-inner">
 25 |         <div class="label">Text (List)</div>
 26 |         <div class="section-right">
 27 |           <div class="metafield input">
 28 |             {% raw %}  {% endraw %}
 29 |           </div>
 30 |           <div class="metafield">
 31 |             {{ '' }}
 32 |           </div>
 33 |           <div class="metafield input">
 34 |             {% raw %} 
 35 |               
 36 |             {% endraw %}
 37 |           </div>
 38 |           <div class="metafield">
 39 |             
 40 |           </div>
 41 |         </div>
 42 |       </div>
 43 |     </div>
 44 |   
 45 |     <div class="section">
 46 |       <h2 class="heading">
 47 |         Image
 48 |       </h2>
 49 |       <div class="section-inner">
 50 |         <div class="label">Single Image</div>
 51 |         <div class="section-right">
 52 |           <div class="metafield input">
 53 |             {% raw %}  {% endraw %}
 54 |           </div>
 55 |           <div class="metafield">
 56 |             {{ '' }}
 57 |           </div>
 58 |           <div class="metafield input">
 59 |             {% raw %}  {% endraw %}
 60 |           </div>
 61 |           <div class="metafield">
 62 |             {{ '' }}
 63 |           </div>
 64 |           <div class="metafield input">
 65 |             {% raw %}  {% endraw %}
 66 |           </div>
 67 |           <div class="metafield">
 68 |             {{ '' }}
 69 |           </div>
 70 |         </div>
 71 |       </div>
 72 |       <div class="section-inner">
 73 |         <div class="label">List of Images</div>
 74 |         <div class="section-right">
 75 |           <div class="metafield input">
 76 |             {% raw %}  {% endraw %}
 77 |           </div>
 78 |           <div class="metafield">
 79 |             {{ '' }}
 80 |           </div>
 81 |           <div class="metafield input">
 82 |             {% raw %}  {% endraw %}
 83 |           </div>
 84 |           <div class="metafield">
 85 |             {{ '' }}
 86 |           </div>
 87 |           <div class="metafield input">
 88 |             {% raw %} {% endraw %}
 89 |           </div>
 90 |           <div class="metafield">
 91 |             
 92 |           </div>
 93 |         </div>
 94 |       </div>
 95 |     </div>
 96 |   
 97 |     <div class="section">
 98 |       <h2 class="heading">
 99 |         Products
100 |       </h2>
101 |       <div class="section-inner">
102 |         <div class="label">Single Product</div>
103 |         <div class="section-right">
104 |           <div class="metafield input">
105 |             {% raw %}  {% endraw %}
106 |           </div>
107 |           <div class="metafield">
108 |             {{ '' }}
109 |           </div>
110 |           <div class="metafield input">
111 |             {% raw %}  {% endraw %}
112 |           </div>
113 |           <div class="metafield">
114 |             {{ '' }}
115 |           </div>
116 |           <div class="metafield input">
117 |             {% raw %}  {% endraw %}
118 |           </div>
119 |           <div class="metafield">
120 |             
121 |           </div>
122 |         </div>
123 |       </div>
124 |       <div class="section-inner">
125 |         <div class="label">Multiple Products</div>
126 |         <div class="section-right">
127 |           <div class="metafield input">
128 |             {% raw %}  {% endraw %}
129 |           </div>
130 |           <div class="metafield">
131 |             {{ '' }}
132 |           </div>
133 |           <div class="metafield input">
134 |             {% raw %}  {% endraw %}
135 |           </div>
136 |           <div class="metafield">
137 |             {{ '' }}
138 |           </div>
139 |           <div class="metafield input">
140 |             {% raw %} 
141 |              
142 |             {% endraw %}
143 |           </div>
144 |           <div class="metafield">
145 |            
146 |           </div>
147 |           <div class="metafield input">
148 |             {% raw %} 
149 |               
150 |             {% endraw %}
151 |           </div>
152 |           <div class="metafield">
153 |             
154 |           </div>
155 |         </div>
156 |       </div>
157 |     </div>
158 |   
159 |     <div class="section">
160 |       <h2 class="heading">
161 |         JSON
162 |       </h2>
163 |       <div class="section-inner">
164 |         <div class="label">JSON Object</div>
165 |         <div class="section-right">
166 |           <div class="metafield input">
167 |             {% raw %}  {% endraw %}
168 |           </div>
169 |           <div class="metafield">
170 |             {{ '' }}
171 |           </div>
172 |           <div class="metafield input">
173 |             {% raw %}  {% endraw %}
174 |           </div>
175 |           <div class="metafield">
176 |             {{ '' }}
177 |           </div>
178 |           <div class="metafield input">
179 |             {% raw %}  {% endraw %}
180 |           </div>
181 |           <div class="metafield">
182 |             {{ '' }}
183 |           </div>
184 |         </div>
185 |       </div>
186 |     </div>
187 |   
188 |     <div class="section">
189 |       <h2 class="heading">
190 |         Metaobject
191 |       </h2>
192 |       <div class="section-inner">
193 |         <div class="label">Single Metaobject</div>
194 |         <div class="section-right">
195 |           <div class="metafield input">
196 |             {% raw %}  {% endraw %}
197 |           </div>
198 |           <div class="metafield">
199 |             {{ '' }}
200 |           </div>
201 |           <div class="metafield input">
202 |             {% raw %}  {% endraw %}
203 |           </div>
204 |           <div class="metafield">
205 |             {{ '' }}
206 |           </div>
207 |           <div class="metafield input">
208 |             {% raw %}  {% endraw %}
209 |           </div>
210 |           <div class="metafield">
211 |             {{ '' }}
212 |           </div>
213 |           <div class="metafield input">
214 |             {% raw %}  {% endraw %}
215 |           </div>
216 |           <div class="metafield">
217 |             {{ '' }}
218 |           </div>
219 |         </div>
220 |       </div>
221 |     </div>
222 |   
223 |   </div>
224 |   
225 |   <style>
226 |   .metafields-demo {
227 |       display: flex;
228 |       gap: 15px;
229 |       flex-wrap: wrap;
230 |   }
231 |   .section {
232 |     background: #94a3b8;
233 |     border: 1px solid #64748b;
234 |     border-radius: 5px;
235 |     padding: 10px;
236 |     width: 100%;
237 |     max-width: 1120px;
238 |     margin: auto;
239 |   }
240 |   .heading {
241 |       margin-top: 0;
242 |   }
243 |   .label {
244 |     min-width: 100px;
245 |   }
246 |   .section-inner {
247 |       display: flex;
248 |       border-radius: 5px;
249 |       column-gap: 20px;
250 |       background-color: #475569;
251 |       padding: 20px;
252 |       color: white;
253 |       align-items: center;
254 |   }
255 |   .section-inner + .section-inner {
256 |       margin-top: 15px;
257 |   }
258 |   .section-right {
259 |       display: grid;
260 |       gap: 10px;
261 |       grid-template-columns: 1fr 1fr;
262 |       width: 100%;
263 |   }
264 |   .metafield {
265 |       color: #1e293b;
266 |       padding: 5px 15px;
267 |       border-radius: 5px;
268 |       background-color: white;
269 |       overflow-wrap: anywhere;
270 |   }
271 |   .metafield.input {
272 |     font-family: monospace;
273 |     background-color: black;
274 |     color: white;
275 |   }
276 | </style>
277 | 
278 | 


--------------------------------------------------------------------------------
/products1.csv:
--------------------------------------------------------------------------------
 1 | Handle,Title,Body (HTML),Vendor,Type,Tags,Option1 Name,Option1 Value,Option2 Name,Option2 Value,Option3 Name,Option3 Value,Variant SKU,Variant Grams,Variant Inventory Tracker,Variant Inventory Qty,Variant Inventory Policy,Variant Fulfillment Service,Variant Price,Variant Compare At Price,Variant Requires Shipping,Variant Taxable,Image Src
 2 | awesome-sneakers,Awesome Sneakers,"<p>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
 3 | purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien
 4 |  et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed
 5 |  elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed
 6 |  rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis 
 7 | semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam 
 8 | non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing.
 9 |  Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie 
10 | tellus, ac vulputate odio condimentum in.</p>
11 | ",Tets,kicks,"",Title,Default Title,Size,Default Size,,,,0,shopify,0,deny,manual,120.00,,true,true,http://cdn.shopify.com/s/files/1/0099/3892/products/ni313171_600_thum1_10_674_17041.jpeg?905
12 | awesome-sneakers,,,,,,Title,Test,Size,Test,,,,0,,1,deny,manual,120.00,,true,true,http://cdn.shopify.com/s/files/1/0099/3892/products/g_lovemedo7_f_large.jpeg?905
13 | cool-kicks,Cool Kicks,"<p>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
14 | purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien
15 |  et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed
16 |  elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed
17 |  rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis 
18 | semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam 
19 | non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing.
20 |  Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie 
21 | tellus, ac vulputate odio condimentum in.</p>
22 | ",shopify,kicks,"",Title,Default Title,,,,,,0,,0,deny,manual,120.00,,true,true,http://cdn.shopify.com/s/files/1/0099/3892/products/jo340254_061_thum1___13873.jpeg?905
23 | gnarly-shoes-1,Gnarly Shoes,"<p>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
24 | purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien
25 |  et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed
26 |  elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed
27 |  rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis 
28 | semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam 
29 | non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing.
30 |  Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie 
31 | tellus, ac vulputate odio condimentum in.</p>
32 | ",shopify,kicks,"",Title,Default Title,,,,,,0,,1,deny,manual,120.00,,true,true,http://cdn.shopify.com/s/files/1/0099/3892/products/ASHL835-2616_thum1_62_529_16560.jpeg?905
33 | gnarly-shoes,Gnarly Shoes,"<p>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
34 | purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien
35 |  et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed
36 |  elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed
37 |  rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis 
38 | semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam 
39 | non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing.
40 |  Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie 
41 | tellus, ac vulputate odio condimentum in.</p>
42 | ",shopify,kicks,"",Title,Default Title,,,,,,0,,1,deny,manual,120.00,,true,true,http://cdn.shopify.com/s/files/1/0099/3892/products/WEB105500690_thum1_163_1900_18576.jpeg?905
43 | good-ol-shoes,Good Ol' Shoes,"<p>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
44 | purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien
45 |  et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed
46 |  elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed
47 |  rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis 
48 | semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam 
49 | non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing.
50 |  Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie 
51 | tellus, ac vulputate odio condimentum in.</p>
52 | ",shopify,kicks,"",Title,Default Title,,,,,,0,,1,deny,manual,110.00,,true,true,http://cdn.shopify.com/s/files/1/0099/3892/products/ALS91CCZ3_thum1___7614.jpeg?905
53 | hip-shoes,Hip Shoes,"<p>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
54 | purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien
55 |  et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed
56 |  elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed
57 |  rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis 
58 | semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam 
59 | non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing.
60 |  Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie 
61 | tellus, ac vulputate odio condimentum in.</p>
62 | ",shopify,kicks,"",Title,Default Title,,,,,,0,,1,deny,manual,120.00,,true,true,http://cdn.shopify.com/s/files/1/0099/3892/products/WEB105494765_thum1_163_1768_18573.jpeg?905
63 | insane-shoes,Insane Shoes,"<p>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
64 | purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien
65 |  et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed
66 |  elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed
67 |  rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis 
68 | semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam 
69 | non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing.
70 |  Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie 
71 | tellus, ac vulputate odio condimentum in.</p>
72 | ",shopify,kicks,"",Title,Default Title,,,,,,0,,1,deny,manual,120.00,,true,true,http://cdn.shopify.com/s/files/1/0099/3892/products/ALCCRGBR-F081_thum1___107.jpeg?905
73 | nice-shoes,Nice Shoes,"<p>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
74 | purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien
75 |  et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed
76 |  elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed
77 |  rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis 
78 | semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam 
79 | non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing.
80 |  Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie 
81 | tellus, ac vulputate odio condimentum in.</p>
82 | ",shopify,kicks,"",Title,Default Title,,,,,,0,,1,deny,manual,120.00,,true,true,http://cdn.shopify.com/s/files/1/0099/3892/products/ADG20065_thum1_177_2152_20721.jpeg?905
83 | old-school-kicks,Old School Kicks,"<p>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
84 | purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien
85 |  et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed
86 |  elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed
87 |  rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis 
88 | semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam 
89 | non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing.
90 |  Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie 
91 | tellus, ac vulputate odio condimentum in.</p>
92 | ",shopify,kicks,"",Title,Default Title,,,,,,0,,1,deny,manual,110.00,,true,true,http://cdn.shopify.com/s/files/1/0099/3892/products/m1300ggb-1_1.jpg?905
93 | 


--------------------------------------------------------------------------------
/shoes-and-shirt.csv:
--------------------------------------------------------------------------------
 1 | Handle,Title,Body (HTML),Vendor,Type,Tags,Published,Option1 Name,Option1 Value,Option2 Name,Option2 Value,Option3 Name,Option3 Value,Variant SKU,Variant Grams,Variant Inventory Tracker,Variant Inventory Qty,Variant Inventory Policy,Variant Fulfillment Service,Variant Price,Variant Compare At Price,Variant Requires Shipping,Variant Taxable,Variant Barcode,Image Src,Image Position,Image Alt Text,Gift Card,SEO Title,SEO Description,Google Shopping / Google Product Category,Google Shopping / Gender,Google Shopping / Age Group,Google Shopping / MPN,Google Shopping / AdWords Grouping,Google Shopping / AdWords Labels,Google Shopping / Condition,Google Shopping / Custom Product,Google Shopping / Custom Label 0,Google Shopping / Custom Label 1,Google Shopping / Custom Label 2,Google Shopping / Custom Label 3,Google Shopping / Custom Label 4,Variant Image,Variant Weight Unit,Variant Tax Code,Cost per item,Status
 2 | cool-kicks,Cool Kicks,"<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
 3 | purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien
 4 |  et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed
 5 |  elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed
 6 |  rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis 
 7 | semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam 
 8 | non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing.
 9 |  Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie 
10 | tellus, ac vulputate odio condimentum in.</p>
11 | ",shopify,kicks,Featured Collection,true,Title,Default Title,,,,,"",0.0,,0,deny,manual,120.00,,true,true,"",https://cdn.shopify.com/s/files/1/0250/5968/8496/products/jo340254_061_thum1___13873.jpg?v=1559086173,1,,false,,,,,,,,,,,,,,,,,kg,,,active
12 | gnarly-shoes-1,Gnarly Shoes,"<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
13 | purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien
14 |  et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed
15 |  elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed
16 |  rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis 
17 | semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam 
18 | non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing.
19 |  Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie 
20 | tellus, ac vulputate odio condimentum in.</p>
21 | ",shopify,kicks,Featured Collection,true,Title,Default Title,,,,,"",0.0,,1,deny,manual,120.00,,true,true,"",https://cdn.shopify.com/s/files/1/0250/5968/8496/products/ASHL835-2616_thum1_62_529_16560.jpg?v=1559086174,1,,false,,,,,,,,,,,,,,,,,kg,,,active
22 | hip-shoes,Hip Shoes,"<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
23 | purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien
24 |  et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed
25 |  elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed
26 |  rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis 
27 | semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam 
28 | non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing.
29 |  Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie 
30 | tellus, ac vulputate odio condimentum in.</p>
31 | ",shopify,kicks,Featured Collection,true,Title,Default Title,,,,,"",0.0,,1,deny,manual,120.00,,true,true,"",https://cdn.shopify.com/s/files/1/0250/5968/8496/products/WEB105494765_thum1_163_1768_18573.jpg?v=1559086177,1,,false,,,,,,,,,,,,,,,,,kg,,,active
32 | insane-shoes,Insane Shoes,"<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing. Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie tellus, ac vulputate odio condimentum in.</p>",shopify,kicks,"Featured Collection, red",true,Title,Default Title,,,,,"",0.0,,1,deny,manual,120.00,,true,true,"",https://cdn.shopify.com/s/files/1/0250/5968/8496/products/ALCCRGBR-F081_thum1___107.jpg?v=1559086178,1,,false,,,,,,,,,,,,,,,,,kg,,,active
33 | nice-shoes,Nice Shoes,"<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
34 | purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien
35 |  et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed
36 |  elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed
37 |  rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis 
38 | semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam 
39 | non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing.
40 |  Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie 
41 | tellus, ac vulputate odio condimentum in.</p>
42 | ",shopify,kicks,Featured Collection,true,Title,Default Title,,,,,"",0.0,,1,deny,manual,120.00,,true,true,"",https://cdn.shopify.com/s/files/1/0250/5968/8496/products/ADG20065_thum1_177_2152_20721.jpg?v=1559086179,1,,false,,,,,,,,,,,,,,,,,kg,,,active
43 | old-school-kicks,Old School Kicks,"<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing. Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie tellus, ac vulputate odio condimentum in.</p>",shopify,kicks,Featured Collection,true,Size,10,Color,black,,,"",0.0,,1,deny,manual,110.00,,true,true,"",https://cdn.shopify.com/s/files/1/0250/5968/8496/products/m1300ggb-1_1.jpg?v=1559086180,1,,false,,,,,,,,,,,,,,,,,kg,,,active
44 | old-school-kicks,,,,,,,,10,,blue,,,"",0.0,,0,deny,manual,110.00,,true,true,"",,,,,,,,,,,,,,,,,,,,,kg,,,
45 | old-school-kicks,,,,,,,,11,,black,,,"",0.0,,0,deny,manual,110.00,,true,true,"",,,,,,,,,,,,,,,,,,,,,kg,,,
46 | old-school-kicks,,,,,,,,11,,blue,,,"",0.0,,0,deny,manual,110.00,,true,true,"",,,,,,,,,,,,,,,,,,,,,kg,,,
47 | old-school-kicks,,,,,,,,12,,black,,,"",0.0,,0,deny,manual,110.00,,true,true,"",,,,,,,,,,,,,,,,,,,,,kg,,,
48 | old-school-kicks,,,,,,,,12,,blue,,,"",0.0,,0,deny,manual,110.00,,true,true,"",,,,,,,,,,,,,,,,,,,,,kg,,,
49 | awesome-sneakers-1,Awesome Sneakers,"<div class=""shogun-root"" data-shogun-id=""5e7e89bec46cc000518e8979"" data-shogun-site-id=""2f23d104-6c98-4270-9e18-00311a728212"" data-shogun-page-id=""5e7e89bec46cc000518e8979"" data-shogun-page-version-id=""5e7e89f09b78c0005895fb8c"" data-shogun-platform-type=""shopify"" data-shogun-variant-id=""5e7e89f09b78c0005895fb99"" data-region=""main"">
50 | <div id=""s-92a55ccd-d3b5-43ce-96e8-26462900a841"" class=""shg-c"">
51 | <div class=""shg-rich-text shg-theme-text-content"">
52 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing. Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie tellus, ac vulputate odio condimentum in.</p>
53 | <div id=""s-92a55ccd-d3b5-43ce-96e8-26462900a841"" class=""shg-c"">
54 | <div class=""shg-rich-text shg-theme-text-content"">
55 | <div id=""s-92a55ccd-d3b5-43ce-96e8-26462900a841"" class=""shg-c"">
56 | <div class=""shg-rich-text shg-theme-text-content"">
57 | <p>Text block 2</p>
58 | </div>
59 | </div>
60 | <div id=""s-48a629d0-8e88-4ece-8355-0eddaa73f8b4"" class=""shg-c""><hr></div>
61 | <div id=""s-183bc065-0485-4eba-a56b-251fa2a3aa93"" class=""shg-c"">
62 | <div class=""shg-rich-text shg-theme-text-content"">
63 | <p>Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id purus et nisl elementum ornare sit amet non mi. Phasellus euismod sapien et sapien mollis auctor. Suspendisse interdum erat ut metus euismod sed elementum massa euismod. Donec eget magna orci, at fermentum metus. Sed rhoncus, nibh nec dapibus adipiscing, felis felis convallis arcu, quis semper justo mauris sed magna. Nulla facilisi. Aliquam ultricies diam non turpis tristique porta. Sed nec ligula id turpis iaculis adipiscing. Phasellus viverra urna sed purus porta rutrum. Nam ultrices molestie tellus, ac vulputate odio condimentum in.</p>
64 | </div>
65 | </div>
66 | </div>
67 | </div>
68 | </div>
69 | </div>
70 | <div id=""s-183bc065-0485-4eba-a56b-251fa2a3aa93"" class=""shg-c""><br></div>
71 | </div>",Tets,kicks,"Featured Collection, men, nike, red",true,Size,8,Color,Red,,,"",0.0,shopify,0,continue,manual,100.00,,true,true,"",https://cdn.shopify.com/s/files/1/0250/5968/8496/products/ni313171_600_thum1_10_674_17041_6a24d228-ff6c-4228-b4cb-ea520a3588a2.jpg?v=1592367351,1,,false,,,,,,,,,,,,,,,,,kg,,,active
72 | awesome-sneakers-1,,,,,,,,8,,Black,,,"",0.0,shopify,5,continue,manual,100.00,120.00,true,true,"",https://cdn.shopify.com/s/files/1/0250/5968/8496/products/g_lovemedo7_f_large_35028c1c-8c0a-493b-bdd3-ba10d1dcd573.jpg?v=1592367351,2,,,,,,,,,,,,,,,,,,,kg,,,
73 | awesome-sneakers-1,,,,,,,,9,,Red,,,"",0.0,shopify,0,continue,manual,120.00,,true,true,"",,,,,,,,,,,,,,,,,,,,,kg,,,
74 | awesome-sneakers-1,,,,,,,,9,,Black,,,"",0.0,shopify,5,continue,manual,120.00,,true,true,"",,,,,,,,,,,,,,,,,,,,,kg,,,
75 | awesome-sneakers-1,,,,,,,,10,,Red,,,"",0.0,shopify,5,continue,manual,120.00,,true,true,"",,,,,,,,,,,,,,,,,,,,,kg,,,
76 | awesome-sneakers-1,,,,,,,,10,,Black,,,"",0.0,shopify,5,continue,manual,120.00,,true,true,"",,,,,,,,,,,,,,,,,,,,,kg,,,
77 | awesome-sneakers-1,,,,,,,,11,,Red,,,"",0.0,shopify,5,continue,manual,120.00,,true,true,"",,,,,,,,,,,,,,,,,,,,,kg,,,
78 | awesome-sneakers-1,,,,,,,,11,,Black,,,"",0.0,shopify,5,continue,manual,120.00,,true,true,"",,,,,,,,,,,,,,,,,,,,,kg,,,
79 | awesome-sneakers-1,,,,,,,,12,,Red,,,"",0.0,shopify,5,continue,manual,140.00,,true,true,"",,,,,,,,,,,,,,,,,,,,,kg,,,
80 | awesome-sneakers-1,,,,,,,,12,,Black,,,"",0.0,shopify,5,continue,manual,140.00,,true,true,"",,,,,,,,,,,,,,,,,,,,,kg,,,
81 | t-shirt,T-Shirt,Your everyday tee. Available in 4 different colours.,Chris Testing Shop,"","",true,Size,S,Color,White,,,"",0.0,shopify,10,deny,manual,10.00,,true,true,"",https://cdn.shopify.com/s/files/1/0250/5968/8496/products/blue-t.jpg?v=1617510240,1,,false,,,,,,,,,,,,,,,,https://cdn.shopify.com/s/files/1/0250/5968/8496/products/white-t.jpg?v=1617510240,kg,,,active
82 | t-shirt,,,,,,,,S,,Black,,,"",0.0,shopify,10,deny,manual,10.00,,true,true,"",https://cdn.shopify.com/s/files/1/0250/5968/8496/products/red-t.jpg?v=1617510240,2,,,,,,,,,,,,,,,,,,https://cdn.shopify.com/s/files/1/0250/5968/8496/products/black-t.jpg?v=1617510240,kg,,,
83 | t-shirt,,,,,,,,S,,Red,,,"",0.0,shopify,10,deny,manual,10.00,,true,true,"",https://cdn.shopify.com/s/files/1/0250/5968/8496/products/white-t.jpg?v=1617510240,3,,,,,,,,,,,,,,,,,,https://cdn.shopify.com/s/files/1/0250/5968/8496/products/red-t.jpg?v=1617510240,kg,,,
84 | t-shirt,,,,,,,,S,,Blue,,,"",0.0,shopify,10,deny,manual,10.00,,true,true,"",https://cdn.shopify.com/s/files/1/0250/5968/8496/products/black-t.jpg?v=1617510240,4,,,,,,,,,,,,,,,,,,https://cdn.shopify.com/s/files/1/0250/5968/8496/products/blue-t.jpg?v=1617510240,kg,,,
85 | t-shirt,,,,,,,,M,,White,,,"",0.0,shopify,10,deny,manual,15.00,,true,true,"",,,,,,,,,,,,,,,,,,,,https://cdn.shopify.com/s/files/1/0250/5968/8496/products/white-t.jpg?v=1617510240,kg,,,
86 | t-shirt,,,,,,,,M,,Black,,,"",0.0,shopify,10,deny,manual,15.00,,true,true,"",,,,,,,,,,,,,,,,,,,,https://cdn.shopify.com/s/files/1/0250/5968/8496/products/black-t.jpg?v=1617510240,kg,,,
87 | t-shirt,,,,,,,,M,,Red,,,"",0.0,shopify,10,deny,manual,15.00,,true,true,"",,,,,,,,,,,,,,,,,,,,https://cdn.shopify.com/s/files/1/0250/5968/8496/products/red-t.jpg?v=1617510240,kg,,,
88 | t-shirt,,,,,,,,M,,Blue,,,"",0.0,shopify,10,deny,manual,15.00,,true,true,"",,,,,,,,,,,,,,,,,,,,https://cdn.shopify.com/s/files/1/0250/5968/8496/products/blue-t.jpg?v=1617510240,kg,,,
89 | t-shirt,,,,,,,,L,,White,,,"",0.0,shopify,10,deny,manual,20.00,,true,true,"",,,,,,,,,,,,,,,,,,,,https://cdn.shopify.com/s/files/1/0250/5968/8496/products/white-t.jpg?v=1617510240,kg,,,
90 | t-shirt,,,,,,,,L,,Black,,,"",0.0,shopify,10,deny,manual,20.00,,true,true,"",,,,,,,,,,,,,,,,,,,,https://cdn.shopify.com/s/files/1/0250/5968/8496/products/black-t.jpg?v=1617510240,kg,,,
91 | t-shirt,,,,,,,,L,,Red,,,"",0.0,shopify,10,deny,manual,20.00,,true,true,"",,,,,,,,,,,,,,,,,,,,https://cdn.shopify.com/s/files/1/0250/5968/8496/products/red-t.jpg?v=1617510240,kg,,,
92 | t-shirt,,,,,,,,L,,Blue,,,"",0.0,shopify,10,deny,manual,20.00,,true,true,"",,,,,,,,,,,,,,,,,,,,https://cdn.shopify.com/s/files/1/0250/5968/8496/products/blue-t.jpg?v=1617510240,kg,,,
93 | 


--------------------------------------------------------------------------------
/product.liquid:
--------------------------------------------------------------------------------
  1 | {{ "https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js" | script_tag }}
  2 | 
  3 | {% assign current_variant = product.selected_or_first_available_variant %}
  4 | {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
  5 | <div class="flex-container">
  6 |     <div class="product">
  7 |         <h1>{{ product.title }}</h1>
  8 |         <img src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg">
  9 |         <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
 10 |             <select name="id" id="productSelect">
 11 |                 {% for variant in product.variants %}
 12 |                     {% if variant.available %}
 13 |                         <option value="{{ variant.id }}">
 14 |                             {{ variant.title }} - {{ variant.price | money_with_currency }}
 15 |                         </option>
 16 |                     {% else %}
 17 |                         <option disabled="disabled">
 18 |                             {{ variant.title }} - sold out
 19 |                         </option>
 20 |                     {% endif %}
 21 |                 {% endfor %}
 22 |             </select>
 23 |             {{ current_variant.price | money }}
 24 |             <label for="Quantity">quantity</label>
 25 |             <input type="number" id="Quantity" name="quantity" value="1" min="1">
 26 |             <button type="submit" name="add" id="AddToCart">Add to cart</button>
 27 |         </form>
 28 |         <div>{{ product.description }}</div>
 29 |         {% for image in product.images %}
 30 |             <a href="{{ image.src | img_url: 'large' }}">
 31 |                 <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
 32 |             </a>
 33 |         {% endfor %}
 34 |     </div>
 35 | 
 36 | 
 37 |     <div class="side-cart">
 38 |         <h2>Cart</h2>
 39 |         <div id="cart-goes-here"></div>
 40 |     </div>
 41 | </div>
 42 | 
 43 | <script id="template" type="text/html">
 44 |     <div>
 45 |     <div class="items">
 46 |         <%#items%>
 47 |         <div class="item" data-variant-id="<%id%>">
 48 |             <div class="row cart__row">
 49 |                 <div class="col-md-4 col-sm-4 col-4">
 50 |                     <img alt="" src="<%featured_image.url%>">
 51 |                 </div>
 52 |                 <div class="col-md-8 col-sm-8 col-8">
 53 |                     <p>
 54 |                         <a href="<%url%>" class="cart__product-name">
 55 |                             <span><%title%></span>
 56 |                         </a>
 57 |                         <%#options_with_values%><span class="cart__product-meta"><%name%>: <%value%></span><%/options_with_values%>
 58 |                         <span class="cart__product-meta" >$<%price%></span>
 59 |                     </p>
 60 |                     <div class="row--full display-table">
 61 |                         <div class="row__item display-table-cell one-half">
 62 |                             <div class="cart__qty">
 63 |                                 <button type="button" class="x-button cart__qty-adjust cart__qty--minus">
 64 |                                     <span aria-hidden="true" class="icon icon-minus"></span>
 65 |                                     <span aria-hidden="true" class="fallback-text">−</span>
 66 |                                 </button>
 67 |                                 <input type="text" pattern="[0-9]*" class="cart__qty-num" value="<%quantity%>">
 68 |                                 <button type="button" class="x-button cart__qty-adjust cart__qty--plus">
 69 |                                     <span aria-hidden="true" class="icon icon-plus"></span>
 70 |                                     <span aria-hidden="true" class="fallback-text">+</span>
 71 |                                 </button>
 72 |                             </div>
 73 |                         </div>
 74 |                         <div class="row__item display-table-cell one-half text-right"><span class="variant-price au">$<%line_price%></span>
 75 |                         </div>
 76 |                     </div>
 77 |                 </div>
 78 |             </div>
 79 |         </div>
 80 |         <%/items%>
 81 |         </div>
 82 |         <div class="cart__footer">
 83 |             <div class="cart__footer--empty">
 84 |                 <!---->
 85 |             </div>
 86 |             <div class="row cart__footer-extra">
 87 |                 <div class="col-md-6 col-sm-6 col-xs-6">
 88 |                     <p class="x-p cart__pricing-title">Shipping</p>
 89 |                 </div>
 90 |                 <div class="col-md-6 col-sm-6 col-xs-6 text-right">
 91 |                     <p class="x-p cart__pricing-cost"><strong>FREE</strong></p>
 92 |                 </div>
 93 |                 <!---->
 94 |             </div>
 95 |             <div class="row cart__footer-total">
 96 |                 <div class="col-md-6 col-sm-6 col-xs-6">
 97 |                     <p class="x-p cart__pricing-total-title">Subtotal</p>
 98 |                 </div>
 99 |                 <div class="col-md-6 col-sm-6 col-xs-6 text-right">
100 |                     <p class="x-p cart__pricing-total-cost"><strong>$<%total_price%></strong></p>
101 |                 </div>
102 |             </div>
103 |             <a href="/checkout" id="checkoutButton" class="btn btn--secondary btn--full cart__cta">
104 |                 Check Out
105 |             </a>
106 |         </div>
107 |     </div>
108 | </script>
109 | 
110 | <script id="lineItemTemplate" type="text/html">
111 |     <div class="item" data-variant-id="<%id%>">
112 |         <div class="row cart__row">
113 |             <div class="col-md-4 col-sm-4 col-4">
114 |                 <img alt="" src="<%featured_image.url%>">
115 |             </div>
116 |             <div class="col-md-8 col-sm-8 col-8">
117 |                 <p>
118 |                     <a href="#" class="cart__product-name">
119 |                         <span><%title%></span>
120 |                     </a>
121 |                     <%#options_with_values%><span class="cart__product-meta"><%name%>: <%value%></span><%/options_with_values%>
122 |                     <span class="cart__product-meta" >$<%price%></span>
123 |                 </p>
124 |                 <div class="row--full display-table">
125 |                     <div class="row__item display-table-cell one-half">
126 |                         <div class="cart__qty">
127 |                             <button type="button" class="x-button cart__qty-adjust cart__qty--minus">
128 |                                 <span aria-hidden="true" class="icon icon-minus"></span>
129 |                                 <span aria-hidden="true" class="fallback-text">−</span>
130 |                             </button>
131 |                             <input type="text" pattern="[0-9]*" class="cart__qty-num" value="<%quantity%>">
132 |                             <button type="button" class="x-button cart__qty-adjust cart__qty--plus">
133 |                                 <span aria-hidden="true" class="icon icon-plus"></span>
134 |                                 <span aria-hidden="true" class="fallback-text">+</span>
135 |                             </button>
136 |                         </div>
137 |                     </div>
138 |                     <div class="row__item display-table-cell one-half text-right"><span class="variant-price au">$<%line_price%></span>
139 |                     </div>
140 |                 </div>
141 |             </div>
142 |         </div>
143 |     </div>
144 | </script>
145 | 
146 | <script>
147 |     document.addEventListener("DOMContentLoaded", function() {
148 |       
149 |       	// Declare necessary parent scope variables
150 |       	let cartTotal = 0;
151 |       	let items = [];
152 | 
153 |       	// Assigning DOM elements to variables
154 |         const $AddToCartForm = $('#AddToCartForm');
155 |         const template = document.getElementById('template').innerHTML;
156 |         const lineItemtemplate = document.getElementById('lineItemTemplate').innerHTML;
157 |       
158 |       	// Specifying custom delimiters (as curly brackets are already in use)
159 |         var customTags = [ '<%', '%>' ];
160 | 
161 |       	// Function: takes a list of items and a single item as arguments 
162 |       	// and returns a filtered array based on whether a match has been found
163 |         const variantAlreadyExists = (items, newItem) => {
164 |             return items.filter(obj => {
165 |                 return obj.id === newItem.id
166 |             })
167 |         }
168 |       
169 |         // Function: takes a cart object, updates parent scope variables,
170 |         // divides prices by 100 and renders the cart using Mustache
171 |         const handleCartResponse = (data) => {
172 | 			
173 |           	// Update parent scope variables
174 |           	cartTotal = data.total_price;
175 |           	items = data.items;
176 |           
177 |           	// Divide prices by 100 to get the dollar value
178 |           	data.total_price = data.total_price / 100;
179 |           	data.items.forEach(item => {
180 |             	item.price = item.price / 100;
181 |               	item.line_price = item.line_price / 100;
182 |             });
183 |           
184 |          
185 |           	// Render cart template with Mustache
186 |             const output = Mustache.render(template, data, {}, customTags);
187 |             $('#cart-goes-here').html(output);
188 |         }
189 | 
190 |         // Asynchronous function for handling GET '/cart.js' request
191 |         async function getCart() {
192 |             const response = await $.get('/cart.js');
193 |             const data = JSON.parse(response);
194 |           
195 |           	handleCartResponse(data);
196 |         }
197 | 
198 |         // Run previous function on page load
199 |         getCart();
200 | 
201 |         // Add item to the cart
202 |         $('#AddToCartForm').submit(function(e) {
203 |           
204 |        		// Prevent standard form submit
205 |             e.preventDefault();
206 |           
207 |           	// Use the form to send a POST request to '/cart/add.js'
208 |             $.post('/cart/add.js', $AddToCartForm.serialize()).then(response => {
209 |                 
210 |               	// Parse and store the added item
211 |               	const item = JSON.parse(response);
212 |               
213 |               	// Update cart total
214 |               	cartTotal = cartTotal + item.price;
215 |               	$('.cart__pricing-total-cost').html(`<strong>$${cartTotal / 100}</strong>`);
216 | 
217 |               	// Check if item already exists in the cart
218 |                 const existingItem = variantAlreadyExists(items, item);
219 |                 if(existingItem.length > 0) {
220 |                   
221 |                   	// If so, find the item via its id and update UI using jQuery 
222 |                   	const $item = $(`.item[data-variant-id=${existingItem[0].id}]`);
223 |                   
224 |                     $item.find('.cart__qty-num').val(item.quantity);
225 |                   	$item.find('.variant-price.au').html(`$${item.line_price / 100}`);
226 |                 } else {
227 |                   
228 |                   	// If not...
229 |                   
230 |                   	// Add new item to items array
231 |                     items.push(item);
232 |                   
233 |                   	// Divide prices by 100 to get the dollar value
234 |                   	item.price = item.price / 100;
235 |               		item.line_price = item.line_price / 100;
236 |                   
237 |                   	// Render line item template with Mustache
238 |                     const output = Mustache.render(lineItemtemplate, item, {}, customTags);
239 |                     $('#cart-goes-here .items').append(output);
240 |                 }
241 | 
242 |             });
243 |         });
244 | 
245 |       	// Function: adjusts qty of a line item
246 |         const adjustQty = (e, adjustment) => {
247 |           
248 |           	// Find the current quantity and variant ID of the item
249 |             const itemVariantId = $(e.currentTarget).closest('.item').data('variant-id');
250 |             const qtyInput = $(e.currentTarget).siblings('.cart__qty-num');
251 | 			const currentQty = Number(qtyInput.val());
252 |           
253 |           	// Apply the adjustment to the current quantity to get the new quantity
254 |             const newQty = currentQty + adjustment;
255 | 
256 |           	// Send a POST request to '/cart/change.js' with the new quantity and variant ID
257 |             $.post('/cart/change.js', { quantity: newQty, id: itemVariantId }).then((response) => {
258 |                 if(response) {
259 |                   
260 |                   	// Parse and store JSON response
261 |                   	const data = JSON.parse(response);
262 |                   
263 |                   	// Update the quantity input with the new value
264 |                     qtyInput.val(newQty);
265 | 
266 |                   	// If new quantity is less than one, simply remove the line item from the DOM
267 |                   	// Else re-render the cart
268 |                     if(newQty < 1) {
269 |                       
270 |                       	// Hide the DOM element
271 |                       	$item = $(e.currentTarget).closest('.item');
272 |                         $item.hide();
273 |                       
274 |                       	// Update parent scope variables
275 |                         items = data.items;
276 |                       	cartTotal = data.total_price;
277 |                       
278 |                       	// Update total price
279 |                       	$('.cart__pricing-total-cost').html(`<strong>$${cartTotal / 100}</strong>`);
280 |                     } else {
281 |                     	handleCartResponse(data);
282 |                     }
283 |                 }
284 |             });
285 |         }
286 | 
287 |         // Increase Quantity Trigger 
288 |         $(document).on('click','.cart__qty--plus',  (e) => adjustQty(e, 1));
289 | 
290 |         // Decrease Quantity Trigger 
291 |         $(document).on('click','.cart__qty--minus',  (e) => adjustQty(e, -1));
292 |     });
293 | 
294 | </script>
295 | 
296 | <style>
297 |     .flex-container {
298 |         display: flex;
299 |     }
300 |     .product, .side-cart {
301 |         flex: 1;
302 |     }
303 |     img {
304 |         max-width: 100%;
305 |     }
306 |     .product {
307 |         padding-right: 20px;
308 |     }
309 |     .side-cart {
310 |         border-left: 1px solid grey;
311 |         padding-left: 20px;
312 |     }
313 |     .cart__header .close_btn, .cart__header .title {
314 |         color: #fff;
315 |         font-family: Brandon Grotesque,sans-serif;
316 |         font-weight: 900;
317 |     }
318 |     .cart__header .title {
319 |         font-size: 1rem;
320 |         text-transform: uppercase;
321 |         width: 100%;
322 |     }
323 |     .cart__header .close_btn {
324 |         cursor: pointer;
325 |         font-size: 2rem;
326 |         padding: 10px;
327 |         margin: -10px;
328 |     }
329 |     .row {
330 |         margin-left: 15px;
331 |         margin-right: 15px;
332 |     }
333 |     .cart-container {
334 |         overflow-y: scroll;
335 |         min-height: 100vh;
336 |         height: 100%;
337 |         padding: 0 15px 15vh;
338 |         margin-top: 10px;
339 |     }
340 |     .flex-middle {
341 |         align-items: center;
342 |     }
343 |     .flex {
344 |         -js-display: flex;
345 |         display: flex;
346 |     }
347 |     .cart__row {
348 |         border-bottom: 1px solid #e9e9e9;
349 |         padding: 15px 0;
350 |     }
351 |     .cart__footer-extra {
352 |         background: #f9f9f9;
353 |         border-bottom: 1px solid #e9e9e9;
354 |         padding: 15px 0;
355 |     }
356 |     .cart__footer-extra .x-p {
357 |         margin: 5px 0;
358 |         line-height: 15px;
359 |     }
360 |     .cart__footer-total .x-p {
361 |         font-size: .9rem;
362 |         line-height: .5;
363 |     }
364 |     .cart__footer-total {
365 |         margin-top: 12px;
366 |     }
367 |     .cart__qty input {
368 |         padding: 5px 10px;
369 |         max-width: 40px;
370 |         border-radius: 0;
371 |         text-align: center;
372 |         border: 1px solid #d0d0d0;
373 |         border-right: none;
374 |         border-left: none;
375 |     }
376 |     .cart__qty .x-button {
377 |         padding: 5px;
378 |         background: #f3f3f3;
379 |         border: 1px solid #d0d0d0;
380 |     }
381 |     .cart__product-meta, .cart__product-name {
382 |         display: block;
383 |     }
384 |     .cart__product-name {
385 |         font-weight: 900;
386 |         text-decoration: none;
387 |         color: #265674;
388 |     }
389 |     .cart__product-meta {
390 |         font-size: 15px;
391 |         padding-top: 0;
392 |     }
393 |     .variant-price {
394 |         font-size: 16px;
395 |         font-weight: 100;
396 |         float: right;
397 |         margin-top: -25px;
398 |     }
399 |     .cart__cta {
400 |         text-align: center;
401 |     }
402 | 
403 |     .btn--secondary.btn-cta, .btn.btn--secondary {
404 |         background: #2c7d90;
405 |     }
406 |     .btn--secondary.btn-cta:hover, .btn.btn--secondary:hover {
407 |         background: #205b69;
408 |         color: white;
409 |     }
410 |     .btn--full {
411 |         /*width: 100%;*/
412 |         margin-left: 15px;
413 |     }
414 |     .btn {
415 |         text-transform: uppercase;
416 |         font-family: Brandon Grotesque, sans-serif;
417 |         letter-spacing: .05rem;
418 |         padding: 11px 30px 10px;
419 |         border: none;
420 |         color: #fff;
421 |         background: #858385;
422 |         font-weight: 900;
423 |         display: table;
424 |         text-decoration: none;
425 |         cursor: pointer;
426 |         border-radius: .2rem;
427 |         transition: all .3s ease;
428 |     }
429 |     @media only screen and (min-width: 770px) {
430 |         .cart__header {
431 |             height: 60px;
432 |         }
433 |     }
434 |     @media screen and (max-width: 450px) {
435 |         .row.cart__row img {
436 |             max-width: 100px;
437 |         }
438 |     }
439 | </style>
440 | 


--------------------------------------------------------------------------------