Add Snipcart to Gatsby

Question

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?

Jean-Sébastien Tremblay · Accepted Answer · 2018-11-12T17:29:46.730

8

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
});

edited Nov 12 '18 at 17:29

answered Nov 11 '18 at 19:53

Jean-Sébastien Tremblay

299
2
9

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 '18 at 08: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 '18 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](https://www.npmjs.com/package/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 '18 at 09:10
1

Using `window.Snipcart` instead of than just `Snipcart` can also fix the linter warning without requiring any changes to Gatsby’s linting configuration. :) – kennethormandy Jan 03 '19 at 00:12

score 0 · Answer 2 · answered Dec 12 '19 at 20:08

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

answered Dec 12 '19 at 20:08

Vikas Kumar

138
1
1
7

Add Snipcart to Gatsby

2 Answers2