Поддержка и доработка интернет-магазина сумок и аксессуаров Modnotak.com.ua

О проекте Modnotak.com.ua

Modnotak.com.ua — интернет-магазин сумок, кошельков, ремней, рюкзаков и аксессуаров. Каталог объединяет товары разных поставщиков, а работа магазина связана с несколькими складами, закупками, рекламными выгрузками и обработкой заказов в административной части.

Сопровождение Quadro-Design охватило оформление главной страницы и поиска, задачи одностраничного заказа, фильтрации, складских статусов, закупок и технического SEO. Особое внимание уделялось согласованности данных: покупатель должен видеть понятное наличие и правильную цену, а сотрудник магазина — различать похожие товары по артикулу и изображению.

Проект

Modnotak.com.ua.

Тематика

Сумки, кошельки, ремни, рюкзаки и аксессуары.

Платформа

Webasyst и Shop-Script; в исходных материалах указан Shop-Script 8.

Формат работ

Техническая поддержка, программирование, вёрстка и доработка взаимодействия плагинов.

Основные компоненты

«Заказ на одной странице», «Поиск PRO», «Закупки», «Уведомить о поступлении товара», «Спецпредложения», facebookpro и googlemc.

Задачи сопровождения

• Адаптировать главную страницу после отключения бокового каталога.
• Привести форму Поиска PRO к оформлению темы и сделать подсказки удобнее.
• Разобрать зависающие индикаторы загрузки при выборе доставки.
• Настроить отображение характеристик с учётом конкретной категории.
• Различать подтверждённое наличие и остаток, который необходимо уточнять у поставщика.
• Согласовать поступление товаров через «Закупки» с уведомлениями подписанных покупателей.
• Упростить подбор товаров и работу с закупочными документами.
• Устранить расхождения цен в мини-корзине и статусов наличия в рекламных выгрузках.
• Нормализовать адреса категорий и пагинации, сохранив особенности существующего оформления.

Доработка главной страницы без бокового каталога

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

В исходных записях отмечены как выполненные следующие изменения:

• Переработан верхний слайдер с учётом освободившегося места.
• Выведены товарные слайдеры, отсутствовавшие в версии без боковой панели.
• Добавлен блок публикаций из блога.
• Описание магазина расположено по центру страницы без сайдбара.
• Убран прежний блок новостей в соответствии с согласованной композицией.

Для верхнего слайдера заказчик предоставил внешний пример оформления. Изменения выполнялись в рамках существующей темы магазина.

Одностраничное оформление заказа и доставка «Новая Почта»

Оформление заказа использовало плагин «Заказ на одной странице» — onestep. При выборе доставки «Новая Почта», города и отделения возле других способов доставки появлялись вращающиеся индикаторы загрузки, которые не исчезали.

Изменение данных запускает пересчёт вариантов доставки в одностраничной форме. Задача заключалась в диагностике завершения этого пересчёта и корректного обновления интерфейса.

• Проверить сценарий выбора города.
• Проверить выбор отделения или адреса доставки.
• Разобрать появление индикаторов возле самовывоза и курьерской доставки после выбора «Новой Почты».
• Обеспечить завершение индикации после обработки данных.
• Сохранить необходимый пересчёт условий и стоимости доставки при изменении заказа.

В материалах к задаче также был приложен настольный отчёт PageSpeed Insights как ориентир технической диагностики. Подтверждённые показатели ускорения в исходных записях не приведены.

Характеристики товаров с учётом категории

Один товар может одновременно находиться в нескольких категориях. Например, универсальный ремень подходит и мужчинам, и женщинам, а его характеристики общие для обеих страниц каталога.

Из-за этого значение «Для платья», обозначенное в постановке как «Под платья», появлялось также в категории мужских ремней. Требовалось управлять видимостью отдельных значений характеристики для конкретной категории.

В примере использовалась характеристика «Тип ремня» с идентификатором tip_remnya и выбором нескольких значений. Среди них — «Для джинсов», «Брючные», «Универсальные», «Для костюма», «Для платья», «Пояс» и «Джинсовый (casual)».

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

Числовой фильтр объёма и существующая вёрстка

В магазине ранее была внедрена особенность размещения описания категории: в HTML оно находится сразу после H1, а визуально выводится внизу страницы. Заказчик прямо указал сохранить оба положения.

После добавления характеристики «Литраж (л)» с идентификатором litrazh_l, числовым значением объёма и ползунком появились две проблемы:

• Нарушилось расположение полей в блоке фильтра «Цена».
• Описание категории стало накладываться на товарные блоки, в том числе на область просмотренных товаров и элементы нижней части каталога.

