Published on
-
4 mins read

Shopify section rendering APIs

Authors
  • avatar
    Name
    Tuan Anh Huynh (Leo)
    Twitter
    @hta218
Photo by Nattu Adnan on Unsplash
shopify-section-render

Section Rendering APIs là 1 powerful AJAX API của Shopify để sử dụng ở storefront dùng cho việc request HTML cho 1 section bất kì của bạn. Tác dụng lớn nhất của API này là để update page content mà không cần phải reload page.

Ví dụ:

  • Update Cart Drawer
  • Update Collection Filters (pagination, inifinite loading...)

Request nhiều section

Để request markup của nhiều section thì chúng ta sẽ fetch 1 request với URL là URL hiện tại của storefront và thêm param ?sections={sectionIDs}

Trong đó sectionIDs chính là các filename của section trong theme của bạn, phân cách bởi dấu ,

Ví dụ:

fetch('/?sections=header,footer')

Kết quả sẽ trông như sau:

{
"header": "<div id=\"shopify-section-header\" class=\"shopify-section\">\n<!-- section content -->\n</div>",
"footer": "<div id=\"shopify-section-footer\" class=\"shopify-section\">\n<!-- section content -->\n</div>"
}

Có thể kết hợp với AJAX Cart APIs bằng cách thêm param sections vào request body:

items: [
{
id: 36110175633573,
quantity: 2
}
],
sections: "cart-items,cart-header,cart-footer"

Các endpoints của AJAX Cart APIs có thể kết hợp query sections là:

  • /cart/add
  • /cart/change
  • /cart/clear
  • /cart/update

Request 1 section

Chúng ta hoàn toàn có thể sử dụng API cho request nhiều section để request 1 section (truyền 1 sectionID là được), nhưng kết quả sẽ là 1 JSON object.

1 cách thay thế là sử dụng param ?section_id={sectionID} để request chỉ 1 section, kết quả sẽ markup text của section đó

sectionID ở đây cũng tương tự như khi request nhiều section - chính là filename của section đó

Tips

Static vs Dynamic section

Để request 1 static section (section mà không có settings shema - content sẽ luôn cố định trừ khi chúng ta thay đổi source code của section) thì sectionID cần truyền chính là filename của section đó

Tuy nhiên với dynamic section (section có settings schema) nếu dùng filename làm sectionID thì sẽ chỉ request được markup ứng với default settings của section đó, chứ không phải là markup tương ứng với settings hiện tại

Để request được markup của những dynamic section này thì cần sử dụng dynamic sectionID. Trong Liquid thì đó là {{ section.id }}.

Ví dụ:

section-type.liquid
<div data-section-id="{{ section.id }}" data-section-type="section-type">
<!-- section content -->
</div>

Dynamic generated ID sẽ trông như thế này: template--14908088647850__16322847419ca50f50

Request dynamic section markup:

// Async context
const section = document.querySelector('[data-section-type="section-type"]')
const id = section.dataset.id
// Eg: template--14908088647850__16322847419ca50f50
const markup = await (await fetch(`?section_id=${id}}`)).text()
console.log(markup)
// Example markup: '<div id=\"template--14908088647850__16322847419ca50f50\">\n<!-- section content -->\n</div>''

Include product/collection context

Với URL như trên thì chúng ta sẽ chỉ query được markup của các section ở homepage ứng với settings tương ứng. Còn nếu muốn query section của product page hoặc collection page (markup sẽ chưa thông tin của product hoặc collection đó) thì sao?

Ví dụ phổ biến nhất chính là query 1 product card data của section product recommendations / recently viewed product hay query collection filter data cho AJAX loadmore hoặc pagination

Để thêm product/collection context thì chỉ cần thêm vào query URL: /products/product-handle hoặc /collections/collection-handle

Ví dụ:

// Async context
const collectionMarkup = await (await fetch(`/collections/fashion/xs?section_id=template--15128665981118__main`).text())
console.log(collectionMarkup)
// Example markup: '<div id=\"shopify-section-template--15128665981118__main\">\n<!-- section content -->\n</div>''
const productMarkup = await (await fetch(`/products/adidas-classic-backpack?section_id=product-json`).text())
console.log(productMarkup)
// Example markup: '<div id=\"shopify-section-template--15128665981118__main\">\n<!-- section content -->\n</div>''

Kết bài

Nhiều bạn có thể biết 1 cách cũ để AJAX query markup là sử dụng alternate template.

Tuy nhiên cách này có 1 nhược điểm là phải tạo nhiều template tương ứng với markup bạn muốn render, và trong Theme Customization của Online Store 2.0 các template này sẽ hiện hết lên (trong khi customer không cần quan tâm đến - trông theme sẽ khá rác)

alternate-template-os-2

Với Section rendering API, customer sẽ không cần quan tâm đến các section đó, các section sẽ được render với context product/collection hoặc settings tương ứng (chỉ cần truyền đúng sectionID là được)

Trên đây là toàn bộ cách sử dụng Section Rendering APIs và tips mà mình học được, hi vọng sẽ bổ ích với các bạn

Happy sharing