Một số tùy chọn về tính năng lọc label trong bài viết mình họa dưới đây giúp bạn hiểu rõ hơn để ứng dụng nó trong theme blogspot bán hàng, du lịch, vận chuyển.v.v..
Đầu tiên theme bán hàng cần hiển thị những nội dung sau:
- Giá bán
- Giá giảm
- Mã hàng
- Tình trạng trong kho
- Màu sắc
- Kích thước
- Danh mục
Yêu cầu bạn cần tìm hiểu thật kỹ về điều kiện và các tùy chọn hiển thị Label bài viết trong vòng lặp
Lọc kiểu hiển thị post
 |
| Lọc hiển thị các post có label tên "shop" tại trang label |
Kiểu hiển thị ở đây có thể hiểu kiểu hiển thị nội dung trong một post ví dụ với post bán hàng hiển thị khác với post tin tức. Ví dụ với điều kiện trang label
<b:if cond='data:view.search.label'>
<b:if cond='data:view.search.label neq "blog"'>
<b:loop values='data:posts where (p => p.labels any (l => l.name eq "shop"))' var='post'>
<b:include data='post' name='postShop'/>
</b:loop>
<b:else/>
<b:loop values='data:posts where (p => p.labels any (l => l.name eq "blog"))' var='post'>
<b:include data='post' name='postArchive'/>
</b:loop>
</b:if>
</b:if>
Nếu URL trang hiện tại không phải là trang có label bằng "blog", tạo vòng lặp cho post hiển thị theo label bằng "shop". Nếu URL trang hiện tại là trang có label bằng "blog", tạo vòng lặp cho post hiển thị theo label bằng "shop".
Tham khảo thêm: Hiển thị các bài viết tại trang chủ theo một nhãn hay một số nhãn cố định
Tạo điều kiện hiển thị giá và nút hành động
 |
| Hiển thị các nút hành động khác nhau theo tình trang hàng hóa và giá |
Giả sử bài viết về sản phẩm tên Raglan Tee Denim & Supply Ralph Lauren có những label có tên: 150.000, 230.000, best-selling, brown, gray, in-stock, L, M, S, sale, shop, women, XL, z-100010
Hiển thị giá bán và giá giảm
<div class='price-wrapper'>
<b:loop index='item' values='data:post.labels' var='label'>
<b:if cond='data:item eq 0'>
<b:if cond='data:post.labels[0].name eq 0'>
<span><strong>Liên hệ</strong></span>
<b:else/>
<span class='price'><ins><b:eval expr='data:post.labels[0].name'/></ins><label class='unit'>₫</label></span>
</b:if>
<b:elseif cond='data:label.name eq "sale"'/>
<span class='sale-off'><del><b:eval expr='data:post.labels[1].name'/></del><label class='unit'>₫</label></span>
</b:if>
</b:loop>
</div>
Điều kiện label đầu tiên bằng "0" hiển thị giá Liên hệ, còn không hiển thị giá bán. Nếu bài có label tên "sale" lọc lấy label theo thứ tự thứ hai
Tạo nút hành động
Dựa vào label đã thêm trong bài, theo label viết điều kiện lọc cho nút hành động, ví dụ
<div class='button-wrapper'>
<b:loop index='item' values='data:post.labels' var='label'>
<b:if cond='data:item lte 0'>
<b:if cond='data:post.labels[0].name eq 0'>
<button aria-label='Đặt mua' class='order'>Đặt mua</button>
<b:else/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name eq "in-stock"'>
<button aria-label='Mua ngay' class='quick-buy'>Mua ngay</button>
<b:elseif cond='data:label.name eq "out-of-stock"'/>
<button aria-label='Hết hàng' class='disabled' disabled=''>Hết hàng</button>
</b:if>
</b:loop>
</b:if>
</b:if>
</b:loop>
</div>
Điều kiện nếu label đầu bằng "0", tạo button Đặt mua nếu label đầu không bằng "0", nếu bài đăng có label bằng "in-stock" tạo button Mua nhanh còn bài đăng có label bằng "out-of-stock" tạo button thông báo hết hàng
Lọc lấy label cụ thể
Tạo hiển thị tình trạng hàng hóa, mã hàng, size, màu sắc, danh mục
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name eq "in-stock"'>
<!-- Điều kiện label bằng "in-stock" hiển thị Còn hàng -->
<div class="status in-stock"><strong>Tình trạng: </strong> Còn hàng</div>
<b:elseif cond='data:label.name eq "out-of-stock"'/>
<!-- Điều kiện label bằng "out-of-stock" hiển thị Còn hàng -->
<div class="status out-off-stock"><strong>Tình trạng: </strong> Hết hàng</div>
<b:elseif cond='data:label.name in ["clothing","men","women"]'/>
<!-- Điều kiện label bằng "clothing","men","women" hiển thị danh mục -->
<label class='tag-in'><data:label.name/></label>
<b:elseif cond='data:label.name in ["S","M","N","XL","XXL"]'>
<!-- Điều kiện label bằng "S","M","N","XL","XXL" hiển thị kích thước size -->
<label class='size'><data:label.name/></label>
<b:elseif cond='data:label.name in ["black","brown","gray","green","orange","pink","purple","red","yellow","white"]'>
<!-- Điều kiện label bằng "black","brown","gray","green","orange","pink","purple","red","yellow","white" hiển thị màu sắc -->
<label expr:class='data:label.name'></label>
</b:if>
</b:loop>
Lọc lấy label cuối hiển thị mã sản phẩm
<b:loop values='data:post.labels.length - 1' var='label'>
<!-- Lọc lấy label cuối hiển thị mã sản phẩm -->
<div class="sku-wrapper">
<strong>Mã hàng: </strong>
<span><b:eval expr='data:post.labels[label].name'/></span>
</div>
</b:loop>
