product-brand-features.liquid

<!-- /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 home-reveal">
  {% 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}} lazyload lazypreload" 
      data-bgset="{% include 'bgset', image: block.settings.image %}"
      data-sizes="auto"
      data-parent-fit="cover"  
      style="background-image: url({{ block.settings.image | img_url: "100x100"}});"></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}} lazyload lazypreload" 
      data-bgset="{% include 'bgset', image: block.settings.image %}"
      data-sizes="auto"
      data-parent-fit="cover"  
      style="background-image: url({{ block.settings.image | img_url: "100x100"}});"></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 home-reveal">
  <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 home-reveal">
  <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>
{% when 'video' %}
{% if block.settings.unique-product-video != blank %}


{% if block.settings.unique-product-video == product.handle %}
    {%- if block.settings.info -%}
      {%- assign video_info = 1 -%}
      {%- else -%}
      {%- assign video_info = 0 -%}
    {%- endif -%}
    {%- if block.settings.autoplay -%}
      {%- assign video_autoplay = 1 -%}
      {%- else -%}
      {%- assign video_autoplay = 0 -%}
    {%- endif -%}
    {%- if block.settings.loop -%}
      {%- assign video_loop = 1 -%}
      {%- else -%}
      {%- assign video_loop = 0 -%}
    {%- endif -%}

      {% if block.settings.heading != blank %}
        <div class="section-header">
          <h2 class="mobile-header-space instagram-title text-center">{{ block.settings.heading | escape }}</h2>
        </div>
      {% endif %}
    <div class="grid--full card-shadow product-related-items home-reveal">
          <div class="video-wrapper">
            {% if block.settings.video_url == blank %}
              <iframe src="//www.youtube.com/embed/_9VUPq3SxOc?rel=0&showinfo={{ video_info }}&autoplay={{ video_autoplay }}&loop={{ video_loop }}{% if block.settings.loop %}&playlist={{ block.settings.video_url.id }}{% endif %}&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
            {% else %}
              {% if block.settings.video_url.type == "youtube" %}
                <iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?rel=0&showinfo={{ video_info }}&autoplay={{ video_autoplay }}&loop={{ video_loop }}{% if block.settings.loop %}&playlist={{ block.settings.video_url.id }}{% endif %}&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
              {% endif %}
            {% endif %}
          </div>
    </div>

{% endif %}

{% else %}

    {%- if block.settings.info -%}
      {%- assign video_info = 1 -%}
      {%- else -%}
      {%- assign video_info = 0 -%}
    {%- endif -%}
    {%- if block.settings.autoplay -%}
      {%- assign video_autoplay = 1 -%}
      {%- else -%}
      {%- assign video_autoplay = 0 -%}
    {%- endif -%}
    {%- if block.settings.loop -%}
      {%- assign video_loop = 1 -%}
      {%- else -%}
      {%- assign video_loop = 0 -%}
    {%- endif -%}

      {% if block.settings.heading != blank %}
        <div class="section-header">
          <h2 class="mobile-header-space instagram-title text-center">{{ block.settings.heading | escape }}</h2>
        </div>
      {% endif %}
    <div class="grid--full card-shadow product-related-items home-reveal">
          <div class="video-wrapper">
            {% if block.settings.video_url == blank %}
              <iframe src="//www.youtube.com/embed/_9VUPq3SxOc?rel=0&showinfo={{ video_info }}&autoplay={{ video_autoplay }}&loop={{ video_loop }}{% if block.settings.loop %}&playlist={{ block.settings.video_url.id }}{% endif %}&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
            {% else %}
              {% if block.settings.video_url.type == "youtube" %}
                <iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?rel=0&showinfo={{ video_info }}&autoplay={{ video_autoplay }}&loop={{ video_loop }}{% if block.settings.loop %}&playlist={{ block.settings.video_url.id }}{% endif %}&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
              {% endif %}
            {% endif %}
          </div>
    </div>

{% endif %}

{% 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."
}

]
},
{
"type": "video",
"name": "Video",
"limit": 2,
"settings": [
{
"type": "product",
"id": "unique-product-video",
"label": "Product"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Video"
},
{
"type": "checkbox",
"id": "info",
"label": "Show video info",
"default": false
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Autoplay video",
"default": false
},
{
"type": "checkbox",
"id": "loop",
"label": "Loop video",
"default": false
},
{
"type": "video_url",
"id": "video_url",
"label": "Video link",
"accept": ["youtube"]
}
]
}

]
}
{% endschema %}