13 | );
14 | };
15 |
16 | export default CloudinaryImage;
17 |
--------------------------------------------------------------------------------
/ecommerce/src/mappings/Header.mapper.tsx:
--------------------------------------------------------------------------------
1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
2 | import { Header } from "@/src/components/Layout/Header";
3 |
4 | // ❖ Header
5 | interface FigmaHeaderProps extends BaseFigmaProps {
6 | }
7 |
8 | figmaMapping({
9 | componentKey: "bf08eba01818598edd0d7ca65a48372fa4395184",
10 | mapper(figma: FigmaHeaderProps) {
11 | return {children}
22 |
14 |
17 | );
18 | };
19 |
20 | export default TextHero;
--------------------------------------------------------------------------------
/ecommerce/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | /app/testing/
4 | /components/testing/
5 |
6 | # dependencies
7 | /node_modules
8 | /.pnp
9 | .pnp.js
10 | .yarn/install-state.gz
11 |
12 | # testing
13 | /coverage
14 |
15 | # next.js
16 | /.next/
17 | /out/
18 |
19 | # production
20 | /build
21 |
22 | # misc
23 | .DS_Store
24 | *.pem
25 |
26 | # debug
27 | npm-debug.log*
28 | yarn-debug.log*
29 | yarn-error.log*
30 |
31 | # local env files
32 | .env*.local
33 | .env.development
34 | .env.production
35 |
36 | # vercel
37 | .vercel
38 |
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 |
43 | /app/testing
44 | /components/testing
45 |
--------------------------------------------------------------------------------
/vcp-playground/src/components/Hero/TextHero.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This code was generated by Builder.io.
3 | */
4 | import React from 'react';
5 |
6 | interface TextHeroProps {
7 | title: string;
8 | subTitle?: string;
9 | }
10 |
11 | const TextHero: React.FC{title}
15 | 16 |
14 |
17 | );
18 | };
19 |
20 | export default TextHero;
--------------------------------------------------------------------------------
/ecommerce/src/mappings/HeroWithChildren.mapper.tsx:
--------------------------------------------------------------------------------
1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
2 | import HeroWithChildren from "@/src/components/Hero/HeroWithChildren";
3 |
4 | // ❖ HeroWithChildren
5 | interface FigmaHeroWithChildren extends BaseFigmaProps {
6 | Header?: string;
7 | }
8 |
9 | figmaMapping({
10 | componentKey: "df1998bf6ffbd4f7a7f4005da8a0ea47b14a85a4",
11 | mapper(figma: FigmaHeroWithChildren) {
12 | return (
13 | {title}
15 | 16 |
16 |
19 | {count}
20 |
23 |
24 | );
25 | };
26 |
27 | export default Counter;
28 |
--------------------------------------------------------------------------------
/marketing/components/Hero/TextHero.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This code was generated by Builder.io.
3 | */
4 | import React from 'react';
5 |
6 | interface TextHeroProps {
7 | title: string;
8 | subTitle: string;
9 | }
10 |
11 | const TextHero: React.FC
14 |
19 | );
20 | };
21 |
22 | export default TextHero;
--------------------------------------------------------------------------------
/marketing/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ce-nextjs-demo",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@builder.io/dev-tools": "^1.0.2",
13 | "@builder.io/react": "^3.2.7",
14 | "@builder.io/sdk": "^2.2.2",
15 | "next": "14.1.4",
16 | "react": "^18",
17 | "react-dom": "^18"
18 | },
19 | "devDependencies": {
20 | "@types/node": "^20",
21 | "@types/react": "^18",
22 | "@types/react-dom": "^18",
23 | "autoprefixer": "^10.0.1",
24 | "eslint": "^8",
25 | "eslint-config-next": "14.1.4",
26 | "postcss": "^8",
27 | "tailwindcss": "^3.3.0",
28 | "typescript": "^5"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/ecommerce/src/components/Counter/Counter.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import React, { useState } from "react";
3 | import styles from "./styles.module.css";
4 |
5 | interface CounterProps {
6 | initialCount?: number;
7 | }
8 |
9 | const Counter = ({ initialCount = 99 }: CounterProps) => {
10 | const [count, setCount] = useState(initialCount);
11 |
12 | const updateCount = (amount: number) => () => setCount(count + amount);
13 |
14 | return (
15 | {title}
15 | 16 | {/*{subTitle}
*/}
17 |
18 |
16 |
19 | {count}
20 |
23 |
24 | );
25 | };
26 |
27 | export default Counter;
28 |
--------------------------------------------------------------------------------
/vcp-playground/src/components/Counter/Counter.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import React, { useState } from "react";
3 | import styles from "./styles.module.css";
4 |
5 | interface CounterProps {
6 | initialCount?: number;
7 | }
8 |
9 | const Counter = ({ initialCount = 99 }: CounterProps) => {
10 | const [count, setCount] = useState(initialCount);
11 |
12 | const updateCount = (amount: number) => () => setCount(count + amount);
13 |
14 | return (
15 |
16 |
19 | {count}
20 |
23 |
24 | );
25 | };
26 |
27 | export default Counter;
28 |
--------------------------------------------------------------------------------
/ecommerce/src/components/PLP/Pagination.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This code was generated by Builder.io.
3 | */
4 | import React from 'react';
5 |
6 | export const Pagination: React.FC = () => {
7 | return (
8 |
9 | 
19 |
20 | );
21 | };
--------------------------------------------------------------------------------
/marketing/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef
10 | 1 2 3
11 |
12 |
19 | Hello
31 |
19 |
25 | );
26 | };
27 |
28 | export default CommercetoolsProduct;
29 |
--------------------------------------------------------------------------------
/ecommerce/src/components/Hero/HeroWithChildren.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This code was generated by Builder.io.
3 | */
4 | import React, {ComponentProps } from "react";
5 | import { BuilderBlocks } from "@builder.io/react";
6 |
7 | interface HeroWithChildrenProps {
8 | childBlocks: any,
9 | header: string,
10 | makeFullBleed: boolean
11 | }
12 |
13 | const HeroWithChildren: React.FC
16 |
26 | );
27 | };
28 |
29 | export default HeroWithChildren;
--------------------------------------------------------------------------------
/marketing/components/Hero/HeroWithChildren.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This code was generated by Builder.io.
3 | */
4 | import React, {ComponentProps } from "react";
5 | import { BuilderBlocks } from "@builder.io/react";
6 |
7 | interface HeroWithChildrenProps {
8 | childBlocks: [],
9 | header: string,
10 | makeFullBleed: boolean
11 | }
12 |
13 | const HeroWithChildren: React.FC17 | {props.header} 18 |
19 |
16 |
26 | );
27 | };
28 |
29 | export default HeroWithChildren;
--------------------------------------------------------------------------------
/vcp-playground/src/components/Hero/HeroWithChildren.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This code was generated by Builder.io.
3 | */
4 | import React, {ComponentProps } from "react";
5 | import { BuilderBlocks } from "@builder.io/react";
6 |
7 | interface HeroWithChildrenProps {
8 | childBlocks: any,
9 | header: string,
10 | makeFullBleed: boolean
11 | }
12 |
13 | const HeroWithChildren: React.FC17 | {props.header} 18 |
19 |
16 |
26 | );
27 | };
28 |
29 | export default HeroWithChildren;
--------------------------------------------------------------------------------
/ecommerce/src/mappings/Hero.mapper.tsx:
--------------------------------------------------------------------------------
1 | import { figmaMapping, type BaseFigmaProps } from "@builder.io/dev-tools/figma";
2 | import ImageHero from "@/src/components/Hero/ImageHero";
3 |
4 | // ❖ Hero
5 | interface FigmaHeroProps extends BaseFigmaProps {
6 | buttonText?: string;
7 | Title?: string;
8 | }
9 |
10 | figmaMapping({
11 | componentKey: "4bd6da0f53b73a462b070b55dd055ce6a4cb3eca",
12 | mapper(figma: FigmaHeroProps) {
13 | return (
14 | 17 | {props.header} 18 |
19 |
35 |
37 | );
38 | };
39 |
40 | export default ProductCard;
41 |
--------------------------------------------------------------------------------
/ecommerce/lib/swell/api.ts:
--------------------------------------------------------------------------------
1 | import swell from "swell-js";
2 |
3 | swell.init(
4 | process.env.NEXT_PUBLIC_SWELL_STORE_ID as string,
5 | process.env.NEXT_PUBLIC_SWELL_PUBLIC_KEY as string
6 | );
7 |
8 | interface Product {
9 | id?: string;
10 | name?: string;
11 | slug?: string;
12 | price?: number;
13 | images?: any[];
14 | }
15 |
16 | export async function getAllProducts(limit?: number): Promise
30 | handleCategoryChange(category)}
34 | />
35 |
36 |
37 | ))}
38 |
39 | );
40 | };
--------------------------------------------------------------------------------
/vcp-playground/src/components/ui/productBox.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 |
3 | interface ProductBoxProps {
4 | productData: any;
5 | dataSource: string;
6 | }
7 |
8 | const ProductBox: React.FC
13 |
21 |
22 |
32 |
33 | );
34 | };
35 |
36 | export default ProductBox;
37 |
--------------------------------------------------------------------------------
/marketing/components/Card/IconCard.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This code was generated by Builder.io.
3 | */
4 | import React from "react";
5 |
6 | interface IconCardProps {
7 | icon: string;
8 | title: string;
9 | description: string;
10 | altText: string;
11 | coloredBackground?: boolean;
12 | alignment?: 'left' | 'center' | 'right';
13 | }
14 |
15 | const IconCard: React.FC
23 |
28 |
24 | {product?.productName}
25 |
26 | ${product?.price}
27 |29 | {product?.colors?.[0]?.label} 30 |
31 |
22 |
30 | );
31 | };
32 |
33 | export default IconCard;
--------------------------------------------------------------------------------
/ecommerce/src/components/Card/IconCard.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This code was generated by Builder.io.
3 | */
4 | import React from "react";
5 |
6 | interface IconCardProps {
7 | icon: string;
8 | title: string;
9 | description: string;
10 | altText: string;
11 | coloredBackground?: boolean;
12 | alignment?: 'left' | 'center' | 'right';
13 | }
14 |
15 | const IconCard: React.FC
23 |
29 |
24 | 
25 |
26 | {title}
27 | 28 |
22 |
30 | );
31 | };
32 |
33 | export default IconCard;
--------------------------------------------------------------------------------
/vcp-playground/src/components/Card/IconCard.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This code was generated by Builder.io.
3 | */
4 | import React from "react";
5 |
6 | interface IconCardProps {
7 | icon: string;
8 | title: string;
9 | description: string;
10 | altText: string;
11 | coloredBackground?: boolean;
12 | alignment?: 'left' | 'center' | 'right';
13 | }
14 |
15 | const IconCard: React.FC
23 |
29 |
24 |
25 |
26 | {title}
27 | 28 |
22 |
30 | );
31 | };
32 |
33 | export default IconCard;
--------------------------------------------------------------------------------
/ecommerce/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/marketing/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/vcp-playground/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/ecommerce/README.md:
--------------------------------------------------------------------------------
1 | # Ecommerce
2 |
3 | Welcome to our ecommerce project! This README provides all the necessary information to get started, including links to our Jira board and Figma designs, as well as instructions for running the project locally.
4 |
5 | ## Links
6 |
7 | - **Jira Board**: Pick up tickets to build from our [Jira Board](https://builder-io.atlassian.net/jira/core/projects/CE/board).
8 | - **Figma Designs**: View our designs on [Figma](https://www.figma.com/design/uLnxlr3A1qA7g5PHVGoETT/Logan's-Playground?node-id=1-9&t=KQZ9egfmxQ5dU1Cv-0).
9 |
10 | ## Running the Project Locally
11 |
12 | To run the project locally, follow these steps:
13 |
14 | 1. **Clone the repository**:
15 | ```bash
16 | git clone https://github.com/BuilderIO/unified-demo
17 | cd ecommerce
18 |
19 | ## Getting Started
20 |
21 | First, run the development server:
22 |
23 | ```bash
24 | npm run install
25 | npm run dev
26 | # or
27 | yarn
28 | yarn dev
29 | # or
30 | pnpm install
31 | pnpm dev
32 | # or
33 | bun dev
34 | ```
35 | ## Additional Information
36 |
37 | - Refer to the `.env.example` file to understand the required environment variables format.
38 | - Ensure that your local environment is configured correctly to match the hostname-based environment variable setup in `middleware.ts`.
39 |
40 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
41 |
42 |
43 |
--------------------------------------------------------------------------------
/ecommerce/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { builder } from "@builder.io/sdk";
2 | import { Header } from "@/src/components/Layout/Header";
3 | import "./globals.css";
4 | import Footer from "@/src/components/Layout/Footer";
5 | import { RenderBuilderContent } from "@/src/components/builder";
6 | import QueryProvider from "@/src/components/QueryProvider";
7 |
8 | builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
9 |
10 | export default async function RootLayout({
11 | children,
12 | }: Readonly<{
13 | children: React.ReactNode;
14 | }>) {
15 | await import('isolated-vm');
16 | const locale="en-US"
17 |
18 | const headerContent = await builder
19 | .get("header-links", { fields: "data" , options: { locale }})
20 | .toPromise();
21 |
22 | const bannerContent = await builder.get("banner", {
23 | userAttributes: {loggedIn: true},
24 | options: {
25 | locale
26 | }
27 | }).toPromise();
28 |
29 | return (
30 |
31 |
32 |
23 |
29 |
24 |
25 |
26 | {title}
27 | 28 |{children}
37 |
38 |
18 |
26 |
27 |
37 |
38 | );
39 | };
40 |
41 | export default ProductBox;
42 |
--------------------------------------------------------------------------------
/ecommerce/src/components/Accordion/accordion.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 |
3 | interface AccordionItemProps {
4 | title: string;
5 | content: string;
6 | }
7 |
8 | export const AccordionItem: React.FC
28 |
33 |
29 | {product?.productName}
30 |
31 | ${product?.price}
32 |34 | {product?.colors?.[0]?.label} 35 |
36 |
20 |
27 |
42 | );
43 | };
44 |
45 | interface AccordionProps {
46 | items: AccordionItemProps[];
47 | }
48 |
49 | const Accordion: React.FC
36 | {title}
37 |
38 |
39 | {isOpen && {content}
}
40 |
41 |
52 | {items.map((item, index) => (
53 |
60 | );
61 | };
62 |
63 | export default Accordion;
64 |
--------------------------------------------------------------------------------
/marketing/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 |
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 |
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 |
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 |
23 | ## Learn More
24 |
25 | To learn more about Next.js, take a look at the following resources:
26 |
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 |
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 |
32 | ## Deploy on Vercel
33 |
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 |
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 |
--------------------------------------------------------------------------------
/vcp-playground/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 |
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 |
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 |
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 |
23 | ## Learn More
24 |
25 | To learn more about Next.js, take a look at the following resources:
26 |
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 |
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 |
32 | ## Deploy on Vercel
33 |
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 |
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 |
--------------------------------------------------------------------------------
/ecommerce/app/[...page]/page.tsx:
--------------------------------------------------------------------------------
1 | import { builder } from '@builder.io/sdk';
2 | import { RenderBuilderContent } from '@/src/components/builder';
3 |
4 | builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
5 |
6 | interface PageProps {
7 | params: {
8 | page: string[];
9 | };
10 | }
11 |
12 | export default async function Page(props: PageProps) {
13 | const builderModelName = 'page';
14 | let locale = 'en-US';
15 |
16 | const content = await builder
17 | // Get the page content from Builder with the specified options
18 | .get(builderModelName, {
19 | userAttributes: {
20 | // Use the page path specified in the URL to fetch the content
21 | urlPath: '/' + (props?.params?.page?.join('/') || ''),
22 | // When content is localized through Targeting, the locale should be passed to the userAttributes
23 | // As of Gen1 SDK v6.0.3 or Gen2 SDK v2.0.31, locale in either UserAttributes OR base options are checked for all locale features, and only one is needed
24 | // locale: locale,
25 | loggedIn: true,
26 | },
27 | // When content is localized in-page, the locale should be passed directly to the options
28 | locale: locale,
29 | })
30 | // Convert the result to a promise
31 | .toPromise();
32 |
33 | return (
34 | <>
35 | {/* Render the Builder page */}
36 | Store not found
;
34 | }
35 |
36 | return (
37 | <>
38 |
39 | {storeData && (
40 |
43 | {storeLocations && (
44 | Loading Swell product...
;
34 | if (!product) return No product found.
;
35 |
36 | const productData = {
37 | data: {
38 | images: product.images.map(
39 | (image: { file: { url: string }; altText: string }) => ({
40 | image: image.file.url,
41 | altText: image.altText || "Product image",
42 | })
43 | ),
44 | productName: product.name,
45 | price: Math.round(product.price),
46 | },
47 | };
48 |
49 | return (
50 |
51 |
53 | );
54 | };
55 |
56 | export default SwellProduct;
57 |
--------------------------------------------------------------------------------
/marketing/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
5 | import { Circle } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const RadioGroup = React.forwardRef<
10 | React.ElementRef
35 | {colors.map((color) => (
36 |
49 |
50 | );
51 | };
--------------------------------------------------------------------------------
/ecommerce/src/components/builderLiveDataPreview.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { builder, useIsPreviewing, BuilderContent } from "@builder.io/react";
3 | import { RenderBuilderContent } from "./builder";
4 | import DefaultErrorPage from "next/error";
5 | import "../builder-registry";
6 |
7 | builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
8 |
9 | type BuilderLiveDataPreviewProps = {
10 | templateModelName: string;
11 | templateModelData: object;
12 | dataModelName: string;
13 | dataModelData: object;
14 | }
15 |
16 | export function RenderBuilderLiveDataPreview({ dataModelData, dataModelName, templateModelData, templateModelName}: BuilderLiveDataPreviewProps) {
17 | // Call the useIsPreviewing hook to determine if
18 | // the page is being previewed in Builder
19 | const isPreviewing = useIsPreviewing();///(Builder.isPreviewing || Builder.isEditing)
20 | // If "content" has a value or the page is being previewed in Builder,
21 | // render the BuilderComponent with the specified content and model props.
22 |
23 | if (dataModelData || templateModelData || isPreviewing) {
24 | return (
25 | <>
26 | handleColorChange(color.name)}
40 | >
41 |
45 |
47 | ))}
48 | {color.name}
46 | Loading...
;
29 | return (
30 | Loading Shopify product...
;
31 | if (!product) return No product found.
;
32 |
33 | const productData = {
34 | data: {
35 | images: product.images.map(
36 | (image: { src: string; altText: string }) => ({
37 | image: image.src,
38 | altText: image.altText || "Product image",
39 | })
40 | ),
41 | productName: product.title,
42 | price: Math.round(product.variants[0].priceV2.amount),
43 | },
44 | };
45 |
46 | return (
47 |
48 |
53 | );
54 | };
55 |
56 | export default ShopifyProduct;
57 |
--------------------------------------------------------------------------------
/ecommerce/app/category/[category]/page.tsx:
--------------------------------------------------------------------------------
1 | import { builder } from "@builder.io/sdk";
2 | import CategoryLanding from "@/src/components/PLP/CategoryLanding";
3 | import { capitalizeWord } from "@/lib/utils";
4 |
5 | builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
6 |
7 | interface CategoryPageProps {
8 | params: {
9 | category: string;
10 | };
11 | }
12 |
13 | export default async function CategoryPage(props: CategoryPageProps) {
14 | const plpTileModel = "plp-tile";
15 | const plpProductDataModel = "product-data";
16 |
17 | const plpTileContent = await builder
18 | // Get the page content from Builder with the specified options
19 | .getAll(plpTileModel, {
20 | userAttributes: {
21 | category: props?.params?.category.toLowerCase(),
22 | },
23 | locale: "en-US",
24 | });
25 |
26 | const productDetailsContent = await builder
27 | // Get the page content from Builder with the specified options
28 | .getAll(plpProductDataModel, {
29 | query: {
30 | data: {
31 | category: props?.params?.category.toLowerCase(),
32 | },
33 | },
34 | locale: "en-US",
35 | });
36 | // console.log("DATA", productDetailsContent);
37 | return (
38 | <>
39 | {/* Render the Builder page */}
40 |
41 |
43 | {capitalizeWord(props?.params?.category)}
42 |
44 | {props?.params?.category.toUpperCase()}
45 |
46 |
36 |
49 |
37 |
40 |
41 |
42 |
43 |
46 |
47 |
48 |
36 |
49 |
37 |
40 |
41 |
42 |
43 |
46 |
47 |
48 |
36 |
49 |
37 |
40 |
41 |
42 |
43 |
46 |
47 |
48 |
34 |
47 |
35 |
38 |
39 |
40 |
41 |
44 |
45 |
46 |
34 |
47 |
35 |
38 |
39 |
40 |
41 |
44 |
45 |
46 |
29 | {sizes.map((size) => (
30 |
41 | handleSizeChange(size)}
36 | >
37 | {size}
38 |
39 | ))}
40 |
42 | {sizeLabels.map((label) => (
43 |
54 |
55 | );
56 | };
--------------------------------------------------------------------------------
/ecommerce/src/components/Layout/AuthSlider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Button } from "../ui/button";
3 | import { Input } from "../ui/input";
4 | import { Label } from "../ui/label";
5 | import {
6 | Sheet,
7 | SheetClose,
8 | SheetContent,
9 | SheetDescription,
10 | SheetFooter,
11 | SheetHeader,
12 | SheetTitle,
13 | SheetTrigger,
14 | } from "../ui/sheet";
15 |
16 | type AuthSliderProps = {
17 | variant: "white" | "black";
18 | };
19 |
20 | export const AuthSlider: React.FC handleSizeChange(label)}
49 | >
50 | {label}
51 |
52 | ))}
53 |
39 |
52 |
40 |
43 |
44 |
45 |
46 |
49 |
50 |
51 |
37 |
50 |
38 |
41 |
42 |
43 |
44 |
47 |
48 |
49 |
37 |
50 |
38 |
41 |
42 |
43 |
44 |
47 |
48 |
49 |
37 |
50 |
38 |
41 |
42 |
43 |
44 |
47 |
48 |
49 | {text}
16 | );
17 |
18 | const Footer: React.FC = () => {
19 | const [ isMounted, setIsMounted ] = useState(false);
20 | useEffect(() => setIsMounted(true));
21 |
22 | const navItems = [
23 | "WOMEN",
24 | "MEN",
25 | "COLLECTIONS",
26 | "SHOP ALL",
27 | { text: "SALE", isHighlighted: true },
28 | ];
29 |
30 | return (
31 |
54 | );
55 | };
56 |
57 | export default Footer;
--------------------------------------------------------------------------------
/vcp-playground/src/components/Layout/Footer.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This code was generated by Builder.io.
3 | */
4 | "use client"
5 | import React, { useState, useEffect } from "react";
6 | import { CartSlider } from "./CartSlider";
7 | import { AuthSlider } from "./AuthSlider";
8 |
9 | type NavItemProps = {
10 | text: string;
11 | isHighlighted?: boolean;
12 | };
13 |
14 | const NavItem: React.FC{text}
16 | );
17 |
18 | const Footer: React.FC = () => {
19 | const [ isMounted, setIsMounted ] = useState(false);
20 | useEffect(() => setIsMounted(true));
21 |
22 | const navItems = [
23 | "WOMEN",
24 | "MEN",
25 | "COLLECTIONS",
26 | "SHOP ALL",
27 | { text: "SALE", isHighlighted: true },
28 | ];
29 |
30 | return (
31 |
54 | );
55 | };
56 |
57 | export default Footer;
--------------------------------------------------------------------------------
/marketing/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Tabs = TabsPrimitive.Root
9 |
10 | const TabsList = React.forwardRef<
11 | React.ElementRef
39 | {products.data?.map((product, index) => (
40 |
60 | );
61 | }
--------------------------------------------------------------------------------
/vcp-playground/src/components/Collection/Collection.tsx:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import ProductCard from "../Card/ProductCard";
3 |
4 | export function Collection(props: {
5 | // Faked for now
6 | collection: string;
7 | }) {
8 | const useShopStyle = !(!props.collection || props.collection === "all");
9 |
10 | const products = useQuery
39 | {products.data?.map((product, index) => (
40 |
60 | );
61 | }
--------------------------------------------------------------------------------
/ecommerce/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | const Card = React.forwardRef<
6 | HTMLDivElement,
7 | React.HTMLAttributes{children}
53 |
35 | 
41 |
56 | );
57 | };
58 |
59 | export default ImageHero;
--------------------------------------------------------------------------------
/marketing/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
5 | import { ChevronDown } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Accordion = AccordionPrimitive.Root
10 |
11 | const AccordionItem = React.forwardRef<
12 | React.ElementRef
42 |
55 |
43 |
54 |
44 |
50 |
53 | 45 | {title} 46 |
47 |48 |
49 |{children}
53 | {children}
53 |
35 |
41 |
56 | );
57 | };
58 |
59 | export default ImageHero;
--------------------------------------------------------------------------------
/vcp-playground/src/components/Hero/ImageHero.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This code was generated by Builder.io.
3 | */
4 | import React from 'react';
5 | import Link from 'next/link';
6 | import { Button } from '../ui/button';
7 |
8 | interface ImageHeroProps {
9 | title: string;
10 | subTitle?: string;
11 | buttonText: string;
12 | buttonLink: string;
13 | backgroundImage: string;
14 | alignment: 'left' | 'center' | 'right';
15 | makeFullBleed: boolean;
16 | }
17 |
18 | const ImageHero: React.FC
42 |
55 |
43 |
54 |
44 |
50 |
53 | 45 | {title} 46 |
47 |
48 |
49 |
35 |
41 |
56 | );
57 | };
58 |
59 | export default ImageHero;
--------------------------------------------------------------------------------
/ecommerce/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import * as React from "react";
3 | import { Slot } from "@radix-ui/react-slot";
4 | import { cva, type VariantProps } from "class-variance-authority";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | const buttonVariants = cva(
9 | "inline-flex items-center justify-center whitespace-nowrap font-semibold text-sm uppercase tracking-[3.15px] ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
10 | {
11 | variants: {
12 | variant: {
13 | default:
14 | "bg-primary text-primary-foreground border border-transparent hover:bg-secondary hover:text-secondary-foreground hover:border-border",
15 | destructive:
16 | "bg-destructive text-destructive-foreground hover:text-primary-foreground",
17 | outline:
18 | "border border-input bg-background hover:bg-background hover:text-accent-foreground",
19 | secondary:
20 | "bg-secondary text-secondary-foreground hover:bg-primary hover:text-primary-foreground",
21 | tertiary:
22 | "bg-tertiary text-secondary-foreground hover:bg-secondary hover:text-secondary-foreground",
23 | ghost: "hover:bg-accent hover:text-accent-foreground",
24 | link: "text-primary underline-offset-4 hover:underline",
25 | },
26 | size: {
27 | default: "px-5 py-2.5",
28 | sm: "h-9 px-3",
29 | lg: "h-11 px-8",
30 | icon: "h-10 w-10",
31 | },
32 | },
33 | defaultVariants: {
34 | variant: "default",
35 | size: "default",
36 | },
37 | }
38 | );
39 |
40 | export interface ButtonProps
41 | extends React.ButtonHTMLAttributes
42 |
55 |
43 |
54 |
44 |
50 |
53 | 45 | {title} 46 |
47 |48 |
49 |{text}
17 | );
18 |
19 | type SignInButtonProps = {
20 | text: string;
21 | };
22 |
23 | const SignInButton: React.FC
28 | {hits.slice(0, 5).map((hit: any) => (
29 |
32 | );
33 | };
34 |
35 | const ConnectedHits = connectHits(EditHits);
36 |
37 | const ConditionalHits = connectStateResults(({ searchState }) => {
38 | const query = searchState && searchState.query;
39 | return query && query.trim() ?
45 |
46 |
67 |
68 | );
69 | };
70 |
71 | function Hit({ hit }: { hit: HitData }) {
72 | if (!hit || Object.keys(hit).length === 0) {
73 | return null;
74 | }
75 |
76 | return
47 |
58 |
59 |
48 |
54 | 55 | Search by name, category, color, or size 56 |
57 |
60 |
64 |
65 |
23 |
37 | );
38 |
39 | const imageContent = (
40 |
24 |
36 |
25 |
35 |
26 |
29 | {hasCTA &&
30 |
33 | }
34 | {title}
27 | 28 |
41 |
50 | );
51 |
52 | return (
53 |
42 | 
48 |
49 |
54 |
68 | );
69 | };
70 |
71 | export default SplitHero;
--------------------------------------------------------------------------------
/ecommerce/src/components/Card/ProductCard.tsx:
--------------------------------------------------------------------------------
1 | import ShopifyProduct from "@/src/components/ShopifyProduct/ShopifyProduct";
2 | import CommercetoolsProduct from "../CommercetoolsProduct/CommercetoolsProduct";
3 | import ProductBox from "../ui/productBox";
4 | import SwellProduct from "../SwellProduct/SwellProduct";
5 | import EmporixProduct from "../EmporixProduct/EmporixProduct";
6 |
7 | interface ProductCardProps {
8 | product: any;
9 | classes?: string;
10 | dataSource?: string;
11 | shopifyProductHandle?: string;
12 | swellProductHandle?: string;
13 | commercetoolsProduct?: any;
14 | emporixProductHandle?: string;
15 | }
16 |
17 | const ProductCard: React.FC
55 | {imageAlignment === 'left' ? (
56 | <>
57 | {imageContent}
58 | {textContent}
59 |
60 | ) : (
61 | <>
62 | {textContent}
63 | {imageContent}
64 |
65 | )}
66 |
67 | Please select a product
; 28 | } 29 | 30 | if (dataSource === "Shopify" && !shopifyProductHandle) { 31 | returnProduct handle is required for Shopify products.
; 32 | } 33 | 34 | if (dataSource === "Swell" && !swellProductHandle) { 35 | returnProduct handle is required for Swell products.
; 36 | } 37 | 38 | if (dataSource === "Commercetools" && !commercetoolsProduct) { 39 | returnPlease select a Commercetools product
; 40 | } 41 | 42 | if (dataSource === "Emporix" && !emporixProductHandle) { 43 | returnProduct handle is required for Emporix products.
; 44 | } 45 | 46 | return ( 47 |
50 | {dataSource === "Shopify" && (
51 |
78 | );
79 | };
80 |
81 | export default ProductCard;
82 |
--------------------------------------------------------------------------------
/ecommerce/src/components/Hero/SplitHero.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | /**
3 | * This code was generated by Builder.io.
4 | */
5 | import React from 'react';
6 | import Link from "next/link"
7 | import { Button } from '../ui/button';
8 |
9 | interface SplitHeroProps {
10 | imageAlignment: 'left' | 'right';
11 | textAlignment: 'left' | 'center' | 'right';
12 | splitWidth: '1/2' | '1/3';
13 | title: string;
14 | subTitle: any;
15 | image: string;
16 | altText: string;
17 | hasCTA: boolean;
18 | buttonText?: string;
19 | buttonLink?: any;
20 | makeFullBleed: boolean;
21 | }
22 |
23 | const SplitHero: React.FC
29 |
43 | );
44 |
45 | const imageContent = (
46 |
30 |
42 |
31 |
41 |
32 |
35 | {hasCTA &&
36 |
39 | }
40 | {title}
33 | 34 |
47 |
56 | );
57 |
58 | return (
59 |
48 |
54 |
55 |
60 |
74 | );
75 | };
76 |
77 | export default SplitHero;
--------------------------------------------------------------------------------
/vcp-playground/src/components/Hero/SplitHero.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | /**
3 | * This code was generated by Builder.io.
4 | */
5 | import React from 'react';
6 | import Link from "next/link"
7 | import { Button } from '../ui/button';
8 |
9 | interface SplitHeroProps {
10 | imageAlignment: 'left' | 'right';
11 | textAlignment: 'left' | 'center' | 'right';
12 | splitWidth: '1/2' | '1/3';
13 | title: string;
14 | subTitle: any;
15 | image: string;
16 | altText: string;
17 | hasCTA: boolean;
18 | buttonText?: string;
19 | buttonLink?: any;
20 | makeFullBleed: boolean;
21 | }
22 |
23 | const SplitHero: React.FC
61 | {imageAlignment === 'left' ? (
62 | <>
63 | {imageContent}
64 | {textContent}
65 |
66 | ) : (
67 | <>
68 | {textContent}
69 | {imageContent}
70 |
71 | )}
72 |
73 |
29 |
43 | );
44 |
45 | const imageContent = (
46 |
30 |
42 |
31 |
41 |
32 |
35 | {hasCTA &&
36 |
39 | }
40 | {title}
33 | 34 |
47 |
56 | );
57 |
58 | return (
59 |
48 |
54 |
55 |
60 |
74 | );
75 | };
76 |
77 | export default SplitHero;
--------------------------------------------------------------------------------
/vcp-playground/app/page.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import styles from "./page.module.css";
3 |
4 | export default function Home() {
5 | return (
6 |
61 | {imageAlignment === 'left' ? (
62 | <>
63 | {imageContent}
64 | {textContent}
65 |
66 | ) : (
67 | <>
68 | {textContent}
69 | {imageContent}
70 |
71 | )}
72 |
73 |
7 |
8 |
49 |
93 |
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
-
17 |
-
18 | Get started by editing
app/page.tsx. 19 |
20 | - Save and see your changes instantly. 21 |
24 |
30 |
48 |