Last active
December 18, 2017 21:22
-
-
Save whistlerbrad/6a49d017488910549e37308925cb35d6 to your computer and use it in GitHub Desktop.
Liquid file for 1.6
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- /snippets/product-no-price.liquid --> | |
| <div itemscope itemtype="http://schema.org/Product" class="product-page"> | |
| <div class="wrapper"> | |
| <meta itemprop="url" content="{{ shop.url }}{{ product.url }}"> | |
| <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}"> | |
| <meta itemprop="price" content="{{ product.price | money }}"> | |
| {% if settings.product_breadcrumbs %} | |
| {% include 'breadcrumb' %} | |
| {% endif %} | |
| {% assign current_variant = product.selected_variant %} | |
| <div class="grid product-single"> | |
| <div class="grid__item large--two-thirds text-center"> | |
| <div class="product__slides product-single__photos" id="ProductPhoto"> | |
| {% assign featured_image = current_variant.featured_image | default: product.featured_image %} | |
| <div class="product__photo" data-thumb="{{ featured_image.src | img_url: 'small_cropped' }}"> | |
| <img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" data-image-id="{{ featured_image.id }}" class="productImg"> | |
| </div> | |
| {% for image in product.images %} | |
| {% unless image contains featured_image %} | |
| <div class="product__photo{% unless forloop.first == true %} product__photo--additional{% endunless %}" data-thumb="{{ image.src | img_url: 'small_cropped' }}"> | |
| <img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}" class="productImg"> | |
| </div> | |
| {% endunless %} | |
| {% endfor %} | |
| </div> | |
| <div id="ProductThumbs" class="{% if settings.product_thumb_enable %} product__thumbs--square{% else %} product__thumbs--dot{% endif %}"></div> | |
| </div> | |
| <div class="grid__item large--one-third" id="productInfo"> | |
| <div class="text-center"> | |
| {% if settings.product_show_vendor and product.vendor %} | |
| <p class="uppercase vendor__link">{{ product.vendor | link_to_vendor }}</p> | |
| {% endif %} | |
| <h1 itemprop="name" class="h2">{{ product.title }}</h1> | |
| {% comment %} | |
| If the product description is over 1000 characters or contains an embed code, | |
| place the description in a full width container below the image and cart button. | |
| {% endcomment %} | |
| {% assign description_position = settings.description_position %} | |
| {% if description_position == 'auto' %} | |
| {% if product.description.size > 1000 or product.description contains 'iframe' %} | |
| {% assign description_position = 'below' %} | |
| {% else %} | |
| {% assign description_position = 'sidebar' %} | |
| {% endif %} | |
| {% endif %} | |
| {% if description_position == 'sidebar' %} | |
| <div class="product-description rte" itemprop="description"> | |
| {{ product.description }} | |
| </div> | |
| {% endif %} | |
| </div> | |
| <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> | |
| {% comment %} | |
| Get first variant, or deep linked one | |
| {% endcomment %} | |
| {% assign variant = product.selected_or_first_available_variant %} | |
| <meta itemprop="priceCurrency" content="{{ shop.currency }}"> | |
| <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}"> | |
| </div> | |
| {% if settings.product_social_enable %} | |
| {% capture link %}{{ shop.url }}{{ product.url }}{% endcapture %} | |
| {% capture title %}{{ product.title | url_param_escape }}{% endcapture %} | |
| <div class="share text-center" data-permalink="{{ link }}"> | |
| {% if settings.share_enable_facebook %} | |
| <a target="_blank" href="//www.facebook.com/sharer.php?u={{ link }}" class="share__link"> | |
| <span class="icon icon-facebook" aria-hidden="true"></span> | |
| <span class="share__text">{{ 'general.share.facebook' | t }}</span> | |
| </a> | |
| {% endif %} | |
| {% if settings.share_enable_twitter %} | |
| <a target="_blank" href="//twitter.com/share?url={{ link }}&text={{ shareTitle }}" class="share__link"> | |
| <span class="icon icon-twitter" aria-hidden="true"></span> | |
| <span class="share__text">{{ 'general.share.twitter' | t }}</span> | |
| </a> | |
| {% endif %} | |
| {% if settings.share_enable_pinterest %} | |
| <a target="_blank" href="http://pinterest.com/pin/create/button/?url={{ link }}&media={{ product.featured_image | product_img_url: '1024x1024' | prepend: 'http:' }}&description={{ shareTitle }}" class="share__link"> | |
| <span class="icon icon-pinterest" aria-hidden="true"></span> | |
| <span class="share__text">{{ 'general.share.pinterest' | t }}</span> | |
| </a> | |
| {% endif %} | |
| {% if settings.share_enable_google %} | |
| <a target="_blank" href="//plus.google.com/share?url={{ link }}" class="share__link"> | |
| <span class="icon icon-google" aria-hidden="true"></span> | |
| <span class="share__text">{{ 'general.share.google' | t }}</span> | |
| </a> | |
| {% endif %} | |
| </div> | |
| {% endif %} | |
| {% comment %} | |
| If the user is on a collection product page (ie with /collections/collection-handle/products/product-handle) | |
| in the URL, we can show next/previous links to other products in the collection. | |
| {% endcomment %} | |
| {% if collection and settings.product_nav_enable %} | |
| {% if collection.previous_product or collection.next_product %} | |
| <p class="product__arrows"> | |
| {% if collection.previous_product %} | |
| {% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %} | |
| <span class="left"> | |
| <a href="{{ prev_url }}" class="btn btn--clear btn--small uppercase" rel="prev"> | |
| {{ 'products.general.previous_product_html' | t }} | |
| </a> | |
| </span> | |
| {% endif %} | |
| {% if collection.next_product %} | |
| {% capture next_url %}{{ collection.next_product}}#content{% endcapture %} | |
| <span class="right"> | |
| <a href="{{ next_url }}" class="btn btn--clear btn--small uppercase" rel="next"> | |
| {{ 'products.general.next_product_html' | t }} | |
| </a> | |
| </span> | |
| {% endif %} | |
| </p> | |
| {% endif %} | |
| {% endif %} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {% if description_position == 'below' %} | |
| <div class="wrapper"> | |
| <div class="product-description--below rte" itemprop="description"> | |
| {{ product.description }} | |
| </div> | |
| </div> | |
| {% endif %} | |
| <div class="wrapper"> | |
| <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div> | |
| </div> | |
| {% if settings.related_products_enable %} | |
| {% include 'product-related-items' %} | |
| {% endif %} | |
| {% comment %} | |
| To take advantage of a callback on the select dropdown, add option_selection.js | |
| and customize the JS in timber.productPage as needed. | |
| Currently, timber.productPage does the following: | |
| - Hides your <select> tag from above | |
| - Breaks out the product variants into separate product options, if more than one exists | |
| - Generates a <select> tag for each product option | |
| - Enables/disables elements based on variant availability | |
| Callback notes: | |
| - Keep the callback available to the global scope (window.selectCallback) so that advanced | |
| addons can override it. | |
| * E.g. multiple currencies http://docs.shopify.com/manual/configuration/store-customization/currencies-and-translations/currencies/how-to-toggle-between-two-currencies | |
| {% endcomment %} | |
| {{ 'option_selection.js' | shopify_asset_url | script_tag }} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment