Отправка значения data-api-key для Snipcart w / vue meta в gridsome

Question

Я делаю сайт электронной коммерции с сеткой и тележкой. Проблема в том, что когда я тестирую кассу snipcart, она не работает. В документации 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 в разметку в main.js на [пример][1] snipcart дает тот же результат:

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. 

Любая помощь в получении снайперской тележки для работы с сеткой очень ценится.

Обновление: - Следуйте инструкциям и настройте разметку и панель управления следующим образом с развертыванием на 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 предоставляет предварительно обработанные страницы, так что это нормально.