WeShare Tháng 9 lần này được chia sẻ từ bạn Bùi Công Đăng – Technical Manager của khối sản phẩm Socialhead với chủ đề “Improve storefront speed for Shopify apps”.

Chủ đề này là hết sức thiết thực và hữu ích với anh em FireApps về việc các ứng dụng trên nền tảng Shopify và làm cách nào để tối ưu khâu coding để hiển thị ra ngoài storefront của Shopify.

Sau đây là các đề mục chính trong buổi WeShare của bạn Công Đăng. Các bạn có thể tham khảo nội dung của bài chia sẻ tại đây.

1. Shopify Liquid

  • Bởi vì chúng ta làm việc với storefront của Shopify nên việc hiểu được cấu trúc theme của Shopify rất quan trọng, Shopify Liquid có những điểm chính sau
  • Là ngôn ngữ để code phần theme của Shopify
  • Giống như Laravel blade, Vue
  • Sử dụng kết hợp các tag, object và filter để tải các nội dung động
  • Theme struct: 
WeShare Tháng 9: Improve storefront speed for Shopify apps

2. Theme section

WeShare Tháng 9: Improve storefront speed for Shopify apps
  • Section có đầy đủ struct để chúng ta include một box, element của app vào storefront của khách hàng.
  • Nó có schema để khai báo các config của 1 section, có phần html để chúng ta render  ra các element trên page, có phần stylesheet để chúng ta khai báo css và có JS để chúng ta xử lý javascript hoặc load nội dung từ API vào section
  • Section có 2 dạng là Static và Dynamic, section static  giúp chúng ta nhúng các box vào các thành phần cố định trên page, như header, footer,… Còn section dynamic giúp chúng ta tùy chỉnh các vị trí trên trang home page.
WeShare Tháng 9: Improve storefront speed for Shopify apps

3. Show/hide element

  • Chúng ta có thể sử dụng control tag như if, else, case, when để ẩn hiện các element trên section 
WeShare Tháng 9: Improve storefront speed for Shopify apps

4. Translate text

  • Chúng ta có thể sử dụng local liquid theme để translate các text static trên element
WeShare Tháng 9: Improve storefront speed for Shopify apps

5. Customize box storefront

  • Sử dụng CSS variable để dễ quản lý cũng như giảm việc xử lý bằng cách phải render ra các css string để inline CSS vào các element
WeShare Tháng 9: Improve storefront speed for Shopify apps

6. Metafields API

  • Shopify cung cấp metafields để merchant thêm các custom fields vào product, order, customer. Như chúng ta có thể lưu các thông tin summary của product để show ra một cách nhanh hơn
WeShare Tháng 9: Improve storefront speed for Shopify apps

Cùng điểm qua hình ảnh được ghi lại từ buổi #WeShare của tháng 9, và chờ đón các chương trình #WeShare tiếp theo nhé!

WeShare Tháng 9: Improve storefront speed for Shopify apps

Hẹn gặp lại các bạn trong chương trình #WeShare tháng 10!

– FireApps –

Leave a Reply

avatar
  Subscribe  
Notify of