我正在尝试将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对象?
答案 0 :(得分:6)
no-undef
是一个linter错误,而不是运行时错误。因此,这并不表示代码运行时Snipcart不可用。
如果该错误不可用,您将在浏览器的控制台中得到此错误:ReferenceError: Snipcart is not defined
。
如果您使用的是eslint
,则可以在eslint配置中像这样add a global variable:
{
"globals": {
"Snipcart": false
}
}
或者,您可以在使用Snipcart API的文件中添加注释:/* global Snipcart:false */
Snipcart
对象仅在浏览器中可用,因此您应确保在Gatsby预渲染网站时不要调用这些函数。这意味着您仅应调用Gatsby's Browser API认为的Snipcart.api.*
函数,而不是SSR或Node API。
还要确保仅在脚本完全加载后才调用Snipcart的API,you can check the snipcart.ready
event:
document.addEventListener('snipcart.ready', function() {
// any Snipcart.api.* call
});
答案 1 :(得分:0)
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