Блог

Главная - Вопросы по программированию - ошибка snipcart: открытый ключ API не найден. Атрибут data-api-key должен быть установлен в теге #snipcart

ошибка snipcart: открытый ключ API не найден. Атрибут data-api-key должен быть установлен в теге #snipcart

#javascript #reactjs #snipcart

#javascript #reactjs #snipcart

Вопрос:

У меня возникли проблемы с правильной загрузкой snipcart, он подбирает ключ api на локальном хосте и показывает количество товаров в корзине, однако при развертывании в netlify при загрузке страницы он на короткое время отображает количество товаров в корзине, указывая, что ключ api правильный, однако затем он выдает следующееошибка public API key not found. Attribute data-api-key must be set on #snipcart tag.

Я использую react для его рендеринга и сократил его до минимального шаблона, чтобы увидеть, может ли что-нибудь в react быть причиной этого, но у меня все та же проблема.

переход <div hidden id="snipcart" data-api-key={{ API_KEY }}></div> к app.js файлу, и он работает, но в index.html нем не работает

index.html

 <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <link href ="https://fonts.googleapis.com/css2?family=Open Sansamp;family=Lexend Zettaamp;family=Poppins:wght@400;500;700amp;family=Shadows Into Lightamp;display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://app.snipcart.com">
    <link rel="preconnect" href="https://cdn.snipcart.com">
    <link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.css" />
  </head>

  <body>
    <div id="root"></div>
    <script async src="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.js"></script>
    <div hidden id="snipcart" data-api-key={{ API_KEY }}></div>
  
    <script src="./index.tsx"></script>
    
  </body>

</html>

Ответ №1:

Включение этого в ваш html-код не работает, поскольку {{API_KEY}}, как я полагаю, из вашей среды. Поскольку html-код не компилируется с использованием вашей платформы, он ничего не делает с тегом <div hidden id=»snipcart» data-api-key={{API_KEY }}> .

Чтобы это сработало, поместите свой ключ api вместо переменной {{API_KEY}} .

Приветствия, Леа из Snipcart