From e9fffe89160696462be36ad557dc4b214bbb5e0a Mon Sep 17 00:00:00 2001
From: nikiquickie <danzi6386@gmail.com>
Date: Wed, 18 Dec 2024 14:29:30 +0200
Subject: [PATCH] update product

---
 index.html                               |   2 +-
 pages/index/index.html                   |   2 +-
 pages/product-single/product-single.html | 184 +++++++++++++++--------
 pages/shop/shop.html                     |   4 +-
 product-single.html                      | 184 +++++++++++++++--------
 shop.html                                |   4 +-
 6 files changed, 246 insertions(+), 134 deletions(-)

diff --git a/index.html b/index.html
index 65afa50..f5f4cbf 100644
--- a/index.html
+++ b/index.html
@@ -843,7 +843,7 @@ <h2 class="mb-4">Про нас</h2>
 </section>
 
 <div id="template-products" style="display: none;">
-	<a href="/product-single/{id}">
+	<a href="/product-single#{id}">
 		<div class="col-md-6 col-lg-3 height-product">
 			<div class="product">
 				<img class="img-fluid" src="{thumb}" alt="Product Image" />
diff --git a/pages/index/index.html b/pages/index/index.html
index c265d60..1c8910d 100644
--- a/pages/index/index.html
+++ b/pages/index/index.html
@@ -453,7 +453,7 @@ <h2 class="mb-4">Про нас</h2>
 </section>
 
 <div id="template-products" style="display: none;">
-	<a href="/product-single/{id}">
+	<a href="/product-single#{id}">
 		<div class="col-md-6 col-lg-3 height-product">
 			<div class="product">
 				<img class="img-fluid" src="{thumb}" alt="Product Image" />
diff --git a/pages/product-single/product-single.html b/pages/product-single/product-single.html
index 0edc616..15002f0 100644
--- a/pages/product-single/product-single.html
+++ b/pages/product-single/product-single.html
@@ -12,70 +12,8 @@ <h1 class="mb-0 bread">Product Single</h1>
 
 <section class="ftco-section">
     <div class="container">
-        <div class="row">
-            <div class="col-lg-6 mb-5 ftco-animate">
-                <a href="{{{product.thumb}}}" class="image-popup"><img src="{{{product.thumb}}}" class="img-fluid"
-                        alt="Product photo"></a>
-            </div>
-            <div class="col-lg-6 product-details pl-md-5 ftco-animate">
-                <h3>{{{product.name}}}</h3>
-                <div class="rating d-flex">
-                    <p class="text-left mr-4">
-                        <a href="#" class="mr-2">5.0</a>
-                        <a href="#"><span class="ion-ios-star-outline"></span></a>
-                        <a href="#"><span class="ion-ios-star-outline"></span></a>
-                        <a href="#"><span class="ion-ios-star-outline"></span></a>
-                        <a href="#"><span class="ion-ios-star-outline"></span></a>
-                        <a href="#"><span class="ion-ios-star-outline"></span></a>
-                    </p>
-                    <p class="text-left mr-4">
-                        <a href="#" class="mr-2" style="color: #000;">100 <span style="color: #bbb;">Rating</span></a>
-                    </p>
-                    <p class="text-left">
-                        <a href="#" class="mr-2" style="color: #000;">500 <span style="color: #bbb;">Sold</span></a>
-                    </p>
-                </div>
-                <p class="price"><span>{{{product.price}}}</span></p>
-                <p>{{{product.description}}}</p>
-                <p>{{{product.country}}}</p>
-                <p>{{{product.weight}}}</p>
-                <p>{{{product.volume}}}</p>
-                <div class="row mt-4">
-                    <div class="col-md-6">
-                        <div class="form-group d-flex">
-                            <div class="select-wrap">
-                                <div class="icon"><span class="ion-ios-arrow-down"></span></div>
-                                <select name="" id="" class="form-control">
-                                    <option value="">Small</option>
-                                    <option value="">Medium</option>
-                                    <option value="">Large</option>
-                                    <option value="">Extra Large</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="w-100"></div>
-                    <div class="input-group col-md-6 d-flex mb-3">
-                        <span class="input-group-btn mr-2">
-                            <button type="button" class="quantity-left-minus btn" data-type="minus" data-field="">
-                                <i class="ion-ios-remove"></i>
-                            </button>
-                        </span>
-                        <input type="text" id="quantity" name="quantity" class="form-control input-number" value="1"
-                            min="1" max="100">
-                        <span class="input-group-btn ml-2">
-                            <button type="button" class="quantity-right-plus btn" data-type="plus" data-field="">
-                                <i class="ion-ios-add"></i>
-                            </button>
-                        </span>
-                    </div>
-                    <div class="w-100"></div>
-                    <div class="col-md-12">
-                        <p style="color: #000;">600 kg available</p>
-                    </div>
-                </div>
-                <p><a href="/cart.html" class="btn btn-black py-3 px-5">Add to Cart</a></p>
-            </div>
+        <div class="row" id="products">
+
         </div>
     </div>
 </section>
