Chỉnh sửa giao diện

Để sử dụng được cái thiết lập giao diện, bạn cần chỉnh sửa các template, các tập tin CSS và js để có thể kết nối được với các thiết lập giao diện có trong setting_schema.json

• Kết nối với các thiết lập nhập liệu
• Các trường hợp đặc biệt

Kết nối với các thiết lập nhập liệuAnchor link for: kt ni vi cc thit lp nhp liu

Để truy cập các giá trị của settings_schema.json trong template Liquid và css, bạn cần làm như sau

• Thêm thuộc tính id vào đối tượng setting
• Chỉnh sửa tên tập tin

Thêm thuộc tính id vào đối tượng settingAnchor link for: thm thuc tnh id vo i tng setting

Để kết nối thiết lập bạn đã thêm vào setting_schema.json bạn cần thêm thuộc tính id của thiết lập vào mỗi đối tượng setting tương ứng

Ví dụ bạn có một thiết lập nhập text trong setting_schema.json như sau,]:

{ "type": "text", "id": "sales_text", "label": "Your Company SubHeader", "default": "Buy Now!", "info": "Use this field to add a subheader to your shop", },

Giá trị nhập vào của thiết lập này có thể được gọi ra trong các template Liquid bằng cách sử dụng

{{ settings.sales_text }}

Chỉnh sửa tên của tập tinAnchor link for: chnh sa tn ca tp tin

Để các tập tin css và js có thể truy cập đến các đối tượng setting, bạn cần thêm đuôi .bwt vào tên các tập tin đó.

Ví dụ nếu bạn có một tập tin là style.css thì cần sửa thành style.css.bwt

Các trường hợp đặc biệtAnchor link for: cc trng hp c bit

You should be aware of some special cases for handling certain setting selections:

• None
• Non-existent or hidden

Xử lý trường hợp thiết lập không được lựa chọnAnchor link for: x l trng hp thit lp khng c la ch

Giao diện sẽ ít khi gọi ra một trang , blog hay một danh mục sản phẩm cố định nào đó mà sẽ được gọi ra theo thiết lập từ Thiết lập giao diện

Ví dụ bạn không nên sử dụng

{% for product in collections.trang-chu.products %} {% include 'product-grid-item' %} {% endfor %}

Thay vào đó hãy gọi ra nội dung cần sử dụng theo đối tượng setting

{% for product in collections[settings.san_pham_trang_chu].products %} {% include 'product-grid-item' %} {% endfor %}

Chú ý rằng trong thiết lập nhập liệu có thể có lựa chọn "Không chọn"

Việc này sẽ trả về một chuỗi là None, mặt khác, trả về một chuỗi rỗng trong setting_data.json

"san_pham_trang_chu": "",

Để xác định xem thiết lập cho trang, blog, hay bộ sưu tập sản phẩm nào, so sánh thuộc tính của đối tượngsetting với blank

{% if settings.san_pham_trang_chu == blank %} <!-- Người dùng không muốn thêm nội dung ở đây. san_pham_trang_chu được lựa chọn là Không chọn. --> {% endif %}

Tương tự

{% unless settings.fp_page == blank %} {% assign page = pages[settings.san_pham_trang_chu] %} <h1>{{ page.title }}</h1> <div>{{ page.content }}</div> {% endunless %}

Ví dụ sau sẽ không hoạt động vì, chuỗi rỗng cũng được coi là true trong Liquid. Nếu settings.san_pham_trang_chu là một chuỗi rỗng, nên {% if settings.san_pham_trang_chu %} sẽ là đúng, kết quả là một yếu tố rỗng trên trang

Input

{% if settings.san_pham_trang_chu %} {% assign page = pages[settings.san_pham_trang_chu] %} <h1>{{ page.title }}</h1> <div>{{ page.content }}</div> {% endif %}

Output

<h1></h1> <div></div> 

Xử lý trường hợp thiết lập gắn với nội dung không tồn tại hoặc ẩnAnchor link for: x l trng hp thit lp gn vi ni dun

Sẽ xảy ra trường hợp thiết lập giao diện được thiết được thiết lập đến một nội dung nào đó sau đó nội dung đó bị xóa hoặc ẩn đi (giao diện sẽ nhận nội dung bị ẩn như là nội dung không tồn tại)

Ví dụ

"fp_page": "frontpage", 

Sau đó trang nội dung frontpage bị xóa hoặc ẩn đi, bạn có thể kiểm tra việc này bằng cách

{% unless settings.fp_page == blank or pages[settings.fp_page].empty %} {% assign page = pages[settings.fp_page] %} <h1>{{ page.title }}</h1> <div>{{ page.content }}</div> {% endunless %}

Trước khi gọi ra textAnchor link for: trc khi gi ra text

Kiểm tra chắc chắn rằng nội dung không rỗng

{% unless settings.fp_heading == blank %} <h1>{{ settings.fp_heading }}</h1> {% endunless %} 

Bạn có thể ép sử dụng text bằng cái gán mặc định

<h1>{{ settings.fp_heading | default: 'Featured' }}</h1>

Nếu settings.fp_heading rỗng, sẽ trả về 'Featured', ngược lại trả về nội dung từ thiết lập giao diện nếu có

Trước khi gọi ra nội dungAnchor link for: trc khi gi ra ni dung

Trước khi xuất ra nội dung của một trang, hãy kiểm tra trang đó có tồn tại và có nội dung không

{% unless settings.fp_page == blank or pages[settings.fp_page].empty? or pages[settings.fp_page].content == blank %} {% assign page = pages[settings.fp_page] %} <h1>{{ page.title }}</h1> <div>{{ page.content }}</div> {% endunless %}

Trước khi gọi ra danh mục sản phẩmAnchor link for: trc khi gi ra danh mc sn phm

Kiểm tra danh mục sản phẩm có tồn tại hay không

{% unless settings.fp_collection == blank or collections[settings.fp_collection].empty %} {% assign collection = collections[settings.fp_collection] %} {% for product in collection.products %} {% include 'product-grid-item' %} {% else %} <p>You have selected in your {{ 'Customize theme page' | link_to: '/admin/themes/current/settings' }} the collection {{ collection.title }} to be featured here, but that collection is empty! Go add some products to {{ 'your collection' | link_to: '/admin/collections' }}, or pick another collection.</p> {% endfor %} {% endunless %}