I have created a section where i have added a Add to cart below the products details. What i wanted is that once someone Clicks the add to cart it’s should open up the cart drawer but rightnow it’s opening up cart page which is not right.
My store Link: https://pritam7874.myshopify.com/ Password: 123
Here’s the code for the section:
{% comment %}
Featured Products Section
For Horizon Theme v3.2.1
Correctly implements ‘product-form-component’ with required refs.
{% endcomment %}
{% if section.settings.heading != blank %}
<h2 class="section-heading">{{ section.settings.heading }}</h2>
{% endif %}
<div class="product-grid">
{% for block in section.blocks %}
{% if block.settings.product != blank %}
{% assign product = block.settings.product %}
<div class="product-card" {{ block.shopify_attributes }}>
{% if block.settings.show_new_badge %}
<span class="new-badge">NEW</span>
{% endif %}
<div class="product-image">
{% if product.featured_image %}
<img
src="{{ product.featured_image | image_url: width: 400 }}"
alt="{{ product.featured_image.alt | escape }}"
width="400"
height="400"
loading="lazy"
>
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</div>
<div class="product-info">
<h3 class="product-title">
<a href="{{ product.url }}">{{ product.title }}</a>
</h3>
<div class="product-price">
{% if product.compare_at_price > product.price %}
<span class="price-compare">{{ product.compare_at_price | money }}</span>
{% endif %}
<span class="price">{{ product.price | money }}</span>
</div>
{% comment %}
Horizon Native Form Component
Required Refs: variantId, liveRegion
{% endcomment %}
<product-form-component>
<form action="{{ routes.cart_add_url }}" method="post" class="product-form" enctype="multipart/form-data">
<!-- COMPONENT REQUIREMENT 1: ref="variantId" -->
<input type="hidden" name="id" value="{{ product.variants.first.id }}" ref="variantId">
<input type="hidden" name="quantity" value="1">
<!-- COMPONENT REQUIREMENT 2: ref="liveRegion" -->
<div class="sr-only" ref="liveRegion" aria-live="polite"></div>
<!-- COMPONENT REQUIREMENT 3: ref="addToCartTextError" (Optional but recommended) -->
<div class="form-error-message-wrapper hidden" ref="addToCartTextError" role="alert"></div>
<add-to-cart-component
ref="addToCartButtonContainer"
data-product-variant-media="{{ product.featured_image | image_url: width: 100 }}"
>
<button
type="submit"
name="add"
ref="addToCartButton"
class="add-to-cart-btn button"
{% unless product.available %}disabled{% endunless %}
>
<span class="add-to-cart-text">
{% if product.available %}
Add to Cart
{% else %}
Sold Out
{% endif %}
</span>
</button>
</add-to-cart-component>
</form>
</product-form-component>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% schema %}
{
“name”: “Featured Products”,
“tag”: “section”,
“class”: “section”,
“settings”: [
{
"type": "text",
"id": "heading",
"label": "Section Heading",
"default": "Featured Products"
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
}
],
“blocks”: [
{
"type": "product",
"name": "Product",
"settings": \[
{
"type": "product",
"id": "product",
"label": "Select Product"
},
{
"type": "checkbox",
"id": "show_new_badge",
"label": "Show NEW Badge",
"default": true
}
\]
}
],
“presets”: [
{
"name": "Featured Products"
}
],
“max_blocks”: 8
}
{% endschema %}
