Thiết kế theme blogspot bán hàng chưa bao giờ đơn giản nhưng bạn vẫn có thể làm được từ những cái đơn giản đến phức tạp. Khi bạn đã quen lúc đó bạn có thể tùy biến miễn là bạn đã hiểu vấn đề
Bài hôm nay mình đưa ra những gợi ý về bố cục cho bài đăng sản phẩm trong theme blogspot bán hàng hay cụ thể hơn khi bạn truy cập một trang sản phẩm bạn sẽ thấy bố cục về cách sắp xếp thông tin sản phẩm.
 |
| Bố cục cho bài đăng sản phẩm trong theme blogspot bán hàng |
Để tạo được bố cục cho bài đăng sản phẩm, trước hết bạn cần biết thông tin của sản phẩm cần những gì và từ những thông tin đó bạn có được những thẻ dữ liệu liên quan từ sản phẩm. Danh sách về thông tin cơ bản của sản phẩm kèm thẻ dữ liệu của nó bạn nên biết
| THÔNG TIN | THẺ DỮ LIỆU |
| ID | data:post.id |
| URL | data:post.url |
| Tên | data:post.title |
| Ảnh | data:post.featuredImage, data:enclosure.url |
| Số nhận xét | data:post.numberOfComments |
| Liên kết đến bài đăng cũ hơn và mới hơn | data:olderPageUrl,data:newerPageUrl |
| Giá | data:label.name |
| Đoạn trích tóm tắt | data:post.snippets.short |
| Danh mục sản phẩm | data:label.name |
Bài cần nắm: Danh sách tổng hợp các loại thẻ data mặc định trong blogspot
Tiếp theo bạn sẽ chia bố cục thành 2 một bên hiển thị: slider ảnh sản phẩm và một bên hiển thị: tên, giá, số nhận xét, các nút next, prev cho liên kết các bài đăng mới và cụ hơn, giá, nút tăng giảm số lượng, nút đặt hàng và những thông tin cơ bàn bao gồm: Tình trạng hàng hóa còn hay hết, SKU, danh mục sản phẩm và các nút chia sẻ.
Chia thành 2 element trong một element chính có class="product-info" như sau:
<div class="product-info">
<div class="product-image">
</div>
<div class="product-summary">
</div>
</div>
Bên element có class="product-image" hiển thị ảnh sản phẩm kết hợp thẻ dữ liệu ảnh đầu tiên của bài đăng và ảnh trong liên kết đính kèm
<div class="product-image">
<div class='slideNewsDetails'>
<div class='slider-big'>
<div class='slider-item'>
<a data-fancybox='' expr:data-caption='data:post.title' expr:href='data:post.featuredImage'>
<img expr:alt='data:post.title' expr:src='data:post.featuredImage'/>
</a>
</div>
<b:loop values='data:post.enclosures' var='enclosure'>
<b:if cond='data:enclosure.mimeType in {"image/jpg","image/jpeg","image/png","image/webp"}'>
<div class='slider-item'>
<a data-fancybox='' expr:data-caption='data:post.title' expr:href='data:enclosure.url'>
<img expr:alt='data:post.title' expr:src='data:enclosure.url'/>
</a>
</div>
</b:if>
</b:loop>
</div>
<div class='slider-small'>
<div class='slider-item'>
<img expr:alt='data:post.title' expr:src='data:post.featuredImage'/>
</div>
<b:loop values='data:post.enclosures' var='enclosure'>
<b:if cond='data:enclosure.mimeType in {"image/jpg","image/jpeg","image/png","image/webp"}'>
<div class='slider-item'>
<img expr:alt='data:post.title' expr:src='data:enclosure.url'/>
</div>
</b:if>
</b:loop>
</div>
</div>
</div>
Tham khảo thêm:
- Cách chèn Liên kết tiêu đề và Liên kết đính kèm trong mỗi bài đăng
- Tạo hiệu ứng popup lightbox cho ảnh bài viết trong blogspot với fancybox3
Bên element có class="product-summary" thêm dữ liệu như sau:
<div class="product-summary">
<--Tên sản phẩm-->
<div class='product-title'><h1><data:post.title/></h1></div>
<--Hiển thị nút star rating và nút next,prev-->
<div class="flex-align">
<--Hiển thị nút star rating theo điều kiện số nhận xét mặc định là 3-->
<b:if cond='data:post.allowComments'>
<div class="product-rating">
<a expr:href='data:post.url + "#comments"' title='Đánh giá sản phẩm'>
<div class='devsite-rating-stars'>
<span class="star yellow">★</span>
<span class="star yellow">★</span>
<span class="star yellow">★</span>
<span class="star"><b:class cond='data:post.numberOfComments in [3,4,5]' name='yellow'/>★</span>
<span class="star"><b:class cond='data:post.numberOfComments gt 5' name='yellow'/>★</span>
</div>
</a>
</div>
</b:if>
<--Hiển thị nút next,prev-->
<div class='flex-right'>
<ul class='next-prev-thumbs'>
<b:if cond='data:newerPageUrl'>
<li>
<a aria-label='Trang kế' expr:href='data:newerPageUrl' rel='prev' role='button' title='Trang kế'/>
<div class='nav-dropdown'/>
</li>
</b:if>
<b:if cond='data:olderPageUrl'>
<li>
<a aria-label='Trang trước' expr:href='data:olderPageUrl' rel='next' role='button' title='Trang trước'/>
<div class='nav-dropdown'/>
</li>
</b:if>
</ul>
</div>
</div>
<--Giá sản phẩm-->
<div class='product-price'>
<b:loop index='item' values='data:post.labels' var='label'>
<b:if cond='data:item eq 0'>
<span class='price'><ins><b:eval expr='data:post.labels[0].name'/></ins><label class='unit'>₫</label></span>
</b:if>
</b:loop>
</div>
<!--Đoạn trích tóm tắt-->
<div class='product-description'><p><data:post.snippets.short/></p></div>
<form class='cart'>
<div class='flex-align'>
<!--Nút tăng giảm số lượng-->
<div class='buttons_added'>
<input class='minus is-form qty has-hover' type='button' value='-'/>
<input class='input-text min-max' max='100' min='1' name='quantity' pattern='[0-9]*' type='number' value='1'/>
<input class='plus is-form qty has-hover' type='button' value='+'/>
</div>
<!--Nút thêm vào giỏ-->
<button aria-label='Thêm vào giỏ' class='single_add_to_cart_button theme-button blue' expr:data-product-id='data:post.id' type='submit'>Thêm vào giỏ</button>
<!--Nút mua nhanh-->
<button aria-label='Mua nhanh' class='theme-button quick-buy modal--open' data-target='#form-quick-buy'>Mua nhanh</button>
</div>
</form>
<div class='product-meta'>
<!--Tình trạng hàng hóa trong kho-->
<b:loop values='data:post.labels' var='label'>
<!--Điều kiện tên nhãn bằng "in-stock"-->
<b:if cond='data:label.name eq "in-stock"'>
<div class='in-stock'> <strong>Tình trạng: </strong> <span>Còn hàng</span></div>
</b:if>
</b:loop>
<!--Mã hàng SKU-->
<div class='sku-wrapper'><strong>Mã hàng: </strong> <span><data:post.id/></span></div>
<!--Danh mục sản phẩm-->
<div class='posted-in'> <strong>Danh mục:</strong>
<!--Thêm tên nhãn vào bộ lọc array label-->
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name in ["Nhãn A","Nhãn B","Nhãn C"]'>
<a expr:href='!data:blog.isMobileRequest ? data:label.url.canonical + "?max-results=12" : data:label.url.canonical + "?max-results=12&m=1"' expr:title='data:label.name' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
</div>
<!--Các liên kết chia sẻ bài đăng-->
<b:if cond='data:widgets.Blog.first.allBylineItems.share'>
<div class='share-this-product'>
<strong><data:messages.share/>: </strong>
<a class='social-wrapper has-svg-icon fb' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url.canonical' expr:title='data:blog.sharing.platforms[1].shareMessage' rel='nofollow'/>
<a class='social-wrapper has-svg-icon tw' expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url.canonical + "&text=" + data:post.snippets.short' expr:title='data:blog.sharing.platforms[3].shareMessage' rel='nofollow'/>
<a class='social-wrapper has-svg-icon pi' expr:href='"https://www.pinterest.com/pin/create/button/?url=" + data:post.url.canonical + "&description=" + data:post.snippets.short + "&media=" + data:post.featuredImage' expr:title='data:blog.sharing.platforms[4].shareMessage' rel='nofollow'/>
<a class='social-wrapper has-svg-icon li' expr:href='"https://www.linkedin.com/sharing/share-offsite/?url=" + data:post.url.canonical' rel='nofollow' title='Chia sẻ với Linkedin'/>
</div>
</b:if>
</div>
</div>
Các bài đăng liên quan:
- Điều kiện và các tùy chọn hiển thị Label bài viết trong vòng lặp
- Ứng dụng thẻ label bài viết trong theme blogspot bán hàng
- Các thẻ dữ liệu hiển thị văn bản trong template layout version 3
- Tạo các nút next, prev hiển thị ảnh bài viết của trang kế và trang trước
- Cách tạo các button tăng giảm số lượng cho theme blogspot
