search

Shopify / theme-scripts

Theme Scripts is a collection of utility libraries which help theme developers with problems unique to Shopify Themes.
MIT License
515 stars 132 forks source link

Shopify Design Mode (Deprecated?) #67

Closed panoply closed 5 years ago

panoply commented 5 years ago

It seems that the window.Shopify.designMode boolean is deprecated – I've tested this with several stores and multiple browsers with an undefined result every time.

huguestennier commented 5 years ago

Hey @panoply - unable to replicate on my side and I verified and window.Shopify.designMode is not deprecated.

I added a quick test in my theme.js file like this : 

if (window.Shopify.designMode) {
  console.log('designMode working');
}

and you can see that it's working when i'm in the editor :

screen shot 2018-12-17 at 4 17 09 pm

More info on Shopify.designMode here

dan-gamble commented 5 years ago

FWIW @panoply you can't just open up dev tools and test it on the Top part you need to change it to your sites iframe to test like @huguestennier did.

panoply commented 5 years ago

Hey guys, getting undefined my end when using theme editor frame.

screenshot 2018-12-17 at 22 36 14
panoply commented 5 years ago

I managed to get this working, while I'm unsure of the actual cause as none of these aspects should of affected the Shopify window object my best guess it was a combination of things which caused the undefined result. I wasn't able to dissect the root cause but below is a list of possible candidates and steps I took which eventually resolved the issue. Hopefully this might help someone someday.

Cloudflare

The Shopify store domain is using cloudflare so as to take advantage of /cdn-cgi/trace endpoint for GeoIP functionality. Below are some key aspects which may have contributed to the issue which I modified which may have helped.

Proxy Client

I use a proxy client which ships with a bunch of default "security" settings and it was applying a sandbox attribute to not all but only some iFrames so logically I disabled these default "extra" settings. If anyone has a proxy client or third party application that has access to the browser DOM it is worth ensuring that it's not causing issues.

Browser Extensions

I am using uBlock in combination with Ghostery and while I never had any issues prior with these extensions or any extension affecting a website window object, disabling these before using the theme editor may have resolved the issue.

jonathanmoore commented 5 years ago

@panoply From all the theme support we provide to thousands of shops, CloudFlare 100% of the time causes problems with shops, especially in the theme editor. When we have a support email where the merchant is having issues with the editor one of the first things we check is if they're using CloudFlare.

panoply commented 5 years ago

@jonathanmoore tbh, I was leaning towards Cloudflare being the cause regarding this strange issue I encountered. I tested this with a bunch of stores all of which are using cloudflare and all returned the same undefined result which led me to believe that window.Shopify.designMode had been deprecated. I am now wondering if it may had been the proxy client considering Flems didn't work for me yesterday.

Moving forward I just hope to never encounter this issue again, it was extremely frustrating and kept me awake for far too long.

Arifursdev commented 1 year ago

running Shopify.designMode returns true when you run it inside the iframe on customizer where the actual rendered html is.