Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
How to use the Prestige theme add to cart button ajax on the collection page and home page product item list?
<button type="submit" class="ProductForm__AddToCart Button {% if selected_variant.available and section.settings.show_payment_button == false %}Button--primary{% else %}Button--secondary{% endif %} Button--full" {% if selected_variant.available %}data-action="add-to-cart"{% else %}disabled="disabled"{% endif %}>
{%- if selected_variant.available -%}
{% if section.settings.add_cart_image %}
<!-- <div class="cart-img"><img src="{{ section.settings.add_cart_image | img_url: '28x28' }}" class="cart-img-display"/>
<img src="{{ section.settings.add_cart_image_hover | img_url: '28x28' }}" class="cart-img-hover" /></div> -->
<div class="cart-text">
<span>{% if product.template_suffix == 'pre-order' %}{{ 'product.form.pre_order' | t }}
{% else %}
{{ 'product.form.add_to_cart' | t }}{% endif %}</span></div>
{%- endif -%}
{%- if section.settings.show_price_in_button -%}
<span class="Button__SeparatorDot"></span>
<span>{{ selected_variant.price | money_without_trailing_zeros }}</span>
{%- endif -%}
{%- else -%}
<!-- <div class="cart-img"><img src="{{ section.settings.add_cart_image | img_url: '28x28' }}" /></div> -->
{{- 'product.form.sold_out' | t -}}
{%- endif -%}
</button>
Theme js for add to cart code
key: '_addToCart',
value: function _addToCart(event) {
var _this7 = this;
if (!this.options['useAjaxCart']) {
console.log("goes to cart page")
return; // When using a cart type of page, we just simply redirect to the cart page
}
event.preventDefault(); // Prevent form to be submitted
var addToCartButton = this.element.querySelector('.ProductForm__AddToCart');
console.log("addToCartButton")
// First, we switch the status of the button
addToCartButton.setAttribute('disabled', 'disabled');
document.dispatchEvent(new CustomEvent('theme:loading:start'));
// Then we add the product in Ajax
var formElement = this.element.querySelector('form[action*="/cart/add"]');
fetch(window.routes.cartAddUrl + '.js', {
body: JSON.stringify(__WEBPACK_IMPORTED_MODULE_2__helper_Form__["default"].serialize(formElement)),
credentials: 'same-origin',
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest' // This is needed as currently there is a bug in Shopify that assumes this header
}
}).then(function (response) {
document.dispatchEvent(new CustomEvent('theme:loading:end'));
if (response.ok) {
addToCartButton.removeAttribute('disabled');
// We simply trigger an event so the mini-cart can re-render
_this7.element.dispatchEvent(new CustomEvent('product:added', {
bubbles: true,
detail: {
variant: _this7.currentVariant,
quantity: parseInt(formElement.querySelector('[name="quantity"]').value)
}
}));
} else {
response.json().then(function (content) {
var errorMessageElement = document.createElement('span');
errorMessageElement.className = 'ProductForm__Error Alert Alert--error';
errorMessageElement.innerHTML = content['description'];
addToCartButton.removeAttribute('disabled');
addToCartButton.insertAdjacentElement('afterend', errorMessageElement);
setTimeout(function () {
errorMessageElement.remove();
}, 2500);
});
}
});
event.preventDefault();
}
Hi @AvidBrio,
I checked and ajax cart only support product page, when you add code anywhere else it wont work. It's bundled by the theme and you can't edit it. https://i.imgur.com/AVM2OXc.png
So if you want ajax cart at item products you can just contact theme support or hire an expert.
Because it is a complex request and it is difficult for anyone to guide you in detail. You can post on the group, there will be many experts to help you: https://community.shopify.com/c/Jobs-and-Careers/bd-p/shopify-job-board
Hope it helps!
If my answer can help you solve your issue, please kindly mark it as a solution. Thank you and good luck.
@LitExtension thanks for your answer. community people also are the tech so don't pre assume that. if have the solution you can be posted into community it help other toos..
User | RANK |
---|---|
44 | |
42 | |
23 | |
20 | |
13 |