Choose options / Quick add not working - Origin Theme

[Rebecca07]

Hi Everyone

I've noticed the choose options/quick add button isn't working on my website, I have been making some coding changes today so not sure if it's something I've done, can anyone help please?

Website is: www.littlebearfeet.com 

Thanks in advance!

[Rebecca07]

Hi Ritu

Sorry! I've removed the password now 🙂

[tim]

I guess you've created a custom template for your products and use this one instead of the default one (or significantly modified your default one to use "featured product" section instead)?

What happens now is this -- when you click "choose option", the quick add code fetches product page and extracts a specific section from it -- the one with id starting with "MainProduct-".

Default product page includes this section, your product page does not, so the code fails.

There is a couple of ways to fix this -- one is to modify quick add code to recognize the "Featured product" section as well as default "Product Information"

This would require some JS knowledge and I am not sure it will work.

Another approach is to re-create default product page template as alternate template and then modify product card code to use this one for quick add.

Basically, in your card-product.lquid snippet there is this code:

<button
  id="{{ product_form_id }}-submit"
  type="submit"
  name="add"
  class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
  aria-haspopup="dialog"
  aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
  data-product-url="{{ card_product.url }}"
>
  ...
</button>
</modal-opener>

quick add Javascript code uses data-product-url attribute to store product page URL. 

So, if you will re-create default product page template as, say, product.original.json and then use the following data-product-url instead -- this should pretty much solve your problem.

  data-product-url="{{ card_product.url }}?view=original"

[Rebecca07]

Hi Tim,

Thank you very much! Can I just confirm where I need to add the 'data-product-url' coding? I tried at the bottom of the page and under the snippet code shown above and neither have worked unfortunately. 

Or I am I misunderstanding and missing a step?

[tim]

1. Re-create original default product template with name product.original.json

2. Ensure it works by trying URL like https://littlebearfeet.com/products/child-girl-slippers-autumn-and-winter-waterproof-non-slip-fluffy... (if something is missing, shopify will fall-back to your main template, so it must look different) 

3. open card-product.liquid  snippet,  find the <button> code mentioned above (in my copy of the them it starts at line 221)

4. modify data-product-url  attribute as show above.