1

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

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

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

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

不呈现 data-api-key 属性。根据snipcart的 [example][1]使用 vue-meta 将 api-key-data 注入到 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',
  });

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'.
4

1 回答 1

2

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

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

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

于 2020-01-08T20:06:13.563 回答