Shopify Asynchronous Ajax Добавить в корзину - Работаете частично?

Question

Я создаю специальную страницу Shopify, где можно добавить несколько товаров в корзину с помощью Ajax API от Shopify.Я настроил тестовую версию страницы здесь: 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 товара в корзину одновременно.

Я действительно боролся с этим!Любой совет будет принят во внимание.Я могу предоставить больше информации, если это необходимо!

Answer 1

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

Answer 2

Это просто ... вы хотите, чтобы ваш прослушиватель щелчков просто повторял варианты без нуля и добавлял их в очередь.Так что вызовите push_to-queue.Не беспокойтесь с призывом двигаться дальше.Вместо этого, когда очередь полностью заполнена, вы вызываете «двигаться вперед».

Забавно, я изначально написал для этого псевдокод, и Caro из Shopify переписал его в эту версию, теперь уже почти десять лет общедоступную ... аккуратно.

Также кажется, что ваша концепция свойства базового цвета отключена?Он применяется ко всем вариантам.Зачем беспокоиться?Вместо этого установите его в качестве атрибута корзины, в котором продукт имеет базовый цвет, один раз.Более эффективным.Имеет больше смысла.