Разработка «Теплицы Люкс»
Предыстория
У «Теплицы Люкс» был свой сайт, он на WordPress, но с использованием плагина Elementor. Этот плагин, несмотря на свои удобства для рядового пользователя, имеет весомые минусы. Среди них – отсутствие возможности внести новый функционал, а также наличие большого количества лишнего кода, который в свою очередь увеличивает «вес» сайта, а это уже сказывается на скорости загрузки страниц.
Другими проблемами были запутанная с годами структура сайта и устаревший дизайн.
Описание этапов работы
После утверждения заказчиком нового дизайна я принялся за работу. Решено было делать сайт на WooCommerce. Из основных моментов были две интересные задачи – заказчик хотел иметь на своем сайте возможность переключения между светлой и темной темами, а также нужно перенести квиз со старого сайта, который на Elementor на новый сайт с минимальными изменениями.
В качестве цвета темы по умолчанию была выбрана светлая. Для реализации переключения на темную тему я создал отдельный css-файл со стилями и подключил его в футере:
<link href="<?php echo get_template_directory_uri() ?>/dark.css" rel="stylesheet">
В самом файле я переопределял значения свойств под темную тему. Пример:
Переключатель тем находится в хедере и отображается соответствующими иконками.
В JavaScript-файл был добавлен небольшой скрипт, который помогает пользователю переключать темы, а также сохраняет выбранную тему в localStorage и при повторном заходе на сайт сразу включает именно ее.
Для реализации квиза я использовал плагин Contact Form 7. Идея была следующей – есть несколько экранов, все экраны скрыты кроме первого, на каждом экране была кнопка далее и назад (на первом экране кнопки назад нет, а на последнем экране только кнопка Рассчитать стоимость), при нажатии на соответствующую кнопку текущий экран скрывался, а другой открывался. На каждом экране нужно было выбрать ответ из чекбоксов, радио-кнопок или вписать ответ вручную. На последнем этапе собирается информация о пользователе – телефон, и отправляется заказчику на почту. Пример кода в плагине Contact Form 7:
Небольшой скрипт в JavaScript-файле, описывающий работу кнопок:
После того как сайт был готов, заказчик проверил его и одобрил. Осталось перенести весь каталог, блог и прочую информацию со старого сайта.
В данный момент заказчик не выложил новый сайт на хостинг в связи с сезонной активизацией бизнеса. Переезд на новый сайт ожидается осенью 2023 года.
