Issue with Ajax on quick order form

Kim_Davis1
Shopify Partner
8 0 0

UPDATE:  I was able to solve this issue.  I changed it to creating an array of input boxes that were changed, and then running through that array when the user presses submit.  I think the issue before was that the system wasn't given enough time to process all of the items being added to the cart.

I have set up a quick order form with text boxes for the quantity of each variant.  I have it almost all working, but for some reason it is only sending some of the selected products to the shopping cart.  It typically sends the first two, but has trouble with anything after two (though, sometimes it will send 3).  When sending more than two, it typically will just refresh the quick order form page, and adds a number of "quantity=0&quantity=1&quantity=0&quantity=0&quantity=0&quantity=0"'s to the end of the URL

The way I have it set is that, as the user enters a value into the textboxes, it pushes it to the to the Shopify.queue array.  When the user presses "Add to Cart", it then sends the content of that array to the shopping cart.  This is adapted from a tutorial I found in which, after the user pressed "Add to Cart", it ran through each textbox and pushed the values to the array, and then sent it.  It was working fully, when set up the original way.  I adapted it because that took a very long time to run (as we have around 100 textboxes it had to run through).  So, I would like to get the adaptation to work instead of going back to the original.

Here is my code:

<div class="section-header text-center">
    <h3 class="section-header--title">Products</h3>
</div>

<!-- Table for product order form -->
<table id="grid">
  
  <!-- Table Headers -->
  <tr>
    <th>Size</th>
    <th>Product Description</th>
    <th>No Fragrance</th>
    <th>Citrus Lavender</th>
    <th>Island Fantasy</th>
    <th>Unit Total</th>
    <th>Price Each</th>
    <th>Sub Total</th>
  </tr>
  
  <!-- Quick Order Form -->
  <form>
    
    {% assign counter = 0 %}
    
    {% for product in collections['all'].products %}
    
      {% assign outer_forloop = forloop %}
      {% assign current_variant = product.selected_or_first_available_variant %}

      <!-- Size Column -->	
      <tr class="row">
        <td id="size">
          {% if current_variant.sku contains "2" %}
          2 oz.
          {% endif %}
          {% if current_variant.sku contains "3" %}
          8 oz.
          {% endif %}
          {% if current_variant.sku contains "4" %}
          32 oz.
          {% endif %}
          {% if current_variant.sku contains "5" %}
          1 gal.
          {% endif %}
        </td>

        <!-- Title Column -->
        <td id="product">
          {{ product.title }}
        </td>
	
        <!-- Product Variants Qty Textboxes -->
        {% for variant in product.variants %}
        
          {% assign counter = counter | plus: 1 %}
        
          {% if variant.title contains "No Fragrance" %} 
            <td class="quantity" class="input">
              <input type="hidden" value="{{ variant.id }}" id="variant-{{ counter }}"/>
              <input type="number" id="quantity-{{ counter }}" name="quantity" value="0" min="0">
            </td>
          {% endif %}

          {% if variant.title contains "Citrus Lavender" %} 
            <td class="quantity" class="input">
              <input type="hidden" value="{{ variant.id }}" id="variant-{{ counter }}"/>
              <input type="number" id="quantity-{{ counter }}" name="quantity" value="0" min="0">
            </td>
          {% endif %}

          {% if variant.title contains "Island Fantasy" %} 
            <td class="quantity" class="input">
              <input type="hidden" value="{{ variant.id }}" id="variant-{{ counter }}"/>
              <input type="number" id="quantity-{{ counter }}" name="quantity" value="0" min="0">
            </td>
          {% endif %}
        
      	{% endfor %}

      <!-- Total Qty -->
      <td id="unit">0</td>

      <!-- Price Per Item -->
      <td id="price">
        {{ product.price | money }} 
      </td>

      <!-- Total Price -->
      <td id="subtotal">0</td>

    </tr>

    {% endfor %}

    <!-- Product and Price Total -->
    <tr>
      <td id="product_total">
      	Product Total: <label id="product_total_amount">0</label> 
      </td>
    </tr>
    <tr>
      <td id="order_total">
      	Order Total: <label id="order_total_amount">0</label> 
      </td>
    </tr>
    
    <tr><td>
    	<input type="submit" value="Add to Cart" class="btn" id="submit-table" />
    </td></tr>
  </form>
</table>

<!-- 
  -- Script for handling Ajax/JSON Add to Cart
  -- Taken and adapted from tetchi blog js for link list | https://gist.githubusercontent.com/Tetsuro/2932935/raw/568ccb0574f46eb450e298ab2ccb800e673d8fa2/jque...
  -- Adapted for not using linked lists, and for handling the submission quicker.
-->

<script type="text/javascript" charset="utf-8">
//<![CDATA[
// Including jQuery conditionnally.
if (typeof jQuery === 'undefined') {
    document.write({{ "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" | script_tag | json }});
	document.write('<script type="text/javascript">jQuery.noConflict();<\/script>');
}
//]]>
</script>

<script>
var length = {{ counter }};

$(document).ready(function () {
$("#quantity-0").focus();    
  Shopify.queue = [];
  $("input[type=number]").on("input", function() {  
    
    var new_item = true;
    var variant = $(this).parent().children("input[type=hidden]").val();        
    var quantity = $(this).val();
    
    if(Shopify.queue.length <= 0) {
      Shopify.queue.push({
        variantId: variant,       
        quantity: quantity
      });
    }
    
    else if (Shopify.queue.length > 0) {
      for (var key in Shopify.queue) {
       if(parseInt(Shopify.queue[key].variantId) == variant) {
         console.log(Shopify.queue[key]["variantId"]);
         Shopify.queue[key].quantity = quantity;
         new_item = false;
         return false;
       } 
     }
     if(new_item == true) {
       Shopify.queue.push({
          variantId: variant,       
          quantity: quantity
       });
     }
    }
    console.log(Shopify.queue);
  });
                             
  $("#submit-table").click(function(e) {
    Shopify.moveAlong = function() {
      if(Shopify.queue.length) {
    	var request = Shopify.queue.shift();
		var tempId= request.variantId;
		var tempQty = request.quantity;

        var params = {
          type: 'POST',
          url: '/cart/add',
          data: 'quantity='+tempQty+'&id='+tempId,
          dataType: 'json',
          success: function(line_item) { 
            //console.log("success!");
             Shopify.moveAlong();

          },
          error: function() {
            //console.log("fail");
            Shopify.moveAlong();

          }
        };
        $.ajax(params);
      }
      else {				
        document.location.href = '/cart';
      }  
    };
    Shopify.moveAlong();
  });
});

</script>

 

0 Likes