Добавить Snipcart к Гэтсби - PullRequest
Новая
       49

Добавить Snipcart к Гэтсби

0 голосов
/ 11 ноября 2018

Я пытаюсь интегрировать Snipcart в Gatsby (v2).

Я редактирую файл html.js следующим образом: 

import React from "react"
import PropTypes from "prop-types"

export default class HTML extends React.Component {
  render() {
    return (
      <html {...this.props.htmlAttributes}>
        <head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          {this.props.headComponents}

          {/* Snipcart */}
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
          <script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" id="snipcart" data-api-key="UF45pIjZjAtZWJkYS00MGEwLWIxZWEtNjljZThjNTRiNjA4NjM2NDg1MzAzMzQyNfDrr48"></script>
          <link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" type="text/css" rel="stylesheet" />

        </head>
        <body {...this.props.bodyAttributes}>
          {this.props.preBodyComponents}
          <div
            key={`body`}
            id="___gatsby"
            dangerouslySetInnerHTML={{ __html: this.props.body }}
          />
          {this.props.postBodyComponents}

        </body>
      </html>
    )
  }
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

Что работает:

Если я создаю div: 

<a href="#" class="snipcart-edit-profile">
   Edit profile
</a>

Snipcart работает и при нажатии открывает профиль пользователя.

Что не работает:

Когда я хочу использовать общедоступный API, например, если я звоню:

Snipcart.api.user.logout() в функции.

=> error 'Snipcart' is not defined no-undef

Как использовать глобальный объект Snipcart во всех моих приложениях?

1 Ответ

0 голосов
/ 11 ноября 2018

no-undef - ошибка linter, а не ошибка времени выполнения. Таким образом, это не означает, что Snipcart недоступен при запуске кода.

Если это не было доступно, вы получите эту ошибку в консоли вашего браузера : ReferenceError: Snipcart is not defined.

Если вы используете eslint, вы можете добавить глобальную переменную , например, в вашей конфигурации eslint: 

{
    "globals": {
        "Snipcart": false
    }
}

В качестве альтернативы, вы можете добавить комментарий в файл, где вы используете API Snipcart: /* global Snipcart:false */

Объект Snipcart будет доступен только в браузере, поэтому не следует вызывать эти функции, пока Гэтсби выполняет предварительный рендеринг вашего сайта. Это означает, что вам следует вызывать только Snipcart.api.* функций с учетом API браузера Гэтсби , а не API-интерфейсы SSR или Node.

Кроме того, чтобы убедиться, что вы вызываете API Snipcart только после полной загрузки скрипта, вы можете проверить событие snipcart.ready : 

document.addEventListener('snipcart.ready', function() {
    // any Snipcart.api.* call
});
...