Магазину промышленного оборудования нравилась карточка товара у конкурента, и он попросил привести свою к похожему виду. Работали в несколько заходов: композиция, блок цены, переключатели исполнений, блоки доверия. Каждый заход проверяли на компьютере - всё вставало на место.
Потом мы открыли сайт с настоящего телефона. Там была прежняя карточка. Не сломанная, не съехавшая - просто штатная карточка готового решения, без единой нашей правки. При том что мобильного трафика у магазина около 40%.
Почему так выходит
Причина в устройстве самого готового решения. У него не один шаблон сайта, а два: обычный и отдельный мобильный. Сервер выбирает шаблон по браузеру посетителя ещё до того, как начнёт собирать страницу. Дальше это две разные папки с разными файлами. Правки в одной в другую не попадают никогда.
Логика у такого устройства своя: мобильному посетителю отдают более лёгкую страницу, без тяжёлых блоков. Проблема не в самом подходе, а в том, что про второй шаблон обычно узнают случайно - в документации решения это не вынесено на видное место.
Почему обычная проверка это не ловит
Разработчик проверяет мобильную версию, сужая окно браузера. В этот момент шаблон не переключается: сервер уже отдал десктопную страницу, она просто сжимается по ширине. Вёрстка выглядит нормально, все правки на месте - и проверка считается пройденной.
Разница видна только при запросе с настоящего мобильного браузера. У нас десктопная страница весила 410 КБ, мобильная - 302 КБ, и в этих 302 КБ не было ни одного нашего блока.
Как чинили
Напрашивается простой ход - скопировать свой код во второй шаблон. Так делать не стоит: копии расходятся при первой же правке, и дальше каждое изменение нужно вносить дважды, помня про обе версии.
Мы положили весь свой код в отдельную папку внутри шаблона и подключили её в обе версии карточки тремя строками. Файл остаётся один, копий нет, а обновление готового решения его не затрёт - оно перезаписывает свои файлы, а не наши.
- →Свой код - в отдельной папке, не вперемешку с файлами решения. Тогда обновление решения не стирает работу.
- →Подключение - в оба шаблона карточки, а не только в тот, который открыт у вас на мониторе.
- →Путь к своим файлам нельзя брать через константу шаблона. В мобильной версии она указывает на другую папку, и стили с кодом уезжают в никуда - страница открывается, но выглядит так, будто правок нет.
- →Правила раскладки для широких экранов ограничивайте по ширине явно. Иначе на телефоне фотография товара схлопывается в узкую полосу.
Что проверили после
| Что смотрели | Как стало |
|---|---|
| Доходят ли правки карточки до мобильных | Доходят - обе версии собираются из одного файла |
| Горизонтальная прокрутка на экране 375 px | Нет |
| Размер кликабельных элементов | От 44 px - попадают пальцем без промаха |
| Список характеристик | Свёрнут в раскрывающиеся группы, страница не растягивается |
Цифр по конверсии здесь нет и не будет до тех пор, пока карточка не отработает на боевом сайте период наблюдения: сейчас это согласованный с клиентом прототип. Что измерено на сегодня - в таблице выше.
Готовое решение экономит месяцы на старте - это его работа. Но дальше магазин живёт в чужом коде, и правки в нём нужно вносить так, чтобы очередное обновление решения их не стёрло. Это отдельная дисциплина, и она входит в сопровождение магазина. Если сомневаетесь, что видят ваши покупатели с телефонов, - откройте карточку на своём и поищите последнюю правку, которую заказывали.
