<h1>Storefront Web Components</h1> <p>Storefront Web Components let you bring Shopify-powered commerce capabilities to any website. Display products, showcase collections, and offer a checkout, all with a few lines of embedded HTML. </p> <h2>How Storefront Web Components work</h2> <h3>How Storefront Web Components work</h3> <p>Storefront Web Components are a set of HTML components that handle the complexity of querying Shopify's Storefront API, letting you display products, collections, and shopping cart functionality on your website without having to write complex JavaScript code. After you add the `<shopify-store>` and `<shopify-context>` components to your markup and configure their attributes, you can access your store's data and then style it using CSS or HTML to create tailored shopping experiences. Storefront Web Components are built for a wide range of use cases, from embedding your products and collections within existing content to building new pages for your site. </p> <h2>Resources</h2> <h3>Resources</h3> <p>Follow the step-by-step guide to add Storefront Web Components to your project or browse sample code with live previews in the playground.</p>
店面 Web 组件
Storefront Web Components
原始链接: https://shopify.dev/docs/api/storefront-web-components
Shopify 店面 Web Components 允许你使用简单的 HTML 将 Shopify 驱动的电商功能嵌入任何网站。忘记复杂的 JavaScript ——这些组件负责查询店面 API，让你轻松显示产品、系列和购物车。
只需包含 `
Shopify 推出了Storefront Web Components，这是一个库，使开发者能够轻松地将Shopify商店功能嵌入到任何网站中。这些组件充当模板语言，动态生成GraphQL查询并将数据渲染为文本节点，*无需* shadow DOM，赋予开发者完全的CSS控制权。这与许多施加设计限制的Web组件库形成对比。
一个关键用例是在第三方网站上嵌入Shopify产品，这可能会将Shopify转变为一个广泛的分配和发现网络。Shopify团队通过强调Web组件的灵活性来解决关于不断增长的商店开发选项（Hydrogen、Remix、原生模板等）数量的担忧。对于只需要简单集成的场景，它们是理想的选择，在这种场景下，像Hydrogen这样的完整框架可能显得过于复杂。项目内部的认可源于为提供更灵活的商店选项的愿望，团队使用广泛的端到端测试来确保质量。Shopify的设计系统Polaris现在也使用Web组件构建。
相关文章
原文