Order form on Product page

Shopify Partner
64 0 4

Hi, I want all the variants listed in a order form on every page thatcustomers can just fill out the quanitity fields and add to cart. However, it seems the Java/jQuery is getting confused. Can someone help me out? Here's my code:

<span>
{% if customer %}    
{{ 'http://yui.yahooapis.com/pure/0.4.2/tables-min.css' | stylesheet_tag }}
<table class="pure-table pure-table-bordered">
  <tbody>
      {% for variant in product.variants %}
        {% if variant.available %}
         <tr class="{% cycle 'pure-table-odd', '' %}">
          <td><center>
              <img src="{{ variant.featured_image | product_img_url: 'thumb' }}" alt="{{ product.featured_image.src | escape }}" />
            </center>
          </td>
          <td>
             {{ product.title }}{% unless variant.title contains 'Default' %} - {{ variant.title }}{% endunless %}{% unless variant.sku == '' %} - {{ variant.sku }}{% endunless %}
          </td>
          <td>
             {% if variant.price == 0 %}{% else %}{{ variant.price | money }}{% endif %}
          </td>
          <td style="text-align:center;">
            {% if variant.price == 0 %}
            	{% include 'price-request' %}
             {% else %}
            	<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 = line_item.inventory_quantity %}{% for item in cart.items %}{% if item.id == line_item.id %}{% assign max = max | minus: item.quantity %}{% endif %}{% endfor %} max="{{ max }}" {% endunless %} type="text" value="0" tabindex="1" />
            {% endif %}
          </td>
        </tr>
        {% endif %}
      {% endfor %}
  </tbody>
</table>
 				<input type="submit" id="add-to-cart-order-form" class="btn addtocart" name="add" value="Add to Cart" />
				<div id="cart-animation" style="display:none">1</div>
{% else %}
<p>There are no products in this view.</p>
{% endif %}

And here is the Script on the bottom:

<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>

This is all besides the regular code for the Product page.

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
298 0 156

Hey there,

While I can't help out with your code and parsing it myself, we do have a couple other options:

Looking at the first link might give you some insight into how our team might set this up and shed some light on your own code. :)

0 Likes