<!-- /sections/product-brand-features.liquid --> | |
<!-- Desktop --> | |
{% for block in section.blocks %} | |
{% case block.type %} | |
{% when 'image' %} | |
<div class="grid--full card-shadow {% if block.settings.id == "left" %}feature-flex{% else %}feature-flex-right{% endif %} product-related-items"> | |
{% if block.settings.id == 'left' %} | |
{% if block.settings.image == blank %} | |
<div class="grid__item large--one-half left-image placeholder-features "></div> | |
{% else %} | |
<div class="grid__item large--one-half left-image {{block.settings.feature_image_position}}" style="background-image: url({{ block.settings.image | img_url: 'master' }});"></div> | |
{% endif %} | |
<div class="grid__item large--one-half right-text text-center"> | |
<div class="feature-content home-reveal"> | |
{% if block.settings.title != blank %} | |
<h1>{{ block.settings.title | escape }}</h1> | |
{% endif %} | |
{% if block.settings.subheading_richtext != blank %} | |
<h5 class="black">{{ block.settings.subheading_richtext }}</h5> | |
{% endif %} | |
{% if block.settings.link != blank %}<button class="btn">{{ block.settings.button | escape }}</button>{% endif %} | |
</div> | |
</div> | |
{% else %} | |
<div class="grid__item large--one-half right-text text-center"> | |
<div class="feature-content home-reveal"> | |
{% if block.settings.title != blank %} | |
<h1 class="black">{{ block.settings.title | escape }}</h1> | |
{% endif %} | |
{% if block.settings.subheading_richtext != blank %} | |
<h5>{{ block.settings.subheading_richtext }}</h5> | |
{% endif %} | |
{% if block.settings.link != blank %}<button class="btn">{{ block.settings.button | escape }}</button>{% endif %} | |
</div> | |
</div> | |
{% if block.settings.image == blank %} | |
<div class="grid__item large--one-half right-image placeholder-features"></div> | |
{% else %} | |
<div class="grid__item large--one-half right-image {{block.settings.feature_image_position}}" style="background-image: url({{ block.settings.image | img_url: 'master' }});"></div> | |
{% endif %} | |
{% endif %} | |
</div> | |
{% when 'product' %} | |
{% assign same_vendor = false %} | |
{% assign same_type = false %} | |
{% comment %} | |
Collections to ignore. | |
Never pick related items from those. | |
{% endcomment %} | |
{% assign exclusions = 'frontpage,all' | split: ',' %} | |
{% comment %} | |
Looking for a relevant collection. | |
{% endcomment %} | |
{% 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 number_of_related_products_per_row = collection.all_products_count | minus:1%} | |
{% assign counter = 0 %} | |
{% assign break_at = 5 %} | |
{% assign current_product = product %} | |
{% 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 %} | |
{% 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-half related-clear-less' %} | |
{% when 4 %} | |
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half related-clear-more' %} | |
{% when 5 %} | |
{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half related-clear-more' %} | |
{% else %} | |
{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half related-clear-more' %} | |
{% endcase %} | |
{% include 'product-grid-item' %} | |
{% 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 %} | |
<div class="grid--full product-related-items"> | |
<div class="grid__item one-whole related-products {% if block.settings.title == blank %} related-product-padding {% else %} related-product-bottom-padding{% endif %}"> | |
{% if block.settings.title != blank %} | |
<h1 class="section-title text-center black">{{ block.settings.title | escape }}</h1> | |
{% endif %} | |
{% assign collection = collections[section.settings.featured-collection] %} | |
<div class="index-pgi"> | |
<div class="grid--full"> | |
{{ related_items }} | |
</div> | |
</div> | |
</div> | |
</div> | |
{% endunless %} | |
{% endif %} | |
{% when 'text' %} | |
<div class="grid--full product-related-items"> | |
<div class="grid__item one-whole related-products {% if block.settings.title == blank %} related-product-padding {% else %} related-product-bottom-padding{% endif %}"> | |
<div class="grid--full"> | |
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div> | |
</div> | |
</div> | |
</div> | |
{% endcase %} | |
{% endfor %} | |
{% schema %} | |
{ | |
"name": "Additional details", | |
"settings": [ | |
], | |
"blocks": [ | |
{ | |
"type": "image", | |
"name": "Rich text and image", | |
"limit": 4, | |
"settings": [ | |
{ | |
"type": "radio", | |
"id": "id", | |
"label": "Text", | |
"options": [ | |
{ "value": "left", "label": "Image on left" }, | |
{ "value": "right", "label": "Image on right" } | |
], | |
"default": "right" | |
}, | |
{ | |
"type": "image_picker", | |
"id": "image", | |
"label": "Image", | |
"info": "800 x 600px .png recommended" | |
}, | |
{ | |
"type": "select", | |
"id": "feature_image_position", | |
"label": "Image position", | |
"default": "feature-top", | |
"options": [ | |
{ | |
"value": "feature-top", | |
"label": "Top" | |
}, | |
{ | |
"value": "feature-middle", | |
"label": "Middle" | |
}, | |
{ | |
"value": "feature-bottom", | |
"label": "Bottom" | |
} | |
] | |
}, | |
{ | |
"type": "text", | |
"id": "title", | |
"label": "Title", | |
"default": "Unique brand feature" | |
}, | |
{ | |
"type": "richtext", | |
"id": "subheading_richtext", | |
"label": "Subtitle", | |
"default": "<p>Your feature subtitle</p>" | |
} | |
] | |
}, | |
{ | |
"type": "product", | |
"name": "Related products", | |
"limit": 1, | |
"settings": [ | |
{ | |
"id": "title", | |
"type": "text", | |
"label": "Title", | |
"default": "Other fine products" | |
} | |
] | |
}, | |
{ | |
"type": "text", | |
"name": "Shopify reviews", | |
"limit": 1, | |
"settings": [ | |
{ | |
"type": "header", | |
"content": "Note:", | |
"info": "This block requires that the [free Shopify reviews app](https:\/\/apps.shopify.com\/product-reviews) be installed on your store." | |
} | |
] | |
} | |
] | |
} | |
{% endschema %} | |
<style> | |
@media screen and (max-width:768px){ | |
#shopify-section-product-brand-features .spr-reviews { | |
margin: 5%; | |
} | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment