Shopify Palo Alto Theme; Attempting to include an 'Add To Cart' in product-grid-item

Question

I know that Timber/Palo Alto is no longer supported but I am working on an old account that uses it and am not familiar with the theme.

I have been able to create a button that adds an item to a cart but after clicking add to cart it redirects to the cart page, I just want to add the item and allow the user to still browse the collection. Any suggestions will be helpful, Thank you in advance

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

This redirects to cart page, because that is how form action value is defined. So if you want to add it without page redirect and reload, use Shopify AJAX API that allows you manage CRUD operations on cart. Shopify AJAX API .

In the above scenario, you need to have a look at Add to Cart functionality.

Post Data

{
  quantity: 2,
  id: 794864229
}

Sample Code

// 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'
  }
});

Another approach that is a bit easy to implement is to use CartJS

So using data API, it would just be

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

Sample implementation on Timber Shopify theme

in theme.liquid after timber.js load CartJS

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

Then below that in the jQuery ready function, initialize CartJS

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

The add this code in product-grid-item.liquid

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

This is working on my test installation of Timber theme.