Xây dựng chủ đề Shopify với công cụ Liquid

Tác Giả: Peter Berry

Ngày Sáng TạO: 14 Tháng BảY 2021

CậP NhậT Ngày Tháng: 13 Có Thể 2024

Xây dựng chủ đề Shopify với công cụ Liquid - Sáng TạO

NộI Dung

Tệp và thư mục chủ đề
Ánh xạ URL thành các mẫu
Chất lỏng: những điều cơ bản
Hiểu biết về product.liquid
Đầu ra
Hợp lý
Bộ lọc
Cái gì tiếp theo?
Các nguồn và nguồn cảm hứng khác

Trong vài tuần qua, tôi đã xây dựng chủ đề Shopify cho Viewport Industries, công ty Elliot Jay Stocks và tôi đã thành lập năm ngoái. Chúng tôi chọn Shopify vì một số lý do:

Nó cho phép chúng tôi bán cả sản phẩm kỹ thuật số và sản phẩm vật lý
Nó được lưu trữ đầy đủ, có nghĩa là không có máy chủ nào phải lo lắng
Nó hỗ trợ một số cổng thanh toán tích hợp độc đáo với ngân hàng của chúng tôi
Nó dựa trên chủ đề, có nghĩa là chúng tôi có thể dễ dàng sử dụng lại HTML, CSS và JavaScript của trang web hiện có của chúng tôi

Shopify sử dụng công cụ mẫu có tên Liquid để xuất dữ liệu từ cửa hàng của bạn thành các mẫu của bạn. Chất lỏng có lẽ là một thành phần của chủ đề Shopify mà bạn chưa từng sử dụng trước đây và nó có thể mang lại hiệu quả cao. Nhưng tin tốt là nó thực sự không quá khó để bắt đầu.

Nếu bạn đã từng sử dụng Smarty, ERB hoặc Twig, những gì sau đây sẽ quen thuộc với bạn. Nếu không, đừng lo lắng: vấn đề chỉ là học một vài quy tắc đơn giản. Khi bạn đã thêm kỹ năng Liquid vào bộ công cụ phát triển web của mình, bạn sẽ có thể bắt đầu xây dựng chủ đề cho khách hàng ngay lập tức.

Tệp và thư mục chủ đề

Các chủ đề của Shopify không chỉ là một số tệp (tệp HTML có phần mở rộng .liquid, CSS, JS, hình ảnh, v.v.) và các thư mục. Chủ đề có thể trông và hoạt động theo cách bạn muốn: thực sự không có hạn chế. Đây là cấu trúc cơ bản của một chủ đề:

tài sản
cấu hình
bố cục
theme.liquid
đoạn trích
mẫu
404. chất lỏng
article.liquid
blog.liquid
cart.liquid
collection.liquid
index.liquid
page.liquid
product.liquid
search.liquid

Với những tệp này, bạn có thể tạo những chủ đề cơ bản nhất. Tất nhiên, bạn có thể muốn thêm một số CSS, JavaScript và một vài hình ảnh. Bạn sẽ đặt những thứ này vào thư mục nội dung. (Cần lưu ý rằng bạn hiện không được phép sử dụng các thư mục con trong thư mục nội dung của mình.)

Để biết thêm về cách các chủ đề hoạt động và để tìm hiểu về các thư mục cấu hình và đoạn mã, tôi khuyên bạn nên đọc Chủ đề từ Cài đặt Scratch và Chủ đề trên Shopify Wiki.

Ngoài ra, bạn có thể đăng ký chương trình Đối tác miễn phí, tạo cửa hàng thử nghiệm và kiểm tra một trong nhiều chủ đề miễn phí có sẵn từ khu vực quản trị cửa hàng thử nghiệm của bạn - chỉ cần đi tới trình chỉnh sửa chủ đề nằm trong menu Chủ đề.

Ánh xạ URL thành các mẫu

Các chủ đề của Shopify hoạt động bằng cách ánh xạ URL hiện tại tới một mẫu cụ thể. Ví dụ: nếu chúng tôi đang xem một sản phẩm có URL sau ...

http://www.unitedpixelworkers.com/products/indianapolis

... thì Shopify sẽ biết cách sử dụng product.liquid bản mẫu. Vì lý do này mà bạn chỉ nên sử dụng các tên tệp được liệt kê ở trên cho các mẫu của mình.

Ngoài việc Shopify biết mẫu nào sẽ hiển thị liên quan đến URL hiện tại, nó cung cấp một số biến rất cụ thể cho chúng tôi. Chúng được gọi là 'biến mẫu' và cho phép chúng tôi hiển thị dữ liệu trong các mẫu của mình.

