Redirect to theme editor from an app page in Shopify

199 Views Asked by At

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>
0

There are 0 best solutions below