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>