Ví dụ: trong mẫu product.liquid của chúng tôi, chúng tôi có quyền truy cập vào sản phẩm Biến đổi. Điều này có nghĩa là chúng tôi có thể xuất tên, mô tả, giá cả và tính khả dụng của sản phẩm trong mẫu của chúng tôi. Chúng tôi sẽ sử dụng kết hợp các biến chất lỏng và biến mẫu để điền vào mẫu của chúng tôi dữ liệu liên quan đến sản phẩm của chúng tôi.

Để có danh sách đầy đủ các biến mẫu có sẵn, hãy truy cập Trang tính Cheat Cheat của Mark Dunkley.

Chất lỏng: những điều cơ bản

Liquid ở đây để làm cho cuộc sống của chúng ta với tư cách là nhà thiết kế chủ đề trở nên dễ dàng hơn. Một trong những cách chính nó thực hiện điều này là sử dụng bố cục. Bố cục lý tưởng để bao gồm các phần tử trang phổ biến như đầu trang, điều hướng chính, chân trang, v.v.

Trong cấu trúc thư mục của tôi ở trên, bạn sẽ thấy một tệp có tên theme.liquid trong thư mục bố cục. Bạn có thể coi theme.liquid là mẫu chính của chúng tôi. Tất cả các mẫu khác của chúng tôi, chẳng hạn như product.liquid, được hiển thị bên trong mẫu chính này. Bạn có thể có nhiều hơn một bố cục nếu muốn, nhưng bố cục mặc định phải luôn được gọi là theme.liquid.

Tôi chưa thấy tệp theme.liquid của United Pixelworkers, nhưng bạn có thể tưởng tượng nó có chứa phần đánh dấu cho các khu vực được tô màu đỏ bên dưới.

Dưới đây là bố cục theme.liquid cơ bản có thể trông như thế nào:

! DOCTYPE html>
html>
đầu>
{{content_for_header}}
title> Tiêu đề trang Đến đây / title>
/ head>
cơ thể>
{{content_for_layout}}
/ body>
/ html>

Bạn sẽ nhận thấy hai cụm từ được bao bọc trong dấu ngoặc nhọn kép: {{content_for_header}} và {{content_for_layout}}. Đây là những ví dụ đầu tiên của chúng tôi về Liquid đang hoạt động.

Shopify thường sử dụng {{content_for_header}} để thêm các tệp cụ thể vào phần đầu> của tài liệu: ví dụ: thêm mã theo dõi. {{content_for_layout}} là nơi nội dung của mẫu được ánh xạ URL của chúng tôi sẽ xuất hiện. Ví dụ: nếu chúng tôi đang xem trang sản phẩm, tệp product.liquid sẽ thay thế {{content_for_layout}} trong tệp bố cục của chúng tôi.

Hiểu biết về product.liquid

Bây giờ chúng ta đã xem qua các khái niệm cơ bản về bố cục, đã đến lúc xem xét một mẫu.Các cửa hàng là tất cả về sản phẩm, vì vậy hãy xem product.liquid.

Dưới đây là một ví dụ rất đơn giản nhưng có chức năng về mẫu product.liquid.

h2> {{product.title}} / h2>
{{ Mô tả Sản phẩm }}
{% if product.available%}
form action = "/ cart / add" method = "post">
select id = "product-select" name = ’id’>
{% cho biến thể trong product.variants%}
option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ select>
input type = "submit" name = "add" value = "Thêm vào giỏ hàng" id = "mua" />
/ form>
{% khác%}
p> Sản phẩm này không có sẵn / p>
{% endif%}

Ở đây có một số khái niệm chính về Chất lỏng. Hãy xem xét chúng theo thứ tự.

Đầu ra

Dòng mã đầu tiên chứa cụm từ {{product.title}}. Khi được hiển thị, điều này sẽ xuất ra tiêu đề của sản phẩm, như bạn biết bây giờ được xác định bởi URL. Trong ví dụ về United Pixelworkers bên dưới, tiêu đề sản phẩm chỉ đơn giản là 'Indianapolis'.

Liquid sử dụng định dạng cú pháp dấu chấm. Trong trường hợp này, {{product.title}} tương đương với biến mẫu sản phẩm và thuộc tính title của nó. Chúng tôi có thể xuất mô tả sản phẩm theo cách tương tự bằng cách sử dụng {{ Mô tả Sản phẩm }}.

