图4
1、查看要求，您已创建使用 Shopify CLI 3.0 或更高版本的应用，或者您已迁移现有应用以使其与 Shopify CLI 3.0 或更高版本兼容。
2、参考：使用 Shopify CLI 创建应用(基于 PHP 应用程序模板)，且在商店中安装
3、执行：yarn shopify app generate extension 创建扩展。如图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
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
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
