Prestige theme add to cart button ajax on collection page and home page grid

[AvidBrio]

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();
      }

[LitExtension]

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.

[AvidBrio]

@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..

[Rohit_Sethi]

<button type="submit" data-use-primary-button="{% if use_primary_button %}true{% else %}false{% endif %}" class="cstm_ad_to_cart Button {% if product.selected_or_first_available_variant.available and use_primary_button %}Button--primary{% else %}Button--secondary{% endif %} Button--full" var_id="{{product.selected_or_first_available_variant.id}}" {% if product.selected_or_first_available_variant.available %}data-action="add-to-cart"{% else %}disabled="disabled"{% endif %}></button>