I'm developing a simple Shopify app that adds some feature to the homepage of the shop, in the instructions page of the app I need to make a link to the theme editor, to do that I used app bridge redirect, but I need to get the id of the current active theme and I can't figure out how to do it inside my page code. It's my first time with Shopify world so any suggestion is well accepted! Here's the code, the getActiveThemeId now is empty
useEffect(() => {
const app = createApp(config);
const themeEditorButton = document.getElementById("theme-editor-button");
themeEditorButton.addEventListener("click", async () => {
const themeId = await getActiveThemeId();
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.ADMIN_PATH, {
path: "/themes/"+ themeId +"/editor",
newContext: false,
});
});
}, []);
edit: I was using the app template from Shopify dev (https://github.com/Shopify/shopify-app-template-node) it provides an hook useAppQuery to query the admin API, so I used that to get the "/api/theme/current". Hope this can help somebody with same problem:
const {
data: theme,
isLoading: isLoadingThemeData,
} = useAppQuery({
url: "/api/theme/current"
});
const goToThemeEditor = () =>{
const app = createApp(config);
const redirect = Redirect.create(app);
redirect.dispatch(
Redirect.Action.ADMIN_PATH,
`/themes/${isLoadingThemeData ? "-" : theme.id}/editor`
);
}
[...]
<button onClick={goToThemeEditor}>
{isLoadingThemeData ? "..." : "Edit Theme "+theme.name}
</button>