product-brand-features.liquid

product-brand-features.liquid

<!-- /sections/product-brand-features.liquid -->
<!-- Desktop -->
{% for block in section.blocks %}
{% case block.type %}
{% when 'image' %}
{% if block.settings.product-feature != blank %}
{% if block.settings.product-feature == product.handle %}
<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 {% if block.settings.force_image_minimum_height %} features__min-h-d--{{ block.settings.image_minimum_height }} features__min-h-m--{{ block.settings.mobile_image_minimum_height }}{% endif %}"></div>
  {% else %}
  <div class="grid__item large--one-half left-image {{block.settings.feature_image_position}} {% if block.settings.force_image_minimum_height %} features__min-h-d--{{ block.settings.image_minimum_height }} features__min-h-m--{{ block.settings.mobile_image_minimum_height }}{% endif %} 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="section__standard-spacing grid__item large--one-half right-text text-center">
    <div class="home-reveal">
      {% if block.settings.title != blank %}
      <h2>{{ block.settings.title | escape }}</h2>
      {% endif %}
      {% if block.settings.subheading_richtext != blank %}
      {{ block.settings.subheading_richtext }}
      {% endif %}
      {% if block.settings.link != blank %}<button class="btn btn--tertiary">{{ block.settings.button | escape }}</button>{% endif %}
    </div>
  </div>
  {% else %}
  <div class="section__standard-spacing grid__item large--one-half right-text text-center">
    <div class="home-reveal">
      {% if block.settings.title != blank %}
      <h2>{{ block.settings.title | escape }}</h2>
      {% endif %}
      {% if block.settings.subheading_richtext != blank %}
      {{ block.settings.subheading_richtext }}
      {% endif %}
      {% if block.settings.link != blank %}<button class="btn btn--tertiary">{{ block.settings.button | escape }}</button>{% endif %}
    </div>
  </div>
  {% if block.settings.image == blank %}
  <div class="grid__item large--one-half right-image placeholder-features {% if block.settings.force_image_minimum_height %} features__min-h-d--{{ block.settings.image_minimum_height }} features__min-h-m--{{ block.settings.mobile_image_minimum_height }}{% endif %}"></div>
  {% else %}
  <div class="grid__item large--one-half right-image {{block.settings.feature_image_position}} {% if block.settings.force_image_minimum_height %} features__min-h-d--{{ block.settings.image_minimum_height }} features__min-h-m--{{ block.settings.mobile_image_minimum_height }}{% endif %} 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>
{% endif %}
{%else%}
<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 {% if block.settings.force_image_minimum_height %} features__min-h-d--{{ block.settings.image_minimum_height }} features__min-h-m--{{ block.settings.mobile_image_minimum_height }}{% endif %}"></div>
  {% else %}
  <div class="grid__item large--one-half left-image {{block.settings.feature_image_position}} {% if block.settings.force_image_minimum_height %} features__min-h-d--{{ block.settings.image_minimum_height }} features__min-h-m--{{ block.settings.mobile_image_minimum_height }}{% endif %} 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="section__standard-spacing grid__item large--one-half right-text text-center">
    <div class="home-reveal">
      {% if block.settings.title != blank %}
      <h2>{{ block.settings.title | escape }}</h2>
      {% endif %}
      {% if block.settings.subheading_richtext != blank %}
      {{ block.settings.subheading_richtext }}
      {% endif %}
      {% if block.settings.link != blank %}<button class="btn btn--tertiary">{{ block.settings.button | escape }}</button>{% endif %}
    </div>
  </div>
  {% else %}
  <div class="section__standard-spacing grid__item large--one-half right-text text-center">
    <div class="home-reveal">
      {% if block.settings.title != blank %}
      <h2>{{ block.settings.title | escape }}</h2>
      {% endif %}
      {% if block.settings.subheading_richtext != blank %}
      {{ block.settings.subheading_richtext }}
      {% endif %}
      {% if block.settings.link != blank %}<button class="btn btn--tertiary">{{ block.settings.button | escape }}</button>{% endif %}
    </div>
  </div>
  {% if block.settings.image == blank %}
  <div class="grid__item large--one-half right-image placeholder-features {% if block.settings.force_image_minimum_height %} features__min-h-d--{{ block.settings.image_minimum_height }} features__min-h-m--{{ block.settings.mobile_image_minimum_height }}{% endif %}"></div>
  {% else %}
  <div class="grid__item large--one-half right-image {{block.settings.feature_image_position}} {% if block.settings.force_image_minimum_height %} features__min-h-d--{{ block.settings.image_minimum_height }} features__min-h-m--{{ block.settings.mobile_image_minimum_height }}{% endif %} 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>
{% endif %}
{% when 'text' %}
<div class="grid--full product-related-items home-reveal card-background card-shadow">
  <div class="section__standard-spacing--even">
    <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  </div>
</div>
{% when 'video' %}
{%- 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>


{% endcase %}
{% endfor %}
{% schema %}
{
"name": "Additional details",
"class": "wrapper",
"settings": [
],
"blocks": [
{
"type": "image",
"name": "Rich text and image",
"limit": 4,
"settings": [
{
"type": "product",
"id": "product-feature",
"label": "Product"
},
{
"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": "checkbox",
"id": "force_image_minimum_height",
"label": "Enable minimum height for image",
"default": true
},
{
"type":   "range",
"id":     "image_minimum_height",
"min":       300, 
"max":       500,
"step":      50,
"unit":      "px",
"label":     "Desktop minimum image height",
"default":   350,
"info": "Only works if image height setting above is enabled"
},
{
"type":   "range",
"id":     "mobile_image_minimum_height",
"min":       200, 
"max":       400,
"step":      50,
"unit":      "px",
"label":     "Mobile minimum image height",
"default":   250,
"info": "Only works if image height setting above is enabled"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Unique brand feature"
},
{
"type": "richtext",
"id": "subheading_richtext",
"label": "Subtitle",
"default": "<p>Your feature subtitle</p>"
}
]
},
{
"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": "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 %}