Shopify Palo Alto主题； 试图在产品网格项中包含“添加到购物车”

Question

我知道Timber / Palo Alto不再受支持，但是我正在使用它的旧帐户工作，并且对该主题不熟悉。

我已经能够创建一个将商品添加到购物车的按钮，但是单击“添加到购物车”后，它将重定向到购物车页面，我只想添加商品并允许用户仍然浏览收藏夹。 任何建议都会有所帮助，提前谢谢

<!-- /snippets/product-grid-item.liquid -->

<form action="/cart/add" data-productid="{{product.id}}"  method="post" enctype="multipart/form-data" id="AddToCartForm--{{section.id}}"> 
  <div class = "variants-wrapper">
    {% if variants_count > 1 %}
      <select name="id" data-productid="{{product.id}}" id="productSelect--{{section.id}}" class="product-single__variants">
        {% for variant in product.variants %}
          {% if variant.available %}
            <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
          {% else %}
            <option disabled="disabled">
              {{ variant.title }} - {{ 'products.product.sold_out' | t }}
            </option>
          {% endif %}
        {% endfor %}
      </select>
    {% else %}
        <input name="id" data-productid="{{product.id}}" type="hidden" value="{{ product.variants[0].id }}">
    {% endif %}

    {% if sold_out %}
        <input type="hidden" type="text" id="Quantity1" name="quantity" value="0" min="0" class="quantity-selector quantity-input">
        <a class="btn" href="{{ product.url | within: collection }}">{{ 'products.product.view_item' | t }}</a>
    {% else %}

        <div class="qtydiv">
            <input type="text" id="Quantity1" name="quantity" value="1" min="1" class="quantity-selector quantity-input">
        </div>
        <button type="submit" name="add" id="AddToCart" class="btn" style="display: inline">
            <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
        </button>
    {% endif %}
  </div>
</form>

Ajax的cart.js.liquid

ShopifyAPI.addItemFromForm = function(form, callback, errorCallback) {
  var params = {
   type: 'POST',
   url: '/cart/add.js',
   data: jQuery(form).serialize(),
   dataType: 'json',
   success: function(line_item) {
    if ((typeof callback) === 'function') {
     callback(line_item, form);
    }
    else {
     ShopifyAPI.onItemAdded(line_item, form);
    }
  },
  error: function(XMLHttpRequest, textStatus) {
   if ((typeof errorCallback) === 'function') {
     errorCallback(XMLHttpRequest, textStatus);
   }
   else {
    ShopifyAPI.onError(XMLHttpRequest, textStatus);
   }
  }
 };
 jQuery.ajax(params);
};

Answer 1

这将重定向到购物车页面，因为这是定义表单操作值的方式。 因此，如果您要添加它而不进行页面重定向和重新加载，请使用Shopify AJAX API，该API允许您管理购物车上的CRUD操作。 Shopify AJAX API 。

在上述情况下，您需要查看“ 添加到购物车”功能。

发布数据

{
  quantity: 2,
  id: 794864229
}

样例代码

// Send a seralized form

jQuery.post('/cart/add.js', $('form[action="/cart/add"]').serialize());

// or construct post data

jQuery.post('/cart/add.js', {
  quantity: 1,
  id: 794864229,
  properties: {
    'First name': 'Caroline'
  }
});

另一个易于实现的方法是使用CartJS

因此，使用数据API，

<button data-cart-add="12345678">Add Product</button>

Timber Shopify主题的示例实现

timber.js加载CartJS后在theme.liquid中

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/shopify-cartjs/0.4.1/cart.min.js"></script>

然后在jQuery ready函数中的下面，初始化CartJS

CartJS.init({{ cart | json }}, {
    "dataAPI": true
});

在product-grid-item.liquid中添加此代码

<button data-cart-add="{{ product.variants.first.id }}">Add Product</button>

这正在我的Timber主题测试安装中进行。