Shopify Asynchronous AJAX加入购物车部分工作吗？ [英] Shopify Asynchronous Ajax Add to Cart - Working Partially?

问题描述

我正在构建一个特殊的Shopify页面，其中可以通过Shopify的Ajax API将多个项目添加到购物车。我在这里设置了页面的测试版本：https://monstermuffin.com/pages/ajax-test

下面是我当前用来设置异步调用/添加到购物车的js代码：

  
  Shopify.queue = [];

  Shopify.moveAlong = function() {
    if (Shopify.queue.length) {
      var request = Shopify.queue.shift();
      Shopify.addItem(request.variantId, request.quantity, request.properties, Shopify.moveAlong);
    }
    else {
      //document.location.href = '/cart';
    }
  };

  Shopify.addItem = function(id, qty, properties, callback) {
    var params = {
      quantity: qty,
      id: id, 
      properties: properties
    };
    $.ajax({
      type: 'POST',
      url: '/cart/add.js',
      dataType: 'json',
      data: params,
      success: function(){
        if(typeof callback === 'function'){
          callback();
        }
      },
      error: function(){
      }
    });
  }

  function push_to_queue(variantID, quantity, properties,callback) {
    Shopify.queue.push({
      variantId: variantID,
      quantity: quantity,
      properties: properties
    });

    if(typeof callback === 'function'){
      callback();
    }
  }
  
  $('#add-helmet-panties').click(function() {
    $('.quantity-field:visible').each(function() {
      
      var thisVariant = $(this).prop('id');
      var thisQuantity = parseInt($(this).val(), 10) || 0;
      var theseProps = {
        'Base Colour': $('#base-colour').val()
      }

      push_to_queue(thisVariant, thisQuantity, theseProps, Shopify.moveAlong);
      
    });
  });

奇怪的是，它目前一次只向购物车添加3到4种产品。

我真的为此而苦苦挣扎！任何建议都将不胜感激。如果需要，我可以提供更多信息！

推荐答案

var length = {{ product.variants.size }};

  $(document).ready(function () {
    $("#quantity-0").focus();    
    $("#submit-table").click(function(e) {     
      e.preventDefault();
      //array for Variant Titles
      var toAdd = new Array();
      var qty ;
      for(i=0; i < length; i++){

        toAdd.push({
          variant_id: $("#variant-"+i).val(),        
          quantity_id: $("#quantity-"+i).val() || 0
        });
      }
      function moveAlong(){
        if (toAdd.length) {
          var request = toAdd.shift();
          var tempId= request.variant_id;
          var tempQty = request.quantity_id;
          var params = {
            type: 'POST',
            url: '/cart/add.js',
            data: 'quantity='+tempQty+'&id='+tempId,
            dataType: 'json',
            success: function(line_item) { 
              alert("Product Added to Cart");
              moveAlong();

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="page-width"> 
    <table>
      <tr>
        <th>Name</th>
        <th>Quantity</th>
        <th>Stock</th>
      </tr>
      {% for variant in product.variants %}
      <tr>
        <td>{{ variant.title }} - {{ variant.price | money }}</td>
        <td>
          <input type="hidden"  value="{{ variant.id }}" id="variant-{{ forloop.index0 }}"/>
          <input  type="number" value="0" id="quantity-{{ forloop.index0 }}"/>
        </td>
        <td>{{ variant.inventory_quantity  }} in stock.</td>
      </tr>
      {% endfor %}
    </table>


    <div class="purchase-section{% if product.variants.size > 1 %} multiple{% endif %}">
      <div class="purchase">
        {% unless product.available %}
        <p>Sold Out</p>
        {% else %}
        <br />
        <input type="submit" value="Add!" class="btn" id="submit-table"/>

        {% endunless %}<input type="reset" class="btn" value="Reset">
      </div>   
    </div>
  </form>
</div>
<script type="text/javascript" charset="utf-8">
  //<![CDATA[
  // Including jQuery conditionally.
  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>

这篇关于Shopify Asynchronous AJAX加入购物车部分工作吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！