{page.title}
+ +This document was last updated: {format(page.updatedAt, "MMMM do, yyyy")}
+
+
+ )
+}
diff --git a/starters/shopify-algolia/app/actions/cart.actions.ts b/starters/shopify-algolia/app/actions/cart.actions.ts
new file mode 100644
index 00000000..4459ef29
--- /dev/null
+++ b/starters/shopify-algolia/app/actions/cart.actions.ts
@@ -0,0 +1,86 @@
+"use server"
+
+import { revalidateTag, unstable_cache } from "next/cache"
+import { cookies } from "next/headers"
+import { storefrontClient } from "clients/storefrontClient"
+import { COOKIE_CART_ID, TAGS } from "constants/index"
+import { isDemoMode } from "utils/demoUtils"
+
+export const getCart = unstable_cache(async (cartId: string) => storefrontClient.getCart(cartId), [TAGS.CART], { revalidate: 60 * 15, tags: [TAGS.CART] })
+
+export async function addCartItem(prevState: any, variantId: string) {
+ if (isDemoMode()) return { ok: false, message: "Demo mode active. Filtering, searching, and adding to cart disabled." }
+ if (!variantId) return { ok: false }
+
+ let cartId = cookies().get(COOKIE_CART_ID)?.value
+ let cart
+
+ if (cartId) cart = await storefrontClient.getCart(cartId)
+
+ if (!cartId || !cart) {
+ cart = await storefrontClient.createCart([])
+ cartId = cart?.id
+ cartId && cookies().set(COOKIE_CART_ID, cartId)
+
+ revalidateTag(TAGS.CART)
+ }
+
+ const itemAvailability = await getItemAvailability(cartId, variantId)
+
+ if (!itemAvailability || itemAvailability.inCartQuantity >= itemAvailability.inStockQuantity)
+ return {
+ ok: false,
+ message: "This product is out of stock",
+ }
+
+ await storefrontClient.createCartItem(cartId!, [{ merchandiseId: variantId, quantity: 1 }])
+ revalidateTag(TAGS.CART)
+
+ return { ok: true }
+}
+
+export async function getItemAvailability(cartId: string | null | undefined, variantId: string | null | undefined) {
+ if (!cartId || !variantId) return { inCartQuantity: 0, inStockQuantity: Infinity }
+
+ const cart = await storefrontClient.getCart(cartId)
+ const cartItem = cart?.items?.find((item) => item.merchandise.id === variantId)
+
+ return { inCartQuantity: cartItem?.quantity ?? 0, inStockQuantity: cartItem?.merchandise.quantityAvailable ?? Infinity }
+}
+
+export async function removeCartItem(prevState: any, itemId: string) {
+ const cartId = cookies().get(COOKIE_CART_ID)?.value
+
+ if (!cartId) return { ok: false }
+
+ await storefrontClient.deleteCartItem(cartId!, [itemId])
+ revalidateTag(TAGS.CART)
+
+ return { ok: true }
+}
+
+export async function updateItemQuantity(prevState: any, payload: { itemId: string; variantId: string; quantity: number }) {
+ const cartId = cookies().get(COOKIE_CART_ID)?.value
+
+ if (!cartId) return { ok: false }
+
+ const { itemId, variantId, quantity } = payload
+
+ if (quantity === 0) {
+ await storefrontClient.deleteCartItem(cartId, [itemId])
+ revalidateTag(TAGS.CART)
+ return { ok: true }
+ }
+
+ const itemAvailability = await getItemAvailability(cartId, variantId)
+ if (!itemAvailability || quantity > itemAvailability.inStockQuantity)
+ return {
+ ok: false,
+ message: "This product is out of stock",
+ }
+
+ await storefrontClient.updateCartItem(cartId, [{ id: itemId, merchandiseId: variantId, quantity }])
+
+ revalidateTag(TAGS.CART)
+ return { ok: true }
+}
diff --git a/starters/shopify-algolia/app/actions/collection.actions.ts b/starters/shopify-algolia/app/actions/collection.actions.ts
new file mode 100644
index 00000000..50a6c5a9
--- /dev/null
+++ b/starters/shopify-algolia/app/actions/collection.actions.ts
@@ -0,0 +1,26 @@
+"use server"
+
+import { unstable_cache } from "next/cache"
+import { algolia } from "clients/search"
+import { getDemoSingleCategory, isDemoMode } from "utils/demoUtils"
+import type { PlatformCollection } from "lib/shopify/types"
+import { env } from "env.mjs"
+
+export const getCollection = unstable_cache(
+ async (slug: string) => {
+ if (isDemoMode()) return getDemoSingleCategory(slug)
+
+ const results = await algolia.searchLooks like you don't have access to this page. If you were logged in before your session might've expired. Please log in again! 😊
+ + + Go Home + +
+
+ )
+}
diff --git a/starters/shopify-algolia/app/favorites/page.tsx b/starters/shopify-algolia/app/favorites/page.tsx
new file mode 100644
index 00000000..432e1bce
--- /dev/null
+++ b/starters/shopify-algolia/app/favorites/page.tsx
@@ -0,0 +1,61 @@
+import { cookies } from "next/headers"
+import { Suspense } from "react"
+import { getProduct } from "app/actions/product.actions"
+import { ProductCard } from "components/ProductCard/ProductCard"
+import { Skeleton } from "components/Skeleton/Skeleton"
+import { COOKIE_FAVORITES } from "constants/index"
+
+export const revalidate = 86400
+
+export const dynamicParams = true
+
+export default async function Favorites() {
+ return (
+
+ {isDemoMode() ? (
+ <>
+
+ Something went wrong!
++ This feature requires full functionality. Please exit Demo Mode by setting the required environment variables. +
+{JSON.stringify(error, null, 2)}
+
+
+ ) : (
+ <>
+ Something went wrong!
+{JSON.stringify(error, null, 2)}
+
+
+ )}
+
+
+ )
+}
+
+async function FavoritesView() {
+ let favoritesHandles: string[] = []
+ const favoritesCookie = cookies().get(COOKIE_FAVORITES)?.value
+
+ if (favoritesCookie) {
+ favoritesHandles = JSON.parse(favoritesCookie) as string[]
+ }
+
+ const products = await Promise.all(favoritesHandles.map((handle) => getProduct(handle)).filter(Boolean))
+
+ return (
+ <>
+ {products.length === 0 ?
+
+ Favorite products
+No favorite products. You can add them by clicking on a heart icon on product page
: null} +
+ {products.map((singleResult, idx) => (
+
+
+ )
+}
+
+function FavoritesSkeleton() {
+ return (
+
+
+ ))}
+
+
+
+
+
+
+ )
+}
diff --git a/starters/shopify-algolia/app/globals.css b/starters/shopify-algolia/app/globals.css
new file mode 100644
index 00000000..f8c4a02a
--- /dev/null
+++ b/starters/shopify-algolia/app/globals.css
@@ -0,0 +1,22 @@
+@import "./styles/reset.css";
+@import "./styles/megamenu.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+@layer utilities {
+ /* Hide scrollbar for Chrome, Safari and Opera */
+ .no-scrollbar::-webkit-scrollbar {
+ display: none;
+ }
+ /* Hide scrollbar for IE, Edge and Firefox */
+ .no-scrollbar {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+ }
+}
diff --git a/starters/shopify-algolia/app/home/[bucket]/page.tsx b/starters/shopify-algolia/app/home/[bucket]/page.tsx
new file mode 100644
index 00000000..9e78392c
--- /dev/null
+++ b/starters/shopify-algolia/app/home/[bucket]/page.tsx
@@ -0,0 +1,44 @@
+import { Suspense } from "react"
+import { BUCKETS } from "constants/index"
+import { BestOffersSection } from "views/Homepage/BestOffersSection"
+import { CarouselSectionSkeleton } from "views/Homepage/CarouselSection"
+import { CategoriesSection, CategoriesSectionSkeleton } from "views/Homepage/CategoriesSection"
+import { EverythingUnderSection } from "views/Homepage/EverythingUnderSection"
+import { AnnouncementBar } from "components/AnnouncementBar/AnnouncementBar"
+import { HeroSection } from "views/Homepage/HeroSection"
+
+export const revalidate = 86400
+
+export const dynamic = "force-static"
+
+export const dynamicParams = true
+
+export default function Homepage({ params: { bucket } }: { params: { bucket: string } }) {
+ const heroTitles = {
+ a: "Your daily trendsetting deals",
+ b: "Spring into Savings! Up to 60% Off",
+ }
+
+ return (
+ Something went wrong!
+{JSON.stringify(error, null, 2)}
+
+
+
+ )
+}
+
+export async function generateStaticParams() {
+ return BUCKETS.HOME.map((bucket) => ({ bucket }))
+}
diff --git a/starters/shopify-algolia/app/icon.png b/starters/shopify-algolia/app/icon.png
new file mode 100644
index 00000000..3fab1350
Binary files /dev/null and b/starters/shopify-algolia/app/icon.png differ
diff --git a/starters/shopify-algolia/app/layout.tsx b/starters/shopify-algolia/app/layout.tsx
new file mode 100644
index 00000000..233d5c0a
--- /dev/null
+++ b/starters/shopify-algolia/app/layout.tsx
@@ -0,0 +1,271 @@
+import "./globals.css"
+
+import nextDynamic from "next/dynamic"
+import Script from "next/script"
+import { Suspense } from "react"
+import { Toaster } from "sonner"
+import { CallToAction } from "components/CallToAction/CallToAction"
+import { Footer } from "components/Footer/Footer"
+import { Modals } from "components/Modals/Modals"
+import { mobileInlineScript } from "components/NavigationBar/mobileInlineScript"
+import { NavigationBar } from "components/NavigationBar/NavigationBar"
+import { NavItem } from "components/NavigationBar/types"
+import { FlagValues } from "views/FlagValues"
+import { ThirdParties } from "views/ThirdParties"
+import { env } from "env.mjs"
+import { Metadata } from "next"
+import { GithubBadge } from "views/GithubBadge"
+import { DemoModeAlert } from "views/DemoModeAlert"
+import { CartView } from "views/Cart/CartView"
+
+const DraftToolbar = nextDynamic(() => import("views/DraftToolbar"), { ssr: false })
+
+export const revalidate = 86400
+
+const navigationItems: NavItem[] = [
+ {
+ text: "Fashion",
+ href: "/category/fashion",
+ submenu: {
+ variant: "text-grid",
+ items: [
+ {
+ text: "Women",
+ href: "/category/women",
+ items: [
+ { text: "Shirts & Blouses", href: "/category/shirts-and-blouses" },
+ { text: "Blazers & Vests", href: "/category/blazers-and-vests" },
+ { text: "Cardigans & Sweaters", href: "/category/cardigans-and-sweaters" },
+ { text: "Dresses", href: "/category/dresses" },
+ { text: "Skirts", href: "/category/skirts" },
+ ],
+ },
+ {
+ text: "Men",
+ href: "/category/men",
+ items: [
+ { text: "T-shirts & Tanks", href: "/category/t-shirts-and-tanks" },
+ { text: "Hoodies & Sweatshirts", href: "/category/hoodies-and-sweatshirts" },
+ { text: "Blazers & Suits", href: "/category/blazers-and-suits" },
+ { text: "Shorts", href: "/category/shorts" },
+ { text: "Outerwear", href: "/category/outerwear" },
+ ],
+ },
+ {
+ text: "Kids",
+ href: "/category/kids",
+ items: [
+ { text: "Clothing", href: "/category/clothing" },
+ { text: "Activewear", href: "/category/activewear" },
+ { text: "Accessories", href: "/category/kids-accessories" },
+ { text: "Footwear", href: "/category/footwear" },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ text: "Electronics",
+ href: "/category/electronics",
+ submenu: {
+ variant: "text-grid",
+ items: [
+ {
+ text: "Audio Devices",
+ href: "/category/audio-devices",
+ items: [
+ { text: "Headphones", href: "/category/headphones" },
+ { text: "Speakers", href: "/category/speakers" },
+ ],
+ },
+ {
+ text: "Cameras",
+ href: "/category/cameras",
+ items: [
+ { text: "Digital Cameras", href: "/category/digital-cameras" },
+ { text: "Action Cameras", href: "/category/action-cameras" },
+ ],
+ },
+ {
+ text: "Smartphones",
+ href: "/category/smartphones",
+ },
+ {
+ text: "Laptops",
+ href: "/category/laptops",
+ },
+ {
+ text: "Screens",
+ href: "/category/screens",
+ },
+ ],
+ },
+ },
+ {
+ text: "Sports & Outdoors",
+ href: "/category/sports-and-outdoors",
+ submenu: {
+ variant: "text-grid",
+ items: [
+ {
+ href: "/category/exercise-equipment",
+ text: "Exercise Equipment",
+ },
+ {
+ href: "/category/outdoor-gear",
+ text: "Outdoor Gear",
+ },
+ {
+ href: "/category/sportswear",
+ text: "Sportswear",
+ },
+ {
+ href: "/category/athletic-footwear",
+ text: "Athletic Footwear",
+ },
+ ],
+ },
+ },
+ {
+ text: "Beauty",
+ href: "/category/beauty",
+ submenu: {
+ variant: "text-grid",
+ items: [
+ {
+ text: "Skin Care",
+ href: "/category/skin-care",
+ items: [
+ { text: "Cleansers", href: "/category/cleansers" },
+ { text: "Moisturizers", href: "/category/moisturizers" },
+ { text: "Treatments & Serums", href: "/category/treatments-and-serums" },
+ ],
+ },
+ {
+ text: "Makeup",
+ href: "/category/makeup",
+ items: [
+ { text: "Face Makeup", href: "/category/face-makeup" },
+ { text: "Eye Makeup", href: "/category/eye-makeup" },
+ { text: "Lip Makeup", href: "/category/lip-makeup" },
+ ],
+ },
+ {
+ text: "Haircare",
+ href: "/category/haircare",
+ items: [
+ { text: "Shampoos & Conditioners", href: "/category/shampoos-and-conditioners" },
+ { text: "Styling Products", href: "/category/styling-products" },
+ ],
+ },
+
+ {
+ text: "Fragrances",
+ href: "/category/fragrances",
+ items: [
+ { text: "Perfumes", href: "/category/perfumes" },
+ { text: "Body Sprays", href: "/category/body-sprays" },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ text: "Furniture",
+ href: "/category/furniture",
+ submenu: {
+ variant: "text-grid",
+ items: [
+ {
+ text: "Living Room",
+ href: "/category/living-room-furniture",
+ items: [
+ { text: "Sofas & Sectionals", href: "/category/sofas-and-sectionals" },
+ { text: "Coffee Tables", href: "/category/coffee-tables" },
+ { text: "TV Stands", href: "/category/tv-stands" },
+ ],
+ },
+
+ {
+ text: "Bedroom",
+ href: "/category/bedroom-furniture",
+ items: [
+ { text: "Beds", href: "/category/beds" },
+ { text: "Dressers", href: "/category/dressers" },
+ { text: "Nightstands", href: "/category/nightstands" },
+ ],
+ },
+
+ {
+ text: "Office",
+ href: "/category/office-furniture",
+ items: [
+ { text: "Desks", href: "/category/desks" },
+ { text: "Office Chairs", href: "/category/office-chairs" },
+ { text: "Storage Solutions", href: "/category/storage-solutions" },
+ ],
+ },
+ ],
+ },
+ },
+]
+
+export const metadata: Metadata = {
+ title: "Next.js Enterprise Commerce | Blazity",
+ description: "AI-FIRST NEXT.JS STOREFRONT FOR COMPOSABLE COMMERCE",
+ metadataBase: new URL(env.LIVE_URL!),
+ openGraph: {
+ title: "Next.js Enterprise Commerce | Blazity",
+ description: "AI-FIRST NEXT.JS STOREFRONT FOR COMPOSABLE COMMERCE",
+ images: ["/opengraph-image.jpg"],
+ },
+ twitter: {
+ card: "summary_large_image",
+ title: "Next.js Enterprise Commerce | Blazity",
+ description: "AI-FIRST NEXT.JS STOREFRONT FOR COMPOSABLE COMMERCE",
+ creator: "@blazity",
+ images: ["/opengraph-image.jpg"],
+ },
+ verification: {
+ google: "google",
+ yandex: "yandex",
+ yahoo: "yahoo",
+ },
+ generator: "Next.js",
+ applicationName: "Next.js",
+}
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/starters/shopify-algolia/app/opengraph-image.jpg b/starters/shopify-algolia/app/opengraph-image.jpg
new file mode 100644
index 00000000..e6ec1eb5
Binary files /dev/null and b/starters/shopify-algolia/app/opengraph-image.jpg differ
diff --git a/starters/shopify-algolia/app/pages/[slug]/metadata.ts b/starters/shopify-algolia/app/pages/[slug]/metadata.ts
new file mode 100644
index 00000000..b165ff02
--- /dev/null
+++ b/starters/shopify-algolia/app/pages/[slug]/metadata.ts
@@ -0,0 +1,14 @@
+import { Metadata } from "next"
+import { getPage } from "app/actions/page.actions"
+
+export async function generateMetadata({ params: { slug } }: { params: { slug: string } }): Promise404
+Page not found
+Sorry, we couldn't find the page you're looking for.
+ + Go to Homepage + +
+
+
+
+ )
+}
+
+export async function generateStaticParams() {
+ const pages = (await getAllPages()) || []
+
+ return pages.map((page) => ({
+ slug: page.handle,
+ }))
+}
diff --git a/starters/shopify-algolia/app/product/[slug]/draft/page.tsx b/starters/shopify-algolia/app/product/[slug]/draft/page.tsx
new file mode 100644
index 00000000..966515eb
--- /dev/null
+++ b/starters/shopify-algolia/app/product/[slug]/draft/page.tsx
@@ -0,0 +1,114 @@
+import { unstable_cache } from "next/cache"
+import { draftMode } from "next/headers"
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+import { storefrontClient } from "clients/storefrontClient"
+import type { CommerceProduct } from "types"
+
+import { Breadcrumbs } from "components/Breadcrumbs/Breadcrumbs"
+
+import type { PlatformProduct } from "lib/shopify/types"
+import { getCombination, getOptionsFromUrl, hasValidOption, removeOptionsFromUrl } from "utils/productOptionsUtils"
+import { BackButton } from "views/Product/BackButton"
+import { SimilarProductsSection } from "views/Product/SimilarProductsSection"
+import { SimilarProductsSectionSkeleton } from "views/Product/SimilarProductsSectionSkeleton"
+import { VariantsSection } from "views/Product/VariantsSection"
+import { ProductTitle } from "views/Product/ProductTitle"
+import { CurrencyType, mapCurrencyToSign } from "utils/mapCurrencyToSign"
+import { ProductImages } from "views/Product/ProductImages"
+import { RightSection } from "views/Product/RightSection"
+import { AddToCartButton } from "views/Product/AddToCartButton"
+import { FavoriteMarker } from "views/Product/FavoriteMarker"
+import { FaqSection } from "views/Product/FaqSection"
+
+import { slugToName } from "utils/slug-name"
+
+export const dynamic = "force-static"
+
+export const revalidate = 86400
+
+export const dynamicParams = true
+
+interface ProductProps {
+ params: { slug: string }
+}
+
+export default async function Product({ params: { slug } }: ProductProps) {
+ return
+
+
+
+ )
+}
+
+async function getDraftAwareProduct(slug: string) {
+ const draft = draftMode()
+
+ let product = await storefrontClient.getProductByHandle(removeOptionsFromUrl(slug))
+ if (draft.isEnabled && product) product = await getAdminProduct(product?.id)
+
+ return product
+}
+
+const getAdminProduct = unstable_cache(async (id: string) => storefrontClient.getAdminProduct(id), ["admin-product-by-handle"], { revalidate: 1 })
+
+function makeBreadcrumbs(product: PlatformProduct) {
+ const lastCollection = product.collections?.findLast(Boolean)
+
+ return {
+ Home: "/",
+ [lastCollection?.handle ? slugToName(lastCollection.handle) : "Products"]: lastCollection?.handle ? `/category/${lastCollection.handle}` : "/search",
+ [product.title]: "",
+ }
+}
diff --git a/starters/shopify-algolia/app/product/[slug]/loading.tsx b/starters/shopify-algolia/app/product/[slug]/loading.tsx
new file mode 100644
index 00000000..84d862d9
--- /dev/null
+++ b/starters/shopify-algolia/app/product/[slug]/loading.tsx
@@ -0,0 +1,5 @@
+import { PageSkeleton } from "views/Product/PageSkeleton"
+
+export default function Loading() {
+ return
+
+
+
+
+
+ {product.description}
+
+
+ ),
+ {
+ ...size,
+ fonts: [
+ {
+ name: "Inter",
+ data: await interRegular,
+ style: "normal",
+ weight: 400,
+ },
+ {
+ name: "Inter",
+ data: await interBold,
+ style: "normal",
+ weight: 900,
+ },
+ ],
+ }
+ )
+}
diff --git a/starters/shopify-algolia/app/product/[slug]/page.tsx b/starters/shopify-algolia/app/product/[slug]/page.tsx
new file mode 100644
index 00000000..0c5cfc73
--- /dev/null
+++ b/starters/shopify-algolia/app/product/[slug]/page.tsx
@@ -0,0 +1,114 @@
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+import { getProduct } from "app/actions/product.actions"
+import { Breadcrumbs } from "components/Breadcrumbs/Breadcrumbs"
+
+import { getCombination, getOptionsFromUrl, hasValidOption, removeOptionsFromUrl } from "utils/productOptionsUtils"
+import { BackButton } from "views/Product/BackButton"
+import { FavoriteMarker } from "views/Product/FavoriteMarker"
+import { SimilarProductsSection } from "views/Product/SimilarProductsSection"
+import { SimilarProductsSectionSkeleton } from "views/Product/SimilarProductsSectionSkeleton"
+import { VariantsSection } from "views/Product/VariantsSection"
+import { slugToName } from "utils/slug-name"
+
+import { generateJsonLd } from "./metadata"
+import { ReviewsSection } from "views/Product/ReviewsSection"
+
+import type { CommerceProduct } from "types"
+import { isDemoMode } from "utils/demoUtils"
+import { algolia } from "clients/search"
+import { env } from "env.mjs"
+import { ProductTitle } from "views/Product/ProductTitle"
+import { CurrencyType, mapCurrencyToSign } from "utils/mapCurrencyToSign"
+import { ProductImages } from "views/Product/ProductImages"
+import { RightSection } from "views/Product/RightSection"
+import { FaqSection } from "views/Product/FaqSection"
+import { AddToCartButton } from "views/Product/AddToCartButton"
+
+export const revalidate = 86400
+export const dynamic = "force-static"
+export const dynamicParams = true
+
+interface ProductProps {
+ params: { slug: string }
+}
+
+export { generateMetadata } from "./metadata"
+
+export async function generateStaticParams() {
+ if (isDemoMode()) return []
+
+ const { hits } = await algolia.search
+ 
+
+
+ {product?.images
+ ?.slice(0, 4)
+ ?.map((image, idx) => (
+ 
+ ))}
+
+
+
+ {product?.title}
+
+
+
+ {product?.description}
+
+
+ {product?.priceRange.minVariantPrice.amount + " " + product?.priceRange.minVariantPrice.currencyCode}
+
+
+
+
+
+
+ )
+}
+
+function makeBreadcrumbs(product: CommerceProduct) {
+ const lastCollection = product.collections?.findLast(Boolean)
+
+ return {
+ Home: "/",
+ [lastCollection?.handle ? slugToName(lastCollection?.handle) : "Products"]: lastCollection?.handle ? `/category/${lastCollection.handle}` : "/search",
+ [product.title]: "",
+ }
+}
diff --git a/starters/shopify-algolia/app/reviews/[slug]/metadata.ts b/starters/shopify-algolia/app/reviews/[slug]/metadata.ts
new file mode 100644
index 00000000..cac9ced9
--- /dev/null
+++ b/starters/shopify-algolia/app/reviews/[slug]/metadata.ts
@@ -0,0 +1,31 @@
+import { getProduct } from "app/actions/product.actions"
+import { env } from "process"
+import { makeKeywords } from "utils/makeKeywords"
+import { removeOptionsFromUrl } from "utils/productOptionsUtils"
+import type { ProductReviewsPageProps } from "./page"
+import { Metadata } from "next"
+
+export async function generateMetadata({ params: { slug } }: ProductReviewsPageProps): Promise
+
+
+
+
+
+ {product.description}
+
+
+
+
+ )
+ }
+
+ if (page > Math.ceil(totalReviews / limit)) {
+ redirect(`/reviews/${slug}`)
+ }
+
+ return (
+
+
+
+
+
+ No reviews yet
+ Be the First to Review +
+
+
+
+ )
+}
+
+function makeBreadcrumbs(product: CommerceProduct) {
+ const lastCollection = product.collections?.findLast(Boolean)
+
+ return {
+ Home: "/",
+ [lastCollection?.title || "Products"]: lastCollection?.handle ? `/category/${lastCollection.handle}` : "/search",
+ [product.title]: `/product/${product.handle}`,
+ Reviews: "",
+ }
+}
diff --git a/starters/shopify-algolia/app/robots.txt b/starters/shopify-algolia/app/robots.txt
new file mode 100644
index 00000000..c068999b
--- /dev/null
+++ b/starters/shopify-algolia/app/robots.txt
@@ -0,0 +1,15 @@
+User-Agent: *
+Allow: /
+
+Disallow: /settings/
+Disallow: /*?*page=
+Disallow: /*?*q=
+Disallow: /*?*minPrice=
+Disallow: /*?*maxPrice=
+Disallow: /*?*sortBy=
+Disallow: /*?*categories=
+Disallow: /*?*vendors=
+Disallow: /*?*tags=
+Disallow: /*?*colors=
+Disallow: /*?*sizes=
+Disallow: /*/draft
\ No newline at end of file
diff --git a/starters/shopify-algolia/app/search/opengraph-image.tsx b/starters/shopify-algolia/app/search/opengraph-image.tsx
new file mode 100644
index 00000000..60eeea58
--- /dev/null
+++ b/starters/shopify-algolia/app/search/opengraph-image.tsx
@@ -0,0 +1,88 @@
+/* eslint-disable @next/next/no-img-element */
+/* eslint-disable jsx-a11y/alt-text */
+
+import { env } from "env.mjs"
+import { ImageResponse } from "next/og"
+
+export const revalidate = 86400
+export const dynamic = "force-static"
+
+export const size = {
+ width: 1200,
+ height: 630,
+}
+
+export const contentType = "image/png"
+
+export default async function Image() {
+ const interRegular = fetch(new URL(`${env.LIVE_URL}/fonts/Inter-Regular.ttf`)).then((res) => res.arrayBuffer())
+ const interBold = fetch(new URL(`${env.LIVE_URL}/fonts/Inter-Bold.ttf`)).then((res) => res.arrayBuffer())
+
+ return new ImageResponse(
+ (
+
+
+
+
+
+
+
+ + Customer Reviews + ({totalReviews}) +
+
+ {reviews.map(({ created_at, body, rating, reviewer }) => (
+
+
+
+ ))}
+
+
+ {body}
+
+
+ {reviewer.name}
+ + {new Date(created_at).toLocaleDateString("en-US", { + year: "numeric", + month: "long", + day: "numeric", + })} + +
+
+ ),
+ {
+ ...size,
+ fonts: [
+ {
+ name: "Inter",
+ data: await interRegular,
+ style: "normal",
+ weight: 400,
+ },
+ {
+ name: "Inter",
+ data: await interBold,
+ style: "normal",
+ weight: 900,
+ },
+ ],
+ }
+ )
+}
diff --git a/starters/shopify-algolia/app/search/page.tsx b/starters/shopify-algolia/app/search/page.tsx
new file mode 100644
index 00000000..7084610b
--- /dev/null
+++ b/starters/shopify-algolia/app/search/page.tsx
@@ -0,0 +1,26 @@
+import type { Metadata } from "next"
+import { Suspense } from "react"
+import type { SearchParamsType } from "types"
+import { PageSkeleton } from "views/Category/PageSkeleton"
+import { SearchView } from "views/Search/SearchView"
+
+export const metadata: Metadata = {
+ title: "Search | Enterprise Commerce",
+ description: "In excepteur elit mollit in.",
+}
+
+export const revalidate = 86400
+
+export const runtime = "nodejs"
+
+interface SearchPageProps {
+ searchParams: SearchParamsType
+}
+
+export default async function SearchPage({ searchParams }: SearchPageProps) {
+ return (
+
+
+
+
+ Search products...
+ + +-
+
- * 20L capacity +
- * 700W output power +
- * 6 power levels +
- * 30 minuter timer +
- * Cooking end signal +
+ Est veniam qui aute nisi occaecat ad non velit anim commodo sit proident. Labore sint officia nostrud eu est fugiat nulla velit sint commodo. Excepteur sit ut anim pariatur + minim adipisicing dolore sit dolore cupidatat. Amet reprehenderit ipsum aute minim incididunt adipisicing est. +
+ ), + "Free Delivery and Returns": ( ++ Aliqua Lorem ullamco officia cupidatat cupidatat. Nostrud occaecat ex in Lorem. Et occaecat adipisicing do aliquip duis aliquip enim culpa nulla. Nulla quis aute ex eu est + ullamco enim incididunt fugiat proident laboris. Laboris sint ad et nostrud velit fugiat fugiat proident enim sit irure elit. Ut amet elit labore cupidatat id consectetur + sint fugiat esse excepteur pariatur. Tempor pariatur dolor eiusmod proident ad incididunt officia labore fugiat consectetur. Sunt veniam officia officia eiusmod minim + incididunt est sit esse excepteur non cupidatat voluptate ea. Do excepteur sunt nostrud eu do id nisi dolore laboris ea ullamco magna eu. Eiusmod irure dolore amet velit + laboris excepteur cupidatat est cupidatat minim ut anim id. Deserunt velit ex exercitation consequat quis magna pariatur laboris elit minim eiusmod anim. +
+ ), + "Supplier Information": ( ++ Aliqua ut ex irure eu officia dolore velit et occaecat pariatur excepteur nostrud ad. Ea reprehenderit sint culpa excepteur adipisicing ipsum esse excepteur officia culpa + adipisicing nostrud. Nulla Lorem voluptate tempor officia id mollit do est amet dolor nulla. Sint sunt consequat non in reprehenderit Lorem velit enim cillum enim. Consequat + occaecat exercitation consequat nisi veniam. Ipsum est reprehenderit cupidatat nulla minim anim deserunt consequat ipsum anim ea tempor. +
+ ), +} + +export const Default: Story = { + render: () => ( +
+ {children}
+
+ {children}
+
+ Sale 50% OFF
+
+ Shop Now
+
+
+ )
+}
diff --git a/starters/shopify-algolia/components/Badge/Badge.tsx b/starters/shopify-algolia/components/Badge/Badge.tsx
new file mode 100644
index 00000000..905cee52
--- /dev/null
+++ b/starters/shopify-algolia/components/Badge/Badge.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "utils/cn"
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ {
+ variants: {
+ variant: {
+ default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+ secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+ outline: "text-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+export interface BadgeProps extends React.HTMLAttributes
+
+
+ ) : null}
+
+
+ )
+}
diff --git a/starters/shopify-algolia/components/Card/Card.stories.tsx b/starters/shopify-algolia/components/Card/Card.stories.tsx
new file mode 100644
index 00000000..7ede5bd9
--- /dev/null
+++ b/starters/shopify-algolia/components/Card/Card.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "./Card"
+
+const meta: Meta
+
+
+
+
+
+ Become a member and receive our special discounts.
+
+
+
+
+ {children}
+
+
+
+
+ )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = forwardRef
+
+ )
+}
diff --git a/starters/shopify-algolia/components/Footer/Footer.stories.tsx b/starters/shopify-algolia/components/Footer/Footer.stories.tsx
new file mode 100644
index 00000000..40e325eb
--- /dev/null
+++ b/starters/shopify-algolia/components/Footer/Footer.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Footer } from "./Footer"
+
+const meta: Meta
+ {children}
+
+ {isClamped && (
+
+ )}
+
+
+ )
+}
+
+function FacebookIcon(props: React.SVGProps
+
+
+
+
+
+
+ Designed with v0
+
+
+
+
+
+ Missing feature?
++ + Let us know + + , we'll build it! +
++ {body} +
+ ) +}) +FormMessage.displayName = "FormMessage" + +export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField } diff --git a/starters/shopify-algolia/components/GenericModal/GenericModal.tsx b/starters/shopify-algolia/components/GenericModal/GenericModal.tsx new file mode 100644 index 00000000..50c69638 --- /dev/null +++ b/starters/shopify-algolia/components/GenericModal/GenericModal.tsx @@ -0,0 +1,30 @@ +import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle } from "components/Dialog/Dialog" +import { CloseIcon } from "components/Icons/CloseIcon" +import { cn } from "utils/cn" + +interface FacetsModalProps { + open?: boolean + onOpenChange?: () => void + title?: string + children: React.ReactNode + className?: string +} + +export function GenericModal({ open, onOpenChange, title, children, className }: FacetsModalProps) { + return ( + + ) +} + +export function Placeholder() { + return +} diff --git a/starters/shopify-algolia/components/Icons/ArrowIcon.tsx b/starters/shopify-algolia/components/Icons/ArrowIcon.tsx new file mode 100644 index 00000000..d9cbd4a0 --- /dev/null +++ b/starters/shopify-algolia/components/Icons/ArrowIcon.tsx @@ -0,0 +1,12 @@ +export function ArrowIcon({ className }: { className?: string }) { + return ( + + ) +} diff --git a/starters/shopify-algolia/components/Icons/CaretSortIcon.tsx b/starters/shopify-algolia/components/Icons/CaretSortIcon.tsx new file mode 100644 index 00000000..bd7accf7 --- /dev/null +++ b/starters/shopify-algolia/components/Icons/CaretSortIcon.tsx @@ -0,0 +1,12 @@ +export function CaretSortIcon({ className }: { className?: string }) { + return ( + + ) +} diff --git a/starters/shopify-algolia/components/Icons/CheckIcon.tsx b/starters/shopify-algolia/components/Icons/CheckIcon.tsx new file mode 100644 index 00000000..27e7531c --- /dev/null +++ b/starters/shopify-algolia/components/Icons/CheckIcon.tsx @@ -0,0 +1,12 @@ +export function CheckIcon({ className }: { className?: string }) { + return ( + + ) +} diff --git a/starters/shopify-algolia/components/Icons/ChevronIcon.tsx b/starters/shopify-algolia/components/Icons/ChevronIcon.tsx new file mode 100644 index 00000000..86cb8326 --- /dev/null +++ b/starters/shopify-algolia/components/Icons/ChevronIcon.tsx @@ -0,0 +1,7 @@ +export function ChevronIcon({ className }: { className?: string }) { + return ( + + ) +} diff --git a/starters/shopify-algolia/components/Icons/CloseIcon.tsx b/starters/shopify-algolia/components/Icons/CloseIcon.tsx new file mode 100644 index 00000000..5e734381 --- /dev/null +++ b/starters/shopify-algolia/components/Icons/CloseIcon.tsx @@ -0,0 +1,7 @@ +export function CloseIcon({ className }: { className?: string }) { + return ( + + ) +} diff --git a/starters/shopify-algolia/components/Icons/FavoritesIcon.tsx b/starters/shopify-algolia/components/Icons/FavoritesIcon.tsx new file mode 100644 index 00000000..2f134a7b --- /dev/null +++ b/starters/shopify-algolia/components/Icons/FavoritesIcon.tsx @@ -0,0 +1,10 @@ +export function FavoritesIcon({ className }: { className?: string }) { + return ( + + ) +} diff --git a/starters/shopify-algolia/components/Icons/FiltersIcon.tsx b/starters/shopify-algolia/components/Icons/FiltersIcon.tsx new file mode 100644 index 00000000..143b349f --- /dev/null +++ b/starters/shopify-algolia/components/Icons/FiltersIcon.tsx @@ -0,0 +1,60 @@ +export function FiltersIcon({ className }: { className?: string }) { + return ( + + ) +} diff --git a/starters/shopify-algolia/components/Icons/HeartIcon.tsx b/starters/shopify-algolia/components/Icons/HeartIcon.tsx new file mode 100644 index 00000000..de53dc78 --- /dev/null +++ b/starters/shopify-algolia/components/Icons/HeartIcon.tsx @@ -0,0 +1,14 @@ +import type { HTMLAttributes } from "react" + +export function HeartIcon({ className, ...rest }: { className?: string } & HTMLAttributes
+
+ ),
+}
+
+export default meta
diff --git a/starters/shopify-algolia/components/Icons/RobotIcon.tsx b/starters/shopify-algolia/components/Icons/RobotIcon.tsx
new file mode 100644
index 00000000..9be2e538
--- /dev/null
+++ b/starters/shopify-algolia/components/Icons/RobotIcon.tsx
@@ -0,0 +1,23 @@
+export const RobotIcon = ({ className }: { className?: string }) => {
+ return (
+
+ )
+}
diff --git a/starters/shopify-algolia/components/Icons/SearchIcon.tsx b/starters/shopify-algolia/components/Icons/SearchIcon.tsx
new file mode 100644
index 00000000..359562eb
--- /dev/null
+++ b/starters/shopify-algolia/components/Icons/SearchIcon.tsx
@@ -0,0 +1,7 @@
+export function SearchIcon({ className }: { className?: string }) {
+ return (
+
+ )
+}
diff --git a/starters/shopify-algolia/components/Icons/StarIcon.tsx b/starters/shopify-algolia/components/Icons/StarIcon.tsx
new file mode 100644
index 00000000..029d7b27
--- /dev/null
+++ b/starters/shopify-algolia/components/Icons/StarIcon.tsx
@@ -0,0 +1,18 @@
+export const StarIcon = ({ className }: { className?: string }) => {
+ return (
+
+ )
+}
diff --git a/starters/shopify-algolia/components/Icons/ThinSearchIcon.tsx b/starters/shopify-algolia/components/Icons/ThinSearchIcon.tsx
new file mode 100644
index 00000000..ddd29f56
--- /dev/null
+++ b/starters/shopify-algolia/components/Icons/ThinSearchIcon.tsx
@@ -0,0 +1,16 @@
+export function ThinSearchIcon({ className }: { className?: string }) {
+ return (
+
+ )
+}
diff --git a/starters/shopify-algolia/components/Input/Input.stories.tsx b/starters/shopify-algolia/components/Input/Input.stories.tsx
new file mode 100644
index 00000000..d411ca85
--- /dev/null
+++ b/starters/shopify-algolia/components/Input/Input.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Label } from "components/Label/Label"
+import { Input } from "./Input"
+
+const meta: Meta
+ Loading...
+
+
+
+
+ )
+}
diff --git a/starters/shopify-algolia/components/Logo/Logo.tsx b/starters/shopify-algolia/components/Logo/Logo.tsx
new file mode 100644
index 00000000..ddf1c044
--- /dev/null
+++ b/starters/shopify-algolia/components/Logo/Logo.tsx
@@ -0,0 +1,23 @@
+export function Logo({ className }: { className?: string }) {
+ return (
+
+ )
+}
diff --git a/starters/shopify-algolia/components/Modals/LoginModal.tsx b/starters/shopify-algolia/components/Modals/LoginModal.tsx
new file mode 100644
index 00000000..e53e35bf
--- /dev/null
+++ b/starters/shopify-algolia/components/Modals/LoginModal.tsx
@@ -0,0 +1,93 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+import { getCurrentUser, loginUser } from "app/actions/user.actions"
+import { Button } from "components/Button/Button"
+import { DialogFooter } from "components/Dialog/Dialog"
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "components/Form/Form"
+import { GenericModal } from "components/GenericModal/GenericModal"
+import { Input } from "components/Input/Input"
+import { Logo } from "components/Logo/Logo"
+import { useModalStore } from "stores/modalStore"
+import { useUserStore } from "stores/userStore"
+
+const passwordRegexp = new RegExp(/(?=.*\d)(?=.*\W)(?=.*[a-z])(?=.*[A-Z]).{8,20}$/)
+
+const formSchema = z.object({
+ email: z.string().email().min(3).max(64),
+ password: z.string().min(8).max(20).regex(passwordRegexp, "Password must have at least one number, one symbol, one uppercase letter, and be at least 8 characters"),
+})
+
+const formFields = [
+ { label: "Email", name: "email", type: "text", placeholder: "Enter email..." },
+ { label: "Password", name: "password", type: "password", placeholder: "Enter password..." },
+] as const
+
+export function LoginModal() {
+ const setUser = useUserStore((s) => s.setUser)
+ const modals = useModalStore((s) => s.modals)
+ const closeModal = useModalStore((s) => s.closeModal)
+ const form = useForm
+
+
+ )
+}
diff --git a/starters/shopify-algolia/components/Modals/SearchModal.tsx b/starters/shopify-algolia/components/Modals/SearchModal.tsx
new file mode 100644
index 00000000..ee9bb9be
--- /dev/null
+++ b/starters/shopify-algolia/components/Modals/SearchModal.tsx
@@ -0,0 +1,138 @@
+import { type KeyboardEvent } from "react"
+
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+
+import { type Modal, useModalStore } from "stores/modalStore"
+
+import { useAutocomplete } from "utils/useAutocomplete"
+import { getHighlightedText } from "utils/highlightedText"
+
+import { Input } from "components/Input/Input"
+import { Button } from "components/Button/Button"
+import { Spinner } from "components/Spinner/Spinner"
+import { Dialog, DialogClose, DialogContent, DialogHeader } from "components/Dialog/Dialog"
+import { ProductCard } from "components/ProductCard/ProductCard"
+
+export function SearchModal() {
+ const router = useRouter()
+ const { query, results, onChange, hasMore, status } = useAutocomplete({ noOfResults: 10 })
+ const modals = useModalStore((s) => s.modals)
+ const closeModal = useModalStore((s) => s.closeModal)
+
+ function handleButtonClick() {
+ if (!query) return
+
+ router.push(`/search?q=${query}`)
+ closeModal("search")
+ }
+
+ function onKeyDown(e: KeyboardEvent
+
+ )
+ case "loading":
+ return (
+ Popular search terms
+-
+
- Black Shoes +
- Makeup +
- Laptop +
- Smartphone +
+
+ )
+ case "error":
+ return Sorry, something went wrong, please try again later
+ + case "done": { + const hasResults = !!results && results?.length > 0 + if (!hasResults) { + return ( +
+
+ )
+ }
+ return (
+ <>
+ No results found
+
+
+ Top suggestions
+-
+ {results.slice(0, 5).map((singleResult) => (
+
+
- closeModal("search")}>{getHighlightedText(singleResult.title, query)} + + ))} +
+ {results?.map(({ id, ...rest }) => (
+
+
+ )
+ }
+
+ default:
+ return null
+ }
+}
diff --git a/starters/shopify-algolia/components/Modals/SignupModal.tsx b/starters/shopify-algolia/components/Modals/SignupModal.tsx
new file mode 100644
index 00000000..cd91858a
--- /dev/null
+++ b/starters/shopify-algolia/components/Modals/SignupModal.tsx
@@ -0,0 +1,92 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+import { getCurrentUser, signupUser } from "app/actions/user.actions"
+import { Button } from "components/Button/Button"
+import { DialogFooter } from "components/Dialog/Dialog"
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "components/Form/Form"
+import { GenericModal } from "components/GenericModal/GenericModal"
+import { Input } from "components/Input/Input"
+import { Logo } from "components/Logo/Logo"
+import { useModalStore } from "stores/modalStore"
+import { useUserStore } from "stores/userStore"
+
+const passwordRegexp = new RegExp(/(?=.*\d)(?=.*\W)(?=.*[a-z])(?=.*[A-Z]).{8,20}$/)
+
+const formSchema = z.object({
+ email: z.string().email().min(3).max(64),
+ password: z.string().min(8).max(20).regex(passwordRegexp, "Password must have at least one number, one symbol, one uppercase letter, and be at least 8 characters"),
+})
+
+const formFields = [
+ { label: "Email", name: "email", type: "text", placeholder: "Enter email..." },
+ { label: "Password", name: "password", type: "password", placeholder: "Enter password..." },
+] as const
+
+export function SignupModal() {
+ const modals = useModalStore((s) => s.modals)
+ const setUser = useUserStore((s) => s.setUser)
+ const closeModal = useModalStore((s) => s.closeModal)
+ const form = useForm closeModal("search")}>
+
+ ))}
+
+
+ )
+}
diff --git a/starters/shopify-algolia/components/NavigationBar/Cart.tsx b/starters/shopify-algolia/components/NavigationBar/Cart.tsx
new file mode 100644
index 00000000..565cad06
--- /dev/null
+++ b/starters/shopify-algolia/components/NavigationBar/Cart.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import { cn } from "utils/cn"
+import { OpenCartButton } from "./OpenCartButton"
+import { useCartStore } from "stores/cartStore"
+
+interface CartProps {
+ className?: string
+}
+
+export function Cart({ className }: CartProps) {
+ const cart = useCartStore((s) => s.cart)
+ const preloadSheet = useCartStore((s) => s.preloadSheet)
+
+ return (
+
+ {!!isPending &&
+
+
+
+
+
+ {hasResults &&
+ results.map((singleProduct) => (
+ setIsOpen(false)}
+ >
+
+ {getHighlightedText(singleProduct.title, query)}
+ + ))} + {status === "error" &&Sorry, something went wrong, please try again later
} +
+
+ {!!cart?.totalQuantity && (
+
+ )
+}
diff --git a/starters/shopify-algolia/components/NavigationBar/Favorites.tsx b/starters/shopify-algolia/components/NavigationBar/Favorites.tsx
new file mode 100644
index 00000000..18ddc3a2
--- /dev/null
+++ b/starters/shopify-algolia/components/NavigationBar/Favorites.tsx
@@ -0,0 +1,17 @@
+import Link from "next/link"
+import { FavoritesIcon } from "components/Icons/FavoritesIcon"
+import { cn } from "utils/cn"
+
+interface FavoritesProps {
+ className?: string
+}
+
+export async function Favorites({ className }: FavoritesProps) {
+ return (
+ {cart?.totalQuantity}
+ )}
+
+
+
+ )
+}
diff --git a/starters/shopify-algolia/components/NavigationBar/NavigationBar.tsx b/starters/shopify-algolia/components/NavigationBar/NavigationBar.tsx
new file mode 100644
index 00000000..064c360a
--- /dev/null
+++ b/starters/shopify-algolia/components/NavigationBar/NavigationBar.tsx
@@ -0,0 +1,111 @@
+import { Suspense } from "react"
+import { ChevronIcon } from "components/Icons/ChevronIcon"
+import dynamic from "next/dynamic"
+import Link from "next/link"
+
+import { cn } from "utils/cn"
+import { Autocomplete } from "./Autocomplete"
+import { Cart } from "./Cart"
+import { Favorites } from "./Favorites"
+import { ImageGridItem, NavItem, TextGridItem, TextImageGridItem } from "./types"
+import { ImageGridVariant } from "./variants/ImageGridVariant"
+import { TextGridVariant } from "./variants/TextGridVariant"
+import { TextImageGridVariant } from "./variants/TextImageGridVariant"
+import { Skeleton } from "components/Skeleton/Skeleton"
+import { CloseIcon } from "components/Icons/CloseIcon"
+import { SearchButton } from "./SearchButton"
+import { NavigationItem } from "./NavigationItem"
+
+const ProductAddedAlert = dynamic(() => import("views/Product/ProductAddedAlert").then((mod) => mod.ProductAddedAlert))
+
+interface NavigationBarProps {
+ items: NavItem[]
+}
+
+function VariantGrid({ variant, items }: { variant?: "text-grid" | "image-grid" | "text-image-grid"; items?: TextGridItem[] | ImageGridItem[] | TextImageGridItem[] }) {
+ if (!items) return null
+
+ switch (variant) {
+ case "text-grid":
+ return
+
+
+
+ Acme
+
+
+
+
+
+ Acme
+
+
+
+
+
+
+
+
+
+
+ {items.map((singleCategory) => (
+
+
+ )
+}
diff --git a/starters/shopify-algolia/components/NavigationBar/variants/TextGridVariant.tsx b/starters/shopify-algolia/components/NavigationBar/variants/TextGridVariant.tsx
new file mode 100644
index 00000000..2c06eb58
--- /dev/null
+++ b/starters/shopify-algolia/components/NavigationBar/variants/TextGridVariant.tsx
@@ -0,0 +1,35 @@
+import Link from "next/link"
+import { TextGridItem } from "../types"
+
+interface TextGridVariantProps {
+ items: TextGridItem[]
+}
+
+export function TextGridVariant({ items }: TextGridVariantProps) {
+ if (!items?.length) return null
+
+ return (
+ {singleCategory.text}
+ + ))} +
+ {items.map((singleCategory) => (
+
+ )
+}
diff --git a/starters/shopify-algolia/components/NavigationBar/variants/TextImageGridVariant.tsx b/starters/shopify-algolia/components/NavigationBar/variants/TextImageGridVariant.tsx
new file mode 100644
index 00000000..b238ac96
--- /dev/null
+++ b/starters/shopify-algolia/components/NavigationBar/variants/TextImageGridVariant.tsx
@@ -0,0 +1,44 @@
+import Image from "next/image"
+import Link from "next/link"
+import { TextImageGridItem } from "../types"
+
+interface TextImageGridVariantProps {
+ items: TextImageGridItem[]
+}
+
+export function TextImageGridVariant({ items }: TextImageGridVariantProps) {
+ if (!items) return null
+
+ const textItems = items.filter((item) => !item.image)
+ const imageItems = items.filter((item) => item.image).slice(0, 3)
+
+ return (
+
+ {singleCategory.href ? (
+
+
+ ))}
+ {singleCategory.text}
+ + ) : ( +{singleCategory.text}
+ )} +-
+ {singleCategory?.items?.map((item) => (
+
- + + {item.text} + + + ))} +
+
+ )
+}
diff --git a/starters/shopify-algolia/components/Pagination/Pagination.stories.tsx b/starters/shopify-algolia/components/Pagination/Pagination.stories.tsx
new file mode 100644
index 00000000..26c46901
--- /dev/null
+++ b/starters/shopify-algolia/components/Pagination/Pagination.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./Pagination"
+
+const meta: Meta
+
+ -
+ {textItems.map((item) => (
+
- + + {item.text} + + + ))} +
+ {imageItems.map((singleCategory) => (
+
+
+ {singleCategory.text}
+ + ))} +
+
+
+ {/* remove first word from the title as it includes vendor (this just needs feed update and then can be removed) */}
+
+
+ )
+}
diff --git a/starters/shopify-algolia/components/ProductCard/QuickAdd.tsx b/starters/shopify-algolia/components/ProductCard/QuickAdd.tsx
new file mode 100644
index 00000000..6423b047
--- /dev/null
+++ b/starters/shopify-algolia/components/ProductCard/QuickAdd.tsx
@@ -0,0 +1,27 @@
+import type { PlatformVariant } from "lib/shopify/types"
+import { getAllCombinations } from "utils/productOptionsUtils"
+import QuickAddButton from "./QuickAddButton"
+import { CommerceProduct } from "types"
+
+interface QuickAddProps {
+ product: CommerceProduct
+ variants: PlatformVariant[]
+}
+
+export function QuickAdd({ product, variants }: QuickAddProps) {
+ const combinations = getAllCombinations(variants)
+
+ const hasOnlyOneCombination = combinations?.length === 1
+ const combinationsMarkup = combinations?.map((combination) => {title.split(" ").slice(1).join(" ")}
+
+ {!!vendor &&
+ {vendor}
} + {noOfVariants > 0 && ( ++ {noOfVariants} variant{noOfVariants > 1 ? "s" : ""} +
+ )} + {!!avgRating && !!totalReviews && ( +
+
+ )}
+ {!!variantPrice && From {mapCurrencyToSign((variantPrice.currencyCode as CurrencyType) || "USD") + minPrice.toFixed(2)}}
+
+
+ )
+}
diff --git a/starters/shopify-algolia/components/ProductCard/QuickAddButton.tsx b/starters/shopify-algolia/components/ProductCard/QuickAddButton.tsx
new file mode 100644
index 00000000..3ca1ab87
--- /dev/null
+++ b/starters/shopify-algolia/components/ProductCard/QuickAddButton.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { useState } from "react"
+import { addCartItem } from "app/actions/cart.actions"
+import { Spinner } from "components/Spinner/Spinner"
+import { useAddProductStore } from "stores/addProductStore"
+import { cn } from "utils/cn"
+import { Combination } from "utils/productOptionsUtils"
+import { toast } from "sonner"
+import { type CurrencyType, mapCurrencyToSign } from "utils/mapCurrencyToSign"
+import type { CommerceProduct } from "types"
+
+interface QuickAddButtonProps {
+ product: CommerceProduct
+ combination: Combination | undefined
+ label?: string
+ className?: string
+ withPrice?: boolean
+}
+
+export default function QuickAddButton({ combination, label, className, product, withPrice = false }: QuickAddButtonProps) {
+ const [isPending, setIsPending] = useState(false)
+ const { setProduct, clean } = useAddProductStore()
+
+ // Mimic delay and display optimistic UI due to shopify API being slow
+ const handleClick = async () => {
+ if (!combination?.id) return
+
+ setIsPending(true)
+
+ setTimeout(() => {
+ setProduct({ product, combination })
+ setIsPending(false)
+ }, 300)
+
+ setTimeout(() => clean(), 4500)
+ const res = await addCartItem(null, combination.id)
+
+ if (!res.ok) toast.error("Out of stock")
+ }
+
+ if (!combination) return null
+
+ return (
+
+ )
+}
+
+type QuickAddButtonLabelProps = {
+ label: string
+ price?: Combination["price"]
+}
+
+function QuickAddButtonLabel({ label, price }: QuickAddButtonLabelProps) {
+ return (
+
+
+ Quick add
+
+ {hasOnlyOneCombination ?
+
+
+ )
+}
diff --git a/starters/shopify-algolia/components/ProfileMenu/AuthActions.tsx b/starters/shopify-algolia/components/ProfileMenu/AuthActions.tsx
new file mode 100644
index 00000000..d23a05cc
--- /dev/null
+++ b/starters/shopify-algolia/components/ProfileMenu/AuthActions.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import { Button } from "components/Button/Button"
+import { useModalStore } from "stores/modalStore"
+
+export function AuthActions() {
+ const openModal = useModalStore((s) => s.openModal)
+
+ return (
+ {label}
+ {!!price && ( + + {(+price.amount).toFixed(2)} + {mapCurrencyToSign(price?.currencyCode as CurrencyType)} + + )} +
+
+
+
+ )
+}
diff --git a/starters/shopify-algolia/components/ProfileMenu/ProfileBar.tsx b/starters/shopify-algolia/components/ProfileMenu/ProfileBar.tsx
new file mode 100644
index 00000000..470eff69
--- /dev/null
+++ b/starters/shopify-algolia/components/ProfileMenu/ProfileBar.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { PlatformUser } from "lib/shopify/types"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { logoutUser } from "app/actions/user.actions"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "components/DropdownMenu/DropdownMenu"
+import { useUserStore } from "stores/userStore"
+
+export default function ProfileBar({ user }: { user: PlatformUser }) {
+ const router = useRouter()
+ const setUser = useUserStore((s) => s.setUser)
+ const menuItemClass = "cursor-pointer border-b border-neutral-200 py-2 last:border-b-0 hover:bg-neutral-50 focus:bg-neutral-50 active:bg-neutral-50"
+
+ function handleLogout() {
+ logoutUser()
+ setUser(null)
+
+ router.refresh()
+ }
+
+ return (
+
+
+ )}
+
+ )
+}
+
+function ActionsSkeleton() {
+ return Content
+
+
+
+
+ Subtotal
+0$
+
+
+ Shipping
+Calculated at checkout
+
+
+ Total
+0$
+