Shopify Пало-Альто Тема;Попытка добавить «Добавить в корзину» в product-grid-item - PullRequest
Новая
       25

Shopify Пало-Альто Тема;Попытка добавить «Добавить в корзину» в product-grid-item

0 голосов
/ 07 марта 2019

Я знаю, что 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);
};

1 Ответ

0 голосов
/ 07 марта 2019

Это перенаправляет на страницу корзины, потому что именно так определяется значение действия формы.Поэтому, если вы хотите добавить его без перенаправления и перезагрузки страницы, используйте Shopify AJAX 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 данных, это простоbe 

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

Пример реализации в теме Timber Shopify

в theme.liquid после timber.js загрузить CartJS 

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

Затем, ниже, в функции готовности jQuery, инициализируйте CartJS 

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

Добавьте этот код в product-grid-item.liquid 

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

Это работает над моей тестовой установкой темы Timber.

...