Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs]: Guide on working with Etsy in Gatsby #21580

Merged
merged 22 commits into from
Mar 10, 2020
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions docs/docs/working-with-Etsy-in-Gatsby.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
Title: Working with Etsy in Gatsby
bball07 marked this conversation as resolved.
Show resolved Hide resolved
---


## Etsy in Gatsby
bball07 marked this conversation as resolved.
Show resolved Hide resolved

This guide will walk you through the steps needed in order to successfully work with Etsy e-commerce sites in Gatsby.
bball07 marked this conversation as resolved.
Show resolved Hide resolved

## Prerequisites
bball07 marked this conversation as resolved.
Show resolved Hide resolved

- Create a new [Etsy account](https://www.etsy.com/join) and store if you don’t have one.
- Create a private app in your store by navigating to Apps, then Manage private apps.
bball07 marked this conversation as resolved.
Show resolved Hide resolved
- Create a new private app, with any “Private app name” and leaving the default permissions as read access under Admin API.
- Enable the Etsy API by checking the box that says “Allow this app to access your storefront data using Storefront API”.
- Make sure to also grant access to read product and customer tags by checking their corresponding boxes.

bball07 marked this conversation as resolved.
Show resolved Hide resolved
## If you do not already have one ready, [create a Gatsby site](/docs/quick-start):
bball07 marked this conversation as resolved.
Show resolved Hide resolved

- From your terminal, you will want to cd or change directory into the folder where you would want your project to live.
- In your terminal put in the command `npm install -g gatsby -cli` to install the gatsby command-line interface.
- Next, you would want to create a new project using the command gatsby new [the name of your site].
- You would then want to cd into your project folder using cd [the name of your site].
- Run `gatsby develop` to view your project locally.

## [Gatsby-source-etsy ](/packages/gatsby-source-etsy/)

While in your terminal type the command `npm i gatsby-source-etsy`. You will then need to add the plugin to your gatsby-config.js file:
bball07 marked this conversation as resolved.
Show resolved Hide resolved

```jsx:title=gatsby-config.js
module.exports = {
plugins: [
{
resolve: "gatsby-source-etsy",

options: {
apiKey: "your api key here",

shopId: "your shop id here",

language: "en", // optional
},
},
],
}
```

## Etsy API
bball07 marked this conversation as resolved.
Show resolved Hide resolved

Etsy has a public API that developers can [query](/packages/gatsby-source-etsy/#example-graphql-queries) and use to update specific information from Etsy. The Etsy API provides a simple [RESTful](https://en.wikipedia.org/wiki/Representational_State_Transfer) interface with lightweight [JSON](https://en.wikipedia.org/wiki/JSON)-formatted responses to use many of Etsy's website features, including public profiles, shops, listings, tags, favorites, and sales data, using [OAuth](https://www.etsy.com/developers/documentation/getting_started/oauth) to allow both read and write access to users' public and private data. If you're a developer and want to access the Etsy API, start by [creating an Etsy account](https://help.etsy.com/hc/articles/115015568007) if you don't have one already. Once registered, you can obtain a key at the [Etsy Developer Community website](https://www.etsy.com/developers?segment=selling). After you receive an API key, we’d recommend reviewing the Etsy [documentation](https://www.etsy.com/developers/documentation) to get started.
bball07 marked this conversation as resolved.
Show resolved Hide resolved

## Opportunity for a new plugin/starter

Want to create a new Etsy starter or plugin for Gatsby? Check out our [contributing guide](/contributing/)!

laurieontech marked this conversation as resolved.
Show resolved Hide resolved
## Other resources

[Gatsby Shopify Starter](/starters/AlexanderProd/gatsby-shopify-starter/)
bball07 marked this conversation as resolved.
Show resolved Hide resolved
2 changes: 2 additions & 0 deletions www/src/data/sidebars/doc-links.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -469,6 +469,8 @@
link: /docs/processing-payments-with-stripe/
- title: Processing Payments with Square
link: /docs/processing-payments-with-square/
- title: Guide on working with Etsy in Gatsby
bball07 marked this conversation as resolved.
Show resolved Hide resolved
link: /docs/working-with-Etsy-in-Gatsby/
bball07 marked this conversation as resolved.
Show resolved Hide resolved
- title: Improving Performance
link: /docs/performance/
items:
Expand Down