Last active
July 30, 2019 02:05
-
-
Save richietyler/f8c05192405357e67ada6608ec360534 to your computer and use it in GitHub Desktop.
Display available sizes beneath product on collection page (Shopify). Relies on Dylan Hunt's tutorial on displaying colour variants as separate products (https://dylanjh.com/blogs/15-show-all-colors-of-a-product-as-separate-products-on-the-collection-page)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% comment %}Print 'colour' variable to show variant loop is working{% endcomment %} | |
| <p><strong>{{ colour }}</strong></p> | |
| {% for product_option in product.options_with_values %} | |
| {% if product_option.name == 'Colour' %} | |
| {% if product_option.values contains colour %} | |
| {% assign proceed = true %} | |
| {% comment %}Print confirmation that test has passed{% endcomment %} | |
| <p>Yep</p> | |
| {% else %} | |
| {% assign proceed = false %} | |
| {% comment %}Print confirmation that test has failed{% endcomment %} | |
| <p>Nope</p> | |
| {% endif %} | |
| {% endif %} | |
| {% if product_option.name == 'Size' %} | |
| {% for var in product.variants %} | |
| {% comment %}Check availability of variant{% endcomment %} | |
| {% if var.available %} | |
| {% assign spanclass='size-label'%} | |
| {% else %} | |
| {% assign spanclass='size-label size-sold'%} | |
| {% endif %} | |
| {% if product_option.values contains var.option1 %} | |
| <span class="{{spanclass}}">{{var.option1}}</span> | |
| {% elsif product_option.values contains var.option2 %} | |
| <span class="{{spanclass}}">{{var.option2}}</span> | |
| {% elsif product_option.values contains var.option3 %} | |
| <span class="{{spanclass}}">{{var.option3}}</span> | |
| {% endif %} | |
| {% endfor %} | |
| {% comment %}{% break %}{% endcomment %} | |
| {% endif %} | |
| {% endfor %} | |
| <style> | |
| .size-label { | |
| font-size: 12px; | |
| padding: 3px 5px; | |
| margin: 2px; | |
| border-radius: 3px; | |
| border: 1px solid #222; | |
| background-color: #111; | |
| white-space: nowrap; | |
| text-align:center; | |
| } | |
| .size-sold { | |
| color:gray; | |
| text-decoration:line-through; | |
| border: 1px solid #111; | |
| background-color: #000; | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment