Add to Cart Button not Working

[Janloveslari]

I have added the Add to cart button on just below of each product right side the price, but its not working. 

I have mentioned the code below:

{% comment %}
Accepts:
- product: {Object} Product (required)
- show_variant_options: {Boolean} Show variant swatches at the bottom (optional)
- hide_title: {String} Hide product title (optional)
- image_ratio: {String} Product media ratio (optional)
- pcard_alignment: {String} Product alignment (optional)
- show_vendor: {Boolean} Show product vendor (optional)
- show_cart_button: {Boolean} Show Add to cart button (optional)
- show_quickview_button: {Boolean} Show Quickview button (optional)
- show_wishlist_button: {Boolean} Show Wishlist button (optional)
- show_compare_button: {Boolean} Show Compare button (optional)
- column_wrapper: {Boolean} Wrap product card (optional)

Usage:
{% render 'product-card-1', product: product %}
{% endcomment %}

{% liquid
if show_variant_options == nil
assign show_variant_options = settings.show_swatch_option
endif

assign show_title = true
if hide_title == true
assign show_title = false
endif

if image_ratio == nil or image_ratio == blank
assign image_ratio = settings.pcard_image_ratio | default: '1/1'
endif

if image_ratio == 'original'
assign image_ratio = product.featured_image.aspect_ratio | default: '1/1'
endif

if show_vendor == nil
assign show_vendor = settings.show_vendor
endif

assign sold_out = false
if product.available == false
assign sold_out = true
endif

assign discount = ''
assign compare_at_price = product.compare_at_price
assign price = product.price
assign on_sale = false
if compare_at_price > price
assign on_sale = true
assign discount = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price
endif

assign show_on_sale_badge = false
if settings.on_sale_badge != 'hide' and on_sale
assign show_on_sale_badge = true
endif

assign quick_add_text = 'products.product.quick_add' | t
assign quick_add_text = 'Quick View'

assign sold_number = product.metafields.foxkit.sold_number

if product.available
assign variant_id = product.first_available_variant.id
else
assign variant_id = product.selected_or_first_available_variant.id
endif
assign selected_variant_id = ''
if section.settings.change_product_variant_on_fitlering
assign variant_id = product.selected_or_first_available_variant.id
assign selected_variant_id = product.selected_variant.id
endif

if pcard_alignment == nil
assign pcard_alignment = settings.pcard_alignment
endif

assign pcard_default_image = settings.pcard_default_image
if image_ratio == nil or image_ratio == blank
assign image_ratio = settings.pcard_image_ratio | default: '1/1'
endif

if show_cart_button == nil
assign show_cart_button = settings.show_cart_button
endif

if show_quickview_button == nil
assign show_quickview_button = settings.show_quickview_button
endif

if show_wishlist_button == nil
assign show_wishlist_button = settings.show_wishlist_button
endif

if show_compare_button == nil
assign show_compare_button = settings.show_compare_button
endif

assign preview_image = product.media[0].preview_image
if section.settings.change_product_variant_on_fitlering == true and product.selected_variant.image != nil
assign preview_image = product.selected_variant.image
endif

if image_ratio == 'original'
assign image_ratio = product.media[0].aspect_ratio | default: '1/1'
endif

assign second_image = ''
if settings.show_second_img and product.images.size > 1 and product.images[1] != blank
assign second_image = product.images[1]
endif

assign product_card_classes = 'm-product-card m-product-card--style-1'
if sold_out
assign product_card_classes = product_card_classes | append: ' m-product-card--soldout'
endif
if on_sale
assign product_card_classes = product_card_classes | append: ' m-product-card--onsale'
endif
if settings.show_second_img and second_image != blank
assign product_card_classes = product_card_classes | append: ' m-product-card--show-second-img'
endif
%}

{%- if column_wrapper -%}<div class="m:column">{%- endif -%}
<div
class="{{ product_card_classes }}{% if animated %} m-scroll-trigger animate--{{ animation_effect }}{% endif %}"
data-view="card"
{% if sold_number != blank %}
data-sold-number="{{ sold_number }}"
{% endif %}
data-product-id="{{ product.id }}"
{% if animated %}
data-cascade
style="--animation-order: {{ index }};"
{% endif %}
>
<div class="m-product-card__media">
<a class="m-product-card__link m:block m:w-full" href="{{ product.url }}">
{% if preview_image != blank %}
<div class="m-product-card__main-image">
{%- liquid
assign asp_rat = image_ratio | default: preview_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = preview_image.aspect_ratio
endif
assign alt = alt | default: preview_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{ preview_image | image_url: width: 1100 | image_tag: loading: 'lazy', class: 'm:w-full m:h-full', alt: alt, sizes: sizes, widths: '165, 360, 535, 750, 940, 1100' }}
</responsive-image>
</div>