@@ -235,4 +173,122 @@ <h2 style="font-size: 22px;" class="mb-0">Subcribe to our Newsletter</h2>
             </div>
         </div>
     </div>
+
+    <div id="template-products" style="display: none;">
+        <div class="col-lg-6 mb-5 ftco-animate">
+            <a href="{thumb}" class="image-popup"><img src="{thumb}" class="img-fluid" alt="Product photo"></a>
+        </div>
+        <div class="col-lg-6 product-details pl-md-5 ftco-animate">
+            <h3>{name}</h3>
+            <div class="rating d-flex">
+                <p class="text-left mr-4">
+                    <a href="#" class="mr-2">5.0</a>
+                    <a href="#"><span class="ion-ios-star-outline"></span></a>
+                    <a href="#"><span class="ion-ios-star-outline"></span></a>
+                    <a href="#"><span class="ion-ios-star-outline"></span></a>
+                    <a href="#"><span class="ion-ios-star-outline"></span></a>
+                    <a href="#"><span class="ion-ios-star-outline"></span></a>
+                </p>
+                <p class="text-left mr-4">
+                    <a href="#" class="mr-2" style="color: #000;">100 <span style="color: #bbb;">Rating</span></a>
+                </p>
+                <p class="text-left">
+                    <a href="#" class="mr-2" style="color: #000;">500 <span style="color: #bbb;">Sold</span></a>
+                </p>
+            </div>
+            <p class="price"><span>{price}</span></p>
+            <p>{description}</p>
+            <p>{country}</p>
+            <p>{weight}</p>
+            <p>{volume}</p>
+            <div class="row mt-4">
+                <div class="col-md-6">
+                    <div class="form-group d-flex">
+                        <div class="select-wrap">
+                            <div class="icon"><span class="ion-ios-arrow-down"></span></div>
+                            <select name="" id="" class="form-control">
+                                <option value="">Small</option>
+                                <option value="">Medium</option>
+                                <option value="">Large</option>
+                                <option value="">Extra Large</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-100"></div>
+                <div class="input-group col-md-6 d-flex mb-3">
+                    <span class="input-group-btn mr-2">
+                        <button type="button" class="quantity-left-minus btn" data-type="minus" data-field="">
+                            <i class="ion-ios-remove"></i>
+                        </button>
+                    </span>
+                    <input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1"
+                        max="100">
+                    <span class="input-group-btn ml-2">
+                        <button type="button" class="quantity-right-plus btn" data-type="plus" data-field="">
+                            <i class="ion-ios-add"></i>
+                        </button>
+                    </span>
+                </div>
+                <div class="w-100"></div>
+                <div class="col-md-12">
+                    <p style="color: #000;">600 kg available</p>
+                </div>
+            </div>
+            <p><a href="/cart.html" class="btn btn-black py-3 px-5">Add to Cart</a></p>
+        </div>
+    </div>
+
+    <script type="module">
+        import Dom from "https://webart.work/api/wjst/dom";
+
+        const fetchProduct = async () => {
+            try {
+                const response = await fetch('https://webart.work/api/commerce/product', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        commerce: '674d9cbe7f4e98c4f2482a20',
+                        product: window.location.hash.substring(1)
+                    })
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                const product = await response.json();
+                return product;
+            } catch (error) {
+                console.error('Error fetching products:', error);
+                return [];
+            }
+        };
+
+        const renderProduct = (product) => {
+            if (!product) {
+                console.warn('No product found.');
+                return;
+            }
+
+            Dom.add('products', Dom.template('products', {
+                name: product.name || 'No name',
+                description: product.description || '',
+                price: product.price || 0,
+                country: product.country || '',
+                volume: product.volume || '',
+                weight: product.weight || '',
+                priceType: product.priceType || '',
+                thumb: product.thumb || '',
+                thumbs: product.thumbs || '',
+                id: product._id || 'No ID',
+            }));
+        };
+
+
+        fetchProduct().then((product) => {
+            console.log('Fetched product:', product);
+            renderProduct(product);
+        });
+    </script>
 </section>
