Skip to content

Commit d0c1623

Browse files
svdimitrsvdimitr
committed
shopping cart
1 parent bbcf1e7 commit d0c1623

File tree

8 files changed

+373
-137
lines changed

8 files changed

+373
-137
lines changed

‎examples/ecommerce-jewellery-store/src/App.tsx‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
1+
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
22
import Header from "@/components/Header";
33
import Footer from "@/components/Footer";
44
import Contacts from "@/pages/Contacts";
@@ -9,26 +9,31 @@ import Home from "@/pages/Home";
99
import "@progress/kendo-theme-default/dist/all.css";
1010
import "@progress/kendo-theme-utils/dist/all.scss";
1111
import { SizedParent } from "./components/SizedParent";
12-
import { DetailedCategory } from './pages/DetailedCategory';
13-
import { ProductDetails } from './pages/ProductsDetails';
12+
import { DetailedCategory } from "./pages/DetailedCategory";
13+
import { ProductDetails } from "./pages/ProductsDetails";
14+
import { CartProvider } from "./helpers/CartContext";
15+
import { ShoppingCartList } from "./components/ShoppingCartList";
1416

1517
function App() {
1618
return (
17-
<Router>
18-
<Header />
19-
<SizedParent>
20-
<Routes>
21-
<Route path="/" element={<Home />} />
22-
<Route path="/paymentdetails" element={<PaymentDetails />} />
23-
<Route path="/thankyou" element={<ThankYou />} />
24-
<Route path="/contacts" element={<Contacts />} />
25-
<Route path="/products" element={<AllProductsListView />} />
26-
<Route path="/category" element={<DetailedCategory />} />
27-
<Route path="/product/:id" element={<ProductDetails />} />
28-
</Routes>
29-
</SizedParent>
30-
<Footer />
31-
</Router>
19+
<CartProvider>
20+
<Router>
21+
<Header />
22+
<SizedParent>
23+
<Routes>
24+
<Route path="/" element={<Home />} />
25+
<Route path="/paymentdetails" element={<PaymentDetails />} />
26+
<Route path="/thankyou" element={<ThankYou />} />
27+
<Route path="/contacts" element={<Contacts />} />
28+
<Route path="/products" element={<AllProductsListView />} />
29+
<Route path="/category" element={<DetailedCategory />} />
30+
<Route path="/product/:id" element={<ProductDetails />} />
31+
<Route path="/shoppingcart" element={<ShoppingCartList />} />
32+
</Routes>
33+
</SizedParent>
34+
<Footer />
35+
</Router>
36+
</CartProvider>
3237
);
3338
}
3439

‎examples/ecommerce-jewellery-store/src/assets/shoppingCartImg.png‎

681 KB
Loading

‎examples/ecommerce-jewellery-store/src/components/CardsList.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import { Badge, BadgeContainer } from "@progress/kendo-react-indicators";
22
import { Button } from "@progress/kendo-react-buttons";
3-
import { cartIcon } from "@progress/kendo-svg-icons"
3+
import { cartIcon } from "@progress/kendo-svg-icons";
44
import { CardListProps } from "../data/types";
55
import { useNavigate } from "react-router-dom";
66

77
export const CardsList = (props: CardListProps) => {
88
const navigate = useNavigate();
99

10-
1110
const onButtonClick = (index: number) => {
1211
navigate(`/product/${index + 1}`);
13-
}
12+
};
1413

