Problems, need help? Have a tip or advice? Post it here.
3 posts Page 1 of 1
Hey guys,

I'm trying to change the behavior of the add-to-cart button on the product page. By default once you click it - it takes you directly to the cart.php - is it possible to change this so that upon clicking the add to cart button we add items to the bag while remaining on the same product page with the dropdown underneath the Cart icon opened (the dropdown would show items in the bag and go to cart button)

Any suggestion is much appreciated! Thanks
Hi,
By default once you click it - it takes you directly to the cart.php

The sample (http://www.couchcms.com/demo/simple/index.php) by default, opens up a popup showing the cart - that is to say, the visitor still remains on the same product page.

If you wish to tweak that behavior, you may study the sample implementation - it uses AJAX and, I think, you should be able to modify it to suit your use-case.
I've recently implemented a custom AJAX mechanism for that, it uses default Couch Cart form and buttons classes (ofc MoudelCartForm, which is the frontend cart dropdown, is my example in the template and that name can differ).

Feel free to use it, if it helps:

Code: Select all
const view = {
    cart: {
        qtyDisplay: document.querySelector('#modcart-amount-display'),
        cartBtn: document.querySelector('#cart-toggle'),
        cartBody: document.querySelector('#cart-module-body'),
        closer: document.querySelector('#cart-module-closer'),
        refresh: document.querySelector('#refresh-overlay'),
        state: false
    }
};

/* product Cart form controls */
const addCartForm = document.querySelector('.cart-form');
const moduleCartForm = document.querySelector('#cart-module-form');

// add to cart - product page
if (addCartForm) {
    addCartForm.addEventListener('submit', ev => {
        ev.preventDefault();

        const form = ev.currentTarget;
        const actionUrl = $(form).attr('action');

        fetch(actionUrl, {
            method: 'POST',
            body: new FormData(addCartForm)
        })
        .then(res => {
            $(view.cart.refresh).show();
            return fetch(res.url)
        })
        .then(res => res.text())
        .then(res => {
            const fauxDoc = $parser.parseFromString(res, 'text/html');
            const fauxCart = fauxDoc.querySelector('#cart-module-body');
            const fauxQtyDisplay = fauxDoc.querySelector('#modcart-amount-display');

            view.cart.cartBody.innerHTML = fauxCart.innerHTML;
            view.cart.qtyDisplay.innerText = fauxQtyDisplay.innerText;

            initItemCounters(view.cart.cartBody);
            initItemDeleters();
            cartAutoUpdater();
           
            return true;
        })
        .then(status => {
            $('#main-qty').val(1)
            $(view.cart.refresh).hide();
            obj.state = true;
            $(view.cart.cartBtn).addClass('active');
            $(view.cart.cartBody).addClass('open');
            $(view.cart.closer).show();
        })
    });
};
3 posts Page 1 of 1