Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- /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
You can’t perform that action at this time.