Instantly share code, notes, and snippets.
Last active
October 18, 2021 15:53
-
Star
(1)
1
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save joe-dempsey/65f7ad4833a6154b691804736911c48d to your computer and use it in GitHub Desktop.
related-products.liquid for narrative theme
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
{% if section.settings.show_related_products == true %} | |
<div class="page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true"> | |
{% assign heading = section.settings.related_title %} | |
{% assign same_vendor = false %} | |
{% assign same_type = false %} | |
{% assign exclusions = 'frontpage,all' | split: ',' %} | |
{% if product.metafields.c_f['Related Products'] %} | |
{% assign collection = collections[product.metafields.c_f['Related Products']] %} | |
{% endif %} | |
{% assign found_a_collection = false %} | |
{% if collection and collection.all_products_count > 1 %} | |
{% unless exclusions contains collection.handle %} | |
{% assign found_a_collection = true %} | |
{% endunless %} | |
{% endif %} | |
{% unless found_a_collection %} | |
{% for c in product.collections %} | |
{% unless exclusions contains c.handle or c.all_products_count < 2 %} | |
{% assign found_a_collection = true %} | |
{% assign collection = c %} | |
{% break %} | |
{% endunless %} | |
{% endfor %} | |
{% endunless %} | |
{% comment %} | |
If we have a relevant collection. | |
{% endcomment %} | |
{% if found_a_collection %} | |
{% assign counter = 0 %} | |
{% assign break_at = number_of_rows | times: number_of_related_products_per_row %} | |
{% assign current_product = product %} | |
{% case number_of_related_products_per_row %} | |
{% when '1' %} | |
{% assign grid_item_width = '' %} | |
{% when '2' %} | |
{% assign grid_item_width = 'large--one-half medium--one-half' %} | |
{% when '3' %} | |
{% assign grid_item_width = 'large--one-third medium--one-third' %} | |
{% when '4' %} | |
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %} | |
{% when '5' %} | |
{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %} | |
{% when '6' %} | |
{% assign grid_item_width = 'large--one-sixth medium--one-third small--one-half' %} | |
{% else %} | |
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %} | |
{% endcase %} | |
{% capture related_items %} | |
{% for product in collection.products %} | |
{% unless product.handle == current_product.handle %} | |
{% unless same_vendor and current_product.vendor != product.vendor %} | |
{% unless same_type and current_product.type != product.type %} | |
<div class="card-list__column grid grid__item medium-up--one-third"> | |
{% include 'product-card', product: product, grid_style: section.settings.grid_style %} | |
</div> | |
{% assign counter = counter | plus: 1 %} | |
{% if counter == break_at %} | |
{% break %} | |
{% endif %} | |
{% endunless %} | |
{% endunless %} | |
{% endunless %} | |
{% endfor %} | |
{% endcapture %} | |
{% assign related_items = related_items | trim %} | |
{% unless related_items == blank %} | |
<aside class="grid"> | |
<div class="grid__item"> | |
{% unless heading == blank %} | |
<h2 class="section-header__title">{{ heading }}</h1> | |
{% endunless %} | |
<div class="grid-uniform"> | |
{{ related_items }} | |
</div> | |
</div> | |
</aside> | |
{% endunless %} | |
{% endif %} | |
</div> | |
{% endif %} | |
{% schema %} | |
{ | |
"name": "Related products", | |
"settings": [ | |
{ | |
"type": "checkbox", | |
"id": "show_related_products", | |
"label": "Show related products", | |
"default": false | |
}, | |
{ | |
"id": "related_title", | |
"type": "text", | |
"label": "Section title", | |
"default": "Other fine products" | |
}, | |
{ | |
"type": "select", | |
"id": "related_grid_num", | |
"label": "Products per row (Desktop)", | |
"default": "4", | |
"options": [ | |
{ | |
"value": "2", | |
"label": "2" | |
}, | |
{ | |
"value": "3", | |
"label": "3" | |
}, | |
{ | |
"value": "4", | |
"label": "4" | |
}, | |
{ | |
"value": "5", | |
"label": "5" | |
} | |
] | |
}, | |
{ | |
"type": "select", | |
"id": "related_grid_row", | |
"label": "Number of rows (Desktop)", | |
"default": "1", | |
"options": [ | |
{ | |
"value": "1", | |
"label": "1" | |
}, | |
{ | |
"value": "2", | |
"label": "2" | |
}, | |
{ | |
"value": "3", | |
"label": "3" | |
} | |
] | |
} | |
] | |
} | |
{% endschema %} | |
<style> | |
#ProductSection-related-products .card {opacity:1;overflow:auto;} | |
#ProductSection-related-products {margin-bottom:30px;} | |
#shopify-section-related-products .medium-up--one-third {float:left;padding-right:30px;} | |
.card.even h3.card__name.h4, .card.even .card__name.h4.h3 {text-align:left !IMportant;} | |
.card{padding-bottom:20px;} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hi @joe-dempsey
what you mean sales? if someone already bought on my store? the answer is yes. we have some sales already