\ No newline at end of file
diff --git a/pages/shop/shop.html b/pages/shop/shop.html
index ad00583..c28ab9c 100644
--- a/pages/shop/shop.html
+++ b/pages/shop/shop.html
@@ -180,13 +180,13 @@ <h2>Фільтр за ціною</h2>
         <div id="template-products" style="display: none;">
             <div class="col-md-6 col-lg-3 ftco-animate mb-5">
                 <div class="product">
-                    <a href="#product-single#{id}" class="img-prod"><img class="img-fluid" src="{thumb}"
+                    <a href="/product-single#{id}" class="img-prod"><img class="img-fluid" src="{thumb}"
                             alt="Product photo">
                         <span class="status">30%</span>
                         <div class="overlay"></div>
                     </a>
                     <div class="text py-3 pb-4 px-3 text-center">
-                        <h3><a href="#product-single#{id}">{name}</a></h3>
+                        <h3><a href="/product-single#{id}">{name}</a></h3>
                         <div class="d-flex">
                             <div class="pricing">
                                 <p class="price">{price} грн.
diff --git a/product-single.html b/product-single.html
index 96c7b06..58b0fa5 100644
--- a/product-single.html
+++ b/product-single.html
@@ -294,70 +294,8 @@ <h1 class="mb-0 bread">Product Single</h1>
 
 <section class="ftco-section">
     <div class="container">
-        <div class="row">
-            <div class="col-lg-6 mb-5 ftco-animate">
-                <a href="" class="image-popup"><img src="" class="img-fluid"
-                        alt="Product photo"></a>
-            </div>
-            <div class="col-lg-6 product-details pl-md-5 ftco-animate">
-                <h3></h3>
-                <div class="rating d-flex">
-                    <p class="text-left mr-4">
-                        <a href="#" class="mr-2">5.0</a>
-                        <a href="#"><span class="ion-ios-star-outline"></span></a>
-                        <a href="#"><span class="ion-ios-star-outline"></span></a>
-                        <a href="#"><span class="ion-ios-star-outline"></span></a>
-                        <a href="#"><span class="ion-ios-star-outline"></span></a>
-                        <a href="#"><span class="ion-ios-star-outline"></span></a>
-                    </p>
-                    <p class="text-left mr-4">
-                        <a href="#" class="mr-2" style="color: #000;">100 <span style="color: #bbb;">Rating</span></a>
-                    </p>
-                    <p class="text-left">
-                        <a href="#" class="mr-2" style="color: #000;">500 <span style="color: #bbb;">Sold</span></a>
-                    </p>
-                </div>
-                <p class="price"><span></span></p>
-                <p></p>
-                <p></p>
-                <p></p>
-                <p></p>
-                <div class="row mt-4">
-                    <div class="col-md-6">
-                        <div class="form-group d-flex">
-                            <div class="select-wrap">
-                                <div class="icon"><span class="ion-ios-arrow-down"></span></div>
-                                <select name="" id="" class="form-control">
-                                    <option value="">Small</option>
-                                    <option value="">Medium</option>
-                                    <option value="">Large</option>
-                                    <option value="">Extra Large</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="w-100"></div>
-                    <div class="input-group col-md-6 d-flex mb-3">
-                        <span class="input-group-btn mr-2">
-                            <button type="button" class="quantity-left-minus btn" data-type="minus" data-field="">
-                                <i class="ion-ios-remove"></i>
-                            </button>
-                        </span>
-                        <input type="text" id="quantity" name="quantity" class="form-control input-number" value="1"
-                            min="1" max="100">
-                        <span class="input-group-btn ml-2">
-                            <button type="button" class="quantity-right-plus btn" data-type="plus" data-field="">
-                                <i class="ion-ios-add"></i>
-                            </button>
-                        </span>
-                    </div>
-                    <div class="w-100"></div>
-                    <div class="col-md-12">
-                        <p style="color: #000;">600 kg available</p>
-                    </div>
-                </div>
-                <p><a href="/cart.html" class="btn btn-black py-3 px-5">Add to Cart</a></p>
-            </div>
+        <div class="row" id="products">
+
         </div>
     </div>
 </section>
@@ -517,6 +455,124 @@ <h2 style="font-size: 22px;" class="mb-0">Subcribe to our Newsletter</h2>
             </div>
         </div>
     </div>
