Detecting enabled app embed block in vintage themes

[Virtooal]

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?

[hrstrand]

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

[johnyjoe]

Have you guys figured this out?

[PaulNewton]

@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.

[hrstrand]

@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

}

[Vadzim]

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

[Dan_Sundy]

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]

@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]

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?

[johnyjoe]

https://shopify.dev/apps/online-store/theme-app-extensions/extensions-framework#detecting-app-blocks...