<commit_before>---
description: 'Individual product page.'
action: 'shop:product'
template: main
protocol: all
published: true
name: 'Product'
url: '/product/:urlName'
---

<script type="text/javascript">

  var $route = {
    current: {
      params: {
        slug: "{{ product.url_name }}"
      }
    }
  };
  var productQty = {{ quantity|default('1') }};

  var reviews = [
    {% for attribute in product.reviews() %}
      {{ attribute | raw }}{% if not loop.last %},{% endif %}
    {% endfor %}
  ];

  var reviewDialog = `{{ partial('partial-review-dialog') }}`;
</script>


<div ng-controller="ProductCtrl">

  {{ open_form({'class': 'custom', 'onsubmit': 'return false'}) }}

    <div layout="row" layout-align="center center" id="product-page">
      <div layout="column" class="content-container">
        <div layout="row" layout-xs="column" layout-sm="column">
          <div layout="column" flex class="padding-medium photos-column">

            <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                  {% for image in product.images %}
                    <div class="swiper-slide">
                      <img class="product-image" title="{{ product.name }} image {{ loop.index }}" alt="{{ product.name }} image {{ loop.index }}" src="{{ image.thumbnail(500,'auto') }}" />
                    </div>
                  {% endfor %}
                </div>
            </div>
            {% if product.images|length > 1 %}
            <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                  {% for image in product.images %}
                    <div class="swiper-slide image-thumbnail" md-ink-ripple style="background-image:url('{{ image.thumbnail(120,'auto') }}')"><div class="square-spacer"></div></div>
                  {% endfor %}
                </div>
            </div>
            {% endif %}
          </div>

          <div layout="column" class="padding-medium details-column" flex>
            <!-- column2 -->
              <div layout="row" layout-align="start center" class="padding-bottom-small padding-y-mobile">
                <h1 class="ls-heading margin-y-small">{{ product.name }}</h1>
              </div>
              <div layout="row" layout-align="start center" class="padding-bottom-small padding-y-mobile">
                <p class="ls-subheading ls-caption">{{ product.sku }}</p>
                {% if product.manufacturer %}
                  <a href="{{ site_url('/products/') ~ '?brand=' ~ product.manufacturer.url_name }}" class="ls-subheading no-link-style ls-caption ls-link margin-x-medium">By {{ product.manufacturer.name }}</a>
                {% endif %}
                {% if product.in_stock_amount > 0 %}
                <p class="ls-subheading ls-caption">{{ product.in_stock_amount }} in stock</p>
                {% elseif product.track_inventory %}
                <p class="ls-subheading ls-caption text-red">Out of stock</p>
                {% endif %}
              </div>

              {% if product.onSale %}
                <h2 class="ls-heading-thin sale-price">
                  {{ product.price | currency }}
                  <span class="strikethrough">{{ product.fullPrice | currency }}</span>
                </h2>
              {% else %}
                <h2 class="ls-heading-thin">
                  {{ product.price | currency }}
                </h2>
              {% endif %}

              <p class="ls-caption md-caption margin-y-small">
                {{ product.short_description | unescape }}
              </p>

              {% if product.productAttributes %}
              <div layout="row" layout-xs="column" class="padding-y-small" style="display: table;">
                <table>
                  {% for attr in product.productAttributes %}
                  <tr>
                    <td class="ls-caption float-right">{{ attr.name }}:</td>
                    <td class="ls-caption md-caption padding-x-small">{{ attr.value }}</td>
                  </tr>
                  {% endfor %}
                </table>
              </div>
              {% endif %}

              <div layout="row" layout-xs="column" ng-hide="!product.options.length" class="padding-y-small"/>
                <md-menu-bar>
                  {% for option in product.options %}
                  <md-menu md-position-mode="target-right target" style="margin-bottom:5px;">
                    <md-button aria-label="Product {{option.name}}" ng-click="$mdOpenMenu($event)" class="ls-subheading">
                      <strong>{{ option.name }}</strong>
                      <span class="selected-value">{{ option.values[postedOptions[option.id]] | default(option.values[(option.values | keys)[0]]) }}</span>
                      <md-icon>arrow_drop_down</md-icon>
                    </md-button>
                    <md-menu-content width="2">
                      {% for key, value in option.values %}
                      <md-menu-item>
                        <md-button
                         ng-click="options['{{option.id}}'] = '{{ key }}'; updateSlug(); $root.showLoadingScreen();">
                          <span id="selectable-option-{{key}}">{{ value }}</span>
                        </md-button>
                      </md-menu-item>
                      {% endfor %}
                    </md-menu-content>
                  </md-menu>
                  {% endfor %}
                </md-menu-bar>
              </div>

              {% if product.extras is not empty %}
                <div layout="column" class="padding-y-medium">
                  {% for extra in product.extras if extra.enabled == 1 %}
                    <div layout="row">
                      <md-checkbox
                        class="md-primary"
                        aria-label="Add {{ extra.name }}"
                        ng-model="extra['{{extra.id}}']"
                        id="{{ 'extra-'~index }}" {{ checkbox_state(postedExtras[extra.id], extra.id) }}
                        name="extras[{{ extra.id }}]"
                        data-ajax-handler="shop:product"
                        ng-change="$root.showLoadingScreen();">
                        Add {{ extra.name }} <span class="ls-caption md-caption">([[ {{ extra.base_price }} | currency ]])</span>
                      </md-checkbox>
                    </div>
                  {% endfor %}
                </div>
              {% endif %}

              <div id="product-add-cart" layout="row" layout-xs="column" layout-align-xs="center center">
                <div layout="row" class="order-quantity" layout-align="center center" flex-order-xs="2">
                  <md-button ng-click="order.quantity = order.quantity - 1 >= 1 ? order.quantity - 1 : 1"  class="md-icon-button">
                    <md-icon>remove</md-icon>
                  </md-button>
                  <input type="text" min="1" name="quantity" readonly max="99" ng-model="order.quantity" />
                  <md-button ng-click="order.quantity = order.quantity + 1 <= 99 ? order.quantity + 1 : 99" class="md-icon-button">
                    <md-icon>add</md-icon>
                  </md-button>
                </div>

                <input type="hidden" name="productId" value="{{ product.id }}"/>
                <md-button
                  ng-href="#"
                  ng-click="$root.showLoadingScreen();"
                  data-ajax-handler="shop:onAddToCart"
                  data-ajax-redirect="{{ site_url('cart') }}"
                  id="product-add"
                  flex-order-xs="3"
                  class="ls-button  no-margin-y margin-x-small">
                  Add to cart
                </md-button>

                <md-button flex-order-xs="1" md-ink-ripple="#ED3C3C" ng-click="$root.isFavourite(product) ? $root.removeFavourite(product) : $root.addFavourite(product); product.favourite = !product.favourite" class="ls-subheading no-margin-left">
                  <md-icon class="icon-small" ng-class="{ 'text-red': product.favourite }">[[ product.favourite ? 'favorite' : 'favorite_border' ]]</md-icon>
                 [[ product.favourite ? 'Added!' : 'Add to favourites' ]]
                </md-button>
              </div>

              <div id="product-social" layout="column" class="padding-y-medium padding-y-mobile">
                <p class="ls-heading md-caption theme-heading padding-y-mobile">Share</p>
                <ul class="social-icons" layout="row" layout-align="start start">
                  <li md-ink-ripple><commit_msg>Disable add to cart button when out of stock.<commit_after>---
