dylanon / gatsby-source-etsy Goto Github PK

View Code? Open in Web Editor NEW

15.0 3.0 8.0 952 KB

Gatsby.js plugin that sources listing info and images from your Etsy shop! 🛍

License: MIT License

JavaScript 100.00%

gatsby gatsbyjs etsy gatsby-source-plugin gatsby-source

gatsby-source-etsy's Introduction

gatsby-source-etsy 🛍

Note: This plugin is no longer maintained.

Downloads listing info and images from your Etsy shop!

Installation

Sites on Gatsby v3+

Install the package from npm:

npm i gatsby-source-etsy

Install peer dependencies:

npm i gatsby-source-filesystem

Sites on Gatsby v2

Install version 1 from npm:

npm i [email protected]

Sites on Gatsby v1

Gatsby v1 is not supported.

Configuration

Next, add the plugin to your gatsby-config.js file:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-etsy',
      options: {
        api_key: 'your api key here',
        shop_id: 'your shop id here',
        // The following properties are optional - Most of them narrow the results returned from Etsy.
        //
        // You don't have to use them, and in fact, you probably shouldn't!
        // You're probably here because you need to source *all* your listings.
        language: 'en',
        translate_keywords: true,
        keywords: 'coffee',
        sort_on: 'created',
        sort_order: 'up',
        min_price: 0.01,
        max_price: 999.99,
        color: '#333333',
        color_accuracy: 0,
        tags: 'diy,coffee,brewing',
        taxonomy_id: 18,
        include_private: true,
      },
    },
  ],
}

This plugin supports the options specified in Etsy's documentation under findAllShopListingsActive.

For information on the language and translate_keywords properties, please see Searching Listings.

Example GraphQL queries

Listing info:

{
  allEtsyListing(sort: { fields: featured_rank, order: ASC }, limit: 4) {
    nodes {
      currency_code
      title
      listing_id
      price
      url
    }
  }
}

Query transformed/optimized images for a listing (e.g. for use with gatsby-image - see below):

{
  allEtsyListing(sort: { fields: featured_rank, order: ASC }, limit: 4) {
    nodes {
      childrenEtsyListingImage {
        rank
        childFile {
          childImageSharp {
            fluid {
              base64
              tracedSVG
              aspectRatio
              src
              srcSet
              srcWebp
              srcSetWebp
              originalName
              originalImg
              presentationHeight
              presentationWidth
              sizes
            }
          }
        }
      }
    }
  }
}

Queryable entities

allEtsyListing
allEtsyListingImage
etsyListing
- childrenEtsyListingImage
etsyListingImage
- childFile

Usage with `gatsby-image`

Install the necessary packages:

npm install gatsby-image gatsby-plugin-sharp gatsby-transformer-sharp

Query:

{
  etsyListing {
    childrenEtsyListingImage {
      childFile {
        childImageSharp {
          fluid {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}

See gatsby-image for more.

Contributing

Did something break, or is there additional functionality you'd like to add to this plugin? Consider contributing to this project!

Feel free to open an issue to discuss what's happening first, or dive right in and open a PR.

Developing this plugin locally

You can use yalc to test changes you make to this plugin against a local Gatsby site:

# Install yalc globally on your system
yarn global add yalc

# Publish the package to your local repository
# (Run this from this repo's root directory)
yalc publish

# Use the package from your local repository instead of one from npm
# (Run this from your Gatsby site's root directory)
yalc add gatsby-source-etsy

For up-to-date information and troubleshooting, see yalc's documentation.

gatsby-source-etsy's People

Contributors

Stargazers

Watchers

Forkers

ioanis thomasdotcodes adg29 alanonthegit sud33p bwouno stephen-cloud marcoheine-com

gatsby-source-etsy's Issues

Gatsby 5 and Etsy API v3 version

Hi!
Thanks for your work.
Do you plan a release compatible with Gatsby 5 and Etsy API v3 ?

Regards.

Readme should state that this doesn't work anymore

Given that etsy has turned off their Api V2, the readme should be changed to indicate that the plugin no longer works. I had to dig into the issues to find out that it was no longer functional.

Gatsby build fails when using cached etsy items

Hey Dylan, first of all: thanks for providing this plugin, super helpful!

I ran into a bug recently when setting up a new site.

Whenever I re-run gatsby develop and gatsby is using cached data, I get the following error:

When I run gatsby clean and than start my development server, everything works. Same goes for my deployment on netlify I always have to clear the cache otherwise the build fails:

Any thoughts on what could be the issue here? Would love to solve this!
Greetings Marco

Updating Etsy Inventory Data from Gatsby

I'm curious if there's any methods in the plugin to send, say, PUT requests to the Etsy API if a product is bought on a Gatsby site. This might be a dumb question (I read Etsy's terms of service and couldn't tell if selling on a personal site with Etsy listings was not allowed).

Read the paragraph in the Gatsby docs several times and am still wondering how people imagine this working:

Building your own site with Gatsby allows you to have the best of both worlds. You can take control over your customers’ experience and drive traffic to your own blazing fast website. You’re also able to avoid links to others’ listings competing for your customers’ attention. At the same time, you maintain all the benefits of having your products listed on Etsy.

Would the idea be to send traffic from etsy.com to a Gatsby-source-etsy'd site, then back to etsy.com for a checkout? Or could you feasibly build an independent ecommerce store on a Gatsby site with Etsy store data and sync the two of them with this plugin?

Thanks!

Fails to generate nodes

Forgive me if this is user error. I recently installed the gatsby-source-etsy plugin to use on a client's website:

npm install --save gatsby-source-etsy

In my gatsby-config file I entered in the appropriate API and Shop ID following the plugin's guide (https://www.gatsbyjs.org/packages/gatsby-source-etsy/).

Despite seemingly following all of the correct steps, when I run develop I get the following error message:

warn The gatsby-source-etsy plugin has generated no Gatsby nodes. Do you need it?

As expected, I cannot source any of the data the plugin provides access to in GraphQL. Why is it not generating nodes? Some troubleshooting online led me to believe that it had something to do with the order of the plugins in my package-lock.json file (e.g. make sure that gatsby-source-filesystem--a plugin required by gatsby-source-etsy--comes before gatsby-source-etsy in my plug-in list). However, this doesn't seem to provide any solution.

Any thoughts? Thanks in advance for your input.