Skip to content

Commit

Permalink
update product
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikiquickie
nikiquickie committed Dec 18, 2024
1 parent 5db6375 commit e9fffe8
Show file tree
Hide file tree
Showing 6 changed files with 246 additions and 134 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
2 changes: 1 addition & 1 deletion pages/index/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
184 changes: 120 additions & 64 deletions pages/product-single/product-single.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
4 changes: 2 additions & 2 deletions pages/shop/shop.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} грн.
Expand Down
Loading

0 comments on commit e9fffe8

Please sign in to comment.