Cart icon vanishes from the "Add to cart" button when selecting alternative product variation - DAWN

[Sindiso]

I aim to include the cart icon alongside the "Add to cart" button. I implemented the solution provided in this guide. This solution works correctly when the product page loads initially. However, when I choose a different product variation after the page has already loaded, the cart icon disappears from the "Add to cart" button. Does anyone know why this is happening? - below I have attached two screenshot demonstrating this.

Please help. Thanks in advance!

[dbuglab]

Hi @Sindiso 

Can you please provide your Store URL and Password too?

With Regards,
Dbuglab

[Sindiso]

Store link 

There is no password.

[dbuglab]

Hi @Sindiso 

While changing the variants button HTML changed

before

<button id="ProductSubmitButton-template--20151423074588__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary">
            <span><svg class="icon icon-cart" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
  <path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 00-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 004.99 5.34h7.38a5 5 0 004.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0020.5 6.5zm3.75 5.31v-.56a3.75 3.75 0 10-7.5 0v.56h7.5zm-7.5 1h7.5v.56a3.75 3.75 0 11-7.5 0v-.56zm-1 0v.56a4.75 4.75 0 109.5 0v-.56h2.22l.71 10.67a4 4 0 01-3.99 4.27h-7.38a4 4 0 01-4-4.27l.72-10.67h2.22z"></path>
</svg>
<p>Add to cart</p></span>
            <div class="loading-overlay__spinner hidden">
              <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
              </svg>
            </div>
          </button>

After

<button id="ProductSubmitButton-template--20151423074588__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary">
            <span>Add to cart</span>
            <div class="loading-overlay__spinner hidden">
              <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
              </svg>
            </div>
          </button>

Please check the on change function.

Thanks
Dbuglab 

[Sindiso]

Hi @dbuglab,

Uhm, where do I find this function? - also, any specific details I should be looking for?

Thanks,

Sindiso.

[dbuglab]

@Sindiso 

product-form.liquid
prodcut-card.liquid
product-price.liquid


Please check code in these files.

[Moeed]

Hey @Sindiso 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[Sindiso]

Store link

There is no password.

[zaczee]

HI,

We need to check your product.liquid code to fix the issue

[Sindiso]

Hi,

There is no file called product.liquid. There is card-product.liquid, main-product.liquid, featured-product.liquid, cart-notification-product.liquid. Which one exactly do you need to see?

Thanks,

Sindiso.

[Veluxe]

Ok, so we both had the exact same problem. @Sindiso If you're still alive and haven't quit Shopify yet, then I've got the solution. 

First, put the cart icon into it's own snippet folder (if it's not there already).  Go into code editor, open snippets, and if 'icon-cart' doesn't exist, just create it and do this:

<svg class="icon icon-cart" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
<path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 00-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 004.99 5.34h7.38a5 5 0 004.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0020.5 6.5zm3.75 5.31v-.56a3.75 3.75 0 10-7.5 0v.56h7.5zm-7.5 1h7.5v.56a3.75 3.75 0 11-7.5 0v-.56zm-1 0v.56a4.75 4.75 0 109.5 0v-.56h2.22l.71 10.67a4 4 0 01-3.99 4.27h-7.38a4 4 0 01-4-4.27l.72-10.67h2.22z"></path>
</svg>

Below is your own code. So now, instead of doing this:

<button id="ProductSubmitButton-template--20151423074588__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary">
<span>
<svg class="icon icon-cart" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
<path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 00-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 004.99 5.34h7.38a5 5 0 004.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0020.5 6.5zm3.75 5.31v-.56a3.75 3.75 0 10-7.5 0v.56h7.5zm-7.5 1h7.5v.56a3.75 3.75 0 11-7.5 0v-.56zm-1 0v.56a4.75 4.75 0 109.5 0v-.56h2.22l.71 10.67a4 4 0 01-3.99 4.27h-7.38a4 4 0 01-4-4.27l.72-10.67h2.22z"></path>
</svg>
<p>Add to cart</p>
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>

 You can do this:

<button id="ProductSubmitButton-template--20151423074588__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary">
<span>
{%- render 'icon-cart' -%}
Add to cart
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>

 Both have the exact same effect, but the second one is more efficient, as now you can use it in multiple instances, as I will later show you how to do.

From hereon we can expand: give both the text and the icon a class. *Yes, I removed <p>, because it was useless. If you wanna know why, go search it up.*

Change it from this:

<span>
{%- render 'icon-cart' -%}
Add to cart
</span>

To this:

<span class="product-form__submit--content">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

Now we can adjust the properties through CSS. You may have done this already, but since your button looks like this...You probably should make some adjustments🤷‍♀️ Anyways, you add this into section-main-product.css:

.icon-class__container {
width: 40px;
height: 40px;
}

.product-form__submit--content {
justify-content: center;
align-items: center;
display: flex;
}

And now, it should look something like this:

 The problem still remains though, and I have a solution. I'll proceed to break it down.

First, add another button beforehand like this:

<span class="product-form__submit--content icon-class__container">
{%- render 'icon-cart' -%}
</span>
<span class="product-form__submit--content">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

Adding the space in the middle for class="product-form__submit--content icon-class__container" combines the properties of both classes for the icon (whereas before it would just be one). If you have braincells and an eyeball, you would probably think that something's off. Because now, it looks like this:

And then, once you start selecting variants, now it looks like this:

You see, Shopify is very weird. It targets the first icon, but not the second. Even when it's invisible. I don't know why, but that's how it works.
So knowing this, you can now simply make the first one invisible. Like this: 

<span class="product-form__submit--content icon-class__container" style="visibility: hidden;">
{%- render 'icon-cart' -%}
</span>
<span class="product-form__submit--content">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

So now, it will permanently look wonky:

But remember, the cart-icon has a width of 40px. So all we need to do is to reverse that change, as it has pushed us 40px to the right. We do this by moving left.

<span class="product-form__submit--content icon-class__container" style="visibility: hidden;">
{%- render 'icon-cart' -%}
</span>
<span class="product-form__submit--content" style="margin-left: -40px;">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

Now, it should go back to permanantly looking like this. Hooray!