使用 Shopify CLI 构建主题应用扩展

1、查看要求，您已创建使用 Shopify CLI 3.0 或更高版本的应用，或者您已迁移现有应用以使其与 Shopify CLI 3.0 或更高版本兼容。

2、参考：使用 Shopify CLI 创建应用(基于 PHP 应用程序模板)，且在商店中安装

3、执行：yarn shopify app generate extension 创建扩展。如图1

图1

PS E:\wwwroot\shopify-app\learn-app> yarn shopify app generate extension
yarn run v1.22.15
$ shopify app generate extension
✔ Type of extension? · Theme app extension
✔ Your extension's working name? · learn-app-extension-20221018
✔ Your Theme app extension extension was added to your project!

  To find your extension, remember to cd extensions/learn-app-extension-20221018
  To preview your project, run yarn dev

Done in 96.73s.
PS E:\wwwroot\shopify-app\learn-app>

4、您现在应该有一个新的扩展目录，其中包含主题应用扩展的基本文件夹结构。如图2

图2

5、进入应用根目录，运行：yarn dev，当您运行 dev 命令时，CLI 会构建您的应用程序并捆绑您的应用程序扩展。报错：Bundler version 2.3.7 is not supported

PS E:\wwwroot\shopify-app\learn-app> yarn dev
yarn run v1.22.15
$ shopify app dev
✔ Dependencies installed

To run this command, log in to Shopify Partners.
👉 Press any key to open the login page on your browser

Auto-open timed out. Open the login page: Log in to Shopify Partners (​http://accounts.shopify.com/oauth/authorize?client_id=fbdb2649-e327-4907-8f67-908d24cfd7e3&scope=openid+https%3A%2F%2Fapi.shopify.com%2Fauth%2Fshop.admin.graphql+https%3A%2F%2Fapi.shopify.com%2Fauth%2Fshop.admin.themes+https%3A%2F%2Fapi.shopify.com%2Fauth%2Fpartners.collaborator-relationships.readonly+https%3A%2F%2Fapi.shopify.com%2Fauth%2Fshop.storefront-renderer.devtools+https%3A%2F%2Fapi.shopify.com%2Fauth%2Fpartners.app.cli.access&redirect_uri=http%3A%2F%2F127.0.0.1%3A3456&state=34c66755c0614e1bcedd680b643bcbf2e6fe237c653dac95dc43a7fb15e7&response_type=code&code_challenge_method=S256&code_challenge=lLJtne8D7cUPF437Ct2zttzSDSJV48mXJyuil-7GzrM​)

✔ Logged in.

Using your previous dev settings:
- Org:          王强
- App:          learn-app
- Dev store:    shuijingwanwq-development.myshopify.com
- Update URLs:  Always

To reset your default dev config, run yarn dev --reset

✅ Success! The tunnel is running and you can now view your app.
✔ URL updated


Shareable app URL

  https://d071-66-175-216-239.ngrok.io?shop=shuijingwanwq-development.myshopify.com&host=c2h1aWppbmd3YW53cS1kZXZlbG9wbWVudC5teXNob3BpZnkuY29tL2FkbWlu

learn-app-extension-20221018 (Theme app extension)
Follow the dev doc instructions (​https://shopify.dev/apps/online-store/theme-app-extensions/getting-started#step-3-test-your-changes​) by deploying your work as a draft

✖ Bundler version 2.3.7 is not supported

━━━━━━ Error ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    Bundler version 2.3.7 is not supported

    What to try:
    To update to the latest version of Bundler, run gem install bundler

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

frontend   |
frontend   | > dev
frontend   | > vite
frontend   |
frontend   |
frontend   |   vite v2.9.15 dev server running at:
frontend   |
frontend   |   > Network:  http://192.168.56.1:56648/
frontend   |   > Network:  http://192.168.10.1:56648/
frontend   |   > Network:  http://192.168.89.86:56648/
frontend   |   > Local:    http://localhost:56648/
frontend   |   > Network:  http://172.17.176.1:56648/
frontend   |
frontend   |   ready in 1913ms.
frontend   |
backend    | > Composer\Config::disableProcessTimeout
backend    | > php artisan serve
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS E:\wwwroot\shopify-app\learn-app>

6、参考：在 Shopify 应用中运行：yarn dev 时，报错：Bundler version 2.3.7 is not supported

7、部署您的应用以创建草稿版本。当您运行 deploy 命令时，CLI 会构建您的应用程序，捆绑您的应用程序扩展，并将扩展作为草稿部署到 Shopify。 它还指导您完成多个配置步骤。learn-app-extension-20221018 已部署到 Shopify 但尚未上线。如图3

图3

PS E:\wwwroot\shopify-app\learn-app> yarn deploy
yarn run v1.22.15
$ shopify app deploy

To run this command, log in to Shopify Partners.
👉 Press any key to open the login page on your browser
✔ Logged in.

Your configs for dev were:
Org:        王强
App:        learn-app

✔ Deploy to the same org and app as you used for dev? · Yes, deploy in the same way

Deploying your work to Shopify Partners. It will be part of learn-app

theme_extensions | Running theme check on your Theme app extension...
theme_extensions | Installing theme dependencies...
theme_extensions | Installed theme dependencies!

Running validation…

Pushing your code to Shopify…

✅ Success! Deployed to Shopify.

  Summary:
    • learn-app-extension-20221018 is deployed to Shopify but not yet live

Done in 298.10s.
PS E:\wwwroot\shopify-app\learn-app>

8、将扩展部署到 Shopify 后，导航到合作伙伴仪表板中的应用程序，单击扩展，然后单击您之前创建的草稿版本。单击创建版本以创建主题应用扩展的版本。如图4

图4