Square Online Store broken in Chrome via iframe.

[MC_Frontalot]

Sorry, this is probably not the right board. Couldn't find a more appropriate one in the pulldown.

For a few years I've been running my Square shop as an iframe on my main site, to retain my site navigation along the top of the page.

It still works great in Firefox (Windows) and Edge, but in Chrome (Windows & Android) it has recently stopped functioning. When I try to add any item to the cart, the cart rolls out from the right side of the screen with the message "You don't have any items in your cart."

I tried support chat but they told me the store's not intended to be used this way and never will be.

I am hoping that's not true! If anyone knows a workaround for current Chrome, I'd be happy to hear it. And if the Square devs want to look into this, I'm sure I'm not the only one they'd be rescuing.

[thecozyjumper]

I am having this same issue as well. I am able to view the product page however am unable to add the items to the cart. It says there is nothing in the cart.

[isabelle]

Hey @thecozyjumper!

Welcome to the Seller Community 🍁

Would you mind providing a screenshot of what you're seeing? Is it perhaps timing out? 

Let me know, as I want to look into this further for both of you @MC_Frontalot. 

[thecozyjumper]

 Hi there! 
yes so attached is a screenshot from my phone. I am able to navigate to the item page, select the colour and when I click add to cart the image above pops up. 

so I’m not sure exactly what is happening but customers won’t be able to buy anything if they can’t be added to the cart haha

[isabelle]

This is what I'm seeing on my end @thecozyjumper:

[MC_Frontalot]

You can reproduce it yourself on my implementation: https://frontalot.com/store

Note that I've had to put a CURRENTLY BROKEN IN CHROME banner across the top because of this recent change in Square's store implementation.

Choose any item, attempt to add to cart. You get this:

[isabelle]

Hey @thecozyjumper!

Just to be clear here - is this only occurring in Chrome? 

Are you both only Square Online site users? Do you have any other integrations? 

Please let me know! 

[thecozyjumper]

Hi there,

I republished my website and tested this on my mac computer and windows computer and the same this happened. See the images below taken from my mac on chrome and then safari. Both chrome and safari are up to date on my computer.

 

I own the domain name with GoDaddy and have my square site linked to it via GoDaddy. Do you think this may have something to do with it?

http://thecozyjumper.com/ is my website if you want to take a look

 

[isabelle]

Thank you for doing that troubleshooting @thecozyjumper!

I reached out to the Square Online specialist on our Community Team, and the suggested you give us a call and request to have a ticket filed with our Engineering Team to look into this further.

I wish I could provide a solution on this platform, but this looks buggy to me and I believe that we need to take a look at your domain and site sync settings. 

Please let me know if you have any additional questions, and please feel free to follow up in this thread with whatever your findings are. Thank you for your patience! 🧦

[MC_Frontalot]

When I started this thread, my square store was broken only in Chrome. It is now broken in Edge also. This may be due to Edge switching so recently to Chromium under the hood.

My site still works fine in Firefox.

All my testing is under current Windows 10 and Android.

As per original post: the issue occurs when I call my square store ( frontalot.square.site ) through an iframe ( frontalot.com/store ). Accessing frontalot.square.site directly allows cart to behave normally.

I'm still hoping there is a workaround that will let me offer my square online store to customers as an iframe, which had previously worked fine for years on all browsers. The alternative of breaking them out of my site navigation and sending them away is not a very good option for me.

[Donnie-M]

@MC_Frontalot   @thecozyjumper If you are wanting to keep your site navigation at the top of the page why don't you use a sticky header?

on the site editor

Header -->  Customize --> Section Style --> Sticky header

This is what I do to keep the navigation at the top of a page.  With so many different browsers and especially on mobile the different versions of android make iframes really annoying for scroll bars at times in my opinion.

[nboyer]

Was a solution ever found for this problem?

We are also experiencing the same issue. Our site (https://my-site-106275-101859.square.site/s/shop) works when embedded in an iframe when viewed in the FireFox browser, but when viewed in Chrome the "add to cart" button breaks and the cart always stays empty.

[BernadetteA]

Thanks for reaching out, @nboyer and Welcome to the Seller Community 😊

Unfortunately, Square Online is not meant to be embedded using iFrame. Instead, I recommend using navigation links to connect the two websites. 

To create a navigation link from Square Online; log into the editor and click on the header section.

From the left side panel, click Navigation > Navigation Links then scroll down to the bottom for the option to add a new navigation link.

Select the external link option in the first drop down, then enter your website URL in the second field.

Hope this helps! 😊

[internetuser]

No this doesn't help.  This is counterintuitive and confusing for the customers.  Why are you guys unable to address the issue and fix the bug complaint.  I am having the same issue where shopping cart and the quick buy option is broken when using <iframe> or <object>  Please address accordingly or your customers (me and possibly others) will go somewhere else.   https://developers.google.com/search/blog/2020/01/get-ready-for-new-samesitenone-secure  This is not a solution that I know of yet but where I've been pointed in my searches.  If I get this up and running I will update.