search

pasdo501 / gatsby-source-woocommerce

Gatsy Source Plugin for WooCommerce
34 stars 14 forks source link

readme

Note

Please note: the original author of this package is Marc Glasser -- see the the original repo and package.

gatsby-source-woocommerce

Source plugin for Gatsby. Pulls in data from protected routes via the WooCommerce REST API with credentials.

Contents

npm install --save @pasdo501/gatsby-source-woocommerce

or

yarn add @pasdo501/gatsby-source-woocommerce

How to Use

// In gatsby-config.js
plugins:[
  {       
    resolve: '@pasdo501/gatsby-source-woocommerce',
    options: {
      // Base URL of Wordpress site
      api: 'wordpress.domain',

      // set to false to not see verbose output during build 
      // default: true
      verbose: true,

      // true if using https. otherwise false.
      https: false,
      api_keys: {
        consumer_key: <key>,
        consumer_secret: <secret>,
      },
      // Array of strings with fields you'd like to create nodes for...
      fields: ['products', 'products/categories', 'products/attributes'],
      // Send the API keys as query string parameters instead of using the authorization header
      // OPTIONAL: defaults to false
      query_string_auth: false,
      // Version of the woocommerce API to use
      // OPTIONAL: defaults to 'wc/v3'
      api_version: 'wc/v3',
      // OPTIONAL: How many results to retrieve *per request*
      per_page: 100,
      // OPTIONAL: Custom WP REST API url prefix, only needed if not using 
      // the default prefix ('wp-json').
      // wpAPIPrefix: 'wp-json',
      // OPTIONAL: Support for URLs with ports, e.g. 8080; defaults to no port
      // port: '8080',
      // OPTIONAL: Encoding; default to 'utf8'
      encoding: 'utf8',
      // OPTIONAL: Custom Axios config (see https://github.com/axios/axios) - note that this can override other options.
      axios_config: {
        // Axios config options
      }
    }
  }
]

Currently Supported Fields

Definitive:

Note: If following the endpoint layout from the WooCommerce REST API docs, all fields that do not contain a wildcard should be supported.

For example, to get product categories: including 'products/categories' in fields will show up as allWcProductsCategories / wcProductsCategories

Some GraphQL Query Examples

All products (with associated images):

{
  allWcProducts {
    edges {
      node {
        id
        wordpress_id
        name
        categories {
          wordpress_id
        }
        images {
          localFile {
            // childImageSharp ... etc
          }
        }
      }
    }
  }
}

All products attributes with terms:

{
  allWcProductsAttributes {
    nodes {
      name
      wordpress_id
      order_by
      position
      slug
      type
      has_archives
      attribute_options {
        count
        description
        menu_order
        name
        slug
      }
    }
  }
}

All product categories (with associated image):

{
  allWcProductsCategories {
    edges {
      node {
        id
        wordpress_id
        name
        slug
        image {
          localFile {
            // childImageSharp ... etc
          }
        }
      }
    }
  }
}

Specific product by wordpress ID:

{
  wcProducts(wordpress_id: {eq: 12}) {
    name
    price
    related_ids
  }
}

Specific product by wordpress ID, with related products:

{
  wcProducts(wordpress_id: {eq: 12}) {
    name
    price
    related_products {
      name
      // etc - same fields as a normal product
    }
  }
}

Specific grouped product by wordpress ID, with links to each product grouped:

{
  wcProducts(wordpress_id: {eq: 12}) {
    name
    price
    grouped_products_nodes {
      name
      // etc - same fields as a normal product
    }
  }
}

Specific product, with variations:

{
  wcProducts(wordpress_id: {eq: 12}) {
    wordpress_id
    name
    price_html
    product_variations {
      # Note: ID, not wordpress_id
      id 
      # Note: no price_html inside variations
      price 
      description
      attributes {
        # The compination of attributes making up this variation. Missing attribute = any
        name
        option
      }
    }

  }
}

Specific product category (with associated products):

{
  wcProductsCategories(wordpress_id: {eq: 20}) {
     name
     slug
     products {
       name
       price
       images {
         localFile {
           // childImageSharp ... etc
         }
       }
     }
   }
}

All Product Tags and their associated products:

{
  allWcProductsTags {
    nodes {
      name
      count
      products {
        name
      }
    }
  }
}

Integration with gatsby-image

You can use images coming from this plugin with gatsby-image. gatsby-image is a React component specially designed to work seamlessly with Gatsby’s GraphQL queries. It combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites.

To use this, you will first need to install and configure it and its dependencies.

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

Then add these plugins to gatsby-config.js:

plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]

You can then use the gatsby-image component:

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fluid={data.wcProducts.images[0].localFile.childImageSharp.fluid} alt={data.wcProducts.images[0].alt} />
  </div>
)

export const query = graphql`
  query allProducts {
     wcProducts (slug: {
        eq: "test-product"
      }) {
        id
        name
        images {
          alt
          localFile {
            childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
  }
`

Some example queries for the fixed and fluid types are below.

Responsive Fluid

{
  wcProducts (slug: {
    eq: "test-product"
  }) {
    id
    name
    images {
      alt
      localFile {
        childImageSharp {
          fluid (maxWidth: 800, cropFocus: CENTER) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}

Responsive Fixed

{
  wcProducts (slug: {
    eq: "test-product"
  }) {
    id
    name
    images {
      alt
      localFile {
        childImageSharp {
          fixed (width: 800, toFormat: JPG) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  }
}

Resize

{
  wcProducts (slug: {
    eq: "test-product"
  }) {
    id
    name
    images {
      alt
      localFile {
        childImageSharp {
          resize (width: 800, height: 600, cropFocus: CENTER, quality: 80) {
            src
          }
        }
      }
    }
  }
}

You can visit gatsby-image for more information, and to learn about the different types of queries.

Changelog