Trên 4.4 triệu các trang web thương mại điện tử được xây dựng bằng cách sử dụng Shopify nền tảng. Đó là nền tảng thương mại điện tử tất cả trong một đã làm rung chuyển mạng kể từ khi bắt đầu vào năm 2006. Người bán chọn nền tảng này để lưu trữ các cửa hàng trực tuyến của họ vì nhiều lý do, từ thiết lập thanh toán dễ dàng đến các công cụ tiếp thị tích hợp và hơn thế nữa.
Nhưng một trong những khía cạnh quan trọng của Shopify là công cụ xây dựng trang web trực quan với hàng nghìn chủ đề và Shopify tích hợp ứng dụng để lựa chọn.
Tuy nhiên, trong khi trình tạo không có mã cho phép bạn tạo các trang web tuyệt đẹp và độc đáo, nhưng vẫn có một số hạn chế. Ví dụ: khi bạn bắt đầu xây dựng cửa hàng trực tuyến của mình, bạn phải chọn một chủ đề xác định cách sắp xếp và mức độ kiểm soát mà bạn có được đối với nội dung của mình. Ngay cả khi bạn chọn một chủ đề trống, tức là một chủ đề không có nội dung - vẫn có kiến trúc mã cơ bản xác định trước cách tổ chức nội dung.
Nhưng có tin tốt. Nếu bạn muốn tạo của riêng bạn Shopify mẫu cho trang web của bạn hoặc của người khác, có Shopify Chất lỏng.
Thú vị? Hãy tham gia cùng tôi khi tôi nỗ lực trả lời câu hỏi: Cái gì là Shopify Chất lỏng? Hãy đi sâu vào!
Là gì Shopify Chất lỏng?
Thật thú vị, Shopify Chất lỏng đã có từ đó Shopifysự khởi đầu của. Khi ShopifyNhững người sáng tạo của nó lần đầu tiên thiết kế nền tảng này, họ đã xây dựng một dự án nguồn mở để làm ngôn ngữ mẫu cho tất cả mọi người. Shopify trang mạng mẫu.
Đối với người chưa quen, 'ngôn ngữ lập trình nguồn mở' đề cập đến mã nguồn của phần mềm được cung cấp miễn phí cho công chúng, cho phép mọi người sử dụng, sửa đổi và phân phối mã cho bất kỳ mục đích nào.
Được tạo bằng Ruby, Shopify Chất lỏng về cơ bản đóng vai trò như một trình giữ chỗ để bạn có thể chèn dữ liệu vào định dạng được xác định trước (thông tin chi tiết hơn ở bên dưới).
Vì vậy, làm thế nào để làm việc này?
Để hiểu điều này, trước tiên bạn cần biết rằng các trang web thường ở dạng tĩnh hoặc động. Các cửa hàng tĩnh được mã hóa cứng để hiển thị nội dung chính xác như được viết, chẳng hạn như bằng HTML. Ngược lại, một trang web động có thể hiển thị nhiều nội dung khác nhau tùy thuộc vào cách người dùng tương tác với nó.
Bây giờ giả sử bạn có một trang web tĩnh; bộ khung cơ bản của trang web đã được đặt trước nhưng bạn muốn hiển thị nội dung động. Đây là nơi viết Shopify Việc đưa vào mã HTML của bạn thật tiện lợi. Điều này tự nó đóng vai trò giữ chỗ cho nội dung động.
Shopify Chất lỏng đóng vai trò trung gian giữa cửa hàng của bạn và Shopifymáy chủ của, cho phép Liquid lấy dữ liệu từ Shopifymáy chủ của và gửi nó đến cửa hàng của bạn. Liquid có thể yêu cầu ba loại dữ liệu chính:
- Đối tượng
- Tags
- Bộ Lọc
Dưới đây chúng ta sẽ lần lượt khám phá từng loại dữ liệu:
vật thể lỏng
Các đối tượng tương tự như một thư viện chứa các hàm hoặc nội dung; trong mỗi đối tượng có nhiều thuộc tính khác nhau.
Nếu bạn không quen với khái niệm đối tượng, đây là phần tổng quan ngắn gọn:
Đối tượng là một khái niệm cơ bản trong lập trình. Một đối tượng bao gồm hai thành phần:
- Các thuộc tính xác định trạng thái của đối tượng
- Các hàm xác định hành vi của đối tượng
Để minh họa rõ hơn cách thức hoạt động của tính năng này, chúng tôi sẽ sử dụng một ví dụ không liên quan đến mã hóa. Ví dụ, một chiếc xe hơi. Ở đây, ô tô, tức là vật thể, có thể có các chức năng như “tăng tốc”, “quay đầu” và “phanh”. Ngược lại, các thuộc tính có thể là “cửa sổ”, “cửa ra vào” của ô tô, v.v.
Nói một cách đơn giản, đồ vật là một yếu tố quan trọng khái niệm về mã hóa bởi vì chúng giúp tổ chức các hệ thống phức tạp thành các phần dễ quản lý hơn.
Ví dụ: giả sử bạn đang tạo một tùy chỉnh Shopify chủ đề và muốn hiển thị một Tiêu đề Blog trong mẫu của bạn. Bạn có thể sử dụng Liquid để đưa thông tin đó từ Shopifymáy chủ của và hiển thị nó ở đâu đó trên trang. Trong ví dụ này, đây là đoạn mã Liquid bạn sẽ sử dụng để đạt được điều này:
{{Blog.title}}
Hãy chia nhỏ điều này:
- Nơi đây, ' Blog của chúng tôi.' là đối tượng.
- Tài sản chúng tôi muốn trong này thư viện được đánh dấu bằng 'tiêu đề".
- Sản phẩm '.' cho Liquid biết hai bit dữ liệu này có liên quan như thế nào.
- Dấu ngoặc kép là cú pháp Liquid xác định {{nội dung/đầu ra bạn muốn}} bạn muốn từ Shopify máy chủ.
Thẻ lỏng
Khi đang sử dụng Shopify Chất lỏng, thẻ thêm logic vào nội dung chúng tôi yêu cầu từ Shopify máy chủ để giúp xác định thời điểm nội dung sẽ hiển thị trên trang. Ví dụ: giả sử chúng tôi muốn hiển thị một hình ảnh cụ thể trên các bài đăng blog về lễ hội của mình. Tức là chúng tôi muốn đồ họa này chỉ xuất hiện khi đáp ứng một điều kiện cụ thể.
Đây có thể trông như thế này:
{% if blog.title == 'lễ kỷ niệm' %}
**HTML hình ảnh**
{% kết thúc nếu %}
Điều này có vẻ phức tạp, nhưng nếu chúng ta chia nhỏ nó ra thì nó khá đơn giản để hiểu:
- Thẻ sử dụng cú pháp hơi khác so với các đối tượng trông như thế này {%…%}.
- Thẻ đầu tiên {% if blog.title == 'lễ kỷ niệm' %} cho Liquid biết điều kiện nào phải được đáp ứng trước khi yêu cầu nội dung từ máy chủ.
- Điều kiện chúng tôi yêu cầu được xác định bởi một câu lệnh 'nếu'. Nếu bạn quen với việc viết mã, bạn sẽ biết rằng câu lệnh 'if' hoạt động bằng cách so sánh hai hoặc nhiều phần dữ liệu với nhau. Nếu chúng khớp nhau, nó sẽ chuyển sang dòng tiếp theo trong mã của chúng tôi. Đây, if blog.title == 'lễ kỷ niệm' chúng tôi đang yêu cầu Liquid kiểm tra xem tiêu đề blog của chúng tôi có chứa từ 'lễ kỷ niệm' hay không. Nếu đúng như vậy, nó sẽ chuyển xuống dòng tiếp theo của mã của chúng tôi. Nếu không, Liquid sẽ không trả lại bất kỳ nội dung nào.
- Trong ví dụ này, nếu chúng tôi có tiêu đề blog chứa từ 'lễ kỷ niệm', Liquid sẽ lấy và hiển thị HTML hình ảnh của chúng tôi.
- Một khi nó thực hiện điều này, nó sẽ đi đến dòng sau {% kết thúc nếu %}, chấm dứt chương trình của chúng tôi.
Đây chỉ là một ví dụ về những gì bạn có thể làm với thẻ. Shopify Liquid có thẻ để:
- Kiểm soát khi mã được thực thi
- Lặp lại/sự lặp lại (lặp lại) một khối mã
- Giao diện một số đánh dấu HTML nhất định
- Tạo biến mới.
Bộ lọc chất lỏng
Bộ lọc là những đoạn mã thay đổi hoặc sửa đổi đầu ra của một đối tượng. Ví dụ: họ có thể thay đổi màu sắc, phông chữ, kích thước hoặc giao diện của các thành phần trang web.
Tuy nhiên, cùng với việc thay đổi các khía cạnh hiển thị của đối tượng, chúng có thể thực hiện các chức năng trên đối tượng. Ví dụ: nếu bạn muốn hiển thị tiêu đề blog của mình bằng chữ in hoa, bộ lọc có thể giúp bạn đạt được điều này mà không cần thay đổi tất cả tiêu đề blog của bạn theo cách thủ công:
{{ blog.title | uppercase }}
- Cú pháp của bộ lọc là {{…}}.
- Ở đây, thuộc tính đối tượng mà chúng tôi đang tìm kiếm là 'Tiêu đề Blog'.
- Bộ lọc chúng tôi đang áp dụng là chữ hoa.
- Sản phẩm '|' tách biệt đầu vào và đầu ra của mã của chúng tôi.
Bây giờ, khi người dùng nhìn vào tiêu đề blog của chúng tôi, nó sẽ xuất hiện bằng chữ in hoa.
Lợi ích của Shopify Chất lỏng
Giả sử bạn là nhà thiết kế hoặc nhà phát triển trang web. Trong trường hợp đó, một trong những lợi ích quan trọng nhất của Shopify Liquid là bạn không cần dữ liệu lưu trữ (tức là thông tin về cửa hàng) để tạo hoặc sửa đổi trang web. Điều này là do khi người dùng lần đầu tiên tạo Shopify lưu trữ, tất cả thông tin được lưu trữ trên Shopify máy chủ, nghĩa là bạn có thể sử dụng Liquid để truy xuất dữ liệu bạn cần.
Tuy nhiên, nếu bạn không phải là nhà phát triển web mà thay vào đó bạn chỉ là chủ cửa hàng đang tìm cách làm đẹp cửa hàng của mình thì cũng có những lợi ích dành cho bạn:
- Dễ dàng để tìm hiểu và sử dụng: Liquid có cú pháp đơn giản và dễ hiểu, giúp các nhà phát triển và người không phải nhà phát triển có thể truy cập được.
- Nội dung động: Liquid cho phép tạo nội dung động
- Tùy chỉnh: Với Liquid, bạn có thể tạo các mẫu và chủ đề tùy chỉnh, cho phép bạn kiểm soát hoàn toàn giao diện của cửa hàng Thương mại Điện tử của mình.
- Cải thiện hiệu suất: Các mẫu lỏng được biên dịch và lưu vào bộ nhớ đệm, cải thiện hiệu suất và tốc độ trang web so với các công cụ tạo mẫu khác.
- Cộng đồng lớn: Shopify có cộng đồng người dùng lớn, cung cấp quyền truy cập vào kho kiến thức và hỗ trợ phong phú, giúp việc tìm kiếm giải pháp cho các vấn đề phổ biến liên quan đến Liquid trở nên dễ dàng hơn.
Yêu cầu
Vậy bạn cần những gì để bắt đầu sử dụng Shopify Chất lỏng?
Nếu bạn đã có Shopify hàng, Shopify Liquid sẽ có sẵn để bạn sử dụng miễn phí. Chúng tôi sẽ thảo luận về cách bạn có thể tìm thấy Liquid bên dưới. Nhưng tất cả những gì bạn cần biết bây giờ là mọi trang web được tạo trên Shopify được xây dựng bằng Liquid, vì vậy bạn có thể bắt đầu chỉnh sửa mã này theo cách thủ công ngay khi bạn tạo trang web.
Tuy nhiên, nếu bạn không có Shopify store, bạn sẽ cần tạo một cái để bắt đầu chơi với Liquid.
- Đầu tiên, đi qua Shopify và chọn một kế hoạch. Điền thông tin chi tiết của bạn và tạo tài khoản của bạn.
- Từ của bạn Shopify quản trị viên, bấm vào chủ đề. Shopify tự động cung cấp một chủ đề mặc định. Bạn có thể để nguyên chủ đề này hoặc chọn một chủ đề khác để bắt đầu.
- Shopify có một danh sách kiểm tra mà bạn có thể xem qua để hoàn thành cửa hàng của mình. Bạn sẽ muốn thực hiện tất cả những điều cơ bản, chẳng hạn như thêm trang sản phẩm, thiết kế mặt tiền cửa hàng, v.v.
Bây giờ bạn đã có bộ khung cơ bản của cửa hàng trực tuyến, bạn có thể lấy dữ liệu này từ Shopify máy chủ và tùy chỉnh nó bằng Liquid (xem thêm về điều này bên dưới).
Mặc dù bạn không cần bất kỳ kinh nghiệm viết mã nào để bắt đầu sử dụng Liquid nhưng việc làm quen với các nguyên tắc mã hóa cơ bản sẽ giúp hành trình của bạn trở nên dễ dàng hơn. Nhưng phần lớn, bạn có thể tìm thấy nhiều tài liệu và hướng dẫn tự trợ giúp về Shopify cổng thông tin dành cho nhà phát triển. Ở đây bạn sẽ tìm thấy toàn bộ phần dành riêng cho Khái niệm cơ bản về chất lỏng.
Bạn nên dành chút thời gian xem qua các hướng dẫn này trước khi bắt đầu. Mặc dù Liquid là một công cụ tùy chỉnh mạnh mẽ nhưng nó cũng có khả năng phá hủy trang web của bạn nếu bạn không biết mình đang làm gì!
Bắt đầu với Shopify Chất lỏng
Vì vậy, bằng cách sử dụng những gì chúng ta đã học được cho đến nay, hãy xem cách chúng ta có thể tiến hành chỉnh sửa Shopify chủ đề sử dụng Liquid.
Để truy cập Liquid, hãy làm theo các bước sau:
- Sao chép chủ đề của bạn: Để tránh bất kỳ sự cố lớn nào, bạn nên tạo một bản sao chủ đề của mình trước khi bắt đầu. Bằng cách đó, nếu bạn mắc bất kỳ lỗi nào, bản gốc của bạn Shopify chủ đề vẫn còn nguyên. Để thực hiện việc này, hãy điều hướng đến phần chủ đề ở phía bên phải màn hình của bạn. Shopify bảng điều khiển. Chọn chủ đề bạn muốn chỉnh sửa và nhấp vào hành động để xem menu thả xuống. Bây giờ, chọn trùng lặp.
- Đổi tên bản sao của bạn: Khi sao chép một chủ đề, bạn sẽ thấy chủ đề đó xuất hiện trong danh sách chủ đề của mình. Bạn có thể đổi tên bản sao của mình để không nhầm lẫn giữa bản gốc và bản sao. Chỉ cần nhấp lại vào nút hành động và nhấn đổi tên trên menu thả xuống.
- Vào trình soạn thảo mã: Bây giờ, hãy chọn lại các hành động trên bản sao của bạn và chọn chỉnh sửa mã. Bạn sẽ được chuyển đến danh sách mã đầy đủ trong chủ đề của mình. Hãy nhìn vào các thư mục được liệt kê ở bên phải của bạn. Bạn sẽ thấy một loạt thư mục chứa các khía cạnh khác nhau của chủ đề, chẳng hạn như bố cục, mẫu, phần, v.v. Hãy mở thư mục mẫu.
- Mã hóa trong chất lỏng: Bên trong thư mục mẫu, bạn sẽ thấy danh sách các tệp có loại tệp .liquid. Bạn cũng có thể tạo mẫu tệp Liquid mới bằng cách chọn nút dấu cộng trên thư mục mẫu. Nó sẽ hỏi bạn muốn tạo mẫu nào, tức là trang, phần, blog, v.v. và đặt tên cho tệp. Để chỉnh sửa tệp, bấm đúp vào tệp mẫu và tệp sẽ mở trong trình chỉnh sửa mã ở bên phải.
Bên trong bất kỳ tệp Liquid nào, bạn sẽ thấy một tập lệnh HTML. Đây là bộ xương của trang web của bạn. Bạn có thể sử dụng ngôn ngữ Liquid bên trong HTML này để lấy thông tin từ Shopify máy chủ. Miễn là bạn sử dụng đúng cú pháp Liquid, tức là dấu ngoặc, nó sẽ hiển thị nội dung của bạn tương ứng.
Để minh họa, hãy xem qua một ví dụ dễ hiểu:
Thay đổi kích thước hình ảnh bằng cách sử dụng Shopify Chất lỏng
Hình ảnh là một khía cạnh thiết yếu của hầu hết Shopify cửa hàng. Nhưng nếu bạn đang sử dụng nhiều hình ảnh, việc điều chỉnh kích thước chính xác của tất cả các hình ảnh để chúng xuất hiện gọn gàng có thể là một cơn ác mộng. Để khắc phục điều này, chúng tôi đang xem xét img_url lọc. Giống như các bộ lọc khác, img_url được thiết kế để sửa đổi nội dung lấy từ Shopify máy chủ. Bạn có thể sử dụng bộ lọc này để thay đổi kích thước, tỷ lệ, định dạng và cắt xén hình ảnh.
Đây là một kỹ thuật tuyệt vời vì bộ lọc chỉ sửa đổi tạm thời một hình ảnh hiện có; nó không tạo hình ảnh mới mỗi lần để hiển thị mẫu của bạn, vì vậy nó sẽ không làm chậm thời gian tải trang web của bạn.
Vậy làm cách nào để thay đổi kích thước hình ảnh?
Đầu tiên, chúng ta cần quyết định nơi chúng ta muốn áp dụng những thay đổi. Bạn có thể áp dụng bộ lọc img_url tới bất kỳ đối tượng nào có thuộc tính hình ảnh, bao gồm:
- Sản phẩm
- Các biến thể sản phẩm
- Mục hàng
- Các hạng mục
- Bài viết
Sau khi bạn quyết định hình ảnh nào bạn muốn chỉnh sửa, bạn cần biết thuộc tính nào bạn muốn nhắm mục tiêu. Để tìm ra thuộc tính nào có thuộc tính hình ảnh, hãy xem Shopifydanh sách các đối tượng và các thuộc tính của chúng.
Trong ví dụ này, chúng tôi sẽ nhắm mục tiêu hình ảnh bài viết blog của mình.
Đây là mã cơ bản:
{{ blog.articles.image | img_url: ‘100×100' }}
Phá vỡ:
- Nhật Ký là đối tượng chúng tôi đang tìm kiếm và chúng tôi muốn thuộc tính bài viết, vì nó chứa tất cả các bài viết trong blog của chúng tôi. Cụ thể, chúng tôi muốn thay đổi hình ảnh trong các bài viết trên blog của mình, vì vậy chúng tôi đang nhắm mục tiêu hình ảnh thuộc tính trong bài viết.
- Bây giờ chúng tôi áp dụng bộ lọc img_url. Nếu chúng ta để nguyên như vậy, nó sẽ chỉ hiển thị một hình ảnh được lấy từ URL được cung cấp bởi Shopify máy chủ. Tuy nhiên, chúng tôi cũng sẽ đưa ra một tham số bổ sung: kích thước hình ảnh '100×100' (lưu ý rằng Shopify sử dụng pixel để xác định phạm vi kích thước).
- Cuối cùng, chúng tôi gói mã của mình bằng cú pháp dấu ngoặc kép Liquid, được sử dụng cho các bộ lọc.
Và chúng ta đã hoàn tất! Điều này sẽ trả về kết quả đầu ra cho tất cả hình ảnh trên blog của chúng ta, làm cho chúng có kích thước 100 x 100 pixel.
Lời khuyên và bài học
Tôi hy vọng rằng sau khi đọc bài viết này, bạn đã có câu trả lời cho câu hỏi: Thế nào là Shopify Chất lỏng?
Như bạn có thể thấy, Shopify Chất lỏng là một công cụ đa năng có thể phục vụ nhiều chức năng khác nhau khi thiết kế hoặc chỉnh sửa một Shopify bản mẫu. Mặc dù có một chút khó khăn trong quá trình học tập nhưng khi bạn đã quen với nó, nó khá dễ sử dụng – đặc biệt là so với các ngôn ngữ mã hóa phức tạp hơn khác như Javascript.
Nếu bạn quan tâm đến việc sử dụng Shopify Liquid, chúng tôi khuyên bạn nên làm theo những điều sau để tận dụng tối đa lợi ích của nó:
- Bắt đầu với sự hiểu biết vững chắc về Liquid: Hiểu biết sâu sắc về Liquid sẽ cho phép bạn xây dựng các chủ đề tùy chỉnh phức tạp hơn. Với nền tảng này, người dùng mới có thể tận dụng tối đa tiềm năng của Shopify để tạo ra các cửa hàng trực tuyến độc đáo và hấp dẫn.
- Kiểm tra chủ đề của bạn một cách kỹ lưỡng: Kiểm tra là điều cần thiết để đảm bảo chủ đề tùy chỉnh của bạn hoạt động như mong đợi trên các trình duyệt và thiết bị khác nhau. Bằng cách phát hiện sớm các vấn đề về khả năng tương thích, bạn sẽ tránh được sự thất vọng tiềm ẩn đối với khách hàng của mình.
- Sử dụng các công cụ và nguồn lực sẵn có: Shopify có sẵn rất nhiều tài nguyên để trợ giúp các nhà phát triển chủ đề, vì vậy hãy sử dụng chúng! Khi được sử dụng, điều này có thể làm cho quá trình phát triển nhanh hơn và dễ dàng hơn.
Với tất cả những điểm này, tôi nghĩ có thể an toàn khi nói rằng Shopify Liquid có thể là một cách thú vị và hiệu quả để cập nhật hoặc tạo ra một môi trường hấp dẫn và năng động hơn Shopify cửa hàng.
Đó là tất cả từ tôi; qua cho bạn. Hãy cho tôi biết về trải nghiệm của bạn với Shopify Chất lỏng trong các ý kiến dưới đây!
Nhận xét Responses 0