Support

{% extends "base.html" %}
{% block title %}One-Time Products{% endblock %}

{% block page_content %} 
<div class="headline-container">
  <div class="headline">
    <div class="container"> 
      <div class="col-lg-10 col-lg-offset-1">
        <h2 class="heading h-section text-center large-grp" data-barley="shop_main_heading" data-barley-editor="simple">The Shop</h2>  
        <div class="filter-cards row">
          <div class="col-sm-6 text-right">
            <span class="label" data-barley="shop_tags_label" data-barley-editor="simple">Browse by tag</span>
            <select class="cselect" id="tags">
              <option value="all">All</option>
              {% for tag in tags %}
              <option value="{{ tag.slug }}" {% if tag.slug == category %}selected="selected"{% endif %}>{{ tag.name|title }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-sm-6">
            <span class="label" data-barley="shop_sort_label" data-barley-editor="simple">Sort by</span>
            <select class="cselect" id="sortby">
              <option value="">Product: Newest</option>
              <option value="low" {% if sort == 'low' %}selected="selected"{% endif %}>Price: Low to High</option>
              <option value="high" {% if sort == 'high' %}selected="selected"{% endif %}>Price: High to Low</option>
            </select>        
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container"> 
  <div class="col-lg-10 col-lg-offset-1">
    {% paginate products by 12, page %}
      {% set ctr = 0 %}
      <div class="row">
      {% for product in paged_items %}
      {% if ctr == 4 %}
      </div>
      <div class="row">
      {% set ctr = 0 %}
      {% endif %}
        <section class="card col-md-3 col-sm-6 col-xs-12">
          <a href="/shop/product/{{ product.id }}">
            {{ product | object_img_centered(default_img_path=settings.product_placeholder_img, css_class="img-container") }}
            <span class="heading hsmall-grp">{{ product.name }}</span>
            {% set min = product.calc_min_ecom_price() %}
            {% set max = product.calc_max_ecom_price() %}

            {% if max == min %}
              <span class="price">{{ min | currency }}</span>
            {% else %}
              <span class="price">{{ min | currency }} - {{ max | currency }}</span>
            {% endif %}

            {% if reviews_data and product.reviewable %}
            <div class="listing-product-rating product-rating" data-score="{{ reviews_data.avg_ratings[product.id] | float }}"></div>
            {% endif %}
          </a>
        </section>
      {% if loop.last %}
      </div>
      {% endif %}
      {% set ctr = ctr + 1 %}
      {% endfor %}
      <div class="text-center">
        {{ navigation }}
      </div>
    {% endpaginate %}                     
  </div>
</div>
{% endblock %}

{% block page_javascript %}

{% if reviews_data %}
{{ 'js/bower_components/raty/lib/jquery.raty.js' | global_asset_url | javascript_tag }}
{% endif %}

<script>
jQuery(document).ready(function (){ 
  jQuery("#tags").on("change", function() {
    var url = window.location.href.split("?");
    var get_params;
    if (url.length > 1) {
      get_params = url[1];
    }
    if (get_params) {
      window.location.href = "/shop/" + jQuery(this).val() + "?" + get_params;
    } else {
      window.location.href = "/shop/" + jQuery(this).val();
    }
    
  });
  jQuery("#sortby").on("change", function() {
    window.location.href = window.location.href.split("?")[0] + "?sort=" + jQuery(this).val();
  });
  jQuery('.img-container').each(function(i, img) {
    var actualImage = new Image();
    actualImage.src = jQuery(this).css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
    var container = jQuery(this);
    actualImage.onload = function() {
      width = this.width;
      height = this.height;
      var box = 225;
      if (width < box) {
        container.html("<img src='" + this.src + "' />");
        var width_centered = (box - width) / 2;
        var height_centered = (box - height) / 2;
        container.css({'background-image': 'none'});
        container.find("img").css({'position': 'relative', 'left': width_centered, 'top': height_centered});
      }
    }
  });
  {% if reviews_data %}
  jQuery('.product-rating').raty({
    score: function() {
      return jQuery(this).attr('data-score');
    },
    readOnly: true,
    starType : 'i',
    hints: null
  });
  {% endif %}
});
</script> 
{% endblock %}

{% extends "base.html" %}
{% block title %}Product{% endblock %}

{% block override_metatags %}
<meta property="og:url" content="{{ product | product_ecom_url(http=True) }}" />
{% if product.images %}
<meta property="og:image" content="{{ product.images[0].url[2:]}}" />
{% endif %}
{% endblock %}

{% block css %}
  {{ 'css/plugins/pikachoose/base.css' | asset_url | stylesheet_tag }}
{% endblock %}

{% block page_content %}
<div class="headline-container">
  <div class="headline">
    <div class="container">
      <div class="row">
          <div class="header-article col-lg-10 col-lg-offset-1">
              <h2 class="heading h-section text-center large-grp" data-barley="shop_main_product_heading" data-barley-editor="simple">The Shop</h2> 
              <p id="shop-product-breadcrumb"><a href="/shop/all" data-barley="shop_main_breadcrumb" data-barley-editor="simple">The Shop</a> / {{ product.name }}</p> 
            </div>
        </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="product">
    <div class="row">
      <div class="col-sm-5 thumbs">
        <ul id="thumbs">
          {% for img in product.images %}
            <li>
              {{ product | object_img_tag(index=loop.index0, default_img_path=settings.product_placeholder_img, ref=product.images[loop.index0].url) }}
            </li>
          {% endfor %}
        </ul>
      </div>

      <div class="col-sm-7" itemscope itemtype="http://schema.org/Product">
        <h2 class="hsecondary-grp" itemprop="name">{{ product.name }}</h2>

        {% set min = product.calc_min_ecom_price() %}
        {% set max = product.calc_max_ecom_price() %}

        {% if max == min %}
          <span class="price">{{ min | currency }}</span>
        {% else %}
          <span class="price">{{ min | currency }} - {{ max | currency }}</span>
        {% endif %}

        <form action="/cart/add" method="POST" role="form" class="cform" id="product-form">
          {% for variant in product.variants %}
          {% if variant.name %}
          <div class="form-group">
            <div class="control-label">{{ variant.name.lstrip() | capitalize }}</div>
            <select class="cselect" name="variant:{{ variant.name }}" >
              {% for value in variant.values %}
              <option value="{{ value.value }}">{{ value.value.lstrip() | capitalize }}</option>
              {% endfor %}
            </select>                    
          </div>
          {% endif %}
          {% endfor %}

          {% set quantity = [1,2,3,4,5,6,7,8,9,10] %}
          <div class="form-group">
            <div class="control-label">Quantity</div>
            <select class="cselect" name="quantity">
              {% for q in quantity %}
              <option>{{q}}</option>
              {% endfor %}
            </select>                    
          </div>
          <input type="hidden" name="product_id" value="{{ product.id }}" />
          <input type="hidden" name="product_name" value="{{ product.name }}" />                                   

          <div class="out-of-stock"></div>        
          <button type="submit" class="btn btn-success">ADD TO CART</button>
        </form>
        {% if product.description %}
        <hr />
        <h4 class="heading" data-barley="shop_product_description" data-barley-editor="simple">Product Description</h4>
        <p itemprop="description">{{ product.description | safe}}</p>
        {% endif %}
        <hr />
        <div class="row">
          {% if reviews_data %}
          <div class="col-xs-6">
            <div class="product-avg-rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
              <span style="display: none;" itemprop="ratingValue">{{ reviews_data.avg_rating | float }}</span>
              <span class="product-rating" data-score="{{ reviews_data.avg_rating | float}}"></span>
              <span itemprop="ratingCount">{{ reviews_data.reviews | length }}</span> reviews
            </div>
            <a href="#write-a-review" class="btn btn-success">Write a Review</a>
          </div>
          {% endif %}

          <div class="col-xs-6">
            <h4 class="heading" data-barley="shop_product_social" data-barley-editor="simple">Share this product</h4>
            <div>
              <span class="fb-share-button" data-layout="button_count"></span>
              <span>
                <a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ product | product_ecom_url(http=True) }}" data-text="Check out {{product.name}}!">Tweet</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
              </span>
              <span class="pinterest-share-button">
                <a href="//www.pinterest.com/pin/create/button/?url={{ product | product_ecom_url(http=True) }}&amp;{%if product.images%}media={{ product.images[0].url[2:]}}&amp;{%endif%}description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="beside" data-pin-color="red"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_20.png" /></a>
                <script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    {% if reviews_data %}
    <div id="product-reviews-list-row" class="row">
      <div class="col-xs-12">
        <h3 class="heading product-reviews-list-heading">{{ reviews_data.copy_settings.review_headline }}</h3>
      </div>

      {% if reviews_data.reviews | length == 0 %}
        <div class="product-review-empty col-xs-12">
        {{ reviews_data.copy_settings.empty_review_text }}
        </div>
      {% endif %}

      {% for review in reviews_data.reviews %}
      <div class="col-xs-12 product-review">
        <div class="product-review-info">
          <div class="product-review-meta">{{ review.meta_string }}</div>
          <div class="product-review-rating product-rating" data-score="{{ review.rating }}"></div>
        </div>

        <div class="product-review-content">
          <h4 class="product-review-title"> {{ review.title }}</h4>
          <p class="product-review-body"> {{ review.body }}</p>
        </div>
      </div>
      {% endfor %}
      {% if reviews_data.addl_reviews %}
      <div class="col-xs-12">
        <a id="reviews-show-more" href="#reviews-show-more">Show More</a>
      </div>
      {% endif %}
    </div>

    <div id="write-a-review" class="row">
      <div class="col-xs-12">
        <h3 class="write-review-heading">{{ reviews_data.copy_settings.review_form_header }}</h3>

        {% set messages = get_flashed_messages(with_categories=True, category_filter=['review_success']) %}
        {% if messages %}
          {% set message = messages[0][1] %}
          <div class="write-review-message">
            {{ reviews_data.copy_settings.review_form_success }} {{ message|safe }}
          </div>
        {% elif reviews_data.write_disabled %}
          <div class="write-review-message">
            {% if reviews_data.disabled_reason == 'login' %}
              You must <a href="/customer/login">login</a> before writing a review.
            {% elif reviews_data.disabled_reason == 'duplicate' %}
              You have already submitted a review for this product.
            {% else %}
              Writing a review has been temporarily disabled.
            {% endif %}
          </div>
        {% else %}
          <form action="/shop/product_review/{{ product.id }}" method="POST" class="form-horizontal">
            <div class="write-review-rating-row">
              <span class="write-review-rating-label">
                How would you rate this product?
              </span>
              <span id="write-review-rating"></span>
            </div>


            <div class="form-group">
              <div class="col-xs-12">
                <input type="text" class="form-control input-lg write-review-title" name="review_title" id="review-title" placeholder="{{ reviews_data.copy_settings.review_form_title }}">
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
                <textarea rows="5" class="form-control write-review-body" name="review_body" placeholder="{{ reviews_data.copy_settings.review_form_body }}"></textarea>
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
                <button type="submit" class="btn btn-success">Submit</button>
              </div>
            </div>
          </form>
        {% endif %}
      </div>
    </div>
    {% endif %}
  </div>       
