在 gridsome 中发送带有 vue meta 的 Snipcart 的 data-api-key 值

Question

我正在做一个带有gridsome 和snipcart 的电子商务网站。问题是当我测试 snipcart 的结帐时它失败了。 snipcart 文档说要添加一行

<div id="snipcart" data-api-key="myapikey" hidden></div>

我添加到 layouts 文件夹中的 default.vue 文件中。但是当我在构建后检查元素时，我在 DOM 中看到了

<div id="snipcart" class="snipcart"></div>

data-api-key 属性未呈现。根据 snipcart 的 [example][1]，利用 vue-meta 将 api-key-data 注入到 ma​​in.js 中的标记中具有相同的结果：

head.script.push({
    type: 'text/javascript',
    src: 'https://cdn.snipcart.com/scripts/v3.0.4/snipcart.js',
    body: true,

    // snipcart's attributes
    id: 'snipcart',
    'data-api-key': 'apiKey',
  });

snipcart 日志显示如下：

2020-01-08 10:52:51 

INF>["req6fd695fe", "acc69393_test"] Impossible validate items for order 'fd0f6d92-b422-4b2c-8a50-a955b4eeceaa'. Please make sure the URL is valid, we suggest you take a look at our Security documentation http://docs.snipcart.com/getting-started/security) for more information. 

非常感谢任何帮助让 snipcart 与 gridsome 一起工作。

更新： - 按照说明进行标记和仪表板设置如下，并部署到 netlify @https://ecommerce-gridsome.netlify.com

 <button
class="snipcart-add-item"
:data-item-id="product.id"
:data-item-name="product.title"
:data-item-description="excerpt"
:data-item-image="image.url"
:data-item-price="product.fields.Unit_cost"
:data-item-url="'https://ecommerce-gridsome.netlify.com' + $props.product.path"

> 日志中仍然出现错误：

2020-01-10 13:56:57 

INF>["reqec389060", "acc69393_test"] Found 1 snipcart-add-item elements with ids [reckl3dcep4sbpWRi]
2020-01-10 13:56:57 

INF>["reqec389060", "acc69393_test"] Validating item with id 'reckl3dcep4sbpWRi' located at https://ecommerce-gridsome.netlify.com/products/nebula-chair/' on domain 'ecommerce-gridsome.netlify.com'.
2020-01-10 13:56:57 

INF>["reqec389060", "acc69393_test"] Found 1 snipcart-add-item elements with ids [recfEnH5eESHpWzLT]
2020-01-10 13:56:57 

INF>["reqec389060", "acc69393_test"] Validating item with id 'recfEnH5eESHpWzLT' located at https://ecommerce-gridsome.netlify.com/products/compel-bookcase/' on domain 'ecommerce-gridsome.netlify.com'.
2020-01-10 13:56:52 

INF>["req4a317e07", "acc69393_test"] Found 1 snipcart-add-item elements with ids [reckl3dcep4sbpWRi]
2020-01-10 13:56:52 

INF>["req4a317e07", "acc69393_test"] Validating item with id 'reckl3dcep4sbpWRi' located at https://ecommerce-gridsome.netlify.com/products/nebula-chair/' on domain 'ecommerce-gridsome.netlify.com'.
2020-01-10 13:56:52 

INF>["req4a317e07", "acc69393_test"] Found 1 snipcart-add-item elements with ids [recfEnH5eESHpWzLT]
2020-01-10 13:56:52 

INF>["req4a317e07", "acc69393_test"] Validating item with id 'recfEnH5eESHpWzLT' located at https://ecommerce-gridsome.netlify.com/products/compel-bookcase/' on domain 'ecommerce-gridsome.netlify.com'. 

Answer 1

如果购物车打开，则表示您的 API Key 正确。

Snipcart 完全替换了 div，这就是为什么您在购物车加载后不再看到您的 API 密钥的原因。

日志消息指示抓取错误。您必须确保您的域已在仪表板中配置，并且产品定义在页面加载时在页面源中可用。 Snipcart 的爬虫不执行 Javascript，但是 Gridsome 提供了预渲染的页面，所以没关系。