P7. Tiến hành rip theme trang sản phẩm mẫu Nail asp.net mvc

P7. Tiến hành rip theme trang sản phẩm mẫu Nail asp.net mvc

Tương tự các phần trước chúng ta chỉ cần tách code html giữ lại nội dung chính và ghép code c# lồng vào nữa là thành công.

Phân tích trang có các phần sau

Bên trái gồm có các mục

Danh mục sản phẩm

Lọc theo giá

TOP SẢN PHẨM

Phần giữa chứa tất cả sản phẩm

<div class="col-6 col-sm-6 col-md-4 col-lg-4 product-col">
			<div class="item_product_main margin-bottom-30">




<form action="/cart/add" method="post" class="variants" data-id="product-actions-21721158" enctype="multipart/form-data">
	<div class="product-thumbnail">
		<a class="product_overlay" href="/keo-mxbon-dinh-da-dan-mong-sieu-ben" title="Keo MxBon đính đá - dán móng siêu bền"></a>
		<a class="image_thumb" href="/keo-mxbon-dinh-da-dan-mong-sieu-ben" title="Keo MxBon đính đá - dán móng siêu bền" style="height: 263px;">
			<img class="lazyload loaded" src="//bizweb.dktcdn.net/thumb/large/100/427/775/products/48.png?v=1622002991000" data-src="//bizweb.dktcdn.net/thumb/large/100/427/775/products/48.png?v=1622002991000" alt="Keo MxBon đính đá - dán móng siêu bền" data-was-processed="true">
		</a>
	</div>
	<div class="product-info">
		<h3 class="product-name"><a href="/keo-mxbon-dinh-da-dan-mong-sieu-ben" title="Keo MxBon đính đá - dán móng siêu bền">Keo MxBon đính đá - dán móng siêu bền</a></h3>
		<div class="price-box">
			
			
			<span class="price">30.000₫</span>
			
			<span class="compare-price">60.000₫</span>
						
			
			
		</div>
	</div>
</form>	
			</div>
		</div>

Cách viết đặt vòng for giữa

<section class="products-view products-view-grid collection_reponsive list_hover_pro">
	<div class="row">
foreach (var item in Model)

{

<form action="/cart/add" method="post" class="variants" data-id="product-actions-21721158" enctype="multipart/form-data">
    <div class="product-thumbnail">
        <a class="product_overlay" href="/product/[email protected]" title=""></a>
        <a class="image_thumb" href="/product/[email protected]"  style="height: 263px;">
            <img class="lazyload loaded" src="@item.images" data-src="@item.images" alt="" data-was-processed="true">
        </a>
    </div>
    <div class="product-info">
        <h3 class="product-name"><a href="/product/[email protected]" title="@item.title">@item.title</a></h3>
        <div class="price-box">
            
            
            <span class="price">@item.price</span>
            
            <span class="compare-price">@item.pricesale</span>
                        
            
            
        </div>
    </div>
</form>    
            </div>
        </div>


}
	
	</div>
</section>

phần đóng như thế là xong. Khá đơn giản đúng ko nào :))))


Tags

admin

Hãy chia sẽ cảm nghĩ của bạn về bài viết trên nhé !

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