Shopify Cart Bug. Two Items added to cart with one click when there is a previous item in cart.
Site: www.lit-escalates.com
Theme: Emerge
Shopify Cart Bug. Two Items added to cart with one click when there is a previous item in cart.
Site: www.lit-escalates.com
Theme: Emerge
@jphillips725 I can replicate that issue. I think there is some custom code with your add to cart script. On the first add to cart only one product added but after the first action two items added to the cart. Can you share me the add to cart code snippet here?
@andriihudimov Thanks! There doesnât seem to a specific âadd to cartâ liquid file in the snippets, but here is the full cart snippet:
{%- liquid
assign all_items_added_t = âcart.all_items_addedâ | t
assign checkout_t = âcart.checkoutâ | t
assign order_notes_t = âcart.order_notesâ | t
assign price_t = âcart.priceâ | t
assign quantity_t = âcart.quantityâ | t
assign subtotal_t = âcart.subtotalâ | t
assign total_t = âcart.totalâ | t
assign your_cart_t = âcart.your_cartâ | t
assign empty_html_t = âcart.empty_htmlâ | t: collections_url: routes.all_products_collection_url
if settings.cartâempty-enabled
assign empty_html_t = âcart.empty_with_list_htmlâ | t
endif
assign shipping_taxes_t = âcart.shipping_taxes_not_includedâ | t
if cart.taxes_included
assign shipping_taxes_t = âcart.shipping_taxes_includedâ | t
endif
assign empty_list = linklists[settings.cartâempty-list]
-%}
{%- capture cart_notes -%}
{%- if settings.cartâshow-note -%}
<div
class=âcartânotesâ
{% unless settings.transitionsâother or view != âdrawerâ %}
data-transition-item=âcart-{{ view }}â
{%- if async -%}
data-transition-active=âtrueâ
{%- endif -%}
{% endunless %}
>
<label for="{{ view }}-cart_note" class="cart--notes--heading">
{{- order_notes_t -}}
</label>
<textarea
class="cart--notes--textarea"
id="{{ view }}-cart_note"
name="note"
maxlength="25"
\>{{ cart.note }}</textarea>
</div>
{%- endif -%}
{%- endcapture -%}
{%- capture cart_summary -%}
<div class="cart--summary">
<div class="cart--totals">
{%- unless cart.cart_level_discount_applications == blank -%}
<ul class="cart--discounts">
{%- for discount_application in cart.cart_level_discount_applications -%}
<li class="cart--discount">
<div data-item="nav-text">{{ discount_application.title }}</div>
<span data-item="nav-text" data-text-color="gray">
â<span class="money">{{ discount_application.total_allocated_amount | money }}
</span>
</span>
</li>
{%- endfor -%}
</ul>
{%- endunless -%}
<div class="cart--total">
<div data-item="block-heading">
{{- subtotal_t -}}:
</div>
<div class="cart--total-price money" data-item="nav-text">
{{- cart.total_price | money_with_currency -}}
</div>
</div>
<div
class=âcartâtax-infoâ
data-item=âparagraphâ
>
{{- shipping_taxes_t -}}
</div>
</div>
<button
type=âsubmitâ
name=âcheckoutâ
class=âcartâcheckout-buttonâ
data-item=âbuttonâ
data-text=â{{- checkout_t -}}â
{% unless settings.transitionsâbuttons %}
data-transition-button
{% endunless %}
>
<span class="cart-button--text">
{{- checkout_t -}}
</span>
<span class="cart-button--spinner">
{%- render âiconsâ, icon: âspinnerâ -%}
</span>
</button>
</div>
{%- endcapture -%}
<cart-element
class=âcartârootâ
{% unless section.id == blank %}
data-section-id=â{{ section.id }}â
{% endunless %}
data-view=â{{ view }}â
data-container-width=â3â
{% unless settings.transitionsâother %}
data-transition-container=âcart-{{ view }}â
data-transition-type=âfade-inâ
data-transition-cascade=âverticalâ
data-transition-cascade-interval=â250â
{% endunless %}
>
<form
class=âcartâformâ
action=â{{ routes.cart_url }}â
method=âpostâ
novalidate=ââ
{%- if view == âdrawerâ -%}
data-drawer-scroll-container
{%- endif -%}
>
<div class="cart--wrapper">
<div class="cart--header">
<h2
class=âcartâtitleâ
data-item=âsection-headingâ
{% unless settings.transitionsâother %}
data-transition-item=âcart-{{ view }}â
data-transition-type=âslide-inâ
{% endunless %}
>
{{- your_cart_t -}}
</h2>
</div>
{%- unless settings.cartâshipping-limit == blank -%}
{%- liquid
assign free_shipping_limit = settings.cartâshipping-limit | times: 100.0
if cart.total_price >= free_shipping_limit
assign width = 100
assign message = settings.cartâshipping-after
else
assign width = cart.total_price | divided_by: free_shipping_limit | times: 100
assign remaining = free_shipping_limit | minus: cart.total_price | money
assign message = settings.cartâshipping-before | replace: â[$]â, remaining
endif
-%}
<div class="cart--shipping">
<div class="cart--shipping-message" data-item="paragraph">
{{- message -}}
</div>
<div
class=âcartâshipping-barâ
{% unless settings.transitionsâother %}
data-transition-item=âcart-{{ view }}â
data-transition-type=âcustomâ
{% endunless %}
style=ââprogress-percent:{{ width }}%;â
>
</div>
{%- endunless -%}
<div class="cart--body">
{%- if view == âdesktopâ -%}
<div class="cart--headings" data-item="nav-text">
<div class="cart--heading--image"></div>
<div class="cart--heading--title"></div>
<div class="cart--heading--price">
{{- price_t -}}
</div>
<div class="cart--heading--quantity">
{{- quantity_t -}}
</div>
<div class="cart--heading--total">
{{- total_t -}}
</div>
</div>
{%- endif -%}
{%- for item in cart.items -%}
{%- liquid
assign preview_image = item.variant.featured_media.preview_image | default: item.product.featured_media.preview_image
if item.product.has_only_default_variant
assign preview_image = item.product.media[0].preview_image
endif
-%}
{%- capture item_image -%}
<a class="cart--item--image" href="{{ item.url }}" aria-label="{{ item.product.title }}">
{%- if preview_image == blank -%}
{%- render âplaceholderâ, type: âproductâ, aspect_ratio: 1, placeholder_index: 1 -%}
{%- else -%}
{{-
preview_image |
image_url: width: preview_image.width |
image_tag: widths: â300, 500â, sizes: â250pxâ, loading: âlazyâ
-}}
{%- endif -%}
</a>
{%- endcapture -%}
{%- capture item_quantity -%}
{%- assign id = view | append: â-updates-â | append: item.key -%}
<div class="cart--item--quantity">
{%-
render âquantity-selectorâ,
id: id,
type: âcartâ,
value: item.quantity
-%}
</div>
{%- endcapture -%}
<div
class=âcartâitemâ
data-variant-id=â{{ item.variant_id }}â
data-management=â{{ item.variant.inventory_management }}â
data-policy=â{{ item.variant.inventory_policy }}â
data-quantity=â{{ item.variant.inventory_quantity | default: 0 }}â
data-line-num=â{{ forloop.index }}â
{% unless settings.transitionsâother %}
data-transition-item=âcart-{{ view }}â
{%- if async -%}
data-transition-active=âtrueâ
{%- endif -%}
{% endunless %}
>
{%- if view == âdesktopâ -%}
{{- item_image -}}
<div class="cart--item-details">
<div class="cart--item--title">
<div data-item="block-heading">
{{ item.product.title }}
</div>
{%- unless item.variant.title contains âDefaultâ -%}
<div class="cart--item--variant-name" data-item="nav-text">
{{ item.variant.title }}
</div>
{%- endunless -%}
{%- if item.selling_plan_allocation -%}
<div class="cart--item--selling-plan" data-item="small-text">
{{- item.selling_plan_allocation.selling_plan.name -}}
</div>
{%- endif -%}
{%- assign property_size = item.properties | size -%}
{%- if property_size > 0 -%}
{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{% comment %}
Apps often use '\_' in front of a property to hide in background
{% endcomment %}
{%- unless property.last == blank or property_first_char == â_â -%}
<br>
{{ property.first }}:
{% comment %}
Check if there was an uploaded file associated
{% endcomment %}
{%- if property.last contains â/uploads/â -%}
<a href="{{ property.last }}">
{{ property.last | split: â/â | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
{%- endif -%}
<div
class=âcartâerrorâ
data-item=âsmall-textâ
data-text-color=âalertâ
aria-hidden=âtrueâ
>
{{- all_items_added_t -}}
</div>
</div>
</div>
<div class="cart--item--price" data-item="nav-text">
{%- if item.original_price != item.final_price -%}
<div data-item="nav-text" data-text-color="gray">
{{ item.original_price | money }}
</div>
{%- endif -%}
<div class="money" data-item="nav-text">
{{- item.final_price | money -}}
</div>
{%- if item.unit_price_measurement -%}
<div class="cart--item--unit-price-container" data-item="small-text">
{%- liquid
echo item.unit_price | money | append: â/â
if item.unit_price_measurement.reference_value != 1
echo item.unit_price_measurement.reference_value
endif
echo item.unit_price_measurement.reference_unit
-%}
</div>
{%- endif -%}
{% if item.line_level_discount_allocations.size > 0 %}
<div class="money" data-item="nav-text" data-text-color="gray">
{%- for discount_allocation in item.line_level_discount_allocations -%}
{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
{%- endfor -%}
</div>
{% endif %}
</div>
{{- item_quantity -}}
<div class="cart--item--total" data-item="nav-text">
{%- if item.original_line_price != item.final_line_price -%}
<div data-item="nav-text" data-text-color="gray">
{{ item.original_line_price | money }}
</div>
{%- endif -%}
<div class="money">
{{- item.final_line_price | money -}}
</div>
</div>
{%- else -%}
<div class="cart--item--title">
<div data-item="block-heading">
{{ item.product.title }}
</div>
<div
class=âcartâerrorâ
data-item=âsmall-textâ
data-text-color=âalertâ
aria-hidden=âtrueâ
>
{{- all_items_added_t -}}
</div>
</div>
{{- item_image -}}
<div class="cart--item--info">
{%- unless item.variant.title contains âDefaultâ -%}
<div class="cart--item--variant-name" data-item="nav-text">
{{ item.variant.title }}
</div>
{%- endunless -%}
{%- if item.selling_plan_allocation -%}
<div class="cart--item--selling-plan" data-item="small-text">
{{- item.selling_plan_allocation.selling_plan.name -}}
</div>
{%- endif -%}
{%- assign property_size = item.properties | size -%}
{%- if property_size > 0 -%}
<div class="cart--item-properties">
{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- unless property.last == blank or property_first_char == â_â -%}
<br>
{{ property.first }}:
{% comment %} Check if there was an uploaded file associated {% endcomment %}
{%- if property.last contains â/uploads/â -%}
{{ property.last | split: â/â | last }}
{%- else -%}
{{ property.last }}
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
</div>
{%- endif -%}
<div class="cart--item--price">
{%- if item.original_price > item.final_price -%}
<div class="cart--item--orig-price" data-item="nav-text" data-text-color="gray">
{{ item.original_price | money }}
</div>
{%- endif -%}
<div class="cart--item--total money" data-item="nav-text">
{{- item.final_price | money -}}
</div>
{%- if item.unit_price_measurement -%}
<div class="cart--item--unit-price-container" data-item="small-text">
{%- liquid
echo item.unit_price | money | append: â/â
if item.unit_price_measurement.reference_value != 1
echo item.unit_price_measurement.reference_value
endif
echo item.unit_price_measurement.reference_unit
-%}
</div>
{%- endif -%}
{%- if item.line_level_discount_allocations.size > 0 -%}
<div class="cart--item--discounts" data-item="nav-text" data-text-color="gray">
{%- for discount_allocation in item.line_level_discount_allocations -%}
{{ discount_allocation.discount_application.title }}
(â<span class="money">{{ discount_allocation.amount | money }}</span>)
{%- endfor -%}
</div>
{%- endif -%}
</div>
{{- item_quantity -}}
</div>
{%- endif -%}
</div>
{%- endfor -%}
</div>
{%- if view == âdesktopâ -%}
<div
class=âcartâfooterâ
{% unless settings.transitionsâother %}
data-transition-item=âcart-{{ view }}â
{%- if async -%}
data-transition-active=âtrueâ
{%- endif -%}
{% endunless %}
>
{{- cart_notes -}}
{{- cart_summary -}}
</div>
{%- else -%}
{{- cart_notes -}}
{%- endif -%}
<div class="cart--empty" data-text-alignment="center">
<div class="cart--empty-text" data-item="paragraph">
{{- empty_html_t -}}
</div>
{%- if settings.cartâempty-enabled and empty_list.links.size > 0 -%}
<div class="cart--empty-list">
{%- for link in empty_list.links -%}
{%- comment %}locksmith:86c1{% endcomment -%}
{%- capture var %}{% render âlocksmith-variablesâ, scope: âsubjectâ, subject: link, subject_parent: empty_list, variable: âtransparentâ %}{% endcapture %}{% if var == âtrueâ %}{% else %}{% continue %}{% endif -%}
{%- comment %}</locksmith:86c1>{% endcomment -%}
<a class="cart--empty-link" href="{{ link.url }}" data-item="block-link">
{{- link.title -}}
</a>
{%- endfor -%}
</div>
{%- endif -%}
</div>
</div>
{%- liquid
unless view == âdesktopâ
echo cart_summary
endunless
-%}
</form>
</cart-element>
@jphillips725 I noticed that the cart.js request sent as setInterval on the first render. I attached the image and you can see on the Network of inspect. This means that there is multiple submit request when the add to cart event happened. I will check the code shortly and let you know.
Thank you! Please let me know what you find out
@jphillips725 I have checked it and this liquid seems good. The issue is comes from the JavaScript initialization logic. To aviod double request you can add this to the Javascript line.
if (this.initialized) return; this.initialized = true;
I think there is the custom JS that handle the add to cart fetch. Can you please share that custom JS code snippet? It should be specified with cartelement or addtocart.
This does look like a theme bug.
The theme seem to add product to cart with ajax, but does not prevent form submission if cart type is set to page.
The problem is in this line:
Check whether the problem persists with cart type set to drawer.
Reach out to theme support.
I guess most testing was done with drawer cart.
Also â your version is 8, the current theme version is 10 and this code is different â changed to handle this properly.