avatar Александр Шулепов Разработчик года


Разработка сайта “ВИС”

Задача

Патентное бюро «ВИС» – помогает зарегистрировать товарные знаки, патенты и авторские права. Компания регистрирует и сопровождает сделки по лицензии, франчайзингу и отчуждению интеллектуальной собственности.

Предыстория:

Поступил заказ на разработку корпоративного сайта патентного бюро “ВИС”.

Реализация проекта осуществлялась на CMS WordPress. Свои основные предпочтения по разработке проекта заказчик обозначил в брифе и более подробно далее в личной переписке.

На начальном этапе работы была разработка прототипа. Затем, с учетом предпочтений клиента, разработаны дизайны страниц: главной, внутренних, для мобильной версии сайта. На следующем этапе – верстка и натяжка на CMS WordPress. На заключительном этапе работы: программинг.

Решение

Общие работы, проведенные на сайте:

- Анализ конкурентов;
- Разработка дизайна;
- Разработка сайта;

Технические работы, проведенные на сайте:

- Подключение месенджеров;
- Слайдер;
- CSS анимация;
- Анимированное меню;
- Адаптивная верстка под мобильные устройства;
- Неограниченное кол-во разделов;
- Обратный звонок, задать вопрос;
- Фотогалерея;
- Выпадающее меню;
- Блог;
- Отзывы и многое другое.

Результат

Сложности, с которыми я столкнулся и как я их решал:

В ходе обсуждения дизайн-проекта с заказчиком выяснилось, что проект имеет очень сложную структуру, в частности раздел Услуги.

Каждая страница услуг имела свое собственное наполнение, не пересекаясь ни с одной страницей данного раздела, и единый шаблон в таком случае не подходил. Единственным правильным вариантом было отрисовать каждую страницы как отдельный лендинг со своим наполнением и некими общими блоками для разбивки информации. Поэтому страницы данного раздела делались через стандартный раздел Страницы WordPress и с использованием уникальных шаблонов для каждой, таким образом получилось избежать написания кастомного типа записи с множеством функций.

Следующей нестандартной задачей, с которой я столкнулся, было написание кастомного фильтра постов для Кейсов и Наших клиентов. Сложность разработки данного фильтра заключалась в нескольких моментах:

- Фильтр не имеет кнопки поиска, а значит при выборе одного поля уже отправляется запрос;
- Поля выбора фильтра это выпадающие списки, куда нужно передавать данные из разных разделов, а именно Услуги и Тематика;
- При отправке фильтр должен проверять, выбрано ли у поста одно из полей;

В ходе раздумий было 2 пути, которыми можно было решить данную задачу: это писать сложные функции связи для кастомных типов, чтобы соединить разные разделы, либо же прибегнуть к помощи плагина Advanced Custom Fields и создать поля выбора данных фильтра. Представив данные решения заказчику, был выбран второй вариант, так как проект делался в очень сжатые сроки и времени на разработку функций нестандартного плана не было бы времени.

После всех обсуждений я приступил к разработке функционала.

1.Создал поля для выбора данных фильтра и передал в них сразу нужные значения
(по такому же принципу было создано поле для Тематики)

2. После создания полей следующим этапом было написание функции поиска.


$meta_query = array('relation' => 'AND');


Выбираем тип отношения запроса.


if(isset($_GET['filter_service'])) {
$filter_service = sanitize_text_field( $_GET['filter_service'] );
$meta_query[] = array(
'key' => 'filter_service',
'value' => $filter_service,
'compare' => '='
);}


Получаем значения полей фильтра.


$args = array(
'post_type' => 'cases',
'posts_per_page' => -1,
'meta_query' => $meta_query,
);
$search_query = new WP_Query( $args );


После передаем все значения в сам запрос, тут важно уметь работать с аргументами запроса wp_query, так как при ошибочном написании поиск будет отрабатывать некорректно.

3. Итак, поиск написан, но первым важным аргументом было то, что форма не имеет кнопки поиска, а это значит, что нужно получать данные из полей при изменении одного из них. При таких условиях без технологии Ajax не обойтись. Функция первым делом проверяет изменение полей формы, и если форма изменяется, то нам нужно перевести данные в переменные.


if(mafsForm.find("#filter_service").val().length !== 0) { var filter_service = mafsForm.find("#filter_service").val()


После того, как значения получены, необходимо передать их в переменную data, которая, в свою очередь, будет уже передаваться непосредственно в Ajax. Как только все значения имеются, пишем финальную функцию с проверкой запроса.


$.ajax({
url : ajaxurl,
data : data,
success : function(response) {
mafs.find("#ajax_filter_search_results").empty();
});


Так было сокращено время на разработку и решения задачи с фильтром постов, который работает на основании проверки полей ACF.

Клиент остался полностью доволен выполненным проектом.
Для более глубокого изучения проекта, просьба ознакомится с ним на моем сайте https://shulepov-code.ru/portfolio/razrabotka-sajta-vis/ т.к. там имеется более логическое разбиение и описание проекта.

Примеры реализации(ссылки)

https://patenty.ru
https://shulepov-code.ru/portfolio/razrabotka-sajta-vis/
https://www.behance.net/gallery/125105923/VIS?tracking_source=project_owner_other_projects
https://www.youtube.com/watch?v=_6mkjkoT-88

1629278262.png 1629283199.jpg 1629283219.jpg 1629283245.jpg 1629283288.jpg 1629283374.jpg 1629283398.jpg 1629283451.jpg 1629283470.jpg 1629283491.jpg