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]');
}
}
);
}
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024