Skip to main content

BigCommerce

Plugin for Gesso Commerce Provider​

note

The following describes general usage, if you setup your project following getting-started/installation then these next steps have already been handled for you.

Requirements​

A BigCommerce store Trial Sign up

From your BigCommerce Admin panel note the following information:

  • BigCommerce Storefront URL
  • BigCommerce Store Hash
  • BigCommerce Bearer Token

Installation​

Install the Gesso Commerce provider

  • pnpm install @acromedia/gesso-commerce

Install Gesso BigCommerce plugin

  • pnpm install @acromedia/gesso-bigcommerce

Configure the package

  • Set the GESSO_BIGCOMMERCE_XAUTH_TOKEN and GESSO_LOCAL_URL env values, either in .env or directly

    • The xauth-token you can get from BigCommerce dashboard

    • The local url should be your testing url, like localhost:3000 for nextjs or localhost:8082 for directly working on this lib

Generate a gesso.config.json

note

This file configured to default to Acro’s test storefront. You will need to update this file with information specific to your storefront.

  • pnpm gesso config bigcommerce

If you didn't pass BigCommerce options to @acromedia/create-gesso and you're adding this module for the first time construct the provider using

  • pnpm gesso construct commerce bigcommerce

After running the construct script you will now see a commerce.ts file in the root directory of your project. This file takes care of telling gesso-commerce what plugin system is being used and ensures the correct hooks are exposed by gesso-commerce.

Register the plugin with the provider

  • Under your source files directory (commonly src) there will be a newly added commerce.ts file.
// commerce.ts
// Import the commerce provider
import { commerce } from "@acromedia/gesso-commerce";
// Import the provider plugins
import plugin from "@acromedia/gesso-bigcommerce";
// Import the Gesso config.
import config from '../gesso.config.json';

// Register the plugins and config with commerce provider.
const commerce = commerce(plugin, config);

export default commerce;
info

If you plan on using the useCart hook in your application you will need to do the following:

Install the proxy package in your frontend project with the command: yarn add next-http-proxy-middleware

Create a new api folder inside the pages directory (e.g. src/pages/api

Copy the bigcommerce api route ([[…route]].ts file from the assets folder into your new api folder

Add the NEXT_PUBLIC_BIGCOMMERCE_STOREFRONT_URL variable to your .env file

Usage​

// import the commerce provider from the commerce.ts file.
import commerce from "./commerce";

// Import your required functionality.
const { useProduct } = commerce;

const ProductPage = ({ productId }) => {
  // Example implementation of the useProduct hook provided via Gesso Commerce.
  const { payload, error, state } = useProduct(productId);

  return <ProductDetails product={payload} />;
};

Payments via BigCommerce​

info

Can't use clientside API for payments,

We have 3 options currently for implementing BigCommerce payments in Gesso frontend:

  • Offsite Redirect to normal bigcommerce checkout page themed as you wish
  • Embedded Embed checkout via iframe (must have full checkout embedded) (easiest)
  • Customizable Route payments through nextjs backend using Gesso BigCommerce Middleware. (hardest)

Manual setup​