Phần 3. Rip trang product - Template Mỹ phẩm đẹp theo chuẩn MVC .NET
- Rip theme .NET Cshap
-
admin
- 1 năm trước, Thứ sáu, 07 Tháng 1, 2022
- 1103
- 32
Phần quan trong kế tiếp là trang sản phẩm. hiện các sản phẩm theo danh mục
Phần này chia làm 3
1. Danh mục sản phẩm
<section class="section" id="section_764558416">
<div class="bg section-bg fill bg-fill bg-loaded bg-loaded">
</div>
<div class="section-content relative">
<div class="row productCat large-columns-5 medium-columns-3 small-columns-2 row-small slider row-slider slider-nav-simple slider-nav-push flickity-enabled" data-flickity-options="{"imagesLoaded": true, "groupCells": "100%", "dragThreshold" : 5, "cellAlign": "left","wrapAround": true,"prevNextButtons": true,"percentPosition": true,"pageDots": false, "rightToLeft": false, "autoPlay" : false}" tabindex="0">
<div class="flickity-viewport" style="height: 293.183px; touch-action: pan-y;"><div class="flickity-slider" style="left: 0px; transform: translateX(-100%);"><div class="product-category col is-selected" style="position: absolute; left: 100%;">
<div class="col-inner">
<a href="https://web206.123web.vn/danh-muc-san-pham/cham-soc-body/"> <div class="box box-category has-hover box-normal ">
<div class="box-image">
<div class="">
<img src="https://web206.123web.vn/wp-content/uploads/2020/08/64564645645645.png" alt="Chăm sóc body" width="300" height="300"> </div>
</div>
<div class="box-text text-center">
<div class="box-text-inner">
<h5 class="uppercase header-title">
Chăm sóc body </h5>
</div>
</div>
</div>
</a> </div>
</div><div class="product-category col is-selected" style="position: absolute; left: 120%;">
<div class="col-inner">
<a href="https://web206.123web.vn/danh-muc-san-pham/cham-soc-da-mat/"> <div class="box box-category has-hover box-normal ">
<div class="box-image">
<div class="">
<img src="https://web206.123web.vn/wp-content/uploads/2020/08/645654645645645654.png" alt="Chăm sóc da mặt" width="300" height="300"> </div>
</div>
<div class="box-text text-center">
<div class="box-text-inner">
<h5 class="uppercase header-title">
Chăm sóc da mặt </h5>
</div>
</div>
</div>
</a> </div>
</div><div class="product-category col is-selected" style="position: absolute; left: 140%;">
<div class="col-inner">
<a href="https://web206.123web.vn/danh-muc-san-pham/danh-cho-da-mun/"> <div class="box box-category has-hover box-normal ">
<div class="box-image">
<div class="">
<img src="https://web206.123web.vn/wp-content/uploads/2020/08/34534534534534534.png" alt="Dành cho da mụn" width="300" height="300"> </div>
</div>
<div class="box-text text-center">
<div class="box-text-inner">
<h5 class="uppercase header-title">
Dành cho da mụn </h5>
</div>
</div>
</div>
</a> </div>
</div><div class="product-category col is-selected" style="position: absolute; left: 160%;">
<div class="col-inner">
<a href="https://web206.123web.vn/danh-muc-san-pham/danh-cho-da-nam/"> <div class="box box-category has-hover box-normal ">
<div class="box-image">
<div class="">
<img src="https://web206.123web.vn/wp-content/uploads/2020/08/53454534543534534.png" alt="Dành cho da nám" width="300" height="300"> </div>
</div>
<div class="box-text text-center">
<div class="box-text-inner">
<h5 class="uppercase header-title">
Dành cho da nám </h5>
</div>
</div>
</div>
</a> </div>
</div><div class="product-category col is-selected" style="position: absolute; left: 180%;">
<div class="col-inner">
<a href="https://web206.123web.vn/danh-muc-san-pham/trang-diem/"> <div class="box box-category has-hover box-normal ">
<div class="box-image">
<div class="">
<img src="https://web206.123web.vn/wp-content/uploads/2020/08/3445534534534534534.png" alt="Trang điểm" width="300" height="300"> </div>
</div>
<div class="box-text text-center">
<div class="box-text-inner">
<h5 class="uppercase header-title">
Trang điểm </h5>
</div>
</div>
</div>
</a> </div>
</div></div></div><button class="flickity-button flickity-prev-next-button previous" type="button" disabled="" aria-label="Previous"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow"></path></svg></button><button class="flickity-button flickity-prev-next-button next" type="button" disabled="" aria-label="Next"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button></div>
<div class="container section-title-container ct-title-center"><h2 class="section-title section-title-center"><b></b><span class="section-title-main" style="font-size:150%;">Bạn muốn tìm sản phẩm?</span><b></b></h2></div>
<div class="row align-center" id="row-1512076644">
<div id="col-1207557689" class="col medium-4 small-12 large-4">
<div class="col-inner">
<div class="searchform-wrapper ux-search-box relative ct-search form-flat is-large"><form role="search" method="get" class="searchform" action="https://web206.123web.vn/">
<div class="flex-row relative">
<div class="flex-col flex-grow">
<label class="screen-reader-text" for="woocommerce-product-search-field-2">Tìm kiếm:</label>
<input type="search" id="woocommerce-product-search-field-2" class="search-field mb-0" placeholder="Tìm kiếm…" value="" name="s" autocomplete="off">
<input type="hidden" name="post_type" value="product">
</div>
<div class="flex-col">
<button type="submit" value="Tìm kiếm" class="ux-search-submit submit-button secondary button icon mb-0" aria-label="Submit">
<i class="icon-search"></i> </button>
</div>
</div>
<div class="live-search-results text-left z-top"><div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;"></div></div>
</form>
</div>
</div>
</div>
</div>
</div>
<style>
#section_764558416 {
padding-top: 30px;
padding-bottom: 30px;
}
</style>
</section>2. Sản phẩm khuyến mãi
<section class="section ss-news-home" id="section_1163122209">
<div class="bg section-bg fill bg-fill bg-loaded bg-loaded">
</div>
<div class="section-content relative">
<div class="row" id="row-424926888">
<div id="col-952436203" class="col small-12 large-12">
<div class="col-inner">
<div class="container section-title-container ct-title-left"><h2 class="section-title section-title-normal"><b></b><span class="section-title-main">Sản phẩm <span>Ưu đãi<span></span><b></b></span></span></h2></div>
<div class="row productBorder large-columns-4 medium-columns-3 small-columns-2 row-small slider row-slider slider-nav-simple slider-nav-outside slider-nav-push is-draggable flickity-enabled" data-flickity-options="{"imagesLoaded": true, "groupCells": "100%", "dragThreshold" : 5, "cellAlign": "left","wrapAround": true,"prevNextButtons": true,"percentPosition": true,"pageDots": false, "rightToLeft": false, "autoPlay" : 6000}" tabindex="0">
<div class="flickity-viewport" style="height: 370.117px; touch-action: pan-y;"><div class="flickity-slider" style="left: 0px; transform: translate3d(-100%, 0px, 0px);"><div class="col" style="position: absolute; left: 175%;" aria-hidden="true">
<div class="col-inner">
<div class="badge-container absolute left top z-1">
</div>
<div class="product-small box productBorder has-hover box-normal box-text-bottom">
<div class="box-image">
<div class="">
<a href="https://web206.123web.vn/san-pham/son-thoi/">
<img src="https://web206.123web.vn/wp-content/uploads/2020/08/87897097897878789.png" class="attachment-original size-original" alt="" srcset="https://web206.123web.vn/wp-content/uploads/2020/08/87897097897878789.png 301w, https://web206.123web.vn/wp-content/uploads/2020/08/87897097897878789-150x150.png 150w, https://web206.123web.vn/wp-content/uploads/2020/08/87897097897878789-20x20.png 20w, https://web206.123web.vn/wp-content/uploads/2020/08/87897097897878789-100x100.png 100w" sizes="(max-width: 301px) 100vw, 301px" width="301" height="301"> </a>
</div>
<div class="image-tools top right show-on-hover">
</div>
<div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
</div>
</div>
<div class="box-text text-center">
<div class="title-wrapper"><p class="name product-title woocommerce-loop-product__title"><a href="https://web206.123web.vn/san-pham/son-thoi/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">Son thỏi</a></p></div><div class="price-wrapper">
<span class="price"><span class="woocommerce-Price-amount amount"><bdi>235,000<span class="woocommerce-Price-currencySymbol">₫</span></bdi></span></span>
</div> </div>
</div>
</div>
</div><div class="col" style="position: absolute; left: 200%;" aria-hidden="true">
<div class="col-inner">
<div class="badge-container absolute left top z-1">
</div>
<div class="product-small box productBorder has-hover box-normal box-text-bottom">
<div class="box-image">
<div class="">
<a href="https://web206.123web.vn/san-pham/sua-rua-mat/">
<img src="https://web206.123web.vn/wp-content/uploads/2020/08/37678678678678678.png" class="attachment-original size-original" alt="" srcset="https://web206.123web.vn/wp-content/uploads/2020/08/37678678678678678.png 900w, https://web206.123web.vn/wp-content/uploads/2020/08/37678678678678678-300x300.png 300w, https://web206.123web.vn/wp-content/uploads/2020/08/37678678678678678-150x150.png 150w, https://web206.123web.vn/wp-content/uploads/2020/08/37678678678678678-768x768.png 768w, https://web206.123web.vn/wp-content/uploads/2020/08/37678678678678678-20x20.png 20w, https://web206.123web.vn/wp-content/uploads/2020/08/37678678678678678-600x600.png 600w, https://web206.123web.vn/wp-content/uploads/2020/08/37678678678678678-100x100.png 100w" sizes="(max-width: 900px) 100vw, 900px" width="900" height="900"> </a>
</div>
<div class="image-tools top right show-on-hover">
</div>
<div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
</div>
</div>
<div class="box-text text-center">
<div class="title-wrapper"><p class="name product-title woocommerce-loop-product__title"><a href="https://web206.123web.vn/san-pham/sua-rua-mat/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">Sữa rửa mặt</a></p></div><div class="price-wrapper">
<span class="price"><span class="woocommerce-Price-amount amount"><bdi>225,000<span class="woocommerce-Price-currencySymbol">₫</span></bdi></span></span>
</div> </div>
</div>
</div>
</div><div class="col" style="position: absolute; left: 50%;" aria-hidden="true">
<div class="col-inner">
<div class="badge-container absolute left top z-1">
</div>
<div class="product-small box productBorder has-hover box-normal box-text-bottom">
<div class="box-image">
<div class="">
<a href="https://web206.123web.vn/san-pham/gel-tay-te-bao-chet/">
<img src="https://web206.123web.vn/wp-content/uploads/2020/08/8789779878789.png" class="attachment-original size-original" alt="" srcset="https://web206.123web.vn/wp-content/uploads/2020/08/8789779878789.png 301w, https://web206.123web.vn/wp-content/uploads/2020/08/8789779878789-150x150.png 150w, https://web206.123web.vn/wp-content/uploads/2020/08/8789779878789-20x20.png 20w, https://web206.123web.vn/wp-content/uploads/2020/08/8789779878789-100x100.png 100w" sizes="(max-width: 301px) 100vw, 301px" width="301" height="300"> </a>
</div>
<div class="image-tools top right show-on-hover">
</div>
<div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
</div>
</div>
<div class="box-text text-center">
<div class="title-wrapper"><p class="name product-title woocommerce-loop-product__title"><a href="https://web206.123web.vn/san-pham/gel-tay-te-bao-chet/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">Gel tẩy tế bào chết</a></p></div><div class="price-wrapper">
<span class="price"><span class="woocommerce-Price-amount amount"><bdi>280,000<span class="woocommerce-Price-currencySymbol">₫</span></bdi></span></span>
</div> </div>
</div>
</div>
</div><div class="col" style="position: absolute; left: 75%;" aria-hidden="true">
<div class="col-inner">
<div class="badge-container absolute left top z-1">
</div>
<div class="product-small box productBorder has-hover box-normal box-text-bottom">
<div class="box-image">
<div class="">
<a href="https://web206.123web.vn/san-pham/u-trang-detox/">
<img src="https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-33432.png" class="attachment-original size-original" alt="" srcset="https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-33432.png 301w, https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-33432-150x150.png 150w, https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-33432-20x20.png 20w, https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-33432-100x100.png 100w" sizes="(max-width: 301px) 100vw, 301px" width="301" height="301"> </a>
</div>
<div class="image-tools top right show-on-hover">
</div>
<div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
</div>
</div>
<div class="box-text text-center">
<div class="title-wrapper"><p class="name product-title woocommerce-loop-product__title"><a href="https://web206.123web.vn/san-pham/u-trang-detox/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">Ủ trắng detox</a></p></div><div class="price-wrapper">
<span class="price"><span class="woocommerce-Price-amount amount"><bdi>310,000<span class="woocommerce-Price-currencySymbol">₫</span></bdi></span></span>
</div> </div>
</div>
</div>
</div><div class="col is-selected" style="position: absolute; left: 100%;">
<div class="col-inner">
<div class="badge-container absolute left top z-1">
</div>
<div class="product-small box productBorder has-hover box-normal box-text-bottom">
<div class="box-image">
<div class="">
<a href="https://web206.123web.vn/san-pham/tam-trang-thuoc-bac/">
<img src="https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-23423432.png" class="attachment-original size-original" alt="" srcset="https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-23423432.png 301w, https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-23423432-150x150.png 150w, https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-23423432-20x20.png 20w, https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-23423432-100x100.png 100w" sizes="(max-width: 301px) 100vw, 301px" width="301" height="301"> </a>
</div>
<div class="image-tools top right show-on-hover">
</div>
<div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
</div>
</div>
<div class="box-text text-center">
<div class="title-wrapper"><p class="name product-title woocommerce-loop-product__title"><a href="https://web206.123web.vn/san-pham/tam-trang-thuoc-bac/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">Tắm trắng thuốc bắc</a></p></div><div class="price-wrapper">
<span class="price"><span class="woocommerce-Price-amount amount"><bdi>310,000<span class="woocommerce-Price-currencySymbol">₫</span></bdi></span></span>
</div> </div>
</div>
</div>
</div><div class="col is-selected" style="position: absolute; left: 125%;">
<div class="col-inner">
<div class="badge-container absolute left top z-1">
</div>
<div class="product-small box productBorder has-hover box-normal box-text-bottom">
<div class="box-image">
<div class="">
<a href="https://web206.123web.vn/san-pham/kem-tay-long/">
<img src="https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-156788.png" class="attachment-original size-original" alt="" srcset="https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-156788.png 301w, https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-156788-150x150.png 150w, https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-156788-20x20.png 20w, https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-156788-100x100.png 100w" sizes="(max-width: 301px) 100vw, 301px" width="301" height="301"> </a>
</div>
<div class="image-tools top right show-on-hover">
</div>
<div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
</div>
</div>
<div class="box-text text-center">
<div class="title-wrapper"><p class="name product-title woocommerce-loop-product__title"><a href="https://web206.123web.vn/san-pham/kem-tay-long/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">Kem tẩy lông</a></p></div><div class="price-wrapper">
<span class="price"><span class="woocommerce-Price-amount amount"><bdi>280,000<span class="woocommerce-Price-currencySymbol">₫</span></bdi></span></span>
</div> </div>
</div>
</div>
</div><div class="col is-selected" style="position: absolute; left: 150%;">
<div class="col-inner">
<div class="badge-container absolute left top z-1">
</div>
<div class="product-small box productBorder has-hover box-normal box-text-bottom">
<div class="box-image">
<div class="">
<a href="https://web206.123web.vn/san-pham/kem-body/">
<img src="https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-4121212121.png" class="attachment-original size-original" alt="" srcset="https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-4121212121.png 301w, https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-4121212121-150x150.png 150w, https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-4121212121-20x20.png 20w, https://web206.123web.vn/wp-content/uploads/2020/08/Kem-body-huyen-phi-4121212121-100x100.png 100w" sizes="(max-width: 301px) 100vw, 301px" width="301" height="299"> </a>
</div>
<div class="image-tools top right show-on-hover">
</div>
<div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
</div>
</div>
<div class="box-text text-center">
<div class="title-wrapper"><p class="name product-title woocommerce-loop-product__title"><a href="https://web206.123web.vn/san-pham/kem-body/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">Kem body</a></p></div><div class="price-wrapper">
<span class="price"><span class="woocommerce-Price-amount amount"><bdi>310,000<span class="woocommerce-Price-currencySymbol">₫</span></bdi></span></span>
</div> </div>
</div>
</div>
</div></div></div><button class="flickity-button flickity-prev-next-button previous" type="button" aria-label="Previous"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow"></path></svg></button><button class="flickity-button flickity-prev-next-button next" type="button" aria-label="Next"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button></div>
</div>
</div>
</div>
</div>
<style>
#section_1163122209 {
padding-top: 30px;
padding-bottom: 30px;
}
</style>
</section>3. Sản phẩm mới
Code nhiều các bạn tự copy nhé
Tất cả section là đc
Hình ảnh trang sản phẩm. Chúng ta chỉ quan tâm phần giữa trang web thôi nhé.
1.File Product.cshtml
code html trang sản phẩmLưu toàn bộ code khung giữa nhé.
Tin liên quan
Theo dõi chúng tôi
0 Nhận xét
Hãy trở thành người đầu tiên viết chia sẽ cảm nghĩ của mình bên dưới nhé!
Thêm Bình luận