1514
return (
1615
<section className="k-d-grid k-grid-cols-12 k-col-span-12 k-justify-content-center k-align-items-center k-gap-3">
@@ -75,7 +74,11 @@ export const CardsList = (props: CardListProps) => {
7574
>{`$${item.newPrice}`}</span>
7675
</span>
7776
<span>
78-
<Button fillMode={"outline"} svgIcon={cartIcon} onClick={() => onButtonClick(index)}>
77+
<Button
78+
fillMode={"outline"}
79+
svgIcon={cartIcon}
80+
onClick={() => onButtonClick(index)}
81+
>
7982
Buy
8083
</Button>
8184
</span>

‎examples/ecommerce-jewellery-store/src/components/ProductCard.tsx‎

Lines changed: 57 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -4,63 +4,66 @@ import { NumericTextBox, Rating } from "@progress/kendo-react-inputs";
44
import { Button } from "@progress/kendo-react-buttons";
55

66
export const ProductCard = (props: ProductCardProps) => {
7+
return (
8+
<>
9+
<section
10+
className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12 k-gap-2"
11+
style={{
12+
paddingTop: "60px",
13+
}}
14+
>
15+
<div
16+
className="k-rounded-lg k-col-span-5"
17+
style={{
18+
backgroundImage: `url(${props.image})`,
19+
backgroundSize: "cover",
20+
height: "385px",
21+
width: "476px",
22+
}}
23+
></div>
724

8-
const onAddToCartClick = () => {
9-
}
25+
<div className="k-col-span-7 k-h-full">
26+
<Breadcrumb data={props.breadCrumbItem}></Breadcrumb>
1027

11-
return (
12-
<>
13-
<section
14-
className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12 k-gap-2"
28+
<div className="k-d-grid k-gap-6">
29+
<span className="k-h2 k-text-black k-font-bold">{props.title}</span>
30+
<div className="k-font-size-xl">{props.subtitle}</div>
31+
<span className="k-d-flex k-align-items-center">
32+
<Rating value={props.rating}></Rating>
33+
<span
1534
style={{
16-
paddingTop: "60px",
35+
color: "red",
1736
}}
18-
>
19-
<div className="k-rounded-lg k-col-span-5" style={{
20-
backgroundImage: `url(${props.image})`,
21-
backgroundSize: "cover",
22-
height: "385px",
23-
width: "476px"
24-
}}></div>
25-
26-
<div className="k-col-span-7 k-h-full">
27-
<Breadcrumb data={props.breadCrumbItem}></Breadcrumb>
28-
29-
<div className="k-d-grid k-gap-6">
30-
<span className="k-h2 k-text-black k-font-bold">
31-
{props.title}
32-
</span>
33-
<div className="k-font-size-xl">
34-
{props.subtitle}
35-
</div>
36-
<span className="k-d-flex k-align-items-center">
37-
<Rating value={props.rating}></Rating>
38-
<span style={{
39-
color: "red"
40-
}}>
41-
{props.reviews}
42-
</span>
43-
</span>
37+
>
38+
{props.reviews}
39+
</span>
40+
</span>
4441

45-
<div className="k-font-size-xl" style={{
46-
color: "red"
47-
}}>
48-
{`$${props.price}`}
49-
</div>
50-
</div>
51-
52-
<div className="k-font-size-sm k-pt-6">
53-
{props.description}
54-
</div>
55-
<div className="k-d-flex k-gap-3 k-pt-6">
56-
<NumericTextBox spinners={true} style={{
57-
width: "84px"
58-
}} value={1}></NumericTextBox>
59-
<Button themeColor={"primary"} onClick={onAddToCartClick}>Add to Cart</Button>
60-
</div>
42+
<div
43+
className="k-font-size-xl"
44+
style={{
45+
color: "red",
46+
}}
47+
>
48+
{`$${props.price}`}
49+
</div>
50+
</div>
6151

62-
</div>
63-
</section>
64-
</>
65-
);
66-
}
52+
<div className="k-font-size-sm k-pt-6">{props.description}</div>
53+
<div className="k-d-flex k-gap-3 k-pt-6">
54+
<NumericTextBox
55+
spinners={true}
56+
style={{
57+
width: "84px",
58+
}}
59+
value={1}
60+
></NumericTextBox>
61+
<Button themeColor={"primary"} onClick={props.addToCart}>
62+
Add to Cart
63+
</Button>
64+
</div>
65+
</div>
66+
</section>
67+
</>
68+
);
69+
};

0 commit comments

Comments
 (0)