From b91c52ab45f5de04450d83047c4c8abfdd0fa3eb Mon Sep 17 00:00:00 2001 From: AbhijeetBiswal Date: Sat, 18 Jan 2025 12:32:29 +0530 Subject: [PATCH 1/3] new blog --- .../page.md | 187 ++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 src/docs/src/routes/(docs)/blog/(posts)/daisyui-nextjs-online-store-template/page.md diff --git a/src/docs/src/routes/(docs)/blog/(posts)/daisyui-nextjs-online-store-template/page.md b/src/docs/src/routes/(docs)/blog/(posts)/daisyui-nextjs-online-store-template/page.md new file mode 100644 index 00000000000..f206e4b119e --- /dev/null +++ b/src/docs/src/routes/(docs)/blog/(posts)/daisyui-nextjs-online-store-template/page.md @@ -0,0 +1,187 @@ +--- +title: "Introducing: Online store template for NextJS and daisyUI" +desc: Learn to create a professional online store using our Online Store Template, powered by Lemon Squeezy API and customizable product data. +published: true +date: 2025-01-18 +thumbnail: https://img.daisyui.com/images/blog/online-store-template-thumbnail.webp +author: Abhijeet Biswal +tags: + - Templates +--- + +## Introduction + +Creating an online store has never been easier! With the ["Online Store Template"](https://www.daisyui.com/store/#426780) available at Official [daisyUI store](https://www.daisyui.com/store), you can quickly set up a professional store using Next.js, TypeScript, and the Lemon Squeezy API. This template allows for extensive customization with additional metadata stored in JSON files. Let’s dive in! + +## 1. Installation + +Begin by setting up the project dependencies. + +### Step 1: Install Dependencies + +Run the following command in your terminal to install the required dependencies: + +```bash +npm install +``` + +To start the development server: + +```bash +npm run dev +``` + +This will run your site in development mode at `http://localhost:3000`. + +## 2. Configure Your Site + +### Adding Your Lemon Squeezy API + +#### Step 1: Configure the API + +By default, the site displays example data from the `data/lemonsqueezy-products.example.json` file. To connect your store to Lemon Squeezy, follow these steps: + +1. **Generate an API Key** + + - Log in to your [Lemon Squeezy Dashboard](https://app.lemonsqueezy.com/settings/api). + - Create a new API key and copy it. + +2. **Add the API Key to the Environment File** + +![env file example](https://img.daisyui.com/images/blog/store-env.webp) + +- Create a `.env` file in the root of your project. +- Add the following line: + ```env + LEMON_SQUEEZY_API_KEY=your_api_key_here + ``` + +Replace `your_api_key_here` with the API key you copied earlier. + +3. **Test Your Integration** + Restart the development server to load the environment variables and see your products fetched from Lemon Squeezy. + +### Extending Product Data + +#### Step 2: Add Metadata + +The Lemon Squeezy dashboard allows limited customization of product data. To enhance your store’s functionality, use the `data/metadata.json` file for additional information. This includes: + +- **Categories**: Add custom categories like `trending`, `new arrivals`, or `bestsellers`. +- **Variants**: Define product variations (e.g., sizes, colors) with names and links. +- **Images**: Include high-quality images for product galleries. +- **Details**: Add detailed product descriptions and technical information. + +Example `metadata.json` entry: + +```json +{ + "id": "12345", + "availability": true, + "sale": true, + "category": ["trending", "bestsellers"], + "original_price": "$50", + "variant": { + "size": [ + { "name": "Small", "link": "https://example.com/small" }, + { "name": "Medium", "link": "https://example.com/medium" } + ] + }, + "info": { + "Material": "100% Cotton", + "Care Instructions": "Machine washable" + }, + "images": ["https://example.com/image1.jpg", "https://example.com/image2.jpg"] +} +``` + +### Configure Your Site + +#### Step 3: Customizing the Site + +To personalize your store’s content and design, edit the following files: + +1. **`data/site.ts`**: Update the global site settings, including the site name, hero section, and footer content. +2. **`data/sidebar.ts`**: Modify the sidebar content, including categories and quick links. + +#### Editing Pages + +To customize the core pages of your store, update these files: + +![pages route](https://img.daisyui.com/images/blog/pages-route-example.webp) + +- **Homepage** (`/page.tsx`): + + - Navigate to the `app/page.tsx` file. + - Update the hero section, featured products, and banners to reflect your brand. + + Example snippet from `page.tsx`: + + ```tsx + export default async function Home() { + return ( +
+ + + + + + + +
+ ); + } + ``` + +- **Category and Collection Pages** (`/collections/[slug].tsx`): + + - Located in `app/collections/[slug].tsx`, this file controls category and collection pages. + - Use this file to manage the display of products dynamically based on categories. + +- **Product Details Page** (`/products/[slug].tsx`): + + - Located in `app/products/[slug].tsx`, this file handles individual product details. + - This page dynamically displays product images, information, and variants. + + Example product details layout: + + ```tsx + const ProductDetails = () => { + return ( +
+
+
+ +
+
+
+ ); + }; + ``` + +## 3. Build Your Store for Production + +Once you're happy with your store, it's time to build it for production: + +```bash +npm run build +``` + +This command will optimize and generate your site’s static assets, ready for deployment. + +## 4. Deployment Options + +Now that your store is built, you can deploy it using one of the following platforms: + +- [Netlify](https://www.netlify.com/) +- [Vercel](https://vercel.com/) + +It can also be deployed anywhere Next.js works. For more details, refer to the [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying). + +## Conclusion + +The ["Online Store Template"](https://www.daisyui.com/store/#426780) by daisyUI simplifies the process of building and managing an online store. With Lemon Squeezy API and customizable JSON metadata, you have the flexibility to create a store that meets your unique needs. Start building your store today and take your business to the next level! + +## Need Help? + +If you have questions or need assistance, join our [Discord community](https://daisyui.com/discord/). We’re here to help you get started and troubleshoot any issues. From 28e764ec6ef45be3e11df8217df2afbb83a24e46 Mon Sep 17 00:00:00 2001 From: AbhijeetBiswal Date: Sat, 18 Jan 2025 12:36:42 +0530 Subject: [PATCH 2/3] .. --- .../page.md | 187 ------------------ 1 file changed, 187 deletions(-) delete mode 100644 src/docs/src/routes/(docs)/blog/(posts)/daisyui-nextjs-online-store-template/page.md diff --git a/src/docs/src/routes/(docs)/blog/(posts)/daisyui-nextjs-online-store-template/page.md b/src/docs/src/routes/(docs)/blog/(posts)/daisyui-nextjs-online-store-template/page.md deleted file mode 100644 index f206e4b119e..00000000000 --- a/src/docs/src/routes/(docs)/blog/(posts)/daisyui-nextjs-online-store-template/page.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: "Introducing: Online store template for NextJS and daisyUI" -desc: Learn to create a professional online store using our Online Store Template, powered by Lemon Squeezy API and customizable product data. -published: true -date: 2025-01-18 -thumbnail: https://img.daisyui.com/images/blog/online-store-template-thumbnail.webp -author: Abhijeet Biswal -tags: - - Templates ---- - -## Introduction - -Creating an online store has never been easier! With the ["Online Store Template"](https://www.daisyui.com/store/#426780) available at Official [daisyUI store](https://www.daisyui.com/store), you can quickly set up a professional store using Next.js, TypeScript, and the Lemon Squeezy API. This template allows for extensive customization with additional metadata stored in JSON files. Let’s dive in! - -## 1. Installation - -Begin by setting up the project dependencies. - -### Step 1: Install Dependencies - -Run the following command in your terminal to install the required dependencies: - -```bash -npm install -``` - -To start the development server: - -```bash -npm run dev -``` - -This will run your site in development mode at `http://localhost:3000`. - -## 2. Configure Your Site - -### Adding Your Lemon Squeezy API - -#### Step 1: Configure the API - -By default, the site displays example data from the `data/lemonsqueezy-products.example.json` file. To connect your store to Lemon Squeezy, follow these steps: - -1. **Generate an API Key** - - - Log in to your [Lemon Squeezy Dashboard](https://app.lemonsqueezy.com/settings/api). - - Create a new API key and copy it. - -2. **Add the API Key to the Environment File** - -![env file example](https://img.daisyui.com/images/blog/store-env.webp) - -- Create a `.env` file in the root of your project. -- Add the following line: - ```env - LEMON_SQUEEZY_API_KEY=your_api_key_here - ``` - -Replace `your_api_key_here` with the API key you copied earlier. - -3. **Test Your Integration** - Restart the development server to load the environment variables and see your products fetched from Lemon Squeezy. - -### Extending Product Data - -#### Step 2: Add Metadata - -The Lemon Squeezy dashboard allows limited customization of product data. To enhance your store’s functionality, use the `data/metadata.json` file for additional information. This includes: - -- **Categories**: Add custom categories like `trending`, `new arrivals`, or `bestsellers`. -- **Variants**: Define product variations (e.g., sizes, colors) with names and links. -- **Images**: Include high-quality images for product galleries. -- **Details**: Add detailed product descriptions and technical information. - -Example `metadata.json` entry: - -```json -{ - "id": "12345", - "availability": true, - "sale": true, - "category": ["trending", "bestsellers"], - "original_price": "$50", - "variant": { - "size": [ - { "name": "Small", "link": "https://example.com/small" }, - { "name": "Medium", "link": "https://example.com/medium" } - ] - }, - "info": { - "Material": "100% Cotton", - "Care Instructions": "Machine washable" - }, - "images": ["https://example.com/image1.jpg", "https://example.com/image2.jpg"] -} -``` - -### Configure Your Site - -#### Step 3: Customizing the Site - -To personalize your store’s content and design, edit the following files: - -1. **`data/site.ts`**: Update the global site settings, including the site name, hero section, and footer content. -2. **`data/sidebar.ts`**: Modify the sidebar content, including categories and quick links. - -#### Editing Pages - -To customize the core pages of your store, update these files: - -![pages route](https://img.daisyui.com/images/blog/pages-route-example.webp) - -- **Homepage** (`/page.tsx`): - - - Navigate to the `app/page.tsx` file. - - Update the hero section, featured products, and banners to reflect your brand. - - Example snippet from `page.tsx`: - - ```tsx - export default async function Home() { - return ( -
- - - - - - - -
- ); - } - ``` - -- **Category and Collection Pages** (`/collections/[slug].tsx`): - - - Located in `app/collections/[slug].tsx`, this file controls category and collection pages. - - Use this file to manage the display of products dynamically based on categories. - -- **Product Details Page** (`/products/[slug].tsx`): - - - Located in `app/products/[slug].tsx`, this file handles individual product details. - - This page dynamically displays product images, information, and variants. - - Example product details layout: - - ```tsx - const ProductDetails = () => { - return ( -
-
-
- -
-
-
- ); - }; - ``` - -## 3. Build Your Store for Production - -Once you're happy with your store, it's time to build it for production: - -```bash -npm run build -``` - -This command will optimize and generate your site’s static assets, ready for deployment. - -## 4. Deployment Options - -Now that your store is built, you can deploy it using one of the following platforms: - -- [Netlify](https://www.netlify.com/) -- [Vercel](https://vercel.com/) - -It can also be deployed anywhere Next.js works. For more details, refer to the [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying). - -## Conclusion - -The ["Online Store Template"](https://www.daisyui.com/store/#426780) by daisyUI simplifies the process of building and managing an online store. With Lemon Squeezy API and customizable JSON metadata, you have the flexibility to create a store that meets your unique needs. Start building your store today and take your business to the next level! - -## Need Help? - -If you have questions or need assistance, join our [Discord community](https://daisyui.com/discord/). We’re here to help you get started and troubleshoot any issues. From 66052ff7053f9d227adceb7c19cae04657024dac Mon Sep 17 00:00:00 2001 From: AbhijeetBiswal Date: Sat, 18 Jan 2025 12:39:45 +0530 Subject: [PATCH 3/3] new blog --- .../+page.md | 187 ++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 src/docs/src/routes/(docs)/blog/(posts)/daisyui-nextjs-online-store-template/+page.md diff --git a/src/docs/src/routes/(docs)/blog/(posts)/daisyui-nextjs-online-store-template/+page.md b/src/docs/src/routes/(docs)/blog/(posts)/daisyui-nextjs-online-store-template/+page.md new file mode 100644 index 00000000000..f206e4b119e --- /dev/null +++ b/src/docs/src/routes/(docs)/blog/(posts)/daisyui-nextjs-online-store-template/+page.md @@ -0,0 +1,187 @@ +--- +title: "Introducing: Online store template for NextJS and daisyUI" +desc: Learn to create a professional online store using our Online Store Template, powered by Lemon Squeezy API and customizable product data. +published: true +date: 2025-01-18 +thumbnail: https://img.daisyui.com/images/blog/online-store-template-thumbnail.webp +author: Abhijeet Biswal +tags: + - Templates +--- + +## Introduction + +Creating an online store has never been easier! With the ["Online Store Template"](https://www.daisyui.com/store/#426780) available at Official [daisyUI store](https://www.daisyui.com/store), you can quickly set up a professional store using Next.js, TypeScript, and the Lemon Squeezy API. This template allows for extensive customization with additional metadata stored in JSON files. Let’s dive in! + +## 1. Installation + +Begin by setting up the project dependencies. + +### Step 1: Install Dependencies + +Run the following command in your terminal to install the required dependencies: + +```bash +npm install +``` + +To start the development server: + +```bash +npm run dev +``` + +This will run your site in development mode at `http://localhost:3000`. + +## 2. Configure Your Site + +### Adding Your Lemon Squeezy API + +#### Step 1: Configure the API + +By default, the site displays example data from the `data/lemonsqueezy-products.example.json` file. To connect your store to Lemon Squeezy, follow these steps: + +1. **Generate an API Key** + + - Log in to your [Lemon Squeezy Dashboard](https://app.lemonsqueezy.com/settings/api). + - Create a new API key and copy it. + +2. **Add the API Key to the Environment File** + +![env file example](https://img.daisyui.com/images/blog/store-env.webp) + +- Create a `.env` file in the root of your project. +- Add the following line: + ```env + LEMON_SQUEEZY_API_KEY=your_api_key_here + ``` + +Replace `your_api_key_here` with the API key you copied earlier. + +3. **Test Your Integration** + Restart the development server to load the environment variables and see your products fetched from Lemon Squeezy. + +### Extending Product Data + +#### Step 2: Add Metadata + +The Lemon Squeezy dashboard allows limited customization of product data. To enhance your store’s functionality, use the `data/metadata.json` file for additional information. This includes: + +- **Categories**: Add custom categories like `trending`, `new arrivals`, or `bestsellers`. +- **Variants**: Define product variations (e.g., sizes, colors) with names and links. +- **Images**: Include high-quality images for product galleries. +- **Details**: Add detailed product descriptions and technical information. + +Example `metadata.json` entry: + +```json +{ + "id": "12345", + "availability": true, + "sale": true, + "category": ["trending", "bestsellers"], + "original_price": "$50", + "variant": { + "size": [ + { "name": "Small", "link": "https://example.com/small" }, + { "name": "Medium", "link": "https://example.com/medium" } + ] + }, + "info": { + "Material": "100% Cotton", + "Care Instructions": "Machine washable" + }, + "images": ["https://example.com/image1.jpg", "https://example.com/image2.jpg"] +} +``` + +### Configure Your Site + +#### Step 3: Customizing the Site + +To personalize your store’s content and design, edit the following files: + +1. **`data/site.ts`**: Update the global site settings, including the site name, hero section, and footer content. +2. **`data/sidebar.ts`**: Modify the sidebar content, including categories and quick links. + +#### Editing Pages + +To customize the core pages of your store, update these files: + +![pages route](https://img.daisyui.com/images/blog/pages-route-example.webp) + +- **Homepage** (`/page.tsx`): + + - Navigate to the `app/page.tsx` file. + - Update the hero section, featured products, and banners to reflect your brand. + + Example snippet from `page.tsx`: + + ```tsx + export default async function Home() { + return ( +
+ + + + + + + +
+ ); + } + ``` + +- **Category and Collection Pages** (`/collections/[slug].tsx`): + + - Located in `app/collections/[slug].tsx`, this file controls category and collection pages. + - Use this file to manage the display of products dynamically based on categories. + +- **Product Details Page** (`/products/[slug].tsx`): + + - Located in `app/products/[slug].tsx`, this file handles individual product details. + - This page dynamically displays product images, information, and variants. + + Example product details layout: + + ```tsx + const ProductDetails = () => { + return ( +
+
+
+ +
+
+
+ ); + }; + ``` + +## 3. Build Your Store for Production + +Once you're happy with your store, it's time to build it for production: + +```bash +npm run build +``` + +This command will optimize and generate your site’s static assets, ready for deployment. + +## 4. Deployment Options + +Now that your store is built, you can deploy it using one of the following platforms: + +- [Netlify](https://www.netlify.com/) +- [Vercel](https://vercel.com/) + +It can also be deployed anywhere Next.js works. For more details, refer to the [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying). + +## Conclusion + +The ["Online Store Template"](https://www.daisyui.com/store/#426780) by daisyUI simplifies the process of building and managing an online store. With Lemon Squeezy API and customizable JSON metadata, you have the flexibility to create a store that meets your unique needs. Start building your store today and take your business to the next level! + +## Need Help? + +If you have questions or need assistance, join our [Discord community](https://daisyui.com/discord/). We’re here to help you get started and troubleshoot any issues.