{%- if second_image != blank -%}
<div class="m-product-card__hover-image">
{%- liquid
assign asp_rat = image_ratio | default: second_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = second_image.aspect_ratio
endif
assign alt = alt | default: second_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{ second_image | image_url: width: 1100 | image_tag: loading: 'lazy', class: 'm:w-full m:h-full', alt: alt, sizes: sizes, widths: '165, 360, 535, 750, 940, 1100' }}
</responsive-image>
</div>
{%- endif -%}
{% else %}
{% if pcard_default_image != blank %}
{%- liquid
assign asp_rat = image_ratio | default: pcard_default_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = pcard_default_image.aspect_ratio
endif
assign alt = alt | default: pcard_default_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{ pcard_default_image | image_url: width: 1100 | image_tag: loading: 'lazy', class: 'm:w-full m:h-full', alt: alt, sizes: sizes, widths: '165, 360, 535, 750, 940, 1100' }}
</responsive-image>
{% else %}
<div style="--aspect-ratio: {{ image_ratio }}">
{{ 'product-1' | placeholder_svg_tag: 'm-placeholder-svg' }}
</div>
{% endif %}
{% endif %}
</a>
<div class="m-product-card__tags">
{% if settings.show_badge_sale %}
{% for tag in product.tags %}
{% if tag contains 'tag__' %}
{%- liquid
assign tag_content = tag | split: '__' | last
assign type = tag_content | split: '_' | first
assign tag_name = tag_content | split: '_' | last
-%}
<span class="m-product-card__tag-name m-product-tag m-product-tag--{{ type }}">{{ tag_name }}</span>
{% endif %}
{% endfor %}
{% endif %}
<span class="m-product-card__tag-name m-product-tag m-product-tag--preorder" data-foxkit-preorder-badge="{{ product.id }}"></span>
{% if show_on_sale_badge %}
{%- liquid
if settings.on_sale_badge == 'show_percentage'
assign sale_class = 'm-product-tag--discounted'
else
assign sale_class = 'm-product-tag--sale'
endif
-%}
<span class="m-product-card__tag-name m-product-tag {{ sale_class }}">
{%- if settings.on_sale_badge == 'show_text' -%}
{{ 'products.product.on_sale' | t }}
{%- elsif settings.on_sale_badge == 'show_percentage' -%}
{{ discount | append: '%' | prepend: '-' }}
{%- endif -%}
</span>
{% endif %}
</div>
{%- if settings.show_badge_soldout -%}
<span class="m-product-tag m-product-tag--soldout"{% unless sold_out %} style="display: none;"{% endunless %}>{{ 'products.product.sold_out' | t }}</span>
{%- endif -%}

{%- if show_quickview_button or show_wishlist_button or show_compare_button -%}
<div class="m-product-card__action m-product-card__action--top m:hidden md:m:flex">
{% liquid
assign tooltips = 'compare,quickview'
assign tooltip_items = tooltips | split: ','
%}

{%- if show_wishlist_button -%}
{% assign wishlist_app = settings.wishlist_app %}
{% if wishlist_app == 'growave' %}
<div class="m-tooltip m-wishlist-button m-button--icon m-tooltip--style-1 m-tooltip--left">
<span class="m-tooltip-icon m:block">
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% else %}
{% render 'mm-ssw-widget-faveicon' with product.id %}
{% endunless %}
</span>
<div class="m-tooltip__content " data-revert-text="">
{{ 'products.product.add_to_wishlist' | t }}
</div>
</div>
{% else %}
{% liquid
render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--left'
%}
{% endif %}
{%- endif -%}

