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.