afterpay snipit

{% comment %}

  Rich snippets (itemscope, itemtype, etc.) for products are a theme requirement,
  and allow search engines to easily understand what the content is.

  For more information on these Scheme.org tags, visit:
    - http://schema.org/docs/gs.html

{% endcomment %}

{% comment %}
  Check if the product is sold out and set a variable to be used below.
{% endcomment %}
{% assign sold_out = true %}
{% if product.available  %}
  {% assign sold_out = false %}
{% endif %}

<div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-zoom-enable="{{ section.settings.product_image_zoom_enable }}" data-enable-history-state="true">

  <div class="product-single__header text-center">
    <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
    <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

    {% if collection.handle %}
      <a href="{{ collection.url }}" class="collection-title text-center" item-prop="collection">{{ collection.title }}</a>
    {% endif %}

    <h1 itemprop="name" class="product-single__title{% if section.settings.product_vendor_enable %} wvendor{% endif %}">{{ product.title }}</h1>
    {% if section.settings.product_vendor_enable %}
      <p class="product-single__vendor">{{ product.vendor | link_to_vendor }}</p>
    {% endif %}
    <hr class="hr--small">

    {% comment %}
      Optionally show the 'compare at' or original price of the product.
    {% endcomment %}

    <div class="h2 product-single__price">
      {% if product.compare_at_price_max > product.price %}
        <span class="visuallyhidden compare-price-a11y">{{ 'products.general.sale_price' | t }}</span>
      {% else %}
        <span class="visuallyhidden price-a11y">{{ 'products.general.regular_price' | t }}</span>
      {% endif %}
      <span class="product-price" {% if product.compare_at_price > product.price %} class="on-sale"{% endif %}>
        {{ product.price | money }}
      </span>
{% include 'inventory-table' %}

<!-- Begin Afterpay Liquid Snippet for Shopify v2.2.0 -->
{% assign afterpay_minimum_value_in_cents = 4 %}
{% assign afterpay_maximum_value_in_cents = 100000 %}
{% assign afterpay_logo_theme = 'colour' %}
{% assign afterpay_count_eligible_variants = 0 %}
{% assign afterpay_supported_currencies = 'AUD, NZD' | split: ', ' %}
{% if afterpay_supported_currencies contains shop.currency %}
  {% for afterpay_variant in product.variants %}
    {% if afterpay_variant.available and afterpay_variant.price >= afterpay_minimum_value_in_cents and afterpay_variant.price <= afterpay_maximum_value_in_cents %}
      {% assign afterpay_count_eligible_variants = afterpay_count_eligible_variants | plus: 1 %}
    {% endif %}
  {% endfor %}
{% endif %}
<script type="text/javascript">
(
  function(i,s,o,g,r,a,m){
    i['GoogleAnalyticsObject']=r;
    i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments);
    },i[r].l=1*new Date();
    a=s.createElement(o),m=s.getElementsByTagName(o)[0];
    a.async=1;
    a.src=g;
    m.parentNode.insertBefore(a,m);
  }
)(window,document,'script','https://www.google-analytics.com/analytics.js','afterpay_ga');
afterpay_ga('create', 'UA-108913162-1', 'auto');
afterpay_ga('send', 'event', 'Liquid Snippet', 'Report Version', '2.2.0');
afterpay_ga('send', 'event', 'Theme', 'Report Name', {{ theme.name | json }});
afterpay_ga('send', 'event', 'Shop', 'Report Currency', {{ shop.currency | json }});
</script>
{% if afterpay_count_eligible_variants > 0 %}
  <p class="afterpay-paragraph" style="display:{% if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.price >= afterpay_minimum_value_in_cents and product.selected_or_first_available_variant.price <= afterpay_maximum_value_in_cents %}block{% else %}none{% endif %};" data-product-id="{{ product.id }}">
    or make 4 interest-free payments of
    <strong><span class="afterpay-instalments">${{ product.selected_or_first_available_variant.price | divided_by: 4.0 | round | money_without_currency }}&nbsp;{{ shop.currency }}</span></strong>
    fortnightly with
    <a style="display:inline-block; margin-bottom:10px;" href="https://www.afterpay.com/terms" target="_blank">
      <img style="vertical-align:middle;" src="https://static.afterpay.com/integration/product-page/logo-afterpay-{{ afterpay_logo_theme }}.png" srcset="https://static.afterpay.com/integration/product-page/logo-afterpay-{{ afterpay_logo_theme }}.png 1x, https://static.afterpay.com/integration/product-page/logo-afterpay-{{ afterpay_logo_theme }}@2x.png 2x, https://static.afterpay.com/integration/product-page/logo-afterpay-{{ afterpay_logo_theme }}@3x.png 3x" width="100" height="21" alt="Afterpay" />
      <span style="font-size:12px;"><u>More info</u></span>
    </a>
  </p>
  {% if product.price_varies or afterpay_count_eligible_variants < product.variants.size %}
    <script type="text/javascript">
      if (typeof Afterpay === 'undefined') {
        var Afterpay = {products:[]};
        Afterpay.loadScript = function(url, callback) {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          if (script.readyState) { // I.E.
            script.onreadystatechange = function() {
              if (script.readyState == 'loaded' || script.readyState == 'complete') {
                script.onreadystatechange = null;
                callback();
              }
            };
          } else { // Others
            script.onload = function() {
              callback();
            };
          }
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        };
        Afterpay.init = function($) {
          $('body').on('change', $('form[action^="/cart/add"]'), function(event) {
            var $form = $(event.target).closest('form');
            var $afterpay_paragraph = null;
            var should_show_instalments = false;
            var selected_variant_id = parseInt($('input[name=id]:checked, select[name=id], input[name=id], hidden[name=id]', $form).val(), 10);
            if (isNaN(selected_variant_id)) {
              var $variant_options = $form.find('input[name=id][value], select[name=id] option[value], hidden[name=id][value]').filter(function(index, element) {
                return $(element).attr('value').match(/^[1-9][0-9]*$/);
              });
              $variant_options.each(function(index, element) {
                $.each(Afterpay.products, function(product_index, product) {
                  $.each(product.variants, function(variant_index, variant) {
                    if (variant.id == $(element).val()) {
                      $afterpay_paragraph = $('.afterpay-paragraph[data-product-id=' + product.id + ']');
                      return false;
                    }
                  });
                  if ($afterpay_paragraph !== null) {
                    return false;
                  }
                });
                if ($afterpay_paragraph !== null) {
                  return false;
                }
              });
            } else if (selected_variant_id > 0) {
              $.each(Afterpay.products, function(product_index, product) {
                $.each(product.variants, function(variant_index, variant) {
                  if (variant.id == selected_variant_id) {
                    $afterpay_paragraph = $('.afterpay-paragraph[data-product-id=' + product.id + ']');
                    if (variant.available && variant.price >= {{ afterpay_minimum_value_in_cents }} && variant.price <= {{ afterpay_maximum_value_in_cents }}) {
                      should_show_instalments = true;
                      $afterpay_paragraph.find('.afterpay-instalments').html('$' + (Math.round(variant.price / 4) / 100).toFixed(2) + '&nbsp;{{ shop.currency }}');
                    }
                  }
                });
              });
            }
            if ($afterpay_paragraph !== null) {
              if (should_show_instalments) {
                $afterpay_paragraph.show();
              } else {
                $afterpay_paragraph.hide();
              }
            }
          });
        };
        if (typeof jQuery === 'undefined' || parseFloat(jQuery.fn.jquery) < 1.7) {
          Afterpay.loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', function() {
            var jQuery_1_12_4 = jQuery.noConflict(true);
            Afterpay.init(jQuery_1_12_4);
          });
        } else {
          Afterpay.init(jQuery);
        }
      }
      Afterpay.products.push({{ product | json }});
    </script>
  {% endif %}
{% endif %}
<!-- End Afterpay Liquid Snippet for Shopify v2.2.0 -->
      {% if product.compare_at_price_max > product.price %}
        <span class="visuallyhidden price-a11y">{{ 'products.general.regular_price' | t }}</span>
        <del class="compare-price">{{ product.compare_at_price_max | money }}</del>
      {% endif %}
    </div>
  </div>

  <div class="grid product-single">
    <div class="grid-item large--one-half text-center">
      <div class="product-single__photos">
        {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

        {% for image in product.images %}
          {% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
          {% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
          {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          {% include 'image-style' with image: image, small_style: false, width: 480, height: 480, wrapper_id: img_wrapper_id, img_id: img_id %}

          <div id="{{ img_wrapper_id }}" class="product-single__image-wrapper js{% unless featured_image == image %} hide{% endunless %}" data-image-id="{{ image.id }}">
            <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
              <img id="{{ img_id }}"
                   class="product-single__image lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
                   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.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024' }}"{% endif %}
                   alt="{{ image.alt | escape }}">
            </div>
          </div>
        {% else %}
          <img src="{{ image | img_url: 'large' }}">
        {% endfor %}

        <noscript>
          <img src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}">
        </noscript>
      </div>

      {% comment %}
        Create thumbnails if we have more than one product image
      {% endcomment %}
      {% if product.images.size > 1 %}
        <ul class="product-single__thumbs grid-uniform" id="productThumbs">

          {% for image in product.images %}
            <li class="grid-item one-quarter">
              <a href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumb" data-image-id="{{ image.id }}">
                <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
              </a>
            </li>
          {% endfor %}

        </ul>
      {% endif %}
    </div>

    <div class="grid-item large--one-half">

      <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 }}">
        <meta itemprop="price" content="{{ variant.price | divided_by: 100.00 }}">

        <link itemprop="availability" href="http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}">

        {% comment %}
          ID addToCartForm is a selector for the ajaxify cart plugin
        {% endcomment %}
        <form action="/cart/add" method="post" enctype="multipart/form-data" id="addToCartForm-{{ section.id }}">

          {% comment %}
            Add product variants as a dropdown.
              - By default, each variant (or combination of variants) will display as its own <option>
              - To separate these into multiple steps, which we suggest, use option_selection.js (see below)

            You can leverage jQuery to add a callback on page load and each time the select element changes:
              - Include option_selection.js (as seen at the bottom of this file)
              - This allows you to use JavaScript anytime the variant dropdown changes
              - This also separates out your variant options (ie. size, color, etc.) to separate select elements

            For more information on products with multiple options, visit:
              - http://docs.shopify.com/support/your-website/themes/can-i-make-my-theme-use-products-with-multiple-options#update-product-liquid
          {% endcomment %}
          <div class="product-single__variants">
            <select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
              {% for variant in product.variants %}
                {% if variant.available %}

                  {% comment %}
                    Note: if you use option_selection.js, your <select> tag will be overwritten, meaning what you have inside <option> will not reflect what you coded below.
                  {% endcomment %}
                  <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>
          </div>

          <div class="grid--uniform product-single__addtocart">
            {% if section.settings.product_qty_enable %}
              {% unless sold_out %}<label>{{ 'products.product.quantity' | t }}</label>{% endunless %}
              <input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">
            {% endif %}
            <button type="submit" name="add" id="addToCart-{{ section.id }}" class="btn btn--large btn--full">
              <span class="add-to-cart-text">{{ 'products.product.add_to_cart' | t }}</span>
            </button>
          </div>

        </form>

      </div>

      <div class="product-single__desc rte" itemprop="description">
        {{ product.description }}
      </div>
      {% if section.settings.share_enable %}
        {% include 'social-sharing' %}
      {% endif %}
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
    </div>
  </div>
  {% if section.settings.related_products_enable %}
    {% include 'related-products' %}
  {% endif %}
</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% endunless %}

{% schema %}
  {
    "name": "Product page",
    "settings": [
      {
        "type": "checkbox",
        "id": "product_vendor_enable",
        "label": "Show product vendor"
      },
      {
        "type": "checkbox",
        "id": "product_image_zoom_enable",
        "label": "Enable image zoom"
      },
      {
        "type": "checkbox",
        "id": "related_products_enable",
        "label": "Show related products"
      },
      {
        "type": "checkbox",
        "id": "product_qty_enable",
        "label": "Show quantity selector"
      },
      {
        "type": "checkbox",
        "id": "share_enable",
        "label": "Enable product sharing"
      }
    ]
  }
{% endschema %}