shopify-b2b

{% comment %}
    Source: https://gist.github.com/carolineschnapp/9122054
    If you are not on a collection page, do define which collection to use in the order form.
    Use the following assign statement, replace 'your-collection-handle-here' with your collection handle.
    {% assign collection = collections.your-collection-handle-here %}
    Use the assign statement outside of this comment block at the top of your template.
    {% endcomment %}

    {% paginate collection.products by 100 %}

    {% if collection.products_count > 0 %}
    <div class="action-bar top clearfix">
      <h1 class="left">{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
      <input class="action-button submit button btn right add-to-cart-order-form" type="button" value="Add to the cart" />
    </div> 
    {% else %}
    <h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
    {% endif %}

    {% if template contains 'page' and page.content.size > 0 %}
    <div class="rte">
    {{ page.content }}
    </div>  
    {% elsif collection.description.size > 0 %}
    <div class="rte">
    {{ collection.description }}
    </div>
    {% endif %}

    {% if collection.products_count > 0 %} 
    {{ 'http://yui.yahooapis.com/pure/0.4.2/tables-min.css' | stylesheet_tag }}
    <table class="pure-table pure-table-bordered">
      <tbody>
      {% for product in collection.products %}
        {% if product.available %}
          {% for variant in product.variants %}
            {% if variant.available %}
            <tr class="{% cycle 'pure-table-odd', '' %}">
              <td>
                <a href="{{ product.url | collection }}">
                  <img src="{{ product.featured_image.src | product_img_url: 'thumb' }}" alt="{{ product.featured_image.alt | escape }}" />
                </a>
              </td>
              <td>
                <a href="{{ product.url | collection }}">
                 {{ product.title }}{% unless variant.title contains 'Default' %} - {{ variant.title }}{% endunless %}{% unless variant.sku == '' %} - {{ variant.sku }}{% endunless %}
                </a>
              </td>
              <td>
                 {{ variant.price | money }}
              </td>
              <td style="text-align:right;">
                <input onfocus="this.select()" class="quantity field" data-id="{{ variant.id }}" min="0" {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %}{% assign max = variant.inventory_quantity %}{% for item in cart.items %}{% if item.id == variant.id %}{% assign max = max | minus: item.quantity %}{% endif %}{% endfor %} max="{{ max }}" {% endunless %} type="text" value="0" tabindex="1" />
              </td>
            </tr>
            {% endif %}
          {% endfor %}
        {% endif %}
      {% endfor %}
      </tbody>
    </table>
    <div class="action-bar clearfix">
      <input class="action-button submit button btn right add-to-cart-order-form" type="button" value="Add to the cart" />
    </div> 
    {% else %}
    <p>There are no products in this view.</p>
    {% endif %}

    {% endpaginate %}

    {% if collection.products_count > 0 %}
    <script>
    Shopify.itemsToAdd = [];
    Shopify.addItemstoTheCart = function() {
      if (Shopify.itemsToAdd.length) {
        var item = Shopify.itemsToAdd.pop();
        $.ajax({
          url: '/cart/add',
          dataType: 'json',
          type: 'post',
          data: item,
          success: Shopify.addItemstoTheCart,
          error: Shopify.addItemstoTheCart
        });
      }
      else {
        window.location.href = '/cart';
      }
    };
    jQuery(function($) {
      $('table .quantity:first').focus();
      $('[max]').change(function() {
        var max = parseInt($(this).attr('max'), 10);
        var value = parseInt($(this).val(), 10) || 0;
        if (value > max) { 
          alert('We only have ' + max + ' of this item in stock');
          $(this).val(max); 
        }    
      });
      $('.add-to-cart-order-form').click(function() {
        $('.add-to-cart-order-form').addClass('disabled').attr('disabled','disabled');
        // Resetting.
        Shopify.itemsToAdd = [];
        $('.quantity').each(function() {
          var quantity = parseInt($(this).val(), 10);
          if (quantity) {
            Shopify.itemsToAdd.push( { id: $(this).attr('data-id'), quantity: quantity } );
          }
        });     
        if (Shopify.itemsToAdd.length) {
          Shopify.addItemstoTheCart();
        }
        else {
          alert('All quantities are set to zero.');
          $('.add-to-cart-order-form').removeAttr('disabled').removeClass('disabled');
        }
      });
    });
    </script>
    {% endif %}

    <style>
    .action-bar { margin: 15px 0; }
    .action-bar.top { margin: 30px 0 0; }
    .action-bar h1 { margin:0; padding: 0; line-height:1 }
    .left { float: left; }
    .right { float: right; }
    .clearfix:before, .clearfix:after { content: ""; display: table; }
    .clearfix:after { clear: both; }
    .clearfix { zoom: 1; }
    /* Additional styles for table */
    table.pure-table { margin: 15px 0; width: 100%; }
    table.pure-table tr td:first-child, table.pure-table tr th:first-child { padding-left: 12px; }
    table.pure-table tr td:last-child, table.pure-table tr th:last-child { padding-right: 12px; }
    table.pure-table img { float:left; padding: 5px 0; }
    table.pure-table td { vertical-align: middle; }
    .quantity { text-align: center; width: 60px !important; margin: 0 !important; }
    </style>