将 Snipcart 添加到 Gatsby

Question

我正在尝试将 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 工作并在单击时打开用户配置文件。

什么不起作用：

当我想使用 public API 时，例如如果我调用：

Snipcart.api.user.logout() 在函数中。

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

如何在我的所有应用程序中拥有全局 Snipcart 对象？

Answer 1

no-undef 是 linter 错误，而不是运行一次。因此，当您的代码运行.

时，并不表示 Snipcart 不可用

如果它不可用，您会在浏览器的控制台中收到此错误：ReferenceError: Snipcart is not defined。

如果您正在使用 eslint，您可以 add a global variable 在您的 eslint 配置中像这样：

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

或者，您可以在使用 Snipcart 的 API 的文件中添加注释：/* global Snipcart:false */

Snipcart 对象仅在浏览器中可用，因此您应确保在 Gatsby 预呈现您的网站时不要调用这些函数。这意味着你应该只调用 Snipcart.api.* 认为 Gatsby's Browser API 的函数而不是 SSR 或节点 APIs.

还要确保仅在脚本完全加载后才调用 Snipcart 的 API，you can check the snipcart.ready event:

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

Answer 2

import { window, document } from ‘browser-monads’;

// Your code will build now!
console.log(`Location: ${window.location.href}`);

https://medium.com/@Jense5_/use-document-and-window-with-gatsby-e9a92ee31f36

将 Snipcart 添加到 Gatsby

Add Snipcart to Gatsby

reactjs

snipcart

gatsby