Страницы часто задаваемых вопросов? Функция, о которой просят большинство моих клиентов, похоже, всем нравится.
Без сомнения, хорошо адаптированная страница часто задаваемых вопросов имеет большое значение и потенциально может уменьшить объем поддержки клиентов, необходимой для вашего веб-сайта, и в целом сделать ваших клиентов счастливыми.
Лично я нахожу очень интересным, что большинство разработчиков тем Shopify практически не тратят время на разработку динамических разделов часто задаваемых вопросов для шаблонов. Итак, как разработчик, я начал создавать свои собственные страницы часто задаваемых вопросов по старинке с помощью HTML и CSS.
Но давайте смотреть правде в глаза, никто не любит выполнять утомительную и повторяющуюся работу. Я имею в виду, что вы можете потратить это время на что-то еще, кроме этого.
Именно поэтому я создал этот динамический шаблон страницы часто задаваемых вопросов, который позволяет пользователю/покупателю загружать свои вопросы прямо из панели настройки Shopify.
Когда я говорю хорошо сделанная страница часто задаваемых вопросов, я имею в виду классический аккордеонный дизайн, который всем нравится, вы знаете какой :)
Итак, давайте погрузимся прямо в него!
— для этого руководства требуются базовые знания HTML, CSS и Liquid (но не волнуйтесь, я буду упрощать)
Обратите внимание, я использую бесплатную тему Narrative, которую предоставляет Shopify. Это, скорее всего, будет работать и с другими темами. Если это не так, дайте мне знать, и я сделаю все возможное, чтобы помочь вам :)
Шаг 1 — Загрузить файлы
В этом упражнении мы будем использовать функцию jQuery Accordion.
📥 Загрузите ZIP-файлы необходимых ресурсов или (альтернативная ссылка здесь)
Перейдите в Интернет-магазин → Темы → Изменить код
В разделе Активы скопируйте содержимое ZIP-файла.
Шаг 2 — Создайте раздел часто задаваемых вопросов
Перейдите в «Интернет-магазин» -> «Темы» -> «Редактировать код»
На вкладке «Разделы» создайте новый файл — назовем его просто: faq.liquid
{% for block in section.blocks %}
{% if block.type == ‘header’ %}
<h3 class=”faq-header”>{{block.settings.header}}</h3>
{% else %}
<div class=”accordion” id={{id}}>{{block.settings.question}}<span></span></div>
<div class=”container”>
<div class=”content”>
<div>{{block.settings.answer}}</div>
</div>
</div>
{% endif %}
{% endfor %}
{% schema %}
{
“name”: “FAQ”,
“class”: “index-section index-section — featured-sider”,
“settings”: [
],
“blocks”: [
{
“type”: “slide”,
“name”: “Question”,
“settings”: [
{
“type”: “header”,
“content”: “Question Item”
},
{
“type”: “number”,
“id”: “id”,
“label”: “id — integer”
},
{
“type”: “text”,
“id”: “question”,
“label”: “Question — text”
},
{
“type”: “html”,
“id”: “answer”,
“label”: “Answer — html”
}
]
},
{
“type”: “header”,
“name”: “Header”,
“settings”: [
{
“type”: “header”,
“content”: “Header”
},
{
“type”: “text”,
“id”: “header”,
“label”: “Header”
}
]
}
]
}
{% endschema %}
Шаг 3 — Создайте шаблон страницы часто задаваемых вопросов
Перейдите в «Интернет-магазин» -> «Темы» -> «Редактировать код»
На вкладке «Шаблоны» создайте новый файл — назовите его: page.faq.liquid
В этом шаблоне мы хотим рендерить все, что мы хотим отобразить на странице часто задаваемых вопросов.
Для простоты мы будем отображать только раздел часто задаваемых вопросов:
<div class=”page-width”>
<header class=”section-header text-center”>
<h1 class=”section-header__title h2">{{ page.title }}</h1>
</header>
<div class=”breadcrumbs”>
{% render ‘breadcrumbs’ %}
</div>
<div class=”grid”>
<div class=”grid__item medium-up — four-fifths medium-up — push-one-tenth”>
<div class=”rte”>
{{ page.content }}
<div class=”faqpage”>
{% section “faq” %}
</div>
</div>
</div>
</div>
<script src=”{{ ‘jquery_3.4.1.js’ | asset_url }}” type=”text/javascript”></script>
<script type=”text/javascript” src=”{{ ‘jquery_accordion.js’ | asset_url }}”></script>
<script type=”text/javascript”>
(function($){
$(document).ready(function() {
$(‘.accordion’).accordion({
defaultOpen: ‘1’,
cookieName: ‘accordion_nav’
});
});
})(jQuery);
</script>
Шаг 4 — Стиль аккордиона
Теперь, когда у нас есть механика, давайте добавим несколько стилей.
— стили ниже приведены только в качестве рекомендаций, пожалуйста, не стесняйтесь изменять их в соответствии со стилями вашего веб-сайта
Перейдите в Интернет-магазин -> Темы -> Изменить код
Найдите файл theme.scss и добавьте указанный ниже код в самый низ файла.
.accordion {
margin: 0;
padding:10px;
border-top:#f0f0f0 1px solid;
background: #e8e8e8;
text-decoration:none;
color: $color-body-text;
font-size:1em;
position:relative;
}
.accordion-open {
background:$settings-color-primary;
color: $color-body-text;
}
.accordion-open span {
display:block;
position:absolute;
right:3px;
top:25%;
padding:10px;
}
.accordion-open span {
background:url(‘{{ ‘minus.png’ | asset_url }}’) center center no-repeat;
}
.accordion-close span {
display:block;
position:absolute;
right:3px;
top:25%;
background:url(‘{{ ‘plus.png’ | asset_url }}’) center center no-repeat;
padding:10px;
}
.faq-header {
margin:3rem 0 1rem 0!important;
}
.faqpage div.container {
padding:0;
margin:0;
}
.faqpage div.container {
max-width:100%;
padding:5px 0;
}
.faqpage div.content {
background:#f4f4f4;
margin: 0;
padding:10px;
font-size:.9em;
line-height:1.5em;
}
.faqpage div.content ul {
padding:0;
margin:0;
padding:3px;
}
.faqpage div.content p {
padding:0;
margin:3px 0 10px;
padding:3px;
}
.faqpage div.content ul li {
list-style-position:inside;
line-height:25px;
✨ Вуаля! теперь у вас есть динамическая страница часто задаваемых вопросов для вашего магазина Shopify.
Следующий шаг — создать новую страницу и применить к ней шаблон часто задаваемых вопросов, затем, если вы перейдете к настройке этой страницы, вы сможете создать новые разделы часто задаваемых вопросов для своей страницы часто задаваемых вопросов, как показано ниже.
Я надеюсь, вам понравится это руководство, дайте мне знать, как оно у вас получается!
