商品詳細ページテンプレート

<div id="page" class="innerpage clearfix">
  <h1>{{ collection.title }} {{ product.title }}</h1>


  <p class="latest-news"><strong>Product Tags: </strong>
    {% for tag in product.tags %}
            <a href="/collections/all/{{ tag }}">{{ tag }}</a> |
          {% endfor %}
  </p>

  <div class="product clearfix">
    <div class="product-info">
      <h1>{{ product.title }}</h1>
      <div class="product-info-description">
        <p>{{ product.description }}  </p>
      </div>

      {% if product.available %}
      <form action="/cart/add" method="post">

      <h2>Product Options:</h2>

      <select id="product-info-options" name="id" class="product-info-options">
        {% for variant in product.variants %}
          <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
        {% endfor %}
      </select>

      <div id="price-field"></div>

      <div class="product-purchase-btn">
        <input type="submit" class="add-this-to-cart" id="add-this-to-cart" value="Add to Basket" />
      </div>

      </form>
      {% else %}
              <h2>Sold out!</h2>
              <p>Sorry, we're all out of this product. Check back often and order when it returns</p>
              {% endif %}
    </div>

    <div class="product-images clearfix">
      {% for image in product.images %}

      {% if forloop.first %}
      <div class="product-image-large">
        <img src="{{ image | product_img_url: 'medium'}}" alt="{{product.title | escape }}" />
      </div>
      {% else %}
      {% endif %}
      {% endfor %}

      <ul class="product-thumbs clearfix">
      {% for image in product.images %}
      {% if forloop.first %}
      {% else %}

      <li>
      <a href="{{ image | product_img_url: 'large' }}" class="product-thumbs" rel="lightbox[product]" title="">
        <img src="{{ image | product_img_url: 'small'}}" alt="{{product.title | escape }}" />
      </a>
      </li>
      {% endif %}
      {% endfor %}
      </ul>
    </div>
  </div>



  <div id="three-reasons" class="clearfix">
    <h3>Why Shop With Us?</h3>
    <ul>
      <li class="two-a">
        <h4>24 Hours</h4>
        <p>We're always here to help.</p>
      </li>
      <li class="two-c">
        <h4>No Spam</h4>
        <p>We'll never share your info.</p>
      </li>
      <li class="two-d">
        <h4>Secure Servers</h4>
        <p>Checkout is 256bit encrypted.</p>
      </li>
    </ul>
  </div>

</div>
<!-- end page -->

<script type="text/javascript">
<!--
  // prototype callback for multi variants dropdown selector
  var selectCallback = function(variant, selector) {
    if (variant && variant.available == true) {
      // selected a valid variant
      $('add-this-to-cart').removeClassName('disabled'); // remove unavailable class from add-to-cart button
      $('add-this-to-cart').disabled = false;           // reenable add-to-cart button
      $('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}");  // update price field
    } else {
      // variant doesn't exist
      $('add-this-to-cart').addClassName('disabled');      // set add-to-cart button to unavailable class
      $('add-this-to-cart').disabled = true;              // disable add-to-cart button
      $('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
    }
  };

  // initialize multi selector for product
  Event.observe(document, 'dom:loaded', function() {
    new Shopify.OptionSelectors("product-info-options", { product: {{ product | json }}, onVariantSelected: selectCallback });
  });
-->
</script>