Work in progress for shopify ui

env.local

@@ -0,0 +1,8 @@
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-WSXY307CRR
+NEXT_PUBLIC_GOOGLE_MAPS_KEY=AIzaSyB3mMuvl8IUlviRZiizBiX7uhsdIqunx94
+
+NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=3b70a0fb51e102381b458316d9fe2c8d
+NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=https://hashflagswag.myshopify.com/api/2022-10/graphql.json
+
+SHOPIFY_STORE_DOMAIN=https://hashflagswag.myshopify.com/api/2022-10/graphql.json
+SHOPIFY_STOREFRONT_ACCESS_TOKEN=3b70a0fb51e102381b458316d9fe2c8d

package.json

@@ -20,9 +20,13 @@
     "@ai-sdk/azure": "^1.0.7",
     "@googlemaps/react-wrapper": "^1.1.35",
     "@googlemaps/typescript-guards": "^2.0.1",
+<<<<<<< HEAD
+    "@playwright/test": "^1.49.0",
+=======
     "@octokit/rest": "^21.0.2",
     "@playwright/test": "^1.49.0",
     "@radix-ui/react-dialog": "^1.1.4",
+>>>>>>> origin/master
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^1.1.0",
     "@types/express": "^4.17.17",
@@ -37,6 +41,11 @@
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
     "fast-equals": "3.0.3",
+<<<<<<< HEAD
+    "framer-motion": "^6.5.1",
+    "graphql-request": "^7.1.2",
+=======
+>>>>>>> origin/master
     "gray-matter": "^4.0.3",
     "lucide-react": "^0.378.0",
     "mailchimp-api-v3": "^1.15.0",

src/components/product-card/ProductCard.module.css

@@ -0,0 +1,15 @@
+.card {
+  padding: 1rem 1.2rem;
+}
+
+.image {
+  width: 100%;
+  height: 600px;
+  position: relative;
+  cursor: pointer;
+}
+.content {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+}

src/components/product-card/ProductCard.tsx

@@ -0,0 +1,62 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import styles from './ProductCard.module.css';
+
+interface ProductCardProps {
+  product: {
+    node: {
+      id: string;
+      title: string;
+      handle: string;
+      featuredImage?: {
+        url: string;
+        altText?: string;
+      };
+      priceRange: {
+        minVariantPrice: {
+          amount: string;
+        };
+      };
+    };
+  };
+}
+
+export default function ProductCard({ product }: ProductCardProps) {
+
+  const { node } = product;
+
+  return (
+    <div className={styles.card}>
+
+      <div className={styles.image}>
+        {node.featuredImage?.url ? (
+          <Image
+            src={node.featuredImage.url}
+            alt={node.featuredImage.altText || 'Product image'}
+            fill={true}
+          />
+        ) : (
+          <div className={styles.placeholder}>No Image Available</div> 
+        )}
+      </div>
+
+
+      <div className={styles.content}>
+        <small>
+          <Link
+            href={`/products/${node.handle}/?id=${node.id}`}
+            className={styles.action}
+          >
+            {node.title}
+          </Link>
+        </small>
+        <small>
+          {new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: 'USD',
+          }).format(parseFloat(node.priceRange.minVariantPrice.amount))}
+        </small>
+      </div>
+    </div>
+  );
+}

src/components/product-details/product-details.js

@@ -0,0 +1,51 @@
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import styles from "./ProductDetails.module.css";
+
+export default function ProductDetails({ product }) {
+    const [quantity, setQuantity] = useState(0);
+    const [checkout, setCheckout] = useState(false);
+    const updateQuantity = (e) => {
+        setQuantity(e.target.value);
+        if (quantity == 0) setCheckout(false);
+    };
+
+    const handleAddToCart = async () => {
+        let cartId = sessionStorage.getItem("cartId");
+        if (quantity > 0) {
+            if (cartId) {
+                await updateCart(cartId, product.variants.edges[0].node.id, quantity);
+                setCheckout(true);
+            } else {
+                let data = await addToCart(product.variants.edges[0].node.id, quantity);
+                cartId = data.cartCreate.cart.id;
+                sessionStorage.setItem("cartId", cartId);
+                setCheckout(true);
+            }
+        }
+    };
+    return (
+        <>
+            <div className={styles.container}>
+                <div className={styles.image}>
+                    <Image
+                        src={product.featuredImage.url}
+                        alt={product.featuredImage.altText}
+                        fill={true}
+                    />
+                </div>
+                <div className={styles.content}>
+                    <span>
+                        <h2>{product.title}</h2>
+                        <h3>{product.priceRange.minVariantPrice.amount}</h3>
+                    </span>
+                    <input value={quantity} onChange={updateQuantity} type="number" min={0} />
+                    <button className={styles.cartbtn} onClick={handleAddToCart}>
+                        Add to Cart
+                    </button>
+                </div>
+            </div>
+        </>
+    );
+}

src/data/menu.ts

@@ -107,7 +107,7 @@ const navigation: NavigationItem[] = [
             {
                 id: 62,
                 label: "Shop",
-                path: "https://hashflag.shop/",
+                path: "/shop",
                 external: true,
             },
             {

src/pages/shop/home.module.css

@@ -0,0 +1,16 @@
+.products {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+@media screen and (max-width: 992px) {
+  .products {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media screen and (max-width: 600px) {
+  .products {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+}

src/pages/shop/index.js

@@ -0,0 +1,49 @@
+import Head from "next/head";
+import { getProducts } from "../../utils/shopify";
+import ProductCard from "../../components/product-card/ProductCard";
+import styles from "./home.module.css";
+
+export default function Home({ data }) {
+  const products = data.products.edges;
+
+  return (
+    <>
+      <Head>
+        <title>Nextjs Shopify</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main>
+        <div className={styles.products}>
+          {products.length ? (
+            products.map((product) => (
+              <ProductCard key={product.node.id} product={product} />
+            ))
+          ) : (
+            <p>No products available at the moment.</p>
+          )}
+        </div>
+      </main>
+    </>
+  );
+}
+
+export const getServerSideProps = async () => {
+  try {
+    const data = await getProducts();
+
+    if (!data || !data.products || !data.products.edges) {
+      throw new Error("Invalid data from Shopify API");
+    }
+
+    return {
+      props: { data },
+    };
+  } catch (error) {
+    console.error("Error fetching products:", error);
+    return {
+      props: { data: { products: { edges: [] } } },
+    };
+  }
+};