1

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'.
Alan
  • 1,067
  • 1
  • 23
  • 37

1 Answers1

2

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.

Jean-Sébastien Tremblay
  • 299
  • 2
  • 9
  • Thanks. So if I'm running this with Gridsome's development server and testing checkout it wont work. it has to be live. i ask cause I did try adding localhost:0.0.0.0:8080 to allowed domains in Dashboard but still it would not go thru. Also could you qualify what you mean by the "product definition"? – Alan Jan 09 '20 at 18:20
  • The page must be reachable by Snipcart's servers. Using localhost won't work. To test locally you can use a tool like ngrok: https://snipcart.com/blog/develop-a-snipcart-powered-website-locally-using-ngrok – Jean-Sébastien Tremblay Jan 09 '20 at 18:25
  • I'd highly recommend opening a conversation with Snipcart's support. You'll get faster answers for configuration issues like this. – Jean-Sébastien Tremblay Jan 09 '20 at 18:27
  • Ahhh thank you. I've heard about ngrok but never used it. Let me read up on it. Ngrok will give me an address to add to the Dashboard then? – Alan Jan 09 '20 at 18:28
  • Yes it is still not working. Where do you go to start a conversation on your site. – Alan Jan 10 '20 at 16:32