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. also 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?
Also this is the code for product-form.js. maybe there's something That can be fixed.
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]');
}
}
);
}
Hey @Aryu26 ,
I’ve reviewed your code, and you can use the following code in the onSubmitHandler:
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 = '/cart'; // Redirect to cart page
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');
});
}
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regard,
Rajat Sharma
Bro its not working. i pasted it as u said
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 = "/cart"; // Redirect to cart page
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