В задачу вошло исправление этих пересечений и согласование вёрстки диапазонов цены и объёма. При этом порядок описания в HTML и его визуальное расположение внизу требовалось оставить прежними.

Складские статусы и наличие у поставщика

Магазин использовал несколько физических складов и виртуальный склад «На складе». В исходной схеме физические склады были скрыты на витрине:

• «Главный склад офиса».
• «Витрина офиса».
• «Поставщик-Склад (Товары под заказ)».
• «Наличие уточнить у поставщика!».
• «Недостача».

Для части поставщиков актуальность остатков требовала дополнительного подтверждения. Положительное или бесконечное учётное значение на специальном складе не должно автоматически восприниматься покупателем как подтверждённое наличие.

Точное условие статуса «Наличие уточняйте»

Исключение должно применяться только при выполнении обоих условий. Наличие товара на другом складе не относится к этому специальному сценарию.

В предоставленной схеме также учитывались обновление остатков при оформлении заказа и ограничение количества товара в корзине доступным учётным остатком.

Нулевой остаток в рекламных фидах

Для выгрузок использовались плагины facebookpro и googlemc. В обоих была включена настройка «Выгружать товары с нулевым остатком».

Проблема заключалась в передаваемом статусе: отсутствующие товары попадали в фид как «in stock», из-за чего рекламные объявления представляли их доступными.

• Сохранить предусмотренную выгрузку позиций с нулевым остатком.
• Для таких позиций передавать статус отсутствия — «out of stock».
• Проверить формирование статуса отдельно в каждом из двух плагинов.
• Согласовать информацию рекламной выгрузки с данными магазина.

Эта задача отличается от специального статуса «Наличие уточняйте»: здесь требовалось исправить обозначение отсутствующего товара в рекламных данных.

Плагин «Закупки» и уведомления о поступлении

Уведомление после оприходования товара

В магазине использовался плагин «Уведомить о поступлении товара». Однако после прихода товара на склад через «Закупки» уведомление подписанному покупателю не отправлялось.

По объяснению автора плагина уведомлений, операция поступления не вызывала необходимые события изменения товара — product_save и/или product_mass_update. Поэтому связанное расширение не получало сигнал об изменении наличия.

В задачу вошла доработка взаимодействия плагинов:

• Проверить изменение остатков при оприходовании через «Закупки».
• Обеспечить вызов соответствующих событий Shop-Script при этой операции.
• Передать связанным расширениям сведения об изменении товара и остатков.
• Обеспечить запуск уведомления при поступлении товара, на который подписан покупатель.

Сохранение продажной цены в непроведённом документе

В «Закупках» продажная цена редактировалась в проведённом документе типа «Накладная». При предварительном изменении цены в непроведённом документе типа «Заказ» нажатие «Сохранить» возвращало прежнее значение.

В исходном интерфейсе «Заказ» являлся запросом поставщику, а «Накладная» — документом поступления. Колонка закупочных цен уже сохраняла изменения корректно; аналогичного поведения требовалось добиться для продажной цены.

Сортировка закупки по артикулу

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

Поставлена задача сортировки по текстовому коду артикула, чтобы варианты с близкими обозначениями находились рядом. В качестве примера использовалась сортировка Excel «От А до Я».

Дополнительным ориентиром в задании была сортировка раздела «Товары» Shop-Script 8; заказчик ссылался на обновление 8.4.3.12 от 21 мая 2019 года. Эта ссылка относится к историческому образцу поведения.

Доработки административной части магазина

SKU и миниатюра при подборе товара в заказ

При создании заказа в административной части сотруднику требовалось видеть не только название найденного товара, но и его SKU и миниатюру изображения.

• Дополнить результаты подбора кодом артикула.
• Добавить миниатюру рядом с названием.
• Упростить различение похожих товаров и вариантов.
• Использовать интерфейс подбора в «Закупках» как образец.

Отдельное требование заказчика — доработка должна сохраняться при обновлении движка Shop-Script.

Изменение валюты уже созданного заказа

В исходном интерфейсе валюта выбиралась при создании заказа. Заказчик поставил вопрос о возможности менять её в административной части после оформления.

На предоставленном примере использовались UAH и USD. Требовалось расширить работу с существующим заказом, чтобы выбор валюты был доступен и на этапе последующего редактирования.

Скидки «Спецпредложений» во всплывающей корзине

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

В предоставленном примере цена со скидкой составляла 409 грн, а во всплывающем блоке оставалась стоимость 454 грн. Это исторический пример расхождения интерфейсов из задания.

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