Điều này được gọi trong thuật ngữ Chất lỏng là đầu ra. Tất cả đầu ra được biểu thị bằng dấu ngoặc nhọn kép, như sau: {{your_output}}.

Hợp lý

Trên dòng tiếp theo của mã, bạn sẽ nhận thấy một câu lệnh trong dấu ngoặc nhọn theo sau là%: trong trường hợp này, {% if product.available%}. Đây là một khái niệm quan trọng khác trong Liquid được gọi là Hợp lý. Sâu hơn nữa, bạn sẽ thấy {% else%} và cuối cùng là các câu lệnh {% endif%}.

Điều này câu lệnh if cho phép chúng tôi ra lệnh cho những gì mẫu của chúng tôi hiển thị, dựa trên một hoặc nhiều điều kiện: trong trường hợp này, sản phẩm của chúng tôi có sẵn hay không. Thực tế, điều này nói lên rằng, “nếu sản phẩm của chúng tôi có sẵn, hãy hiển thị thông tin liên quan đến sản phẩm đó; nếu không sẽ hiển thị thông báo cho người dùng biết nó đã hết hàng ”.

Tất cả các câu lệnh logic trong Liquid sử dụng ký hiệu phần trăm dấu ngoặc nhọn, tức là {% if…%}. Chỉ cần nhớ đóng các báo cáo của bạn một cách thích hợp, nếu không bạn sẽ gặp rắc rối. Ví dụ:

{% if product.available%}
Hiển thị nút Thêm vào giỏ hàng tại đây
{% khác%}
Hiển thị thông báo về thời điểm có sản phẩm tiếp theo
{% endif%}

Bộ lọc

Chất lỏng cho phép chúng tôi điều khiển đầu ra của mình theo một số cách. Một trong số đó là sử dụng bộ lọc. Nội dung đi vào bộ lọc sẽ xuất hiện ở đầu bên kia được thay đổi theo một cách cụ thể.

Nhìn vào ví dụ product.liquid ở trên, bạn sẽ nhận thấy { tiền bạc }. Biến thể là một thuật ngữ được sử dụng để mô tả một biến thể của sản phẩm: ví dụ: các màu sắc và kích cỡ khác nhau. Điều thú vị ở đây là chúng tôi sử dụng bộ lọc để thay đổi đầu ra giá - trong trường hợp này là bằng cách sử dụng bộ lọc tiền. Điều này sẽ dẫn đến việc biểu tượng đơn vị tiền tệ của cửa hàng được thêm vào phía trước giá.

Các bộ lọc khác bao gồm dải_html, sẽ loại bỏ bất kỳ thẻ HTML nào khỏi một đoạn văn bản nhất định và ucase, sẽ chuyển nó thành chữ hoa.

Bạn cũng có thể nối các bộ lọc lại với nhau. Ví dụ:

{article.content}

Trong trường hợp này, chúng tôi đang lấy thuộc tính nội dung của biến mẫu bài viết và chuyển nó đến bộ lọc dải_html và cuối cùng là bộ lọc cắt ngắn. Bạn sẽ nhận thấy rằng bộ lọc cắt ngắn cho phép chúng tôi chỉ định thời gian chúng tôi muốn kết quả cuối cùng là: trong trường hợp này là 20 ký tự.

Bộ lọc cũng cho phép chúng tôi thực hiện nhanh chóng việc tạo các phần tử tập lệnh và hình ảnh trong các mẫu. Dưới đây là một cách rất nhanh chóng sử dụng bộ lọc để xuất hình ảnh có thẻ alt được liên kết:

{asset_url}

Sử dụng điều này trong chủ đề Shopify của chúng tôi sẽ dẫn đến phần tử img sau được hiển thị trong mẫu của chúng tôi:

img src = "/ files / shop / your_shop_number / asset / logo.png" alt = "Biểu trưng trang web" />

Các asset_url bộ lọc rất hữu ích vì nó trả về đường dẫn đầy đủ đến chủ đề hiện tại tài sản thư mục. Sử dụng bộ lọc này giúp bạn có thể áp dụng chủ đề của mình trên nhiều cửa hàng và không phải lo lắng về đường dẫn.

Cái gì tiếp theo?

Hy vọng rằng, một vài ví dụ này đã cho bạn thấy rằng Liquid không phức tạp như vậy. Tất nhiên, bạn có thể làm được nhiều thứ hơn nữa, nhưng bằng cách nắm vững đầu ra, logic và bộ lọc, bạn đang trên đường hiểu hầu hết những gì bạn sẽ cần để xây dựng một chủ đề Shopify.