Những điều có thể bạn không biết khi lập trình theme Shopify

5/5 - (1 bình chọn)

Nếu bạn đã làm lập trình theme Shopify, hẳn những điều dưới đây sẽ khiến bạn nghĩ nhiều hơn và cân nhắc việc code tối ưu hơn đấy nhé.

Sử dụng Section

Từ khi được đưa vào sử dụng từ năm 2016, section vẫn luôn là một phương án thú vị giúp xây dựng nhiều phần customize cho giao diện Shopify, từ landing page cho tới customize từng sản phẩm, collection, article,…

Section chỉ dùng một lần

Tuy vậy, section chỉ có thể sử dụng nhiều lần (ví dụ trong cùng 1 trang sử dụng lại section đó từ 2 lần trở lên) trên mỗi trang chủ thôi nếu bạn dùng tag content_for_index, còn lại thì nó sẽ chỉ được sử dụng một lần mỗi trang thôi.

Cách làm tốt nhất là ta tạo riêng 1 snippets (theo kiểu module) để có thể gọi vào và truyền các giá trị của schema, ví dụ:

{% include 'hero', 
  title: section.settings.title, 
  description: section.settings.description 
%}
{% schema %}
{
 "name": "About Hero",
 "settings": []
}
{% endschema %}

Đặt các section với tên khác nhau

Thêm prefix cho các section trên các page cố định

Bởi vì tính chất chỉ sử dụng một lần ở trên, bạn nên nghĩ đến việc gán các prefix cho tên của mỗi section, ví dụ:

Trên page About, (page.about.liquid chẳng hạn) ta có các section như:

{% section 'about-hero' %}
{% section 'about-three-up' %}
{% section 'about-single-image' %}

Phân biệt các section có cùng snippets hoặc modules

Nếu bạn có nhiều section trùng snippets hoặc tái sử dụng, hãy đặt tên nó theo cách dễ nhớ bằng keyword của nội dung section đó.

{% section 'about-process-three-up' %}
{% section 'about-value-three-up' %}

Hoặc nếu là các section đơn giản, khó phân biệt về mặt nội dung, ta đặt theo thứ tự numeric (không khuyến khích lắm):

{% section 'about-single-image-1' %}
{% section 'about-single-image-2' %}

Nội dung các page có bố cục phức tạp

Với các page có bố cục theo dạng hai cột, ba cột trên toàn page (dạng có sidebar), cách làm tốt nhất là ta tạo 1 snippets để có thể xác định class sẽ làm việc (vì thường body class không phù hợp hoặc tương đối nesting trong tình huống này).

Ví dụ, ta có page tên là Collection, với cột bên trái là sidebar để lọc sản phẩm, và cột bên phải là List sản phẩm tương ứng. Cách làm tốt nhất là trong file templates/collection.liquid ta gọi tới 1 module tên “collection-layout” như sau:

{% include 'collection-layout' %}

Trong module Collection Layout, ta tiếp tục tách ra thành 2 block là Collection Sidebar và Collection List, tuy nhiên module này có chứa markup để ta làm grid, ví dụ như ta dùng markup grid của Bootstrap để các bạn dễ hình dung:

<div class="collection-layout">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        {% include 'collection-sidebar' %}
      </div>
      <div class="col-sm-9">
        {% include 'collection-list' %}
      </div>
  </div>
</div>

Như vậy, bố cục và cấu trúc của các module trong template chặt chẽ hơn, tránh việc trong template ta có luôn markup nhưng khó chặt chẽ và có phần gây khó dễ cho developer trong quá trình lập trình theme Shopify.

Xác định các đối tượng global

Các đối tượng global ở đây được hiểu là các element hoặc block có tính chất tái sử dụng cao trong giao diện Shopify thông thường.

Qua kinh nghiệm làm việc với phát triển giao diện Shopify, Code Tốt cho rằng các đối tượng sau đây cần quan tâm và xây dựng global markup:

  • Form, bao gồm các kiểu trong các trang như đăng ký, đăng nhập, quên mật khẩu. Ngoài ra, sau khi đăng nhập, ta còn gặp cả khi thêm, sửa địa chỉ của người dùng.
  • Content, thường được hiểu là các đối tượng nằm trong 1 thẻ .wysiwyg . Thẻ này sẽ chứa các markup do người dùng nhập từ trong backend của Shopify, nên ta không quy định class cho nó để làm style riêng được.

Xử lý style như thế nào với các đối tượng global?

Đối với các đối tượng dạng này, ta cần chuyển sang quy ước riêng, không bị phụ thuộc vào tính chất module nữa, mà theo class global như ví dụ dưới đây theo kiểu BEM style:

.form, .form--login, .form--reset-password, .form--edit-address // Các class cha nếu có các style đặc biệt
.form__row
.form__col, form__col--half // chia cột
.form__label // nhãn label
.form__input // input, select
.form__footer // phần block cuối chứa submit button
.form__submit-button // submit button, thường dùng <input> cần style riêng

Như vậy, bất kể form của bạn là gì, thì sử dụng các class chung dưới quy ước như trên sẽ giúp giảm thiểu việc code bị lặp, trùng như ví dụ dưới đây:

.account-address__input
.login__input
.form-reset-password__input

Như vậy, nếu ta có local project trên máy, việc quy định các khái niệm này sẽ dẫn tới cấu trúc thư mục là khác nhau:

Form:

/src/styles/global/forms.css

Modules:

/src/styles/modules/form-login.css

Hỏi: Nếu bạn muốn cập nhật style của chỉ label trong form login chẳng hạn, bạn sẽ sửa ở file nào?

Đáp: Bạn sửa trong form-login.css như sau:

.form--login .form__label {}

Một lưu ý quan trọng là việc sử dụng thống nhất từ đầu tới cuối, chẳng hạn bạn dùng BEM thì mọi thứ các element đều tuyệt đối theo quy ước này.

Sai: tương tác với các element trực tiếp mà không dùng class

.card-block img {}

Đúng: đặt tên class cho element và style vào trực tiếp class đó

.card-block__image {}

Kết luận

Mặc dù việc xây dựng giao diện Shopify không phải quá khó, nhưng bạn cũng nên cân nhắc các gợi ý của Code Tốt đưa ra để cải thiện quá trình, giảm thời gian và tăng khả năng bảo trì code về sau này.

Một gợi ý là bạn nên tham khảo một số giao diện có sẵn trên Github của Shopify để làm căn cứu đối chiếu tham khảo code tốt hơn nhé! Trong trường hợp bạn sử dụng WordPress, bạn có thể bảo trì website định kỳ tốt hơn với dịch vụ của Code Tốt.

2 bình luận về “Những điều có thể bạn không biết khi lập trình theme Shopify”

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...