CODEWITHSUNDEEP
node.jsbigcommerce
Andrey Ch
Andrey Ch

Reputation: 11

Bigcommerce - disable add to cart redirection

how "Add To Cart" looks on a Category page

The following code in "templates\components\products\card.html" leads customer to his Cart after he clicked on a "Add to Cart" button on chosen product on Category Page.

{{#if add_to_cart_url }}
  <a href="{{add_to_cart_url}}"
    class="button button--small 
    card-figcaption-button">
       {{lang 'products.add_to_cart'}}</a>
    {{/if}}

"{{add_to_cart_url}}" == http://mystore.com/cart.php?action=add&product_id=15865.

How to NOT redirect customer to his Cart? How to add item to a cart and stay on the same page?

For example on Product page, after customer add product, customer stays on the same page, and script opens modal confirmation window. 

        <!-- from templates\components\products\product-view.html -->

        <form class="form" method="post" action="{{product.cart_url}}" enctype="multipart/form-data"
        data-cart-item-add>
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="product_id" value="{{product.id}}"/>
    <div class="form-action">

      <input id="form-action-addToCart" 
data-wait-message=
"{{lang 'products.adding_to_cart'}}" 
class="button button--primary" type="submit"
 value="{{#if product.pre_order}}
{{lang 'products.pre_order'}}
{{else}}
{{lang 'products.add_to_cart'}}
{{/if}}">
</div>

This Product page code works based on this script: assets\js\bundle.js

 Product.prototype.addProductToCart = function addProductToCart(event, form) {
            var _this4 = this;

            var $addToCartBtn = (0, _jquery2.default)('#form-action-addToCart', (0, _jquery2.default)(event.target));
            var originalBtnVal = $addToCartBtn.val();
            var waitMessage = $addToCartBtn.data('waitMessage');

            // Do not do AJAX if browser doesn't support FormData
            if (window.FormData === undefined) {
                return;
            }

            // Prevent default
            event.preventDefault();

            $addToCartBtn.val(waitMessage).prop('disabled', true);

            // Add item to cart
            _stencilUtils2.default.api.cart.itemAdd(new FormData(form), function (err, response) {
                var errorMessage = err || response.data.error;

                $addToCartBtn.val(originalBtnVal).prop('disabled', false);

                // Guard statement
                if (errorMessage) {
                    // Strip the HTML from the error message
                    var tmp = document.createElement('DIV');
                    tmp.innerHTML = errorMessage;

                    alert(tmp.textContent || tmp.innerText);

                    return;
                }

                // Open preview modal and update content
                previewModal.open();

                _this4.updateCartContent(previewModal, response.data.cart_item.hash);
            });
        };

UPDATE: This is similar: Adding item to cart with BigCommerce Stencil

He was able to use utils.api.cart.itemAdd() I can't make it workable.

One of the hook examples in Stencil: https://stencil.bigcommerce.com/docs/hook-example-2-cart-dialog

  1. I need to add product to a cart from Category Page (templates\components\products\card.html)
  2. Prevent the page from redirecting.
  3. Update Cart content. All this does addProductToCart(event, form) function. How to use it?

Just prevent page from redirecting not enough, it gives issues with updating Cart Content and quantity.

Difference between adding products to a cart on card.html(category page) and product-view.html(product page) also in options and quantity. On card.html adding happens by link {{add_to_cart_url}}. On product-view.html it happens by form submitting and hook from addProductToCart(event, form).

Upvotes: 1

Views: 4452

Answers (1)

R.K.Bhardwaj
R.K.Bhardwaj

Reputation: 2192

So looking at the theme (Cornerstone Light), I can see that this isn't any kind of bug, it's just the way this theme is set within the theme files. I tested this on a default version of the theme on my test store and it also automatically redirects to the cart if you hit the add to cart level on the home, brand, or category pages. I checked the built-in theme editor to find that there isn't a way to turn that off and the only way to allow for that would be to have a developer edit your theme files so that the cart pop up page appears in the home, category, and brand pages, not just the product one as them set to.

Alternative 1: If you check the code of the file card.html there are two buttons one for quick view and one is add to cart, so we can make the behaviour of add to cart same like quick view so when user will click on the add to cart the pop up will come and then he can click to add to cart button and then continue shopping button as well. With the help of this, the user will not redirect to the checkout page. To achieve that just change the code on your card.html like below: 

{{#if add_to_cart_url }}
<a href="{{add_to_cart_url}}" class="button button--small card-figcaption-button">{{lang 'products.add_to_cart'}}</a>
{{/if}}

Replace above code with this one :

{{#unless hide_product_quick_view}}
     {{#if theme_settings.show_product_quick_view}}
        <a href="#" class="button button--small card-figcaption-button quickview" data-product-id="{{id}}">{{lang 'products.add_to_cart'}}</a>
    {{/if}}
 {{/unless}}

and the result of this like quick view like this: https://prnt.sc/hbl06f

Alternative 2: Got bigcommerce app marketplace and buy this app fly add to cart. https://www.themevale.com/bigcommerce-add-ons-ajax-add-to-cart-with-fly-effect-stencil-ready-now-available/

Thanks

Upvotes: -1

Related Questions