Gần đây, chúng ta đã biết cách tạo trang Câu hỏi thường gặp cho cửa hàng trực tuyến 2.0. Bây giờ, hãy tìm hiểu cách tạo phần Câu hỏi thường gặp mà bạn có thể sử dụng lại bao nhiêu lần tùy ý.
Bắt đầu
Trước khi bắt đầu hướng dẫn này, chúng tôi muốn đề cập rằng chúng tôi sẽ sử dụng chủ đề Shopify miễn phí Dawn do Shopify tạo. Nếu bạn đang sử dụng một chủ đề Shopify khác, đừng ngạc nhiên khi chủ đề của bạn trông khác chủ đề của tôi. Vì vậy, nếu bạn đang gặp sự cố với đàn accordions, thì đó có thể là do chủ đề Shopify và CSS của chủ đề đó.
Hãy bắt đầu hướng dẫn này bằng cách mở trình chỉnh sửa mã của chủ đề.
Truy cập Cửa hàng trực tuyến và chọn Chủ đề .
Sau đó, trong thẻ chủ đề Shopify bạn chọn, hãy nhấp vào nút Hành động và chọn Chỉnh sửa mã .
Thao tác này sẽ mở trình chỉnh sửa mã của chủ đề Shopify. Bây giờ, đã đến lúc thực hiện phần này!
Tạo phần Câu hỏi thường gặp
Đối với phần Câu hỏi thường gặp này, chúng ta sẽ cần tạo ra hai (2) tệp mới:
- Trong thư mục: sections tạo tệp faq.liqiud
Nhấn save.
2. Tương tự trong thư mục Assets tạo tệp faq-stylesheet.css
Xong nhấn Done.
Thêm Code cho 2 tệp vừa tạo
Mở 2 tệp vừa tạo ở trên: faq.liquid và faq-stylesheet.css
Hãy sao chép đoạn mã sau và dán vào đó. Xong save lại.
- Đối với tệp faq.liquid
<link rel="stylesheet" href="{{ 'faq-stylesheet.css' | asset_url }}" media="print" onload="this.media='all'">
<div class="page-width page-width--narrow">
<h1 class="main-page-title page-title h0">
{{ section.settings.faq_title | escape }}
</h1>
{% if section.settings.faq_description %}
<div class="rte faq-description">
{{ section.settings.faq_description }}
</div>
{% endif %}
<div class="faq-container">
<div class="tabs">
{% for block in section.blocks %}
{% assign item = block.settings %}
<div class="tab">
<input type="checkbox" id="faq_checkbox_{{ forloop.index }}" class="faq-checkbox">
<label for="faq_checkbox_{{ forloop.index }}" class="tab-label button button--primary">{{ item.question }}</label>
<div class="tab-content">{{ item.answer }}</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% schema %}
{
"name": "FAQ",
"tag": "section",
"class": "spaced-section",
"settings": [
{
"type": "text",
"id": "faq_title",
"default": "Frequently Asked Questions",
"label": "Title"
},
{
"type": "text",
"id": "faq_description",
"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"label": "Description"
}
],
"blocks": [
{
"name": "FAQ Item",
"type": "faq",
"settings": [
{
"type": "text",
"id": "question",
"label": "Question",
"default": "Do you have a question?"
},
{
"type": "richtext",
"id": "answer",
"label": "Answer",
"default": "<p>I have an answer</p>"
}
]
}
],
"presets": [
{ "name": "FAQ Block" }
]
}
{% endschema %}2. Đối với tệp faq-stylesheet.css
.wp-block-code{border:0;padding:0}.wp-block-code>div{overflow:auto}.shcb-language{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal;word-break:normal}.hljs{box-sizing:border-box}.hljs.shcb-code-table{display:table;width:100%}.hljs.shcb-code-table>.shcb-loc{color:inherit;display:table-row;width:100%}.hljs.shcb-code-table .shcb-loc>span{display:table-cell}.wp-block-code code.hljs:not(.shcb-wrap-lines){white-space:pre}.wp-block-code code.hljs.shcb-wrap-lines{white-space:pre-wrap}.hljs.shcb-line-numbers{border-spacing:0;counter-reset:line}.hljs.shcb-line-numbers>.shcb-loc{counter-increment:line}.hljs.shcb-line-numbers .shcb-loc>span{padding-left:.75em}.hljs.shcb-line-numbers .shcb-loc:before{border-right:1px solid #ddd;content:counter(line);display:table-cell;padding:0 .75em;text-align:right;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;width:1%}
.faq-description {
margin-top: 2em;
margin-bottom: 2em;
}
.faq-checkbox {
position: absolute;
opacity: 0;
z-index: -1;
}
.tabs {
overflow: hidden;
}
.tab {
width: 100%;
color: white;
overflow: hidden;
margin-bottom: 12px;
}
.tab-label {
width: 100%;
display: flex;
justify-content: space-between;
padding: 1em;
font-weight: bold;
}
.tab-content {
max-height: 0;
padding: 0 1em;
background-color: #eeeeee;
transition: all 0.5s ease;
color: black;
}
.tab-content p {
margin: 0;
}
.faq-checkbox:checked ~ .tab-content {
max-height: 100vh;
padding: 1em;
}Bây giờ, Nếu bạn mở trình chỉnh sửa chủ đề của mình (Online Store > Themes >Customize), bạn sẽ có thể thêm các khối Câu hỏi thường gặp bằng cách nhấp vào nút Thêm phần như bên dưới.
Kết luận
Bạn vừa tạo khối Câu hỏi thường gặp (FAQ). Giờ đây, bạn sẽ có thể tạo thêm phần Câu hỏi thường gặp ở mọi nơi trên website của bạn, miễn là tệp mẫu đang sử dụng có chứa đoạn code trên. Tuy nhiên, có một vài vấn đề trong phần FAQ này, cụ thể là kiểu dáng, màu sắc của nó. Trong bài này, chúng tôi chưa sử dụng bất kỳ kiểu dáng nào cho các nút và nhãn của nó. Kiểu dáng, màu sắc của nó bạn có thể chỉnh sửa chi tiết qua tệp faq-stylesheet.css
