问题
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>
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>
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',
});
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.
Any help in getting snipcart to work w/gridsome much appreciated.
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'.
回答1:
If the cart opens, it means your API Key is correct.
Snipcart fully replaces the div, that's why you don't see your API Key anymore once the cart loads.
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.
来源：https://stackoverflow.com/questions/59634842/sending-the-data-api-key-value-for-snipcart-w-vue-meta-in-gridsome