+
+    <div id="template-products" style="display: none;">
+        <div class="col-lg-6 mb-5 ftco-animate">
+            <a href="{thumb}" class="image-popup"><img src="{thumb}" class="img-fluid" alt="Product photo"></a>
+        </div>
+        <div class="col-lg-6 product-details pl-md-5 ftco-animate">
+            <h3>{name}</h3>
+            <div class="rating d-flex">
+                <p class="text-left mr-4">
+                    <a href="#" class="mr-2">5.0</a>
+                    <a href="#"><span class="ion-ios-star-outline"></span></a>
+                    <a href="#"><span class="ion-ios-star-outline"></span></a>
+                    <a href="#"><span class="ion-ios-star-outline"></span></a>
+                    <a href="#"><span class="ion-ios-star-outline"></span></a>
+                    <a href="#"><span class="ion-ios-star-outline"></span></a>
+                </p>
+                <p class="text-left mr-4">
+                    <a href="#" class="mr-2" style="color: #000;">100 <span style="color: #bbb;">Rating</span></a>
+                </p>
+                <p class="text-left">
+                    <a href="#" class="mr-2" style="color: #000;">500 <span style="color: #bbb;">Sold</span></a>
+                </p>
+            </div>
+            <p class="price"><span>{price}</span></p>
+            <p>{description}</p>
+            <p>{country}</p>
+            <p>{weight}</p>
+            <p>{volume}</p>
+            <div class="row mt-4">
+                <div class="col-md-6">
+                    <div class="form-group d-flex">
+                        <div class="select-wrap">
+                            <div class="icon"><span class="ion-ios-arrow-down"></span></div>
+                            <select name="" id="" class="form-control">
+                                <option value="">Small</option>
+                                <option value="">Medium</option>
+                                <option value="">Large</option>
+                                <option value="">Extra Large</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-100"></div>
+                <div class="input-group col-md-6 d-flex mb-3">
+                    <span class="input-group-btn mr-2">
+                        <button type="button" class="quantity-left-minus btn" data-type="minus" data-field="">
+                            <i class="ion-ios-remove"></i>
+                        </button>
+                    </span>
+                    <input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1"
+                        max="100">
+                    <span class="input-group-btn ml-2">
+                        <button type="button" class="quantity-right-plus btn" data-type="plus" data-field="">
+                            <i class="ion-ios-add"></i>
+                        </button>
+                    </span>
+                </div>
+                <div class="w-100"></div>
+                <div class="col-md-12">
+                    <p style="color: #000;">600 kg available</p>
+                </div>
+            </div>
+            <p><a href="/cart.html" class="btn btn-black py-3 px-5">Add to Cart</a></p>
+        </div>
+    </div>
+
+    <script type="module">
+        import Dom from "https://webart.work/api/wjst/dom";
+
+        const fetchProduct = async () => {
+            try {
+                const response = await fetch('https://webart.work/api/commerce/product', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        commerce: '674d9cbe7f4e98c4f2482a20',
+                        product: window.location.hash.substring(1)
+                    })
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                const product = await response.json();
+                return product;
+            } catch (error) {
+                console.error('Error fetching products:', error);
+                return [];
+            }
+        };
+
+        const renderProduct = (product) => {
+            if (!product) {
+                console.warn('No product found.');
+                return;
+            }
+
+            Dom.add('products', Dom.template('products', {
+                name: product.name || 'No name',
+                description: product.description || '',
+                price: product.price || 0,
+                country: product.country || '',
+                volume: product.volume || '',
+                weight: product.weight || '',
+                priceType: product.priceType || '',
+                thumb: product.thumb || '',
+                thumbs: product.thumbs || '',
+                id: product._id || 'No ID',
+            }));
+        };
+
+
+        fetchProduct().then((product) => {
+            console.log('Fetched product:', product);
+            renderProduct(product);
+        });
+    </script>
 </section>
 	<footer class="ftco-footer ftco-section">
 		<div class="container">
diff --git a/shop.html b/shop.html
index c0a4704..a2455dd 100644
--- a/shop.html
+++ b/shop.html
@@ -462,13 +462,13 @@ <h2>Фільтр за ціною</h2>
         <div id="template-products" style="display: none;">
             <div class="col-md-6 col-lg-3 ftco-animate mb-5">
                 <div class="product">
-                    <a href="#product-single#{id}" class="img-prod"><img class="img-fluid" src="{thumb}"
+                    <a href="/product-single#{id}" class="img-prod"><img class="img-fluid" src="{thumb}"
                             alt="Product photo">
                         <span class="status">30%</span>
                         <div class="overlay"></div>
                     </a>
                     <div class="text py-3 pb-4 px-3 text-center">
-                        <h3><a href="#product-single#{id}">{name}</a></h3>
+                        <h3><a href="/product-single#{id}">{name}</a></h3>
                         <div class="d-flex">
                             <div class="pricing">
                                 <p class="price">{price} грн.