added product detail

This commit is contained in:
JSriwongsa 2023-07-03 14:01:32 -05:00
parent 74d72e26d0
commit cb9afe18e1
3 changed files with 575 additions and 8 deletions

View file

@ -500,7 +500,7 @@ form.search :where(i:last-child){
overflow: hidden;
text-overflow: ellipsis;
}
/*----- product -----*/
/*---------- product ----------*/
.product .wrapper{
--grid-col:331px
}
@ -523,6 +523,350 @@ form.search :where(i:last-child){
position: relative;
height: 40px;
}
/*---------- product summary----------*/
.summary .entry .title{
font-size: 36px;
}
.summary .grey-color{
color: grey;
}
.summary .entry{
display: flex;
flex-direction: column;
gap: 30px;
}
.summary .product-group{
display: flex;
justify-content: space-between;
}
.summary .product-price{
display: flex;
align-items: center;
}
.summary .product-price .current{
font-size: 22px;
}
.summary .product-price .wrap{
position: relative;
display: flex;
flex-direction: column;
padding-left: 30px;
}
.summary .product-price .wrap::before{
content: '';
position: absolute;
top: 0;
left: 12px;
height: 100%;
width: 1px;
background-color: var(--based-color);
}
.summary .product-price .discount{
display: inline-block;
font-size: 14px;
width: 70px;
padding: 5px;
background-color: var(--main-color);
color: var(--white-color);
border-radius: 5px;
text-align: center;
line-height: 1;
margin-left: -10px;
}
.summary .product-rating{
line-height: initial;
text-align: right;
}
.summary .product-rating span i{
color: var(--based-color);
}
.summary .product-rating a{
font-size: 14px;
color: grey;
padding-left: 10px;
text-decoration-line: underline;
white-space: nowrap;
transition: var(--transition-color);
}
.summary .product-rating a:hover{
color: var(--dark-color);
}
.summary .wrap:has(button){
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.summary button{
border-color: transparent;
justify-content: center;
align-items: center;
flex-shrink: 0;
cursor: pointer;
}
.summary .wrap > button, .summary .qty button{
width: 30px;
height: 30px;
}
.summary .product-color button{
border-radius: 50%;
}
.summary .product-color button.color1{
background-color: #00563B;
}
.summary .product-color button.color2{
background-color: #13274F;
}
.summary .product-color button.selected, .summary .product-color button:hover:not(.selected){
box-shadow: inset 0 0 0 1px var(--white-color);
}
.summary .product-size button{
font-size: 14px;
line-height: 30px;
border: 1px solid var(--based-color);
background-color: transparent;
border-color: var(--based-color);
}
.summary .product-size button.selected{
background-color: var(--based-color);
}
.summary .product-size button:hover:not(.selected, [disabled]){
border-color: #7e4a35;
}
.summary .product-size button:disabled{
pointer-events: none;
}
.summary .product-stock .wrap{
display: flex;
gap: 5px;
}
.summary .product-stock .wrap i{
color: var(--main-color);
}
.summary .qty{
display: flex;
font-size: 14px;
min-width: 100px;
margin: 0 20px 0 20px;
}
.summary .qty input{
text-align: center;
border: 1px;
outline: 0;
background-color: var(--based-color);
}
.summary .qty button{
font-size: 20px;
height: 100%;
background-color: var(--based-color);
}
.summary .qty button:hover{
color: var(--white-color);
}
.summary .product-action{
display: grid;
grid-template-columns: 1fr 2fr;
}
.summary .product-action .buynow{
margin: 20px;
grid-column-start: 1;
grid-column-end: 3;
}
.summary .product-action :where(.addcart, .buynow) button{
padding: 0;
width: 100%;
border-color: var(--main-color);
}
.summary .product-action .addcart button{
background-color: var(--white-color);
}
.summary .product-action .addcart:hover button{
color: var(--main-color);
}
.summary .product-action .addcart.button .primary-btn{
border-radius: 0;
}
.summary .product-action .buynow.button .secondary-btn{
border-radius: 0;
}
.summary .product-control ul{
align-items: flex-start;
flex-flow: wrap;
gap: 25px;
}.summary .product-control a{
display: flex;
gap: 5px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
padding: 0;
}
.summary .product-control span{
font-size: 14px;
}
.summary .product-control ul li:first-child a:hover i{
color: orangered;
}
.product .summary .shipping{
padding-top: 20px;
border-top: 1px solid var(--main-color);
}
.product .summary .shipping li{
position: relative;
padding-left: 25px;
margin-top: 10px;
line-height: 2;
}
.product .summary .shipping li i{
position: absolute;
top: 0;
left: 0;
font-size: 20px;
line-height: 1.5;
}
/*---------- product description ----------*/
.product.detail{
padding-top: 30px;
margin: 70px 0;
}
.product nav{
position: relative;
}
.product nav::before{
content: '';
position: absolute;
left: 0;
top: 56px;
height: 2px;
width: 100%;
background-color: var(--main-color);
}
#product-description .grey-color{
color: grey;
}
.product nav ul li a{
position: relative;
display: block;
font-size: 16px;
padding: 20px 0;
margin-right: 30px;
white-space: nowrap;
color: grey;
}
.product nav ul li a::before{
content: '';
position: absolute;
height: 2px;
width: 0;
left: 0;
bottom: -2px;
background-color: var(--dark-color);
transition: width 0.3s;
}
.product nav ul :is(li.active a, li a:hover){
color: var(--dark-color);
}
.product nav ul li.active a::before{
width: 100%;
}
.product .product-about{
padding: 50px 0;
max-width: 980px;
margin: 0 auto;
display: none;
animation: var(--fade);
}
.product .product-about.active{
display: block;
}
.product .product-about .text-block{
padding-bottom: 30px;
}
.product .product-about :where(h3, h4){
margin-bottom: 15px;
}
.product .product-about h3{
font-size: 20px;
}
.product .product-about ul{
margin-left: 20px;
list-style-type: disc;
}
.product.detail .dotgrid .wrapper{
--grid-col: 250px;
--gutter: 30px;
}
.product .product-about.custom h3{
font-size: 20px;
font-weight: 600;
color: var(--main-color);
}
/*---------- product review ----------*/
.product .review .button .primary-btn{
border-radius: 0;
}
.product .review .body-review .grey-color{
color: grey;
}
.product .review{
max-width: 770px;
}
.product .review .head-review{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
border-bottom: 1px solid var(--main-color);
}
.product .review .head-review strong{
font-size: 40px;
}
.product .review .head-review span{
position: relative;
padding-left: 20px;
}
.product .head-review span::before{
content: '';
position: absolute;
top: -20px;
left: 12px;
height: 50px;
width: 1px;
background-color: var(--based-color);
}
.product .head-review .primary-btn{
border-width: 1px;
text-transform: unset;
}
.product .profile .thumb-name{
display: flex;
align-items: center;
margin-bottom: 20px;
}
.product .profile .image{
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 20px;
overflow: hidden;
}
.product .profile .grouping{
line-height: initial;
}
.product .profile .name{
font-weight: 600;
margin-bottom: 5px;
}
.product .profile .date{
font-size: 12px;
margin-top: 10px;
}
.review .profile{
padding-bottom: 40px;
}
.product-about.shipping .grey-color{
color: grey;
}
@ -557,12 +901,21 @@ form.search :where(i:last-child){
.custom-pagination{
display: none;
}
.product .profile .comment{
padding-left: 80px;
}
}
@media(min-width: 768px){
.product.dotgrid .image{
max-width: 100%;
margin: 0;
position: sticky;
top: 30px;
}
.product nav ul{
justify-content: center;
}
}
@media(min-width: 992px){
.menu-trigger{
display: none;
@ -619,5 +972,18 @@ form.search :where(i:last-child){
.mega-content{
grid-template-columns: 1fr 1fr ;
}
.product .outer-main{
width: 100%;
margin: 0;
}
.product .image .outer-thumb{
position: absolute;
top: 0;
left: -100px;
height: 100%;
}
.product.dotgrid .image{
overflow: unset;
}
}

View file

@ -245,10 +245,196 @@
</div>
</div>
</div>
<div class="summary"></div>
<div class="summary">
<div class="entry">
<h1 class="title">Castleton Green Halterneck Top</h1>
<div class="product-group">
<div class="product-price">
<span class="current">$223.00</span>
<div class="wrap">
<span class="before">$279.00</span>
<span class="discount">20% OFF</span>
</div>
</div>
<div class="product-rating">
<span>
<span>4.5</span>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star-half' ></i>
</span>
<a href="">2 Reviews</a>
</div>
</div>
<div class="product-color">
<span>Colors:</span>
<div class="wrap">
<button class="color1 selected"></button>
<button class="color2"></button>
</div>
</div>
<div class="product-size">
<span>Size:</span>
<div class="wrap">
<button disabled>XS</button>
<button class="selected">S</button>
<button>M</button>
<button>L</button>
<button>XL</button>
</div>
</div>
<div class="product-stock">
<div class="wrap">
<span class="grey-color">in stock</span>
<i class='bx bxs-check-circle' ></i>
</div>
</div>
<div class="product-action">
<div class="qty">
<button class="decrease">-</button>
<input type="text" value="1">
<button class="increase">+</button>
</div>
<div class="addcart button">
<button type="submit" class="primary-btn">Add to Cart</button>
</div>
<div class="buynow button">
<button type="submit" class="secondary-btn">Buy Now</button>
</div>
</div>
<div class="product-control list-inline">
<ul>
<li><a href=""><i class='bx bx-heart' ></i><span>Add to List</span></a></li>
<li><a href=""><i class='bx bx-share' ></i><span>Share</span></a></li>
<li><a href=""><i class='bx bx-help-circle' ></i><span>Help</span></a></li>
</ul>
</div>
<div class="shipping">
<ul>
<li><i class='bx bx-package' ></i>
<span>Free shipping & return</span>
<span class="grey-color">On orders over $159</span>
</li>
<li>
<i class='bx bxs-truck' ></i>
<span>Estimate delivery:</span>
<span class="grey-color">11 -15 Feb, 2024</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="product detail"></div>
<div class="product detail">
<div class="wrapper tabbed">
<nav class="list-inline scrollto">
<ul class="wrapper">
<li class="active"><a href="#0" class="tabbed-trigger" data-id="product-description"><span>Product Details</span></a></li>
<li><a href="#0" class="tabbed-trigger" data-id="product-custom"><span>Size Chart</span></a></li>
<li><a href="#0" class="tabbed-trigger" data-id="product-review"><span>Reviews</span></a></li>
<li><a href="#0" class="tabbed-trigger" data-id="product-shipping"><span>Shipping</span></a></li>
</ul>
</nav>
<div id="product-description" class="product-about description active">
<div class="text-block">
<h3>Castleton Green Halterneck Top</h3>
<div class="grey-color">
<p>This Castleton Green halterneck top is double lined to prevent see-through,and holds your breast in place so well you don't even need a bra!</p>
<p>Sexy going out tops,easy to dress up and dress down! perfect for any occasion. Cocktail party, clubs, dates, night out,brunch,beach,holiday and so on. </p>
</div>
</div>
<div class="dotgrid">
<div class="wrapper">
<div class="list-block">
<h4>Materials & Care</h4>
<ul class="grey-color">
<li>Rayon 100%</li>
<li>Iron when damp</li>
<li>Machine wash cold</li>
<li>Can be dry cleaned</li>
</ul>
</div>
</div>
</div>
</div>
<div id="product-custom" class="product-about custom">
<h3>Size Chart</h3>
<div class="image">
<img src="images/size-guid.jpg" alt="">
</div>
</div>
<div id="product-review" class="product-about review">
<div class="wrapper">
<h3>Reviews</h3>
<div class="head-review">
<div class="sum-rating">
<strong>4.5</strong>
<span>2 reviews</span>
</div>
<div class="button">
<a href="" class="primary-btn">Write a Review</a>
</div>
</div>
<div class="body-review">
<div class="profile">
<div class="thumb-name">
<div class="image">
<img src="images/review.jpg" alt="">
</div>
<div class="grouping">
<div class="name">Jane Doe</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<div class="date grey-color">On July 3, 2023</div>
</div>
</div>
<div class="comment">
<strong>Great purchase</strong>
<p class="grey-color">This was amazing. The first thing I notice is the material. So soft and comfortable.</p>
</div>
</div>
<div class="profile">
<div class="thumb-name">
<div class="image">
<img src="images/review-anonymous.png" alt="">
</div>
<div class="grouping">
<div class="name">Anonymous</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bx-star'></i>
</div>
<div class="date grey-color">On July 3, 2023</div>
</div>
</div>
<div class="comment">
<strong>Good product</strong>
<p class="grey-color">This was amazing.</p>
</div>
</div>
</div>
</div>
</div>
<div id="product-shipping" class="product-about shipping">
<div class="grey-color">
<p>Business days are Monday-Friday; Holidays, Saturday, and Sunday are not included inshipping days. Shipping timelines are estimates and are not guranteed.</p>
<p>For a more specific delivery ETA based on the exact item(s) you want to purchase, please call us at +1 (123) 456-7890 or +1 (321) 654-0987.</p>
<p>Shipping cost is calculated on a "per order", "per item", or "per pound" basis and is based on the shipping option you select.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View file

@ -50,3 +50,18 @@ const mainImage = new Swiper('.main-image', {
swiper: thumbImage,
},
});
const trigger = document.querySelectorAll('.tabbed-trigger'),
content = document.querySelectorAll('.tabbed > div');
trigger.forEach((btn) => {
btn.addEventListener('click', function(){
let dataTarget = this.dataset.id,
body = document.querySelector(`#${dataTarget}`);
trigger.forEach((b) => b.parentNode.classList.remove('active'));
content.forEach((s) => s.classList.remove('active'));
this.parentNode.classList.add('active');
body.classList.add('active');
});
});