From dab034b105fa4a8d106ccf2cd84a8e19c0b9e070 Mon Sep 17 00:00:00 2001 From: Robert Field Date: Fri, 19 Jan 2024 12:01:44 +0000 Subject: [PATCH] feat: readme up for d2c storefront --- .../workspace/files/README.md.template | 196 +++--------------- 1 file changed, 27 insertions(+), 169 deletions(-) diff --git a/packages/d2c-schematics/workspace/files/README.md.template b/packages/d2c-schematics/workspace/files/README.md.template index 9f8ca58f..22199bc4 100644 --- a/packages/d2c-schematics/workspace/files/README.md.template +++ b/packages/d2c-schematics/workspace/files/README.md.template @@ -1,25 +1,12 @@ -# `BETA` Elastic Path D2C Starter Kit - <%= utils.dasherize(name) %> +# <%= utils.dasherize(name) %> Elastic Path storefront starter -This project was generated with [Elastic Path Commerce Cloud CLI](https://www.elasticpath.com/). +This project was generated with [Composable CLI](https://www.npmjs.com/package/composable-cli). -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](https://documentation.elasticpath.com/commerce-cloud/docs/developer/how-to/get-started-pcm.html#__docusaurus). -Some of the aims of this project are: - -- **"Not Another Demo Store"** :yawning_face:: provide useful tooling rather than a rigid API showcase -- **Configurability** :construction:: components and building blocks that can be selected and customized to specific use - cases -- **Composable Commerce** :handshake:: the starter kit should integrate with best-in-class services to enable modern - ecommerce workflows -- **Extensibility** :rocket:: can be expanded to include new integrations over time -- **Performance** :racing_car:: Elastic Path and Next.js framework working together to provide a fast, scalable - storefront +This storefront accelerates the development of a direct-to-consumer ecommerce experience using Elastic Path's modular products. ## Tech Stack -- [Elastic Path PXM](https://www.elasticpath.com/products/product-experience-manager): our next generation product and - catalog management APIs +- [Elastic Path](https://www.elasticpath.com/products): A family of composable products for businesses that need to quickly & easily create unique experiences and next-level customer engagements that drive revenue. - [Next.js](https://nextjs.org/): a React framework for building static and server-side rendered applications @@ -29,165 +16,22 @@ Some of the aims of this project are: - [Headless UI](https://headlessui.com/): completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. -- [Typescript](https://www.typescriptlang.org/): JavaScript with syntax for types - -## Current feature set reference - -| **Feature** | **Notes** | -|------------------------------------------|-----------------------------------------------------------------------------------------------| -| PDP | Product Display Pages | -| PLP | Product Listing Pages. | -| EPCC PXM product variations | [Learn more](https://elasticpath.dev/docs/pxm/products/pxm-product-variations/pxm-variations) | -| EPCC PXM bundles | [Learn more](https://elasticpath.dev/docs/pxm/products/pxm-bundles/pxm-bundles) | -| EPCC PXM hierarchy-based navigation menu | Main site nav driven directly from your store's hierarchy and node structure | -| Prebuilt helper components | Some basic building blocks for typical ecommerce store features | -| Checkout | [Learn more](https://elasticpath.dev/docs/commerce-cloud/checkout/checkout-workflow) | -| Cart | [Learn more](https://elasticpath.dev/docs/commerce-cloud/carts/carts) | - -## Helper components: - -### Navigation - -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. - -### Footer - -A simple static component with links to placeholder pages provided - -### Featured products - -Helper display component that will show basic information about products in a given hierarchy or node. - -### Promotion banner - -Helper display component that will show a basic banner with info (title, description) about a promotion. +- [Radix UI Primitives](https://www.radix-ui.com/primitives): Unstyled, accessible, open source React primitives for high-quality web apps and design systems. -### Cart and checkout +- [Typescript](https://www.typescriptlang.org/): a typed superset of JavaScript that compiles to plain JavaScript -Currently supporting Elastic Path Payments +## Getting Started -## Setup - -> If you have already configured your integrations at generation time then you're good to go and can skip this section. - -> :warning: **Requires Algolia account and index**: the current early release of this project requires a properly -> configured Algolia index. - -You can configure your site via composable cli or manually. - -### Composable CLI Configuration - -The easiest way to get started is to use the [composable cli](https://www.npmjs.com/package/composable-cli) to configure -the project. - -#### Algolia Configuration - -From inside your project directory run: - -```bash -composable-cli init algolia -``` - -#### Elastic Path Payments - -From inside your project directory run: - -```bash -composable-cli payments ep-payments -``` - -### Manual Configuration - -#### Algolia Configuration - -There are a couple of setup steps that need to be done to get started: - -- Local environment -- Algolia index - -### Setup Local Environment - -First, make a copy of the `.env.example` and rename it to `.env.local.` Set at least the values marked `` - -### Setup Currency - -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. - -### Setup Algolia index - -#### Initial setup - -Make sure you have an Algolia account. Free accounts can be created [on their website](https://www.algolia.com/). - -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](https://documentation.elasticpath.com/commerce-cloud/docs/dashboard/integrations/algolia-integration.html#__docusaurus) -instructions as outlined in our docs. - -You're looking for the **"Algolia Integration - Full / Delta / Large Catalog"** integration. - -#### Supporting category pages - -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 currently. - -##### Configuring facets - -Use the -instructions [in the Algolia docs](https://www.algolia.com/doc/guides/solutions/ecommerce/business-users/initial-configuration/faceting/#step-1-declare-attributes-for-faceting) -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 -``` - -Use default settings. - -##### Create Replicas (standard) - -We make use of two **standard** replicas two demonstrate sort: - -``` -my_catalog_index_price_asc -my_catalog_index_price_desc -``` - -Follow ["Creating a replica"](https://www.algolia.com/doc/guides/managing-results/refine-results/sorting/how-to/sort-by-attribute/#using-the-dashboard) -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. - -#### Finally - -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= -NEXT_PUBLIC_ALGOLIA_API_KEY= -NEXT_PUBLIC_ALGOLIA_INDEX_NAME= -``` - -### Dev Server - -then, run the development server: +Run the development server: ```bash +npm run dev +# or yarn dev # or -npm run dev +pnpm dev +# or +bun dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. @@ -199,3 +43,17 @@ You can start editing the page by modifying `app/page.tsx`. The page will hot re Deployment is typical for a Next.js site. We recommend using a provider like [Netlify](https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/) or [Vercel](https://vercel.com/docs/frameworks/nextjs) to get full Next.js feature support. + +## Current feature set reference + +| **Feature** | **Notes** | +|------------------------------------------|-----------------------------------------------------------------------------------------------| +| PDP | Product Display Pages | +| PLP | Product Listing Pages. | +| EPCC PXM product variations | [Learn more](https://elasticpath.dev/docs/pxm/products/pxm-product-variations/pxm-variations) | +| EPCC PXM bundles | [Learn more](https://elasticpath.dev/docs/pxm/products/pxm-bundles/pxm-bundles) | +| EPCC PXM hierarchy-based navigation menu | Main site nav driven directly from your store's hierarchy and node structure | +| Prebuilt helper components | Some basic building blocks for typical ecommerce store features | +| Checkout | [Learn more](https://elasticpath.dev/docs/commerce-cloud/checkout/checkout-workflow) | +| Cart | [Learn more](https://elasticpath.dev/docs/commerce-cloud/carts/carts) | +