</div>
{% endblock %}

{% block page_javascript %}  
<script src="{{ 'js/jquery.pikachoose.min.js' | asset_url }}"></script>

{% if reviews_data %}
{{ 'js/bower_components/raty/lib/jquery.raty.js' | global_asset_url | javascript_tag }}
{% endif %}

<script>
window.cur_product = {{ product.json() | safe }};
$(document).ready(
  function (){
    var product = {{ product.json() | safe }};
  $("#product-form select[name^='variant'], #product-form select[name^='quantity']").on("change", function() {
      var variants = {};
      $("#product-form select[name^='variant']").each(function(el) {
        variants[$(this).attr("name").split(':')[1]] = $(this).val();
      });
      var instance = match_variants_instance(product, variants);
    // Set price to current instance price
    $(".product .price").text(window.currency + (instance.price / 100.0).toFixed(2));
      check_out_of_stock(instance);
    });
    if (product.instances.length == 1) {
      check_out_of_stock(product.instances[0]);
    } else {
      $("#product-form select[name^='variant']").change();
    }
    function match_variants_instance(product, selected_variants) {
      var matched_instance = false;
      $.each(product.instances, function(i, instance) {
        var variants_match = true;
        $.each(instance.variants, function(i, variant) {
          if (variant.variant_value.value != selected_variants[variant.variant_type.name]) {
            variants_match = false;
            return false;
          }
        });
        if (variants_match === true) {
          matched_instance = instance;
          return false;
        }
      });
      return matched_instance;
    };
    function check_out_of_stock(instance) {
    var selected_quantity = parseInt($("#product-form select[name^='quantity']").val());
      if (instance === false || (instance.inventory.out_of_stock_purchases === false && instance.inventory.quantity_on_hand <= 0)) {
        $("#product-form .out-of-stock").html("Out Of Stock!");
        $('#product-form :submit').attr('disabled', 'disabled');
    } else if (selected_quantity > instance.inventory.quantity_on_hand && instance.inventory.out_of_stock_purchases === false) {
      $("#product-form .out-of-stock").html("Sorry, there are only " + instance.inventory.quantity_on_hand + " left in stock!");
      $('#product-form :submit').attr('disabled', 'disabled');
      } else {
        $("#product-form .out-of-stock").html("");
        $('#product-form :submit').removeAttr('disabled');
      }
    }
  {% if reviews_data %}
  jQuery('.product-rating').raty({
    score: function() {
      return jQuery(this).attr('data-score');
    },
    readOnly: true,
    starType: 'i',
    hints: null
  });
  jQuery('#write-review-rating').raty({
    scoreName: 'review_rating',
    starType: 'i',
    hints: null
  });
  {% endif %}
  });
</script>
{% endblock %}