Shopify themes, liquid, logos, and UX
Hi everyone,
I need help in fixing an issue. When clicking on my "add to cart" button, I am immediately redirected to the checkout page. but I would like the customers to come to the cart page first so that I can upsell something to them there. how can I fix this issue? (I am not sure if I edited some code in the past to make this happen)
Even when I do the dynamic checkout button both buttons redirect to the checkout. So now I only have one button saying buy now.
If you are someone who understands code, then you just probably need to look for the js handling the click event on the add to cart button and this code
location.href = '/cart'
If you have any queries please reach out via mail for a convenient conversation
Thanks
Its a sense theme and the 2 files which I think so that handle click event are buy-buttons.liquid and cart-product.liquid. what to do now?
Got it. So inside product-form.js file look for this function onSubmitHandler, will be around line 20. Just before the closing bracket of this function which will be around line 102 if you havent added any code before add this: location.href='/cart';
This should direct user to cart page with add to cart featureworking as normal.
if (!customElements.get('product-form')) {
customElements.define(
'product-form',
class ProductForm extends HTMLElement {
constructor() {
super();
this.form = this.querySelector('form');
this.variantIdInput.disabled = false;
this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
this.cart = document.querySelector('cart-notification') || document.querySelector('cart-drawer');
this.submitButton = this.querySelector('[type="submit"]');
this.submitButtonText = this.submitButton.querySelector('span');
if (document.querySelector('cart-drawer')) this.submitButton.setAttribute('aria-haspopup', 'dialog');
this.hideErrors = this.dataset.hideErrors === 'true';
}
onSubmitHandler(evt) {
evt.preventDefault();
if (this.submitButton.getAttribute('aria-disabled') === 'true') return;
this.handleErrorMessage();
this.submitButton.setAttribute('aria-disabled', true);
this.submitButton.classList.add('loading');
this.querySelector('.loading__spinner').classList.remove('hidden');
const config = fetchConfig('javascript');
config.headers['X-Requested-With'] = 'XMLHttpRequest';
delete config.headers['Content-Type'];
const formData = new FormData(this.form);
if (this.cart) {
formData.append(
'sections',
this.cart.getSectionsToRender().map((section) => section.id)
);
formData.append('sections_url', window.location.pathname);
this.cart.setActiveElement(document.activeElement);
}
config.body = formData;
fetch(`${routes.cart_add_url}`, config)
.then((response) => response.json())
.then((response) => {
if (response.status) {
publish(PUB_SUB_EVENTS.cartError, {
source: 'product-form',
productVariantId: formData.get('id'),
errors: response.errors || response.description,
message: response.message,
});
this.handleErrorMessage(response.description);
const soldOutMessage = this.submitButton.querySelector('.sold-out-message');
if (!soldOutMessage) return;
this.submitButton.setAttribute('aria-disabled', true);
this.submitButtonText.classList.add('hidden');
soldOutMessage.classList.remove('hidden');
this.error = true;
return;
} else if (!this.cart) {
window.location.href = window.routes.cart_add_url;
return;
}
if (!this.error)
publish(PUB_SUB_EVENTS.cartUpdate, {
source: 'product-form',
productVariantId: formData.get('id'),
cartData: response,
});
this.error = false;
const quickAddModal = this.closest('quick-add-modal');
if (quickAddModal) {
document.body.addEventListener(
'modalClosed',
() => {
setTimeout(() => {
this.cart.renderContents(response);
});
},
{ once: true }
);
quickAddModal.hide(true);
} else {
this.cart.renderContents(response);
}
})
.catch((e) => {
console.error(e);
})
.finally(() => {
this.submitButton.classList.remove('loading');
if (this.cart && this.cart.classList.contains('is-empty')) this.cart.classList.remove('is-empty');
if (!this.error) this.submitButton.removeAttribute('aria-disabled');
this.querySelector('.loading__spinner').classList.add('hidden');
});
}
handleErrorMessage(errorMessage = false) {
if (this.hideErrors) return;
this.errorMessageWrapper =
this.errorMessageWrapper || this.querySelector('.product-form__error-message-wrapper');
if (!this.errorMessageWrapper) return;
this.errorMessage = this.errorMessage || this.errorMessageWrapper.querySelector('.product-form__error-message');
this.errorMessageWrapper.toggleAttribute('hidden', !errorMessage);
if (errorMessage) {
this.errorMessage.textContent = errorMessage;
}
}
toggleSubmitButton(disable = true, text) {
if (disable) {
this.submitButton.setAttribute('disabled', 'disabled');
if (text) this.submitButtonText.textContent = text;
} else {
this.submitButton.removeAttribute('disabled');
this.submitButtonText.textContent = window.variantStrings.addToCart;
}
}
get variantIdInput() {
return this.form.querySelector('[name=id]');
}
}
);
}
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025