description: 'Individual product page.'
action: 'shop:product'
template: main
protocol: all
published: true
name: 'Product'
url: '/product/:urlName'
---

<script type="text/javascript">

  var $route = {
    current: {
      params: {
        slug: "{{ product.url_name }}"
      }
    }
  };
  var productQty = {{ quantity|default('1') }};

  var reviews = [
    {% for attribute in product.reviews() %}
      {{ attribute | raw }}{% if not loop.last %},{% endif %}
    {% endfor %}
  ];

  var reviewDialog = `{{ partial('partial-review-dialog') }}`;
</script>


<div ng-controller="ProductCtrl">

  {{ open_form({'class': 'custom', 'onsubmit': 'return false'}) }}

    <div layout="row" layout-align="center center" id="product-page">
      <div layout="column" class="content-container">
        <div layout="row" layout-xs="column" layout-sm="column">
          <div layout="column" flex class="padding-medium photos-column">

            <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                  {% for image in product.images %}
                    <div class="swiper-slide">
                      <img class="product-image" title="{{ product.name }} image {{ loop.index }}" alt="{{ product.name }} image {{ loop.index }}" src="{{ image.thumbnail(500,'auto') }}" />
                    </div>
                  {% endfor %}
                </div>
            </div>
            {% if product.images|length > 1 %}
            <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                  {% for image in product.images %}
                    <div class="swiper-slide image-thumbnail" md-ink-ripple style="background-image:url('{{ image.thumbnail(120,'auto') }}')"><div class="square-spacer"></div></div>
                  {% endfor %}
                </div>
            </div>
            {% endif %}
          </div>

          <div layout="column" class="padding-medium details-column" flex>
            <!-- column2 -->
              <div layout="row" layout-align="start center" class="padding-bottom-small padding-y-mobile">
                <h1 class="ls-heading margin-y-small">{{ product.name }}</h1>
              </div>
              <div layout="row" layout-align="start center" class="padding-bottom-small padding-y-mobile">
                <p class="ls-subheading ls-caption">{{ product.sku }}</p>
                {% if product.manufacturer %}
                  <a href="{{ site_url('/products/') ~ '?brand=' ~ product.manufacturer.url_name }}" class="ls-subheading no-link-style ls-caption ls-link margin-x-medium">By {{ product.manufacturer.name }}</a>
                {% endif %}
                {% if product.in_stock_amount > 0 %}
                <p class="ls-subheading ls-caption">{{ product.in_stock_amount }} in stock</p>
                {% elseif product.track_inventory %}
                <p class="ls-subheading ls-caption text-red">Out of stock</p>
                {% endif %}
              </div>

              {% if product.onSale %}
                <h2 class="ls-heading-thin sale-price">
                  {{ product.price | currency }}
                  <span class="strikethrough">{{ product.fullPrice | currency }}</span>
                </h2>
              {% else %}
                <h2 class="ls-heading-thin">
                  {{ product.price | currency }}
                </h2>
              {% endif %}

              <p class="ls-caption md-caption margin-y-small">
                {{ product.short_description | unescape }}
              </p>

              {% if product.productAttributes %}
              <div layout="row" layout-xs="column" class="padding-y-small" style="display: table;">
                <table>
                  {% for attr in product.productAttributes %}
                  <tr>
                    <td class="ls-caption float-right">{{ attr.name }}:</td>
                    <td class="ls-caption md-caption padding-x-small">{{ attr.value }}</td>
                  </tr>
                  {% endfor %}
                </table>
              </div>
              {% endif %}

              <div layout="row" layout-xs="column" ng-hide="!product.options.length" class="padding-y-small"/>
                <md-menu-bar>
                  {% for option in product.options %}
                  <md-menu md-position-mode="target-right target" style="margin-bottom:5px;">
                    <md-button aria-label="Product {{option.name}}" ng-click="$mdOpenMenu($event)" class="ls-subheading">
                      <strong>{{ option.name }}</strong>
                      <span class="selected-value">{{ option.values[postedOptions[option.id]] | default(option.values[(option.values | keys)[0]]) }}</span>
                      <md-icon>arrow_drop_down</md-icon>
                    </md-button>
                    <md-menu-content width="2">
                      {% for key, value in option.values %}
                      <md-menu-item>
                        <md-button
                         ng-click="options['{{option.id}}'] = '{{ key }}'; updateSlug(); $root.showLoadingScreen();">
                          <span id="selectable-option-{{key}}">{{ value }}</span>
                        </md-button>
                      </md-menu-item>
                      {% endfor %}
                    </md-menu-content>
                  </md-menu>
                  {% endfor %}
                </md-menu-bar>
              </div>

              {% if product.extras is not empty %}
                <div layout="column" class="padding-y-medium">
                  {% for extra in product.extras if extra.enabled == 1 %}
                    <div layout="row">
                      <md-checkbox
                        class="md-primary"
                        aria-label="Add {{ extra.name }}"
                        ng-model="extra['{{extra.id}}']"
                        id="{{ 'extra-'~index }}" {{ checkbox_state(postedExtras[extra.id], extra.id) }}
                        name="extras[{{ extra.id }}]"
                        data-ajax-handler="shop:product"
                        ng-change="$root.showLoadingScreen();">
                        Add {{ extra.name }} <span class="ls-caption md-caption">([[ {{ extra.base_price }} | currency ]])</span>
                      </md-checkbox>
                    </div>
                  {% endfor %}
                </div>
              {% endif %}

              <div id="product-add-cart" layout="row" layout-xs="column" layout-align-xs="center center">
                <div layout="row" class="order-quantity" layout-align="center center" flex-order-xs="2">
                  <md-button ng-click="order.quantity = order.quantity - 1 >= 1 ? order.quantity - 1 : 1"  class="md-icon-button">
                    <md-icon>remove</md-icon>
                  </md-button>
                  <input type="text" min="1" name="quantity" readonly max="99" ng-model="order.quantity" />
                  <md-button ng-click="order.quantity = order.quantity + 1 <= 99 ? order.quantity + 1 : 99" class="md-icon-button">
                    <md-icon>add</md-icon>
                  </md-button>
                </div>

                <input type="hidden" name="productId" value="{{ product.id }}"/>
                {% if not product.track_inventory
                    or product.in_stock_amount > 0
                    or product.allow_preorder %}
                  <md-button
                    ng-href="#"
                    ng-click="$root.showLoadingScreen();"
                    data-ajax-handler="shop:onAddToCart"
                    data-ajax-redirect="{{ site_url('cart') }}"
                    id="product-add"
                    flex-order-xs="3"
                    class="ls-button  no-margin-y margin-x-small">
                    Add to cart
                  </md-button>
                {% else %}
                  <md-button
                    flex-order-xs="3"
                    mg-disabled="true"
                    class="ls-button  no-margin-y margin-x-small">
                    Out of stock
                  </md-button>
                {% endif %}

                <md-button flex-order-xs="1" md-ink-ripple="#ED3C3C" ng-click="$root.isFavourite(product) ? $root.removeFavourite(product) : $root.addFavourite(product); product.favourite = !product.favourite" class="ls-subheading no-margin-left">
                  <md-icon class="icon-small" ng-class="{ 'text-red': product.favourite }">[[ product.favourite ? 'favorite' : 'favorite_border' ]]</md-icon>
                 [[ product.favourite ? 'Added!' : 'Add to favourites' ]]
                </md-button>
              </div>

              <div id="product-social" layout="column" class="padding-y-medium padding-y-mobile">
                <p class="ls-heading md-caption theme-heading padding-y-mobile">Share</p>
                <ul class="social-icons" layout="row" layout-align="start start">
                  <li md-ink-ripple>
{'fraction_non_alphanumeric': 0.16034112730147973, 'fraction_numerical': 0.004405286343612335, 'mean_word_length': 1.5573367995378393, 'pattern_counts': {'":': 0, '<': 231, '<?xml version=': 0, '>': 236, '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': '5977357', 'n_tokens_mistral': 5141, 'n_tokens_neox': 4645, 'n_words': 915}