Khi bạn muốn lấy dữ liệu của bài viết đã được xuất bản, bạn có hai cách: hoặc lấy bằng thẻ data mặc định trong Blogger hoặc lấy từ nguồn cấp feed của bài đăng đó. Mình khuyên các bạn nên sử dụng cách lấy dữ liệu bằng thẻ data mặc định vì nó có sẵn và tối ưu rất nhiều so với khi bạn sử dụng nguồn cấp.
Khi bạn lấy dữ liệu trong nguồn cấp bạn phải xử lý hai công đoạn: tải URL feed và trích xuất dữ liệu từ URL feed đã tải. Tuy nhiên nếu bạn lấy dữ liệu bằng thẻ data bạn chỉ cần xử lý một công đoạn là trích xuất dữ liệu mà thôi.
Đầu tiên, bạn lưu bài viết danh sách tổng hợp các loại thẻ data mặc định trong blogspot để tìm thẻ dữ liệu nhanh hơn. Tiếp theo bạn sẽ gán nó vào mỗi post để khi cần bạn sẽ viết script lấy dữ liệu từ post cho nhanh. Cách làm như sau:
Một cách làm rút gọn mã XML mà mình hay áp dụng trong theme blogspot đó là tạo dữ liệu trong thẻ <b:includable id=''>, thẻ này được đặt trong cặp thẻ <b:defaultmarkups><b:defaultmarkup>, và trích xuất dữ liệu bằng thẻ <b:include name=''/>
Tham khảo thêm: Cách sử dụng thẻ b:defaultmarkups và b:defaultmarkup trong blogspot
Khi tạo dữ liệu trong thẻ <b:includable id=''> mình lại sử dụng thẻ <b:attr> để gán dữ liệu lên element cha, các bạn đọc bài viết cách sử dụng thẻ b:attr và b:class trong blogspot để hiểu rõ hơn cách làm.
Ví dụ về thẻ <b:includable> mình đã tạo để áp dụng trong theme blogspot bán hàng
<b:defaultmarkups>
<b:defaultmarkup type='Common'>
<b:includable id='data-post-filter'>
<b:attr expr:value='data:post.id' name='data-product-id'/>
<b:attr expr:value='data:post.url.canonical' name='data-product-url'/>
<b:attr expr:value='data:post.title' name='data-product-name'/>
<b:attr expr:value='data:post.featuredImage' name='data-product-image'/>
<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'>
<b:attr name='data-product-price' value='0'/>
</b:if>
</b:if>
</b:loop>
<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 neq 0'>
<b:attr expr:value='data:post.labels[0].name' name='data-product-price'/>
</b:if>
</b:if>
</b:loop>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name eq "sale"'>
<b:attr expr:value='data:post.labels[0].name' name='data-product-price'/>
<b:attr expr:value='data:post.labels[1].name' name='data-product-sale'/>
</b:if>
</b:loop>
<b:loop values='data:post.labels.length - 1' var='label'>
<b:attr expr:value='data:post.labels[label].name' name='data-product-sku'/>
</b:loop>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name eq "in-stock"'>
<b:attr name='data-product-status' value='in stock'/>
<b:elseif cond='data:label.name eq "out-of-stock"'/>
<b:attr name='data-product-status' value='out of stock'/>
<b:elseif cond='data:label.name in ["clothing","men","women"]'/>
<b:attr expr:value='data:label.name' name='data-product-category'/>
</b:if>
</b:loop>
</b:includable>
</b:defaultmarkup>
</b:defaultmarkups>
Tiếp theo mình trích xuất thẻ <b:include name='data-post-filter'/> đặt thẻ ngay bên dưới thẻ element của posts trong tiện ích Blog, PopularPosts, FeaturedPosts, ví dụ
<article class="post data-post">
<b:include name='data-post-filter'/>
</article>
Khi trích xuất HTML của trang, mỗi element data-post sẽ được gán vào các giá trị từ thẻ <b:include name='data-post-filter'/>, chẳng hạn
<article class="post data-post" data-date="ngày xuất bản" data-product-category="nhãn" data-product-id="id bài viết" data-product-image="ảnh" data-product-name="tiêu đề" data-product-price="giá" data-product-sku="mã hàng" data-product-status="tình trang" data-product-url="liên kết">
<div class="add-to-cart"></div>
<div class="add-to-wishlist"></div>
<div class="share-this-post"></div>
</article>
Từ những giá trị này, khi muốn lấy dữ liệu của nó bằng script từ những element con, bạn chỉ cần viết đơn giản như sau:
<script>//<![CDATA[
// Tạo dữ liệu
function add_to_cart(){
var data = $(this).parents('.post-data'),
date = $(data).attr('data-date'),
category = $(data).attr('data-date')
....
}
function add_to_wishlist(){
var data = $(this).parents('.post-data'),
date = $(data).attr('data-date'),
category = $(data).attr('data-date')
....
}
function share_this_post(){
var data = $(this).parents('.post-data'),
date = $(data).attr('data-date'),
category = $(data).attr('data-date')
....
}
// Trích xuất dữ liệu khi click vào element
window.addEventListener('load',function(){
$(document).off('click','.add-to-cart',add_to_cart).on('click','.add-to-cart',add_to_cart)
$(document).off('click','.add-to-wishlist',add_to_wishlist).on('click','.add-to-wishlist',add_to_wishlist)
$(document).off('click','.share-this-post',share_this_post).on('click','.share-this-post',share_this_post)
})
//]]></script>
