问题描述
我正在做一个带有gridsome&片段车.问题是当我测试snipcart的结帐失败时. snipcart文档说要添加一行
I am doing an eCommerce site w/gridsome & snipcart. The problem is when I test snipcart's checkout it fails. The snipcart documentation says to add a line
<div id="snipcart" data-api-key="myapikey" hidden></div>
我在 layouts 文件夹中添加到 default.vue 文件的
.但是当我在构建后检查元素时，我会在DOM中看到
which I added to default.vue file in my layouts folder. But when I inspect element after build I see in DOM
<div id="snipcart" class="snipcart"></div>
未呈现data-api-key属性.根据snipcart的[example] [1]，利用vue-meta将api-key-data注入 main.js 中的标记中，结果是相同的:
The data-api-key attribute is not rendered. Utilizing vue-meta to inject api-key-data into markup in main.js per snipcart's [example][1] has same result:
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日志显示如下:
The snipcart log's show this:
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正常工作的帮助，
Any help in getting snipcart to work w/gridsome much appreciated.
更新:-已按照说明进行操作，并具有标记&仪表板设置如下，并进行部署以进行Netlify @ https://ecommerce-gridsome.netlify.com
Update: - Followed instructions and have markup & dashboard setup as follows with a deploy to 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"
>仍然在日志中出现错误:
>Still get error in log:
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'.
推荐答案
如果购物车打开，则表明您的API密钥正确.
If the cart opens, it means your API Key is correct.
Snipcart完全替代了div，这就是为什么在购物车加载后您不再看到API密钥的原因.
Snipcart fully replaces the div, that's why you don't see your API Key anymore once the cart loads.
日志消息指示爬网错误.您必须确保在仪表板中配置了您的域，并且在加载页面时在页面源中提供了产品定义. Snipcart的搜寻器不执行Javascript，但是Gridsome提供了预渲染的页面，因此可以.
The log message indicates a crawling error. You'll have to make sure that your domain is configured in the dashboard and the product definition are available in the source of the page when it load. Snipcart's crawler doesn't execute Javascript, but Gridsome provide pre-rendered pages, so that's ok.
这篇关于在gridsome中发送带有Vue meta的Snipcart的data-api-key值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！