amp-story-shopping
简介
amp-story-shopping 组件用于在 Web Stories 中创建购物体验。
首先，导入 amp-story-shopping 以及您的其他故事导入。
<script async custom-element="amp-story-shopping" src="https://cdn.ampproject.org/v0/amp-story-shopping-0.1.js"></script>
基本用法
amp-story-shopping 在文档中使用两个自定义元素定义：amp-story-shopping-attachment 和 amp-story-shopping-tag。
通过在页面上的最后一个元素定义一个 amp-story-shopping-attachment 来指定购物体验。amp-story-shopping-attachment 组件接受 1 个后代，即包含配置体验的产品 JSON 的脚本元素。
必须将内联产品 JSON 配置为子脚本标签。可选的 src 属性将在呈现时从端点获取数据。如果定义了 src，则它会覆盖内联配置。如果远程配置请求失败，则内联配置将用作后备。有关产品 JSON 的完整说明，请参阅文档。
页面上必须至少有一个 amp-story-shopping-tag 元素才能显示体验。amp-story-shopping-tag 组件显示一个可点击的按钮。点击后，它会在页面附件中打开有关产品的更多信息。data-product-id 属性必须与产品 JSON 中的 productId 匹配。请特别注意这一点，以确保按钮显示正确的数据。
使用自定义 CSS 将按钮定位在页面上。默认情况下，该按钮是绝对定位的。对于响应式放置，请使用基于百分比值的 left 和 right CSS 规则。amp-story-shopping-tag 必须是 amp-story-grid-layer 的后代。
请注意，配置体验后，页面底部会显示一个“立即购买”CTA 按钮。
<amp-story-page id="page-1">
<amp-story-grid-layer template="fill">
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-product-id="lamp"></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment>
<script type="application/json">
{
"items": [
{
"productUrl": "https://www.google.com",
"productId": "lamp",
"productTitle": "Brass Lamp",
"productBrand": "Lamp Co",
"productPrice": 799.0,
"productPriceCurrency": "USD",
"productImages": [
{"url": "https://source.unsplash.com/Ry9WBo3qmoc/500x500", "alt": "lamp 1"},
{"url": "https://source.unsplash.com/KP7p0-DRGbg", "alt": "lamp 2"},
{"url": "https://source.unsplash.com/mFnbFaCIu1I", "alt": "lamp 3"},
{"url": "https://source.unsplash.com/py9sH2rThWs", "alt": "lamp 4"},
{"url": "https://source.unsplash.com/VDPauwJ_sHo", "alt": "lamp 5"},
{"url": "https://source.unsplash.com/3LTht2nxd34", "alt": "lamp 6"}
],
"aggregateRating": {
"ratingValue": 4.4,
"reviewCount": 89,
"reviewUrl": "https://www.google.com"
},
"productDetails": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere error deserunt dignissimos in laborum ea molestias veritatis sint laudantium iusto expedita atque provident doloremque, ad voluptatem culpa adipisci."
}
]
}
</script>
</amp-story-shopping-attachment>
</amp-story-page>
使用 src 属性的远程产品 JSON
将 src 属性添加到 amp-story-shopping-attachment 以在呈现时远程获取数据。使用 src 可确保即使从缓存提供服务，产品数据也是最新的。
请务必注意，产品数据特定于每个页面。它不能在页面之间共享。这确保了仅在需要时才加载数据。
<amp-story-page id="page-2">
<amp-story-grid-layer template="fill">
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-product-id="chair"></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="lamp"></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment src="/static/samples/json/amp-story-shopping.json">
<script type="application/json">
{
"items": [
{
"productUrl": "https://www.google.com",
"productId": "chair",
"productTitle": "Yellow chair",
"productBrand": "Chair Co.",
"productPrice": 1000.0,
"productPriceCurrency": "USD",
"productImages": [
{"url": "https://source.unsplash.com/DgQGKKLaVhY/500x500", "alt": "chair"}
],
"aggregateRating": {
"ratingValue": 4.4,
"reviewCount": 89,
"reviewUrl": "https://www.google.com"
},
"productDetails": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere error deserunt dignissimos in laborum ea molestias veritatis sint laudantium iusto expedita atque provident doloremque, ad voluptatem culpa adipisci."
},
{
"productUrl": "https://www.google.com",
"productId": "lamp",
"productTitle": "Brass Lamp",
"productBrand": "Lamp Co",
"productPrice": 799.0,
"productPriceCurrency": "USD",
"productImages": [
{"url": "https://source.unsplash.com/Ry9WBo3qmoc/500x500", "alt": "lamp 1"},
{"url": "https://source.unsplash.com/KP7p0-DRGbg", "alt": "lamp 2"},
{"url": "https://source.unsplash.com/mFnbFaCIu1I", "alt": "lamp 3"},
{"url": "https://source.unsplash.com/py9sH2rThWs", "alt": "lamp 4"},
{"url": "https://source.unsplash.com/VDPauwJ_sHo", "alt": "lamp 5"},
{"url": "https://source.unsplash.com/3LTht2nxd34", "alt": "lamp 6"}
],
"aggregateRating": {
"ratingValue": 4.4,
"reviewCount": 89,
"reviewUrl": "https://www.google.com"
},
"productDetails": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere error deserunt dignissimos in laborum ea molestias veritatis sint laudantium iusto expedita atque provident doloremque, ad voluptatem culpa adipisci."
}
]
}
</script>
</amp-story-shopping-attachment>
</amp-story-page>
可选配置
在此示例中，我们通过在产品 JSON 中定义 productIcon 和 productTagText，在 amp-story-shopping-tag 中显示自定义图标和文本。我们建议对 productIcon 使用 48 x 48 像素的图像。我们建议对 productTagText 使用 1-3 个单词。如果文本太长，它将变成两行并显示省略号。
我们还在 amp-story-shopping-attachment 上设置了 theme="dark"，以在深色调色板中呈现“立即购买”cta 按钮和页面附件。
<amp-story-page id="page-3">
<amp-story-grid-layer template="fill">
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-product-id="flowers"></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="chair"></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="lamp"></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment theme="dark" src="/static/samples/json/amp-story-shopping.json">
<script type="application/json">
{
"items": [
{
"productIcon": "/static/samples/img/amp-story-shopping-icon.png",
"productTagText": "Flowers",
"productUrl": "https://www.google.com",
"productId": "flowers",
"productTitle": "Flowers",
"productBrand": "Flower Company Name",
"productPrice": 10.0,
"productPriceCurrency": "USD",
"productImages": [
{"url": "https://source.unsplash.com/SavQfLRm4Do/500x500", "alt": "flowers"}
],
"aggregateRating": {
"ratingValue": 4.4,
"reviewCount": 89,
"reviewUrl": "https://www.google.com"
},
"productDetails": "Lorem ipsum dolor sit amet consectetur adipisicing elit. \n Facere error deserunt dignissimos in laborum ea molestias veritatis sint laudantium iusto expedita atque provident doloremque, ad voluptatem culpa adipisci."
},
{
"productUrl": "https://www.google.com",
"productId": "chair",
"productTitle": "Yellow chair",
"productBrand": "Chair Co.",
"productPrice": 1000.0,
"productPriceCurrency": "USD",
"productImages": [
{"url": "https://source.unsplash.com/DgQGKKLaVhY/500x500", "alt": "chair"}
],
"aggregateRating": {
"ratingValue": 4.4,
"reviewCount": 89,
"reviewUrl": "https://www.google.com"
},
"productDetails": "Lorem ipsum dolor sit amet consectetur adipisicing elit. \n Facere error deserunt dignissimos in laborum ea molestias veritatis sint laudantium iusto expedita atque provident doloremque, ad voluptatem culpa adipisci."
},
{
"productUrl": "https://www.google.com",
"productId": "lamp",
"productTitle": "Brass Lamp",
"productBrand": "Lamp Co",
"productPrice": 799.0,
"productPriceCurrency": "USD",
"productImages": [
{"url": "https://source.unsplash.com/Ry9WBo3qmoc/500x500", "alt": "lamp 1"},
{"url": "https://source.unsplash.com/KP7p0-DRGbg", "alt": "lamp 2"},
{"url": "https://source.unsplash.com/mFnbFaCIu1I", "alt": "lamp 3"},
{"url": "https://source.unsplash.com/py9sH2rThWs", "alt": "lamp 4"},
{"url": "https://source.unsplash.com/VDPauwJ_sHo", "alt": "lamp 5"},
{"url": "https://source.unsplash.com/3LTht2nxd34", "alt": "lamp 6"}
],
"aggregateRating": {
"ratingValue": 4.4,
"reviewCount": 89,
"reviewUrl": "https://www.google.com"
},
"productDetails": "Lorem ipsum dolor sit amet consectetur adipisicing elit. \n Facere error deserunt dignissimos in laborum ea molestias veritatis sint laudantium iusto expedita atque provident doloremque, ad voluptatem culpa adipisci."
}
]
}
</script>
</amp-story-shopping-attachment>
</amp-story-page>
更多资源
如果您想了解有关 Web Stories 中购物的更多信息，请访问文档。
需要进一步解释？
如果本页上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的确切用例。
转到 Stack Overflow 未解释的功能？AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但我们也欢迎您为自己特别关注的问题做出一次性贡献。
在 GitHub 上编辑示例-