Add Snipcart to Gatsby
up vote
3
down vote
favorite
I'm trying to integrate Snipcart into Gatsby (v2).
I edit the html.js file like this:
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,
}
What works:
If I create a div:
<a href="#" class="snipcart-edit-profile">
Edit profile
</a>
Snipcart works and opens the user profile when clicked.
What does not work:
When I want to use the public API, for example if I call:
Snipcart.api.user.logout() in a function.
=> error 'Snipcart' is not defined no-undef
How to have the global Snipcart object in all my app?
reactjs gatsby snipcart
asked Nov 11 at 9:00
uciska
769
add a comment |
up vote
3
down vote
favorite
I'm trying to integrate Snipcart into Gatsby (v2).
I edit the html.js file like this:
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,
}
What works:
If I create a div:
<a href="#" class="snipcart-edit-profile">
Edit profile
</a>
Snipcart works and opens the user profile when clicked.
What does not work:
When I want to use the public API, for example if I call:
Snipcart.api.user.logout() in a function.
=> error 'Snipcart' is not defined no-undef
How to have the global Snipcart object in all my app?
reactjs gatsby snipcart
asked Nov 11 at 9:00
uciska
769
add a comment |
up vote
3
down vote
favorite
up vote
3
down vote
favorite
I'm trying to integrate Snipcart into Gatsby (v2).
I edit the html.js file like this:
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,
}
What works:
If I create a div:
<a href="#" class="snipcart-edit-profile">
Edit profile
</a>
Snipcart works and opens the user profile when clicked.
What does not work:
When I want to use the public API, for example if I call:
Snipcart.api.user.logout() in a function.
=> error 'Snipcart' is not defined no-undef
How to have the global Snipcart object in all my app?
reactjs gatsby snipcart
asked Nov 11 at 9:00
uciska
769
I'm trying to integrate Snipcart into Gatsby (v2).
I edit the html.js file like this:
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,
}
What works:
If I create a div:
<a href="#" class="snipcart-edit-profile">
Edit profile
</a>
Snipcart works and opens the user profile when clicked.
What does not work:
When I want to use the public API, for example if I call:
Snipcart.api.user.logout() in a function.
=> error 'Snipcart' is not defined no-undef
How to have the global Snipcart object in all my app?
reactjs gatsby snipcart
reactjs gatsby snipcart
asked Nov 11 at 9:00
uciska
769
asked Nov 11 at 9:00
uciska
769
asked Nov 11 at 9:00
uciska
769
asked Nov 11 at 9:00
uciska
769
asked Nov 11 at 9:00
uciska
769
769
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
5
down vote
accepted
no-undef is a linter error and not a runtime one. So it doesn't indicate that Snipcart isn't available when your code run.
If it wasn't available, you would get this error in your browser's console: ReferenceError: Snipcart is not defined.
If you're using eslint, you can add a global variable like this in your eslint config:
{
"globals": {
"Snipcart": false
}
}
Alternatively, you can add a comment in the file where you use Snipcart's API: /* global Snipcart:false */
The Snipcart object will only be available in the browser so you should make sure not to call those functions while Gatsby is pre-rendering your website. That means you should only call Snipcart.api.* functions thought Gatsby's Browser API and not the SSR or Node APIs.
Also to make sure you're calling Snipcart's API only after its script is fully loaded, you can check the snipcart.ready event:
document.addEventListener('snipcart.ready', function() {
// any Snipcart.api.* call
});
answered Nov 11 at 19:53
Jean-Sébastien Tremblay
664
Thank you very much, I understand better how it works now. OK for the linter error but it kill the build, it is the problem. Can you give me an example of how to do this if I want to useSnipcart.api.user.logout(), for example, in a deepComponentwith the Gatsby Browser API?
– uciska
Nov 12 at 8:44
You'll have to fix the linting error before going forward then. The eslint doc I've linked to should help. You should update your question to show how/where you're calling Snipcart's API in your component and we'll have better context to help you out :)
– Jean-Sébastien Tremblay
Nov 12 at 17:32
1
Thank you. I use Standardjs as linter and I added Snipcart as a global variable but I did not think I needed to configure eslint. I added the eslint-config-gatsby-standard package and it works perfectly. So simple I'm a little ashamed! You're the best and Snipcart rock's!
– uciska
Nov 13 at 9:10
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
5
down vote
accepted
no-undef is a linter error and not a runtime one. So it doesn't indicate that Snipcart isn't available when your code run.
If it wasn't available, you would get this error in your browser's console: ReferenceError: Snipcart is not defined.
If you're using eslint, you can add a global variable like this in your eslint config:
{
"globals": {
"Snipcart": false
}
}
Alternatively, you can add a comment in the file where you use Snipcart's API: /* global Snipcart:false */
The Snipcart object will only be available in the browser so you should make sure not to call those functions while Gatsby is pre-rendering your website. That means you should only call Snipcart.api.* functions thought Gatsby's Browser API and not the SSR or Node APIs.
Also to make sure you're calling Snipcart's API only after its script is fully loaded, you can check the snipcart.ready event:
document.addEventListener('snipcart.ready', function() {
// any Snipcart.api.* call
});
answered Nov 11 at 19:53
Jean-Sébastien Tremblay
664
Thank you very much, I understand better how it works now. OK for the linter error but it kill the build, it is the problem. Can you give me an example of how to do this if I want to useSnipcart.api.user.logout(), for example, in a deepComponentwith the Gatsby Browser API?
– uciska
Nov 12 at 8:44
You'll have to fix the linting error before going forward then. The eslint doc I've linked to should help. You should update your question to show how/where you're calling Snipcart's API in your component and we'll have better context to help you out :)
– Jean-Sébastien Tremblay
Nov 12 at 17:32
1
Thank you. I use Standardjs as linter and I added Snipcart as a global variable but I did not think I needed to configure eslint. I added the eslint-config-gatsby-standard package and it works perfectly. So simple I'm a little ashamed! You're the best and Snipcart rock's!
– uciska
Nov 13 at 9:10
add a comment |
up vote
5
down vote
accepted
no-undef is a linter error and not a runtime one. So it doesn't indicate that Snipcart isn't available when your code run.
If it wasn't available, you would get this error in your browser's console: ReferenceError: Snipcart is not defined.
If you're using eslint, you can add a global variable like this in your eslint config:
{
"globals": {
"Snipcart": false
}
}
Alternatively, you can add a comment in the file where you use Snipcart's API: /* global Snipcart:false */
The Snipcart object will only be available in the browser so you should make sure not to call those functions while Gatsby is pre-rendering your website. That means you should only call Snipcart.api.* functions thought Gatsby's Browser API and not the SSR or Node APIs.
Also to make sure you're calling Snipcart's API only after its script is fully loaded, you can check the snipcart.ready event:
document.addEventListener('snipcart.ready', function() {
// any Snipcart.api.* call
});
answered Nov 11 at 19:53
Jean-Sébastien Tremblay
664
Thank you very much, I understand better how it works now. OK for the linter error but it kill the build, it is the problem. Can you give me an example of how to do this if I want to useSnipcart.api.user.logout(), for example, in a deepComponentwith the Gatsby Browser API?
– uciska
Nov 12 at 8:44
You'll have to fix the linting error before going forward then. The eslint doc I've linked to should help. You should update your question to show how/where you're calling Snipcart's API in your component and we'll have better context to help you out :)
– Jean-Sébastien Tremblay
Nov 12 at 17:32
1
Thank you. I use Standardjs as linter and I added Snipcart as a global variable but I did not think I needed to configure eslint. I added the eslint-config-gatsby-standard package and it works perfectly. So simple I'm a little ashamed! You're the best and Snipcart rock's!
– uciska
Nov 13 at 9:10
add a comment |
up vote
5
down vote
accepted
up vote
5
down vote
accepted
no-undef is a linter error and not a runtime one. So it doesn't indicate that Snipcart isn't available when your code run.
If it wasn't available, you would get this error in your browser's console: ReferenceError: Snipcart is not defined.
If you're using eslint, you can add a global variable like this in your eslint config:
{
"globals": {
"Snipcart": false
}
}
Alternatively, you can add a comment in the file where you use Snipcart's API: /* global Snipcart:false */
The Snipcart object will only be available in the browser so you should make sure not to call those functions while Gatsby is pre-rendering your website. That means you should only call Snipcart.api.* functions thought Gatsby's Browser API and not the SSR or Node APIs.
Also to make sure you're calling Snipcart's API only after its script is fully loaded, you can check the snipcart.ready event:
document.addEventListener('snipcart.ready', function() {
// any Snipcart.api.* call
});
answered Nov 11 at 19:53
Jean-Sébastien Tremblay
664
no-undef is a linter error and not a runtime one. So it doesn't indicate that Snipcart isn't available when your code run.
If it wasn't available, you would get this error in your browser's console: ReferenceError: Snipcart is not defined.
If you're using eslint, you can add a global variable like this in your eslint config:
{
"globals": {
"Snipcart": false
}
}
Alternatively, you can add a comment in the file where you use Snipcart's API: /* global Snipcart:false */
The Snipcart object will only be available in the browser so you should make sure not to call those functions while Gatsby is pre-rendering your website. That means you should only call Snipcart.api.* functions thought Gatsby's Browser API and not the SSR or Node APIs.
Also to make sure you're calling Snipcart's API only after its script is fully loaded, you can check the snipcart.ready event:
document.addEventListener('snipcart.ready', function() {
// any Snipcart.api.* call
});
answered Nov 11 at 19:53
Jean-Sébastien Tremblay
664
edited Nov 12 at 17:29
answered Nov 11 at 19:53
Jean-Sébastien Tremblay
664
answered Nov 11 at 19:53
Jean-Sébastien Tremblay
664
answered Nov 11 at 19:53
Jean-Sébastien Tremblay
664
664
Thank you very much, I understand better how it works now. OK for the linter error but it kill the build, it is the problem. Can you give me an example of how to do this if I want to useSnipcart.api.user.logout(), for example, in a deepComponentwith the Gatsby Browser API?
– uciska
Nov 12 at 8:44
You'll have to fix the linting error before going forward then. The eslint doc I've linked to should help. You should update your question to show how/where you're calling Snipcart's API in your component and we'll have better context to help you out :)
– Jean-Sébastien Tremblay
Nov 12 at 17:32
1
Thank you. I use Standardjs as linter and I added Snipcart as a global variable but I did not think I needed to configure eslint. I added the eslint-config-gatsby-standard package and it works perfectly. So simple I'm a little ashamed! You're the best and Snipcart rock's!
– uciska
Nov 13 at 9:10
add a comment |
Thank you very much, I understand better how it works now. OK for the linter error but it kill the build, it is the problem. Can you give me an example of how to do this if I want to useSnipcart.api.user.logout(), for example, in a deepComponentwith the Gatsby Browser API?
– uciska
Nov 12 at 8:44
You'll have to fix the linting error before going forward then. The eslint doc I've linked to should help. You should update your question to show how/where you're calling Snipcart's API in your component and we'll have better context to help you out :)
– Jean-Sébastien Tremblay
Nov 12 at 17:32
1
Thank you. I use Standardjs as linter and I added Snipcart as a global variable but I did not think I needed to configure eslint. I added the eslint-config-gatsby-standard package and it works perfectly. So simple I'm a little ashamed! You're the best and Snipcart rock's!
– uciska
Nov 13 at 9:10
Thank you very much, I understand better how it works now. OK for the linter error but it kill the build, it is the problem. Can you give me an example of how to do this if I want to use
Snipcart.api.user.logout(), for example, in a deep Component with the Gatsby Browser API?– uciska
Nov 12 at 8:44
Thank you very much, I understand better how it works now. OK for the linter error but it kill the build, it is the problem. Can you give me an example of how to do this if I want to use
Snipcart.api.user.logout(), for example, in a deep Component with the Gatsby Browser API?– uciska
Nov 12 at 8:44
You'll have to fix the linting error before going forward then. The eslint doc I've linked to should help. You should update your question to show how/where you're calling Snipcart's API in your component and we'll have better context to help you out :)
– Jean-Sébastien Tremblay
Nov 12 at 17:32
You'll have to fix the linting error before going forward then. The eslint doc I've linked to should help. You should update your question to show how/where you're calling Snipcart's API in your component and we'll have better context to help you out :)
– Jean-Sébastien Tremblay
Nov 12 at 17:32
1
1
Thank you. I use Standardjs as linter and I added Snipcart as a global variable but I did not think I needed to configure eslint. I added the eslint-config-gatsby-standard package and it works perfectly. So simple I'm a little ashamed! You're the best and Snipcart rock's!
– uciska
Nov 13 at 9:10
Thank you. I use Standardjs as linter and I added Snipcart as a global variable but I did not think I needed to configure eslint. I added the eslint-config-gatsby-standard package and it works perfectly. So simple I'm a little ashamed! You're the best and Snipcart rock's!
– uciska
Nov 13 at 9:10
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247220%2fadd-snipcart-to-gatsby%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
