📝 read me

.env.example

@@ -1,4 +1,4 @@
 TWITTER_CREATOR="@DuvCharles"
 TWITTER_SITE="https://nextjs.org/commerce"
 SITE_NAME="Next.js Commerce"
-SYLIUS_STORE_DOMAIN=localhost:8001
+NEXT_PUBLIC_SYLIUS_BACKEND_API=http://localhost:8000

README.md

@@ -1,8 +1,6 @@
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&env=COMPANY_NAME,SHOPIFY_REVALIDATION_SECRET,SHOPIFY_STORE_DOMAIN,SHOPIFY_STOREFRONT_ACCESS_TOKEN,SITE_NAME,TWITTER_CREATOR,TWITTER_SITE)
+# Next.js Commerce x Sylius
 
-# Next.js Commerce
-
-A Next.js 14 and App Router-ready ecommerce template featuring:
+A Next.js 14 and App Router-ready ecommerce template, built with [Sylius](https://github.com/sylius/sylius), featuring:
 
 - Next.js App Router
 - Optimized for SEO using Next.js's Metadata
@@ -12,65 +10,35 @@ A Next.js 14 and App Router-ready ecommerce template featuring:
 - New fetching and caching paradigms
 - Dynamic OG images
 - Styling with Tailwind CSS
-- Checkout and payments with Shopify
 - Automatic light/dark mode based on system settings
 
-<h3 id="v1-note"></h3>
-
-> Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1).
-
-## Providers
-
-Vercel will only be actively maintaining a Shopify version [as outlined in our vision and strategy for Next.js Commerce](https://github.com/vercel/commerce/pull/966).
+## What is Sylius?
 
-Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with their own implementation while leaving the rest of the template mostly unchanged.
+[Sylius](https://sylius.com/) is an open-source e-commerce platform written in PHP. It is built on top of the Symfony framework and offers a wide range of features for building and managing an online store, including product management, order management, and checkout.
 
-- Shopify (this repository)
-- [BigCommerce](https://github.com/bigcommerce/nextjs-commerce) ([Demo](https://next-commerce-v2.vercel.app/))
-- [Medusa](https://github.com/medusajs/vercel-commerce) ([Demo](https://medusa-nextjs-commerce.vercel.app/))
-- [Saleor](https://github.com/saleor/nextjs-commerce) ([Demo](https://saleor-commerce.vercel.app/))
-- [Shopware](https://github.com/shopwareLabs/vercel-commerce) ([Demo](https://shopware-vercel-commerce-react.vercel.app/))
-- [Swell](https://github.com/swellstores/verswell-commerce) ([Demo](https://verswell-commerce.vercel.app/))
-- [Umbraco](https://github.com/umbraco/Umbraco.VercelCommerce.Demo) ([Demo](https://vercel-commerce-demo.umbraco.com/))
-- [Wix](https://github.com/wix/nextjs-commerce) ([Demo](https://wix-nextjs-commerce.vercel.app/))
+## Requirements
 
-> Note: Providers, if you are looking to use similar products for your demo, you can [download these assets](https://drive.google.com/file/d/1q_bKerjrwZgHwCw0ovfUMW6He9VtepO_/view?usp=sharing).
+- Node.js
+- PHP
 
-## Integrations
+## Getting started
 
-Integrations enable upgraded or additional functionality for Next.js Commerce
+### Running Sylius
 
-- [Orama](https://github.com/oramasearch/nextjs-commerce) ([Demo](https://vercel-commerce.oramasearch.com/))
-  - Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based configuration.
-  - Search runs entirely in the browser for smaller catalogs or on a CDN for larger.
+1. You need a [Sylius](https://sylius.com/download/) instance, either in the cloud or self-hosted.
+2. Follow the Read-Me of this [repository](https://github.com/theodo/sylius-commerce-config) to configure your Sylius Project
 
-## Running locally
+### Running Next.js Commerce
 
-You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
+1\. You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. Copy the contents of .env.example to a .env file in the root of your Next.js Commerce project, and make sure the NEXT_PUBLIC_Sylius_BACKEND_API environment variable points to your Sylius backend domain (default: http://localhost:8000).
 
-> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Shopify store.
+> Note: You should not commit your `.env` file or it will expose secrets.
 
-1. Install Vercel CLI: `npm i -g vercel`
-2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
-3. Download your environment variables: `vercel env pull`
+2\. From the `nextjs-commerce` subfolder, run:
 
 ```bash
 pnpm install
 pnpm dev
 ```
 
 Your app should now be running on [localhost:3000](http://localhost:3000/).
-
-<details>
-  <summary>Expand if you work at Vercel and want to run locally and / or contribute</summary>
-
-1. Run `vc link`.
-1. Select the `Vercel Solutions` scope.
-1. Connect to the existing `commerce-shopify` project.
-1. Run `vc env pull` to get environment variables.
-1. Run `pnpm dev` to ensure everything is working correctly.
-</details>
-
-## Vercel, Next.js Commerce, and Shopify Integration Guide
-
-You can use this comprehensive [integration guide](http://vercel.com/docs/integrations/shopify) with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel.

app/sitemap.ts

@@ -1,5 +1,4 @@
 import { getCollections, getPages, getProducts } from 'lib/sylius';
-import { validateEnvironmentVariables } from 'lib/utils';
 import { MetadataRoute } from 'next';
 
 type Route = {

components/cart/add-to-cart.tsx

@@ -72,7 +72,6 @@ export function AddToCart({
 }) {
   const [message, formAction] = useFormState(addItem, null);
   const searchParams = useSearchParams();
-  const [isPending, startTransition] = useTransition();
   const defaultVariantId = variants.length === 1 ? variants[0]?.code : undefined;
   const variant = variants.find((variant: ProductVariant) =>
     variant.selectedOptions.every(

lib/sylius/index.ts

@@ -12,7 +12,7 @@ import {
   UpdateCartPayload
 } from './types';
 
-const DOMAIN = `${process.env.SYLIUS_STORE_DOMAIN}`;
+const DOMAIN = `${process.env.NEXT_PUBLIC_SYLIUS_BACKEND_API}`;
 const ENDPOINT = `${DOMAIN}${SYLIUS_API_ENDPOINT}`;
 
 // Fetch

lib/sylius/normalizer/product-normalizer.ts

@@ -48,7 +48,7 @@ const normalizeProductOption = (option: SyliusProductOption): ProductOption => (
 });
 
 export const normalizeProductImage = (image: SyliusProductImage): Image => ({
-  url: process.env.NEXT_PUBLIC_SYLIUS_API_URL + image.path,
+  url: process.env.NEXT_PUBLIC_SYLIUS_BACKEND_API + image.path,
   altText: image.path,
   width: 400,
   height: 400