The Elastic Path D2C Starter Kit is an opinionated tool box aimed at accelerating the development of direct-to-consumer ecommerce storefronts using Elastic Path PXM APIs. Some of the aims of this project are:
- "Not Another Demo Store" 🥱: provide useful tooling rather than a rigid API showcase
- Configurability 🚧: components and building blocks that can be selected and customized to specific use cases
- Composable Commerce 🤝: the starter kit should integrate with best-in-class services to enable modern ecommerce workflows
- Extensibility 🚀: can be expanded to include new integrations over time
- Performance 🏎️: extensive use of Next.js static generation for speed
-
Next.js
-
EPCC PXM: our next generation product and catalog management APIs
-
Chakra UI: enabling you to get started with a range of out the box components that are easy to customize
-
Algolia: our current search solution
-
Netlify (currently)
A list of planned enhancements for this project
-
create-elasticpath-app: we aim to provide a CLI interface for the app similar tocreate-react-appand other tools you may have used This stands to enable a key goal which is to allow you to ‘scaffold’ out your app at create-time, specifying the app structure, integrations and behaviour you require -
Additional integrations: we have plans to support additional search providers alongside CMS and site builder integrations
| Feature | Notes |
|---|---|
| Static PDP | Product Display Pages |
| Static PLP | Product Listing Pages. Currently driven via Algolia |
| EPCC PXM product variations | Learn more |
| EPCC PXM static bundles | Learn more |
| EPCC PXM hierarchy-based navigation menu | Main site nav driven directly from your store's hiearchy and node structure |
| Prebuilt helper components | Some basic building blocks for typical ecommerce store features |
The store navigation component is node/hierarchy driven and built statically. The ‘top level’ is created directly by the base hierarchies in your EPCC store. This is currently limited to 5 items. 5 ‘direct child’ nodes of each hierarchy, and the nodes attached to them, are supported.
A simple static component with links to placeholder pages provided
Helper display component that will show basic information about products in a given hierarchy or node. Can be passed either a hierarchy/node id from which products can be fetched dynamically, or statically provided as a populated object via agetStaticProps call.
Helper display component that will show basic information about a hierarchy or node. Can be passed either a hierarchy/node id which can be fetched dynamically, or statically provided as a populated object via agetStaticProps call.
Helper display component that will show a basic banner with info (title, description) about a promotion. Must be passed populated object via agetStaticProps call because fetching promotions required a client_credentials token. You can optionally add a background image to a promotion via a custom flow field named epcc-reference-promotion-image (add a string URL of where the image can be fetched from)
Currently supporting Braintree checkout (Elastic Path Payments coming soon)
⚠️ Requires Algolia account and index: the current beta release of this project requires a properly configured Algolia index.
There are a couple of setup steps that need to be done to get started:
- Local environment
- Algolia index
First, make a copy of the .env.example and rename it to .env.local. Set at least the values marked <required>
Add NEXT_PUBLIC_DEFAULT_CURRENCY_CODE value in your environment file. Make sure you use ISO currency code in uppercase e.g. USD, GBP, EUR, CAD etc.
Add NEXT_PUBLIC_STRIPE_ACCOUNT_ID and NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY value in your environment file. Make sure you use Stripe connect account to use EP Payment.
- NEXT_PUBLIC_STRIPE_ACCOUNT_ID
- You will able to see account id in your Stripe profile. Go to https://dashboard.stripe.com/settings/account and you will able to see your account id.
- NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
- Please contact Elastic Path Customer Service team to get the publishable key.
😫 We recognise manually configuring Algolia in this way is a pain. We are working on tools to streamline this process.
Make sure you have an Algolia account. Free accounts can be created on their website.
Once you have your api keys from Algolia you need to configure the Algolia integration from Commerce Manager e.g. https://euwest.cm.elasticpath.com/integrations-hub
Follow the Integrating with Algolia instructions as outlined in our docs.
You're looking for the "Algolia Integration - Full / Delta / Large Catalog" integration.
Our category pages depend on Algolia at the moment and more specially make use of the Aloglia instantsearch widgets. These widgets make use of Facets which have to be configured manually currently.
Use the instructions in the Algolia docs to configure the following attribute for faceting:
ep_categories.lvl0
ep_categories.lvl1
ep_categories.lvl2
ep_categories.lvl3
ep_slug_categories.lvl0
ep_slug_categories.lvl1
ep_slug_categories.lvl2
ep_slug_categories.lvl3
ep_price.USD.float_price
ep_extensions_products_specifications.brand
ep_extensions_products_specifications.on-sale
ep_extensions_products_specifications.color
In order to use faceting add the attribute name to the list of attributes in Facets and Facet display sections of Algolia dashboard in Configuration menu. Use default settings.
We make use of two standard replicas to demonstrate sort:
my_catalog_index_price_asc
my_catalog_index_price_desc
Follow "Creating a replica" in the Algolia docs to set both of these up based on the main index created previously by the integrations hub Aloglia integration. Make sure to create a standard replica.
Make sure you add the three required Algolia environment variables to your .env.local file for local dev and your production environment.
NEXT_PUBLIC_ALGOLIA_APP_ID=<required>
NEXT_PUBLIC_ALGOLIA_API_KEY=<required>
NEXT_PUBLIC_ALGOLIA_INDEX_NAME=<required>
then, run the development server:
yarn dev
# or
npm run devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
The project has a pre-commit hook that will run four stages independently for .ts, .tsx, .js and .jsx files
- runs
prettierformating fix - typecheck by running
tsc - validate code using
eslintwith thenext lintcommand - runs a final
prettierformat check to make sure nothing slipped through.
This is configured in the .lintstagedrc.js file in the root project directory.
Deployment is typical for a Next.js site. We recommend using a provider like Netlify or Vercel to get full Next.js feature support.
You can use an EPCC Webhook created via Commerce Manager to trigger rebuild of your static pages with the ‘catalog updated’ event
On demand incremental static regeneration is supported and encouraged, however currently this is only supported via Vercel.