{%- for tooltip in tooltip_items -%}
{%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
{%- if [settings_key] -%}
{% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'm-tooltip--left' %}
{%- endif -%}
{%- endfor -%}
</div>
{%- endif -%}

{% liquid
assign metafields_time = product.metafields.global['minimog_countdown']
if settings.show_countdown and metafields_time != blank
render 'countdown-timer', time: metafields_time, separator: false, short_label: true, extra_classes: 'm-product-card__countdown m:hidden'
endif
%}

{%- if sold_out == false -%}
<div class="m-product-card__action">
{% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section, button_style: 'white' %}
</div>
{% endif %}
</div>
<div class="m-product-card__content m:text-{{ pcard_alignment }}">
<div class="m-product-card__info">
{%- if show_vendor -%}
<span class="m-product-card__vendor">{{ product.vendor }}</span>
{%- endif -%}
{% if show_title == true %}
<h3 class="m-product-card__title">
<a href="{{ product.url }}" class="m-product-card__name{% if settings.uppercase_prd_name %} m:uppercase{% endif %}">
{{ product.title }}
</a>
</h3> <!-- Start of Judge.me code -->
<div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}' data-auto-install='false'>
{{ product.metafields.judgeme.badge }}
</div>
<!-- End of Judge.me code -->
{% endif %}
{% if settings.show_review_badge %}
<div class="m-product-card__reviews m:text-color-body">
{% render 'product-reviews-app__badge', product: product %}
</div>
{% endif %}
<div class="m-product-card__price m-flex">
{% render 'product-prices', product: product, is_product_card: true %}
{% if show_cart_button %}
<button type="button" class="m-add-to-cart-button" data-product-id="{{ product.id }}">Add to Cart</button>
{% endif %}
</div>

{% if product.has_only_default_variant == false and show_variant_options %}
{% render 'product-card-option', product: product, show_variant_options: show_variant_options, pcard_alignment: pcard_alignment %}
{% endif %}
</div>

<div class="m-product-card__content-footer">
<div class="m-product-card__description">
{{ product.description | strip_html | truncatewords: 15, '...' }}
</div>
<div class="m-product-card__action">
{% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section %}
<div class="m-product-card__action-icons">
{% liquid
assign tooltips = 'compare,quickview,'
assign tooltip_items = tooltips | split: ','

if show_cart_button
render 'tooltip', type: 'add-to-cart', section: section, product: product, class_name: 'm-tooltip--top m-product-card__atc-button'
endif
%}

{%- if show_wishlist_button -%}
{% assign wishlist_app = settings.wishlist_app %}
{% if wishlist_app == 'growave' %}
<div class="m-tooltip m-wishlist-button m-button--icon m-tooltip--style-1 m-tooltip--top">
<span class="m-tooltip-icon m:block">
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% else %}
{% render 'mm-ssw-widget-faveicon' with product.id %}
{% endunless %}
</span>
<div class="m-tooltip__content " data-revert-text="">
{{ 'products.product.add_to_wishlist' | t }}
</div>
</div>
{% else %}
{% liquid
render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--top'
%}
{% endif %}
{%- endif -%}

{%- for tooltip in tooltip_items -%}
{%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
{%- if [settings_key] -%}
{% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'm-tooltip--top' %}
{%- endif -%}
{%- endfor -%}
</div>
</div>
</div>
</div>
<input hidden name="id" required value="{{ variant_id }}" data-selected-variant="{{ selected_variant_id }}">
</div>
{%- if column_wrapper -%}</div>{%- endif -%}

[Bundler-Manuel]

Hello there @Janloveslari  what Shopify theme do you use? It is important in determining the solution here. For example, if you are using the Shopify dawn theme you can try out the process in the comment marked as a solution here https://community.shopify.com/c/technical-q-a/why-isn-t-my-add-to-cart-button-functioning/td-p/13450... 

[CoffeeAndCode]

Hi @Janloveslari,

What theme are you using? Is this a custom coded button that you added yourself? I've read that most themes already natively provide an "add to cart" button for collection pages these days, so it might be worth verifying whether this is the case with your current theme or not.

In the event that there is no such support in your theme, you would need to replace your button tag with something like this in order to submit to the /cart/add endpoint:

<form method="post" action="/cart/add">
  <input name="id" value="{{ product.variants.first.id }}" type="hidden" />
  <input name="add" class="m-add-to-cart-button" value="Add to Cart" type="submit" />
</form>

A few things to note:

1. You need to use a variant ID to add to the cart, not a product ID, so you'll notice the "id" value is changed in the above snippet.
2. This code will redirect to the shopping cart page when clicking the button and adding to the cart.
3. To replicate the existing behavior of staying on the current page and pulling out the cart drawer, you will have to look into what submit handler is attached to the other "add to cart" forms that are already included in your theme (eg: the button that's provided for the product page).

[Janloveslari]

Hi @CoffeeAndCode Thanks for the reply.

But i don't have any idea about the theme, i have outsourced this website for development.

and i replace the code but its not working

[CoffeeAndCode]

hmm, that's strange that it doesn't work for you. I tried it myself and it worked fine from Chrome devtools. It's a bit hard to troubleshoot any further without more context or access to the source code.

Are you seeing any error in the console when you click the button or anything? If you're on Chrome you can view the console by pressing CTRL, SHIFT, and J together and clicking on the "Console" tab to see any errors that might print in the area below the tab (screenshot attached).