Skip to content

Commit

Permalink
update product code
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikiquickie
nikiquickie committed Dec 18, 2024
1 parent e9fffe8 commit 77e02d1
Show file tree
Hide file tree
Showing 2 changed files with 238 additions and 239 deletions.
239 changes: 119 additions & 120 deletions pages/product-single/product-single.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,130 @@ <h1 class="mb-0 bread">Product Single</h1>

<section class="ftco-section">
<div class="container">
<div class="row" id="products">
<div class="row" id="product">

</div>
</div>
</section>

<div id="template-product" 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('product', Dom.template('product', {
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>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center mb-3 pb-3">
Expand Down Expand Up @@ -173,122 +291,3 @@ <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>
Loading

0 comments on commit 77e02d1

Please sign in to comment.