A space to discuss online store customization, theme development, and Liquid templating.
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?
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
Have you guys figured this out?
@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
@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 :
Unfortunately, this will not work for password-protected stores.
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
}
@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).
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?