Shopify / theme-extension-getting-started

A theme app extension boilerplate that highlights the basic structure and features that are available to developers who want to integrate their apps with Shopify Online Stores.
https://shopify.dev/apps/online-store/theme-app-extensions/getting-started
MIT License
105 stars 45 forks source link

Outdated #25

Open asacarter opened 1 year ago

asacarter commented 1 year ago

Just getting started with CLI 3.

I came here from a link in the Shopify docs but this example is already outdated as it uses a yml file instead of toml.

It also didn't make sense to me why a global app embed would go in the blocks folder. I guess there was nowhere else to put it?

yaizudamashii commented 1 year ago

The new documentation at https://shopify.dev/docs/apps/online-store/theme-app-extensions/getting-started includes how to build an App Block extension. I wanted to build an App Embed Block extension.

When you follow the aforementioned tutorial, you will have a folder structure as

└── extensions
  └── my-theme-app-extension
      ├── assets
      ├── blocks
      ├── snippets
      ├── locales
      └── shopify.theme.extension.toml

What I had to do was replace generated files with files from this repo: blocks/star-rating.liquidblocks/app-embed.liquid snippets/stars.liquidsnippets/icon-close.liquid - although I do not see such an icon anywhere, not sure if this replacement was necessary I also had to add the files used into assets, namely 'dog-in-birthday-hat.jpg' and 'party-button.js'.
Then if you follow the rest of instructions in the tutorial, you will have an App Embed Block app.

But I do agree that Shopify is not very friendly to developers by not updating their documentation for all three types of app extensions.

EDIT: Comparing the code, my understanding of those types of extension blocks is now better. App Block extension and App Embed Block extension are essentially the same thing. They are just rendered HTML DOM's with Javascript and assets attached. The only difference is the target key in the toml file. If the target is section you can add that extension within different sections in the theme. If the target is `body' then it is added to the body of the theme, of course there is only one body for any given page of the theme.

Chang1ng commented 9 months ago
image

Too bad.