Для сравнения заказчик привёл товар с обычной зачёркнутой ценой: этот сценарий уже отображался правильно. Поэтому задача касалась учёта скидок расширения «Спецпредложения» в мини-корзине.

Адаптация Поиска PRO к оформлению магазина

После установки «Поиска PRO» его форма отличалась от существующего оформления темы. Требовалось вернуть согласованный внешний вид и доработать выпадающие результаты.

Изменения формы и подсказок

В исходных записях отмечены выполненные правки:

• Форма поиска приведена к оформлению темы магазина.
• Между результатами добавлены разделители.
• Длинные названия переносятся на вторую строку вместо обрезания.
• Совпадающая часть поискового запроса выделена цветом #e84e0e.
• В нижней части подсказок добавлены действия «Показать все» и «Закрыть поиск».

Для проверки длинных названий использовался запрос «Кошелёк». В предоставленных образцах форма имела скруглённое оформление и элементы управления поиском, а ссылка «Показать все» сопровождалась количеством результатов.

Дополнительным уточнением было размещение «Показать все» и закрытия поиска на одном уровне. В образцах действие закрытия также называлось «Убрать поиск».

Отложенная задача полной страницы результатов

Заказчик описал желаемое оформление полной страницы поиска по примеру страницы бренда KARYA:

• Хлебные крошки.
• Заголовок H1.
• Сортировка товаров.
• Навигация по категориям.
• Фильтрация по параметрам.
• Согласованное оформление товарной сетки.

Перед возможной доработкой требовалось проверить работу фильтра, поскольку заказчик сообщал о сбое. Однако этот пункт прямо помечен «НЕ ТРОГАЕМ» и «пока не нужно», поэтому он учитывается как отложенное направление, а не выполненный этап.

Отложенное изменение индексации поиска

В документе также описано требование выводить для страниц «Поиска PRO»:

<meta name="robots" content="noindex, follow">

В качестве ориентира приведён прежний условный вывод для SearchSmart. В старом примере учитывались действие searchsmart, дополнительные параметры категории без пагинации с исключением SEO-фильтра и наличие параметра query.

Перенос правила на новый поиск требовал уточнения места внедрения. Последнее указание по этому пункту — «НЕ ТРОГАЕМ», поэтому применение нового правила не включается в подтверждённые результаты.

Техническое SEO и нормализация адресов

301-редиректы для повторяющихся слешей

Поставлена задача перенаправлять адреса с лишними слешами на соответствующие корректные страницы. Для адреса категории и параметра пагинации требовались разные правила обработки.

• Для категории оставить один завершающий слеш.
• Для значения параметра page убрать ошибочные завершающие слеши.
• Сохранить номер страницы пагинации.
• Использовать постоянное перенаправление 301.

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

Историческое задание на микроразметку поисковой строки

В отдельное SEO-задание входило добавление структурированных данных поисковой строки для отображения Sitelinks Search Box в результатах Google. Заказчик предоставил пример ALLO.ua, ссылку на документацию Google и обсуждение реализации на форуме Webasyst.

После внедрения предусматривалась проверка структурированных данных на ошибки.

Этот пункт сохранён как историческая задача проекта: Google прекратил показ Sitelinks Search Box с 21 ноября 2024 года. Он не описывается как действующая возможность получить поисковую строку в современной выдаче.

Подтверждённые изменения и дальнейшие направления

В исходных записях подтверждено выполнение изменений главной страницы без сайдбара и основных правок формы Поиска PRO: оформления, разделителей, переноса длинных названий, выделения запроса и дополнительных действий в подсказках.

Остальные направления подробно представлены в заданиях: складские статусы, рекламные фиды, взаимодействие закупок с уведомлениями, сохранение продажных цен, сортировка по SKU, данные товара в административном заказе, изменение валюты, скидки мини-корзины, редиректы и исправление вёрстки категорий. Для них отдельные отметки о завершении в предоставленных записях отсутствуют.

Задачи полной страницы результатов поиска и нового правила индексации имеют прямое указание отложить изменения. Они отражают возможное развитие проекта и сохраняются отдельно от выполненных работ.

Нужна поддержка интернет-магазина на Webasyst?

Quadro-Design помогает дорабатывать магазины на Shop-Script: адаптировать тему и поиск, согласовывать работу плагинов, исправлять оформление заказа, настраивать обработку складских данных и развивать административные инструменты.

Программирование для Webasyst и Shop-Script · Другие проекты по доработке интернет-магазинов