implement buy item logic

Author: filipKovachev

examples/kendo-react-e-commerce-astro-app/src/components/CardsList.tsx

@@ -2,12 +2,11 @@ import { Badge, BadgeContainer } from "@progress/kendo-react-indicators";
 import { Button } from "@progress/kendo-react-buttons";
 import { cartIcon } from "@progress/kendo-svg-icons";
 import { CardListProps } from "../data/types";
-import { useNavigate } from "react-router-dom";
 
 export const CardsList = (props: CardListProps) => {
 
   const onButtonClick = (index: number) => {
-    // navigate(`/product/${index + 1}`);
+    window.location.href=`/product/${index + 1}`;
   };
 
   return (

examples/kendo-react-e-commerce-astro-app/src/components/ProductDetails.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { addToCart } from "../helpers/useCart";
+import { ProductCard } from "../components/ProductCard";
+import { listData } from "../data/listData";
+import { Layout } from "../components/Layout";
+import { CategoryList } from "../components/CategoryList";
+import { CardDescriptor } from "../data/types";
+import { CustomSection } from "../components/CustomizedSection";
+
+interface ProductDetailsProps {
+  id: string; 
+}
+
+export const ProductDetails: React.FC<ProductDetailsProps> = ({ id }) => {
+  const productId = parseInt(id, 10); 
+
+  console.log("Raw ID from props:", id);
+  console.log("Parsed Product ID:", productId);
+  console.log("List Data:", listData);
+
+  const productToAdd = listData.find((item) => item.id === productId);
+
+  console.log("Matched Product:", productToAdd);
+
+  const descriptionText =
+    "Elegant wedding bands featuring lustrous pearls, beautifully set in sleek, timeless bands.";
+
+  const handleAddToCart = () => {
+    if (productToAdd) {
+      addToCart(productToAdd);
+    }
+    window.location.href = "/shoppingcart";
+  };
+
+  const data: CardDescriptor[] = [
+    {
+      img: "/homemadePinkDiamondRing.jpg",
+      collectionText: "Handmade Pink Diamond Ring",
+    },
+    {
+      img: "/diamondRingPinkRuby.jpg",
+      collectionText: "Diamond Ring with Pink Ruby",
+    },
+    {
+      img: "/whiteSandDiamondRing.jpg",
+      collectionText: "White Sand Diamond Ring",
+    },
+  ];
+
+  return (
+    <>
+      <Layout>
+        {productToAdd ? (
+          <ProductCard
+            title={productToAdd.title}
+            image={productToAdd.img}
+            subtitle="In Platinum with Natural Diamond"
+            breadCrumbItem={[
+              { text: "Home" },
+              { text: "Jewelry" },
+              { text: productToAdd.category },
+            ]}
+            rating={productToAdd.rating}
+            reviews="208 reviews"
+            price={productToAdd.newPrice}
+            description={descriptionText}
+            addToCart={handleAddToCart}
+          />
+        ) : (
+          <div>Product not found</div>
+        )}
+      </Layout>
+      <Layout>
+        <CustomSection>
+          <CategoryList
+            title="You May Also Like"
+            subtitle="Enjoy an excellent selection of fine jewelry"
+            data={data}
+          />
+        </CustomSection>
+      </Layout>
+    </>
+  );
+};
+
+export default ProductDetails;

examples/kendo-react-e-commerce-astro-app/src/data/listData.tsx

@@ -186,3 +186,5 @@ export const listData: ListDataDescriptor[] = [
   id: index + 1,
   rating: Math.floor(Math.random() * 5) + 3,
 }));
+
+export default listData

examples/kendo-react-e-commerce-astro-app/src/helpers/cartStore.ts

@@ -0,0 +1,28 @@
+import { atom } from "nanostores";
+import { ListDataDescriptor } from "../data/types";
+
+export const cartStore = atom<
+  { product: ListDataDescriptor; quantity: number }[]
+>([]);
+
+export const addToCart = (product: ListDataDescriptor) => {
+  const currentCart = cartStore.get();
+
+  const existingProduct = currentCart.find(
+    (item) => item.product.id === product.id
+  );
+
+  if (existingProduct) {
+    existingProduct.quantity += 1;
+  } else {
+    currentCart.push({ product, quantity: 1 });
+  }
+
+  cartStore.set([...currentCart]);
+};
+
+export const removeFromCart = (productId: number) => {
+  const currentCart = cartStore.get();
+  const updatedCart = currentCart.filter((item) => item.product.id !== productId);
+  cartStore.set(updatedCart);
+};

examples/kendo-react-e-commerce-astro-app/src/helpers/useCart.ts

@@ -0,0 +1,29 @@
+import { atom } from "nanostores";
+import { DataModel } from "../data/types";
+
+export const cartStore = atom<DataModel[]>([]);
+
+export const addToCart = (item: DataModel) => {
+  const currentCart = cartStore.get();
+  const existingItem = currentCart.find((cartItem) => cartItem.id === item.id);
+
+  if (existingItem) {
+    const updatedCart = currentCart.map((cartItem) =>
+      cartItem.id === item.id
+        ? { ...cartItem, quantity: (cartItem.quantity || 0) + 1 }
+        : cartItem
+    );
+    cartStore.set(updatedCart);
+  } else {
+    cartStore.set([...currentCart, { ...item, quantity: 1 }]);
+  }
+};
+
+export const removeFromCart = (id: number) => {
+  const currentCart = cartStore.get();
+  cartStore.set(currentCart.filter((item) => item.id !== id));
+};
+
+export const clearCart = () => {
+  cartStore.set([]);
+};

examples/kendo-react-e-commerce-astro-app/src/pages/product/[id].astro

@@ -0,0 +1,27 @@
+---
+import Layout from '/src/layouts/Layout.astro';
+import ProductDetails from '/src/components/ProductDetails';
+import listData from '/src/data/listData'; // Import product data globally
+
+export async function getStaticPaths() {
+  const paths = listData.map((product) => ({
+    params: { id: String(product.id) }, // Dynamically generate paths
+  }));
+
+  console.log('Generated paths:', paths); // Debug generated paths
+  return paths;
+}
+
+const { id } = Astro.params; // Access the dynamic route parameter
+const product = listData.find((item) => String(item.id) === id); // Find the matching product
+---
+
+<Layout title={`Product ${id}`}>
+  <main>
+    {product ? (
+      <ProductDetails id={id} product={product} client:only="react" />
+    ) : (
+      <div>Product not found</div>
+    )}
+  </main>
+</Layout>