Skip to content

Instantly share code, notes, and snippets.

@sadiesaurus
Created July 13, 2017 20:42
Show Gist options
  • Save sadiesaurus/1936c9b673b3bd4885c6fd545b30d4b4 to your computer and use it in GitHub Desktop.
Save sadiesaurus/1936c9b673b3bd4885c6fd545b30d4b4 to your computer and use it in GitHub Desktop.
Product template for showing featured image before a variant is selected in sectioned Brooklyn
<!-- /templates/product.liquid -->
<div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-image-zoom-type="{{ section.settings.zoom_enable }}" data-enable-history-state="true">
<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
{% if product.variants.size > 1 %}
{% assign current_variant = product.selected %}
{% else %}
{% assign current_variant = product.first_available_variant %}
{% endif %}
<div class="grid product-single">
<div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
<div class="product-single__photos">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% comment %}
We need to figure out the max width we want the image to be on the page
based on the aspect ratio of the image and based on the size of the
image.
{% endcomment %}
{% capture img_id_class %}product-single__photo-{{ featured_image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %}
{% comment %}
Display current variant image, or default first
{% endcomment %}
<div class="product-single__photo--flex-wrapper">
<div class="product-single__photo--flex">
{% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
<div id="{{ wrapper_id }}" class="product-single__photo--container">
<div class="product-single__photo-wrapper" style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%;">
{% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="product-single__photo lazyload {{ img_id_class }}"
id="ProductPhotoImg"
src="{{ featured_image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 590, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured_image.aspect_ratio }}"
data-sizes="auto"
{% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
data-image-id="{{ featured_image.id }}"
alt="{{ featured_image.alt | escape }}">
<noscript>
<img class="product-single__photo"
id="ProductPhotoImg"
src="{{ featured_image | img_url: 'master' }}"
{% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
</noscript>
</div>
</div>
</div>
</div>
{% comment %}
Display rest of product images, not repeating the featured one
{% endcomment %}
{% for image in product.images %}
{% unless image contains featured_image %}
{% comment %}
We need to figure out the max width we want the image to be on the page
based on the aspect ratio of the image and based on the size of the
image.
{% endcomment %}
{% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
<div class="product-single__photo--flex-wrapper">
<div class="product-single__photo--flex">
{% include 'image-style' with image: image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
<div id="{{ wrapper_id }}" class="product-single__photo--container">
<div class="product-single__photo-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="product-single__photo lazyload {{ img_id_class }}"
src="{{ image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
{% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %}
data-image-id="{{ image.id }}"
alt="{{ image.alt | escape }}">
<noscript>
<img class="product-single__photo" src="{{ image.src | img_url: 'master' }}"
{% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %}
alt="{{ image.alt | escape }}"
data-image-id="{{ image.id }}">
</noscript>
</div>
</div>
</div>
</div>
{% endunless %}
{% endfor %}
</div>
</div>
<div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
<div class="product-single__meta">
{% if section.settings.product_vendor_enable %}
<h2 class="product-single__vendor" itemprop="brand">{{ product.vendor }}</h2>
{% endif %}
<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% comment %}
Optionally show the 'compare at' or original price of the product.
{% endcomment %}
{% if product.compare_at_price_max > product.price %}
<span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper">
<span id="ComparePrice" class="product-single__price--compare-at">
{% if current_variant.compare_at_price > current_variant.price %}
{{ current_variant.compare_at_price | money }}
{% endif %}
</span>
</span>
<span id="ComparePriceA11y" class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}
<span id="ProductPrice"
class="product-single__price{% if product.compare_at_price > product.price %} on-sale{% endif %}"
itemprop="price"
content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
<hr class="hr--small">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available or product.variants.size == 1 and variant.available %}InStock{% else %}OutOfStock{% endif %}">
<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-single__form" id="AddToCartForm">
{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
{% for option in product.options_with_values %}
<div class="radio-wrapper js product-form__item">
<label class="single-option-radio__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}"
for="ProductSelect-option-{{ forloop.index0 }}">
{{ option.name }}
</label>
<fieldset class="single-option-radio"
name="{{ option.name }}"
id="ProductSelect-option-{{ forloop.index0 }}">
{% assign option_index = forloop.index %}
{% for value in option.values %}
{% assign variant_label_state = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_label_state = false %}
{% endunless %}
{% endif %}
<input type="radio"
{% unless variant_label_state %} disabled="disabled"{% endunless %}
value="{{ value | escape }}"
data-index="option{{ option_index }}"
name="{{ option.name }}"
class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
id="ProductSelect-option-{{ option.name }}-{{ value | escape }}">
<label for="ProductSelect-option-{{ option.name }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>
{% endfor %}
</fieldset>
</div>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect" class="product-single__variants no-js">
{% for variant in product.variants %}
{% if variant.available or product.variants.size == 1 %}
<option {% if variant == product.selected_or_first_available_variant %}
selected="selected" {% endif %}
data-sku="{{ variant.sku }}"
value="{{ variant.id }}">
{{ variant.title }} - {{ variant.price | money_with_currency }}
</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
{% comment %}
<div class="product-single__quantity">
<label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
<input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
</div>
{% endcomment %}
<div class="product-single__add-to-cart">
<button type="submit" name="add" id="AddToCart" class="btn"{% unless current_variant.available or product.variants.size == 1 and variant.available %} disabled="disabled"{% endunless %}>
<span id="AddToCartText">
{% if variant or product.variants.size == 1 %}
{% if product.available or product.variants.size == 1 and variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
{% else %}
{{ 'products.product.unavailable' | t }}
{% endif %}
</span>
</button>
</div>
</form>
</div>
<div class="product-single__description rte" itemprop="description">
{{ product.description }}
</div>
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>
{% if collection %}
<hr class="hr--clear">
<div class="text-center">
<a href="{{ collection.url }}" class="return-link">&larr; {{ 'products.general.collection_return' | t: collection: collection.title }}</a>
</div>
{% endif %}
</div>
</div>
{% unless product.empty == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}
{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "checkbox",
"id": "zoom_enable",
"label": "Enable image zoom"
},
{
"type": "checkbox",
"id": "social_sharing_products",
"label": "Enable product sharing",
"default": true
},
{
"type": "checkbox",
"id": "product_vendor_enable",
"label": "Show product vendor"
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment