<commit_before>{% 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 %}

<div itemscope itemtype="http://schema.org/Product">

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | product_img_url: 'grande' }}">

  {% include 'breadcrumb' %}

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

      {% comment %}
        If we only have one product image, show a large version of it.
        If we have more than 1, show it then loop through the rest as thumbnails.
      {% endcomment %}
      {% if product.images.size == 0 %}

        <div class="product-photo-container">
          <img src="{{ '' | product_img_url: 'grande' }}" alt="">
        </div>

      {% else %}

        <div class="product-photo-container">
          <a href="{{ product.featured_image.src | product_img_url: 'original' }}">
            <img src="{{ product.featured_image.src | product_img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
          </a>
        </div>

        {% comment %}
          If we have more than one product image, loop through them and create thumbnails.

          By default, images will link to the original size of themselves. It is recommended
          to add a lightbox or photo-switching effect with JavaScript.
        {% endcomment %}
        {% if product.images.size > 1 %}
          <ul class="product-photo-thumbs grid-uniform">

            {% for image in product.images offset:1 %}
              <li class="grid-item one-quarter">
                <a href="{{ image.src | product_img_url: 'original' }}">
                  <img src="{{ image.src | product_img_url: 'compact' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endfor %}

          </ul>
        {% endif %}

      {% endif %}

    </div>

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

      <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

        <meta itemprop="priceCurrency" content="{{ shop.currency }}">

        <header class="page-header">
          <h2 itemprop="name">{{ product.title }}</h2>
        </header>

        {% if product.available %}
          <link itemprop="availability" href="http://schema.org/InStock">
        {% else %}
          <link itemprop="availability" href="http://schema.org/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">

          {% 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 %}
          <select name="id" id="productSelect">
            {% 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 value="{{variant.id}}">
                  {{ variant.title }} - {{ variant.price | money_with_currency }}
                </option>

              {% else %}
                <option disabled="disabled">
                  {{ variant.title }} - Sold out
                </option>
              {% endif %}
            {% endfor %}
          </select>

          {% comment %}
            Optionally show the 'compare at' or original price of the product.
          {% endcomment %}
          {% if product.compare_at_price > product.price %}
            <h3>
              <span id="productPrice" class="on-sale" itemprop="price">
                {{ product.price | money }}
              </span>
            </h3>
            <h5>
              <small id="comparePrice"><commit_msg>adding missing form labels or aria-label is label is invisible<commit_after>{% 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 %}

<div itemscope itemtype="http://schema.org/Product">

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | product_img_url: 'grande' }}">

  {% include 'breadcrumb' %}

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

      {% comment %}
        If we only have one product image, show a large version of it.
        If we have more than 1, show it then loop through the rest as thumbnails.
      {% endcomment %}
      {% if product.images.size == 0 %}

        <div class="product-photo-container">
          <img src="{{ '' | product_img_url: 'grande' }}" alt="">
        </div>

      {% else %}

        <div class="product-photo-container">
          <a href="{{ product.featured_image.src | product_img_url: 'original' }}">
            <img src="{{ product.featured_image.src | product_img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
          </a>
        </div>

        {% comment %}
          If we have more than one product image, loop through them and create thumbnails.

          By default, images will link to the original size of themselves. It is recommended
          to add a lightbox or photo-switching effect with JavaScript.
        {% endcomment %}
        {% if product.images.size > 1 %}
          <ul class="product-photo-thumbs grid-uniform">

            {% for image in product.images offset:1 %}
              <li class="grid-item one-quarter">
                <a href="{{ image.src | product_img_url: 'original' }}">
                  <img src="{{ image.src | product_img_url: 'compact' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endfor %}

          </ul>
        {% endif %}

      {% endif %}

    </div>

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

      <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

        <meta itemprop="priceCurrency" content="{{ shop.currency }}">

        <header class="page-header">
          <h2 itemprop="name">{{ product.title }}</h2>
        </header>

        {% if product.available %}
          <link itemprop="availability" href="http://schema.org/InStock">
        {% else %}
          <link itemprop="availability" href="http://schema.org/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">

          {% 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 %}
          <label for="productSelect">Select Product</label>
          <select name="id" id="productSelect">
            {% 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 value="{{variant.id}}">
                  {{ variant.title }} - {{ variant.price | money_with_currency }}
                </option>

              {% else %}
                <option disabled="disabled">
                  {{ variant.title }} - Sold out
                </option>
              {% endif %}
            {% endfor %}
          </select>

          {% comment %}
            Optionally show the 'compare at' or original price of the product.
          {% endcomment %}
          {% if product.compare_at_price > product.price %}
            <h3>
              <span id="productPrice" class="on-sale" itemprop="price">
                {{ product.price | money }}
              </span>
            </h3>
            <h5>
              <small id="comparePrice">
{'fraction_non_alphanumeric': 0.12553680215719565, 'fraction_numerical': 0.0017976630380505342, 'mean_word_length': 2.028122165104324, 'pattern_counts': {'":': 0, '<': 97, '<?xml version=': 0, '>': 101, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5154107', 'n_tokens_mistral': 2805, 'n_tokens_neox': 2542, 'n_words': 831}