Issues with Webflow Integration & Buy Button

[francesb65]

Hello all,

I've been working on a site for a client trying to incorporate ecommerce into his Webflow site. We chose Shopify because of its collections and great product management, but have run into a few issues while integrating it.

First, I am trying to add a buy button to the success page of a form to allow users to add to cart after completing an order form. Because the success page is initially set to display:none, the buy button embed code doesn't trigger in Chrome unless the page is resized, which is unusable. I almost fixed the issue by creating an on Page Load trigger, but it showed the success page on the form which messes up the user flow as well. Any known solution or workaround to this problem?

Second, I would like to create a cart button in the navigation that links to the sidecart pop-up. I tried adding the same class as the cart in the embed code, but it is not working so I wonder if I need to do any other steps. Thank you so much for reading!

[PaulNewton]

Hello, 

---

@francesb65 wrote:

almost fixed the issue by creating an on Page Load trigger, but it showed the success page on the form which messes up the user flow as well. 

---

How does the page work if no javascript is present; that's what you have to build first.

Just because a page loads isn't a reason a  "success" state should set on the frontend to be the sole source of truth , that's a recipe for more problems.

Typically such a thing should be done as the form submits by getting the response and dispatching a custom event.

If the page reloads then the returned page should have a flag/attribute/javascript-var or something set that works in tandem with a Page load event to actually indicate success if there's some reason the "success" should not display immediately.

As a patch try emitting the resize event yourself  

https://stackoverflow.com/questions/1818474/how-to-trigger-the-window-resize-event-in-javascript 

Or test for the visibilitychange event being listened for

https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event 

For custom carts go over the buy button js and make a reduced case first before having another platforms code possibly interfering.

https://shopify.github.io/buy-button-js/ 

[araskavakli]

Hi. We have developed a Shopify integration for Webflow called Shopyflow. It allows building much more advanced and customizable storefronts than Buy Botton does. Feel free to check our website and reach out if you have any questions.

Aras