Variant Changes in Mobile View

[Randyg]

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

[LitExtension]

Hi @Randyg,

Please send your site and if your site is password protected, please send me the password.

I will check it for you.

[Randyg]

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.

https://www.drinksool.com/

Thank you,

Randy