Liquid, JavaScript, themes, sales channels
Hello,
Overview:
In mobile view, when adding Product one to the cart, it shows product two instead. This only happens in mobile view.
I noticed in the code, It shows the incorrect variant ID in mobile view and the correct in Desktop view. There are two <forms> in the code below
-----------
PRODUCT FORMS
{%- endcomment -%}
<div class="pt-[32px] lg:pt-[110px] mt-[32px] lg:mt-0 border-t border-black lg:border-0">
{% if forloop.first %}
{% for block in blocks %}
{% assign _data = block.settings %}
{% assign _product = all_products[_data.product] %}
{% assign _variant = _product.selected_or_first_available_variant %}
<div class="relative">
<form
{% unless forloop.first %}
class="hidden"
{% endunless %}
data-form
x-data="{
quantity: 1
}"
action="{{ routes.cart_add_url }}"
method="POST"
class="flex flex-col lg:block lg:max-w-[390px] mx-auto"
>
<input type="hidden" name="id" value="{{ _variant.id }}">
<p class="hidden lg:block text-[40px] tracking-tighter leading-none mb-[26px]">
{{ _product.price | money }}
</p>
<p class="hidden lg:flex items-center mb-[20px]">
{{ _variant.options[0] }}
<i class="w-[4px] h-[4px] bg-black rounded-full mx-[12px] inline-block"></i>
{{ _data.price_per_can }}
</p>
<p class="order-last lg:order-none p-s font-light opacity-70 pt-[24px] lg:pt-0 lg:pb-[24px] lg:mb-[24px] lg:border-b border-black">
{{ section.settings.preorder_note }}
</p>
<div class="flex items-center justify-between mb-[24px]">
<div class="inline-flex items-center border border-black">
<button
type="button"
class="p-[14px]"
@Click="quantity > 0 ? quantity-- : null"
:disabled="quantity == 1"
>
<span class="relative flex-shrink-0">
{% render 'svg--minus' %}
</span>
</button>
<input
class="text-center max-w-[44px] p-0 relative border-0 bg-transparent"
name="quantity"
type="number"
x-model="quantity"
/>
<button
type="button"
class="p-[14px]"
@Click="quantity++"
>
<span class="relative flex-shrink-0">
{% render 'svg--plus' %}
</span>
</button>
</div>
</div>
<button
class="btn block w-full group relative"
type="submit"
@Click.prevent="$store.cart.add([{ id: {{ _variant.id }}, quantity } ])"
>
<span class="group-hover:-translate-y-full group-hover:opacity-0 group-focus:-translate-y-full group-focus:opacity-0 transition duration-300 ease-out">
Add to cart
</span>
<i class="
absolute top-1/2 left-1/2 -translate-x-1/2 opacity-0
group-hover:-translate-y-1/2 group-hover:opacity-100 group-focus:-translate-y-1/2 group-focus:opacity-100 transition duration-300 ease-out
">
{% render 'svg--atc' %}
</i>
</button>
</form>
</div>
{% endfor %}
{% else %}
<div class="relative">
<form
data-form
x-data="{
quantity: 1
}"
action="{{ routes.cart_add_url }}"
method="POST"
class="flex flex-col lg:block lg:max-w-[390px] mx-auto"
>
<input type="hidden" name="id" value="{{ variant.id }}">
<span class="hidden lg:inline-block bg-black text-white rounded-[65px] leading-none caps text-[10px] mb-[16px] py-[6px] px-[12px]">
Pre Order
</span>
<p class="hidden lg:block text-[40px] tracking-tighter leading-none mb-[26px]">
{{ product.price | money }}
</p>
<p class="hidden lg:flex items-center mb-[20px]">
{{ variant.options[0] }}
<i class="w-[4px] h-[4px] bg-black rounded-full mx-[12px] inline-block"></i>
{{ data.price_per_can }}
</p>
<p class="order-last lg:order-none p-s font-light opacity-70 pt-[24px] lg:pt-0 lg:pb-[24px] lg:mb-[24px] lg:border-b border-black">
{{ section.settings.preorder_note }}
</p>
<div class="flex items-center justify-between mb-[24px]">
<div class="inline-flex items-center border border-black">
<button
type="button"
class="p-[14px]"
@Click="quantity > 0 ? quantity-- : null"
:disabled="quantity == 1"
>
<span class="relative flex-shrink-0">
{% render 'svg--minus' %}
</span>
</button>
<input
class="text-center max-w-[44px] p-0 relative border-0 bg-transparent"
name="quantity"
type="number"
x-model="quantity"
/>
<button
type="button"
class="p-[14px]"
@Click="quantity++"
>
<span class="relative flex-shrink-0">
{% render 'svg--plus' %}
</span>
</button>
</div>
<p
class="text-[22px] leading-none ml-[20px]"
x-text="$store.cart.format({{ product.price }} * quantity)"
>
{{ product.price | money }}
</p>
</div>
<button
class="btn block w-full group relative"
type="submit"
@Click.prevent="$store.cart.add([{ id: {{ _variant.id }}, quantity } ])"
>
<span class="group-hover:-translate-y-full group-hover:opacity-0 group-focus:-translate-y-full group-focus:opacity-0 transition duration-300 ease-out">
Add to cart
</span>
<i class="
absolute top-1/2 left-1/2 -translate-x-1/2 opacity-0
group-hover:-translate-y-1/2 group-hover:opacity-100 group-focus:-translate-y-1/2 group-focus:opacity-100 transition duration-300 ease-out
">
{% render 'svg--atc' %}
</i>
</button>
</form>
</div>
{% endif %}
</div>
</div>
------
Your help is appreciated.
Best,
Randy
Hi @Randyg,
Please send your site and if your site is password protected, please send me the password.
I will check it for you.
Hi LitExtention,
Please see the link below. Happens only for the strawberry in mobile view. Add a strawberry to the cart and it will be pineapple instead.
Thank you,
Randy
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024