MagiJewelry

MagiJewelry продаёт украшения из серебра 925 пробы, которые подбирают по знаку зодиака, камню и числу судьбы. Магазин работает на OpenCart 4 с темой прежнего подрядчика: шаблоны подменяются через события, скрипты грузит собственная система отложенной загрузки, HTML страниц лежит в кэше, товары и остатки приходят из 1С.

Задача — развивать витрину и поиск, не останавливая продажи, и сделать устройство магазина понятным. Работу начали с аудита на 26 задач и ввели правило: любое изменение сначала видно только по флагу предпросмотра и попадает на сайт после согласования с владельцем.

Фирменный стиль оставили как есть: изумрудный, глубокий зелёный и розовый, заголовки капителью Raleway, акцентный шрифт Forum в баннерах. Новые блоки — карточки, фильтр, обложки — собраны из той же палитры и шрифтов, чтобы правки не выглядели заплатками.

Раздел, карточку товара и фильтр пересобрали для телефона. В списке цена стоит над названием, вместо кнопки «Купить» — иконка сумки, бейдж один и по фактам: «Скидка» — только при реальной акции, «Хит» — по продажам. Товары в разделе начинаются на 291 px от верха экрана вместо 419, карточка стала ниже на 119 px.

В карточке товара выбор размера стоял ниже кнопки «В корзину» — теперь над ней. Добавили липкую панель покупки и галерею, которая листается за пальцем. Фильтр открывается во весь экран, значения — плитками, вложенных полос прокрутки больше нет: осмысленные фильтры занимают 900 px вместо 1811.

В 1С каждый размер кольца заведён отдельным товаром, и в разделе «Кольца» было 35 одинаковых карточек вместо 11 изделий. Теперь в списке одна карточка на изделие с ценой «от», а размер выбирается в карточке. Одинаковые названия были у 57 товаров из 65 — их собрали по схеме «тип изделия, камень, проба, коллекция, размер», и все стали уникальными.

Подборки по знаку зодиака и числу судьбы — главная особенность магазина. При этом пути к иконкам в базе были прописаны, а файлов не было: в фильтре стояли битые картинки, плитки разделов были пустыми. Нарисовали два набора SVG генератором — 12 знаков и 9 чисел — иконку для фильтра и обложку в пропорции плитки. Разделам дописали собственные тексты.

Скорость. У товара от 5 до 18 кадров в карусели, и все грузились сразу. Теперь второй и следующие кадры подгружаются при листании или касании. В разделе «Кольца» на телефоне при медленном канале это дало 95 запросов вместо 145 и 1 342 КБ вместо 1 971 к моменту загрузки страницы. Первый экран главной на телефоне собирался в четыре приёма, теперь — в один.

SEO. Аудит провели по данным Яндекс.Вебмастера, базы и прямых запросов к сайту, правки выпускали партиями. Появились карта сайта на 222 адреса и микроразметка товаров, хлебных крошек и статей. Несуществующие адреса теперь отдают честный 404, а снятые с производства товары — 410. Тексты получили 33 раздела и 60 посадочных страниц фильтра, страниц без заголовка <h1> не осталось, появился товарный фид YML.

За два дня сделали собственный чекаут вместо стороннего модуля на Riot.js, с входом по почте и PIN-коду. Уведомления о заказах приходят в Telegram одной веткой: оформлен, оплачен, отменён. Обмен с 1С переписали: новый модуль не меняет публикацию товаров сам, а каждое изменение пишет в журнал в виде «поле: было → стало». Исправили четыре ошибки поиска и добавили резервный поиск через MySQL.

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