Skip to content
master
Switch branches/tags
Code
This branch is up to date with master.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Gatsby Theme for BrikL Storefronts

A Gatsby theme for building eCommerce storefronts powered by BrikL

A live demo can be found here

It includes:

  • the theme itself (located in theme/)
  • a demo site (located in demo/) that installs the theme
  • a Yarn workspaces configuration so the theme and demo can be worked on simultaneously
  • a bunch of generated eCommerce pages to get you started
  • multi language support

To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme

    yarn add @brikl/gatsby-theme-brikl-store
    npm install --save @brikl/gatsby-theme-brikl-store
  2. Add the theme to your gatsby-config.js:

    module.exports = {
      plugins: [
        {
          resolve: `@brikl/gatsby-theme-brikl-store`,
          options: {
            clientId: process.env.GATSBY_BRIKL_CLIENT_ID,
            shopId: process.env.GATSBY_BRIKL_SHOP_ID,
            userId: process.env.GATSBY_BRIKL_USER_ID
          }
        }
      ]
    };
  3. Create a .env file in the theme or demo folder or pass environment variables to the build like below:

    GATSBY_BRIKL_SHOP_ID=gatsby-theme-contest
    GATSBY_BRIKL_CLIENT_ID=ASK-US-FOR-A-CLIENT-ID
    GATSBY_BRIKL_USER_ID=ASK-US-FOR-YOUR-USER-ID
  4. Start developing your site or editing the theme

    gatsby develop

    The demo will start at http://localhost:8000

Component Shadowing

You can use Gatsby component shadowing to change the behaviour/appearance of components.

If you wanted to change the look of the products in /products page, you could create the following file inside your Gatsby project.

// src/@brikl/gatsby-theme-brikl-store/components/Product.js

import React from "react";
import { getTextFromLanguage } from "@brikl/gatsby-theme-brikl-store/src/utils/utils";
import { Link } from "gatsby";
import { Grid } from "@material-ui/core";

const NewProduct = ({ product, langCode, urlPrefix }) => {
  return (
    <Grid item xs={12} sm={6} md={4} lg={3} xl={3} key={product.id}>
      <h1>{getTextFromLanguage(product.title.text, langCode)}</h1>
      <h5>{getTextFromLanguage(product.description.text, langCode)}</h5>
      <h3>
        price: ${product.price.value} {product.price.currency}
      </h3>
      <Link
        to={
          `${urlPrefix}/products/` +
          getTextFromLanguage(product.slugs, langCode)
        }
      >
        Details
      </Link>
    </Grid>
  );
};

export default NewProduct;

For more examples, check out the /demo-shadowed folder. You can also see a demo website of the shadowed examples here

Roadmap

Next steps:

  • NPM & sem-ver workflow
  • Brikl design studio integration
  • Tests
  • Add to cart mutation
  • Checkout & payment
  • Provide sample userId and clientId for demo purposes
  • Contribution guidelines

About

A Gatsby theme for building eCommerce storefronts powered by BrikL

Resources

Releases

No releases published

Packages

No packages published