Ajax Cart Drawer

[Rostislav333]

I have a custom section on the main page with a product filter.The problem is that when I click on add to cart, I am redirected to the cart page, although the site settings indicate that the cart is Drawer and on the general product page it is added to the cart using Cart Drawer. I'm using the Dawn theme. How can I solve this problem?

document.addEventListener("DOMContentLoaded", () => {
  const buttons = document.querySelectorAll(".home-filter__buttons button");
  const productsContainer = document.querySelector(".home-filter__products");

  buttons.forEach((button) => {
    button.addEventListener("click", function () {
      buttons.forEach((btn) => {
        btn.classList.remove("active");
      });
      this.classList.add("active");

      const url = this.getAttribute("data-url");

      fetch(url, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((response) => {
          if (!response.ok) {
            throw new Error("Network response was not ok");
          }
          return response.text();
        })
        .then((data) => {
          const tempDiv = document.createElement("div");
          tempDiv.innerHTML = data;
          const productGrid = tempDiv.querySelector("#product-grid");
          productsContainer.innerHTML = "";
          productsContainer.appendChild(productGrid);
        })
        .catch((error) => console.log("Error:", error));
    });
  });
});

<div class="home-filter__wrapper">
  <div class="page-width">
    <div class="home-filter__content">
      <div class="home-filter__buttons">
        {% assign unique_tags = collections.all.products | map: 'tags' | join: ',' | split: ',' | uniq %}
        {% for tag in unique_tags %}
          <button
            data-url="/collections/all/{{ tag | handle }}"
            {% if forloop.first %}
              class="active"
            {% endif %}
          >
            {{ tag }}
          </button>
        {% endfor %}
      </div>

      <div class="home-filter__products"></div>
    </div>
  </div>
</div>

[eason_feng]

Hello, in the Dawn theme, the "Add to Cart" button is located in the main-product.liquid file.

Locate render 'buy-buttons'.

The location of buy-buttons is in snippets/buy-buttons.liquid.

Find the product-form component.

assets/product-form.js

Find the onSubmitHandler function.

cart_add_url = '/cart/add'

onSubmitHandler(){
...


 fetch(`${routes.cart_add_url}`, config)
   .then((response) => response.json())
    .then((response) => {
      // After the product is successfully added, call the following method to open the shopping cart popup.

 this.cart.renderContents(response)





  })

...


}

this.cart =
  document.querySelector('cart-notification') ||
  document.querySelector('cart-drawer');

Following the code above, you should be able to add products to the cart and open the cart drawer.

I hope my answer is helpful to you.