Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Detecting enabled app embed block in vintage themes

Detecting enabled app embed block in vintage themes

Virtooal
Shopify Partner
5 0 9

I decided to not use ScriptTags for adding our app's components to vintage themes. However now I am facing the issue, that I can not verify if a theme has the app embed block enabled or not. 

Some themes (e.g. Supply) has a blocks property in the config/settings_data.json, where all the activated app embed blocks are listed. I first thought this is something that is common, but today I noticed that a lot of themes does not save this information in the settings_data.json

Is there any reliable solution for detecting if a theme has our app's embed block enabled?

Replies 9 (9)

hrstrand
Shopify Partner
19 2 16

I am facing a similar issue. I am replacing a small scripttag script with an app embed block that serves the same purpose. My app is using it to analyze page views, so nothing theme related is being done.

 

After app install, I need to redirect the user to the settings part of the theme, where the user needs to enable the app embed block AND click save. The question is how I can reliably detect that this was done?

 

Best would be an simple graphql request that gives me an exact answer. Is this possible?

 

Alternatively, I am thinking about loading the front page of the store in a fetch request on my server side, and see if I can detect a link to my app embed block - this would tell me if the user had in fact enabled it. This could be rather unreliable, at least with dev stores (pwd protected) or if the way Shopify adds the embed blocks suddenly change.

 

thanks,

Peter

Developer of Realtime View : https://apps.shopify.com/realtime-view
johnyjoe
Shopify Partner
10 0 1

Have you guys figured this out?

PaulNewton
Shopify Partner
7450 657 1565

@Virtooal , @hrstrand , @johnyjoe 

Untested spitballs for app-blocks If I can get time I'll try it with the sample review app to vet this and if works maybe push it as a branch /shrug.

Not clear if bubbling , or if block restrictions like not accessing section liquid objects , gets in the way of any of the below.

 

For one-way detection , ?regardless of deep linking? , try using request.design_mode and ping a unique server url with an enabled flag.

Of course if they nuke a section nothings getting sent out when that happens; unless some other liquid elsewhere in the theme is doing something hinky to detect a lack of something.

 

So maybe instead through the javascript events shopify:section:load &  shopify:section:unload  

 

If this is a path for the lifecycle probably watch out for ajax concurrency if a merchants doing stuff quickly which could cause a disabled to arrive before an enabled, giving you a flag of enabled while it's actually disabled.

#1 Merchant enables app > #2 merchant disables app =  truth is disabled in theme.

#1 Server gets disable app request > #2 Server gets enable app request =  false is enabled on server.

 

https://shopify.dev/themes/tools/online-editor#detecting-the-theme-editor

https://shopify.dev/themes/architecture/sections/integrate-sections-with-the-theme-editor 

 

Remember to avoid heavily changing theme appearance through usage of design mode detection to prevent merchant UX confusion with what they think shows to customers.

 

 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


hrstrand
Shopify Partner
19 2 16

@PaulNewton @Virtooal @johnyjoe 

 

I found a somewhat hacky solution for this.

On the server side, I do a fetch request of the front page of the shop. Currently, the app embed block javascript file has the name you provide in the app-embed.liquid file : 

 


{% schema %}
{
"name": "x",
"target": "body",
"javascript": "someuniquename.js",
"settings": []
}
{% endschema %}
 
So downloading the html of the shop frontpage and simply text-search for "someuniqename.js" will tell you if the app embed block is enabled. This works for password locked dev stores, too. It is hacky, because it relies on the fact that Shopify uses the name you provide, but as I see it, they could choose to call it something else.
 
My server-side Typescript function looks like this :
 
export async function isScriptEnabledForStore(shopurl:string, platform:string) : Promise<boolean>{
const lookfor = "realtimestack_"+platform
let result = false
await fetch(shopurl).then(async response=> {
await response.text().then(text => {
 
result = text.indexOf(lookfor)>0
});
});
return result
 
}
 
 
Developer of Realtime View : https://apps.shopify.com/realtime-view
Vadzim
Shopify Partner
67 2 9

Unfortunately, this will not work for password-protected stores.

Developer @ Mageworx | Explore our Shopify apps | Need theme customization or migration? Reach us at apps@mageworx.com
Dan_Sundy
Shopify Partner
31 0 4

Is it true that the settings_data.json file may not output the blocks property depending on the theme? I thought it was just generated from the settings_schema.json and if there were no blocks in there it meant that none have been enabled yet.

 

I was hoping that this work:

 

const hasEmbedEnabled = async (theme) => {
  /**
   * Get the settings_data.json file from the theme we want to check.
   */
  const settingsDataFile = await this.request.GET(
    `shopify_asset?shopify_theme_id=${theme.id}&asset_key=config/settings_data.json`
  )

  if (!settingsDataFile.data) return false

  const json = JSON.parse(settingsDataFile.data.value)

  /**
   * If there are no blocks, then it's not enabled, and the app is probably
   * not even installed (?).
   */
  if (!json.current.blocks) return false

  const typeSuffix = `/blocks/global_embed_block/${env.shopify_app_extension_uuid}`

  /**
   * This find method looks to see if the type value ends with the app embed
   * block name and extension UUID and also makes sure that the disabled value
   * is not set to true.
   */
  const embedBlock = Object.entries(json.current.blocks).find(([id, info]) => {
    return info.type.endsWith(typeSuffix) && !info.disabled
  })

  return !!embedBlock
}

 

Dan_Sundy
Shopify Partner
31 0 4

@Virtooalcan you give me an example of a theme where the settings_data.json approach doesn't work? (A free one would be great, if possible).

m20io
Shopify Partner
12 0 2

Form my testing i have not found any themes that don't add the app embeds to the settings_data.json.

Has anyone a counter example?