Spin Gallery works but it Automatically adds item to cart?

David Ditzler

February 06, 2021 19:19 Edited

I am using Pressero as my website and I successfully added a spin gallery but after you lift your mouse button from interacting with the spin gallery it automatically adds the product to the cart and you leave the page. Is there some way to isolate the spin gallery from the add to card functionality on my page?

Here is the public page

https://www.sunrisehitek.com/product/pr-Influencer-box-matte-finish-demo

Obviously this is not the customer experience I wanted.

thank you

-david

 

 

 

0

• 

  Raz Ziv

  February 08, 2021 12:13

  Hey David,

  I visited the page that you've shared in your message but couldn't find the 360 spin implementation of the product gallery widget. Am I missing anything or have you removed it already? In case it's the latter, is there a page on a sandbox environment where I can still see the implementation?
  If you prefer sharing it or continue the conversation in a private channel, please open a direct support ticket at support@clouidnary.com or via https://support.cloudinary.com/hc/en-us/requests/new.
  
  Best,
  Raz

  0
• 

  David Ditzler

  February 08, 2021 18:07

  Try loading the page again. It wasn't showing up before.

  https://www.sunrisehitek.com/product/pr-Influencer-box-matte-finish-demo

  Thanks

  -david

   

  0
• 

  Erwin Lukas

  February 09, 2021 00:33

  Hi David,

  Is it possible to share a snippet of the code or have reproducible code in JSFiddle (or something similar) for us to take a look at it?

  From a quick look at it, the product gallery widget is inside your form, and I'm guessing, when it's onmouseup event, it got propagated to your form. One recommendation is to have e.preventDefault() to prevent the event from bubbling up.

  Hope this makes sense. Let me know if you have any question.

  I'll also share this info to the ticket you created

  Cheers,
  Erwin Lukas

  0
• 

  David Ditzler

  February 09, 2021 14:48

  I embedded the code via JSFiddle

  https://jsfiddle.net/dditzlerSunrise/nd70zbw9/1/#&togetherjs=38bgOnuGtb

  Does the e.preventDefault() go in your product gallery widget or in the add to cart code?

  
  Thanks
  -david

  0
• 

  Erwin Lukas

  February 09, 2021 20:29

  Hi David,

  Thanks for the JSFiddle. And checking from your original link, I assume you are not planning to embed JSFiddle permanently, correct?

  The  e.preventDefault() needs to go to the product gallery widget. Can you try adding the following after the widget is initiated?

  document.getElementById("matte_finish_open").addEventListener("click", (e) => e.preventDefault());

  Let me know if this works.

  Cheers,
  Erwin Lukas

  0

Post is closed for comments.