在gridsome中发送Snipcart w/vue meta的数据-api-键值

Question

我正在做一个eCommerce站点w/gridsome & snipcart。问题是，当我测试代码片段的签出时，它失败了。代码片段文档说要添加一行

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

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

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

未呈现data-api-key属性。使用vue-meta将api-key-数据注入到main.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',
  });

片段车日志显示如下所示：

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. 

任何帮助，使代码车工作，w/网格一些非常感谢。

更新：-遵循指示并按照下面的部署配置标记和仪表板，部署到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密钥是正确的。

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

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