Изменение верстки сайта через js встроенный в футер

Категория: Решение задач | Скилл: js | Дата: 12.01.2020

В процессе обслуживания интернет-магазина магазин-валенок.рф, стали появляться задачи, которые нельзя было решить прямым путем. Эти задачи касались только front end сайта. В один момент я понял, что надо разобраться. Таким образом появился проект frontend-gap-changer.

Кратко о frontend-gap-changer

Ядро не превышает 100 строк кода, однако предоставляет хорошую платформу для внесения правок в верстку.

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

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

Код ядра состоит из:

  • объекта с настройками (количество итераций, временной интервал запуска функций),
  • массива с функциями для изменения верстки, которые необходимо туда положить при помощи addFn метода. К слову, каждая функция должна возвращать логическое значение, где true – успешное выполнение, повторный запуск не требуется, а false означает что необходим повторный запуск, так как изменения верстки функция не сделала.
После добавления функций, необходимо вызвать метод run и начнется цикл вызова функций.

Задачи

Объединение и дифференциация

Есть раздел, где каждый товар имеет свою копию, отличие лишь в подошве, точнее есть 2 типа подошвы у этой категории товаров (МП - микропора и В — войлок), визуальная разница между ними минимальна. Карточка товара может содержать различие по цвету, но не по составу товара. Задачу усугубляло то, что дополнительные опции нельзя встраивать, так как это нарушит пользовательский опыт и усложнит процедуру заказа.

Надо чтобы в одной карточке товара был выбор типа подошвы. Ссылка на посмотреть что получилось.

Решение

Слева вид превью карточки товара "до", справа "после"

Создаем размеры обуви и постфиксом указываем аббревиатуру типа подошвы так:

  • 36 МП, 37 МП …
  • 36 В, 37 В …
Настройка размеров в карточке товара

Затем в карточке товара создаем офферы с соответствующими размерами, сначала для одного типа подошвы, затем для другого.

Разделение типов подошвы при заказе

Так как разница между типами подошвы на обуви минимальна, значит на главном фото этим можно пренебречь, но под изображение товара (все на том же фото) вставить фото типов подошвы.

Теперь для того чтобы визуально выделить типы подошвы при заказе, надо написать функцию DiffSole, которая:

  • найдет на странице блок с размерами (если это карточка товара)
  • проанализирует, есть ли там постфиксы с типами подошвы
  • объединит в разные списки размеры и вставит новую верстку блока с размерами
Установка обработчика в скрипте:
fgc.addFn(DiffSole);

Вывод подкатегорий

В определенной категории товаров есть дополнительные категории (детская, женская, мужская), которые не надо выносить в общий список. Вместо этого необходимо помещать блок со ссылками на эти категории как можно выше на странице. Ссылка на посмотреть что получилось.

Решение

Сверху вставленный блок, красным выделены "хлебные крошки"

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

После того как будет определено нужная ли эта страница, необходимо вставить блок со ссылками, перед самым верхним контентным блоком.

Установка обработчика в скрипте:

fgc.addFn(InsertCatGender);

Округление процента скидки

У некоторых товаров бывает скидка, которую приходится руками подбивать до круглой суммы. В карточке товара клиент видит такой процент скидки 47,4987%, надо округлить в меньшую сторону чтобы было 47%. Ссылка на посмотреть что получилось.

Решение

Для решения задачи необходимо найти на странице все классы стилей, которые формируют вид текста. Нашлось 2 точки на странице где такое может быть. В этом случае, чтобы не дублировать код и не нагромождать функцию, поможет второй аргумент style метода addFn, в него передадим строку с искомыми классами.

Установка обработчиков в скрипте:

fgc.addFn(DiscountRounding, "products-view-label-inner products-view-label-discount");
fgc.addFn(DiscountRounding, "price-discount-percent");

Массовая пометка некоторых товаров

От производства поступило сообщение "кое-где подошва может быть разной". На сайте более 100 карточек товаров, где это актуально, менять каждую карточку не вариант, потому что через месяц ситуация может измениться. Надо чтобы под каждым фото товара, для которого это актуально, выводилось соответствующее сообщение. Ссылки нет так как возможно в данный момент это не актуально для сайта

Решение

Заметка к товару под галереей

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

Установка обработчика в скрипте:

fgc.addFn(InsertText4DiffDown);

Упорядочивание калькулятора доставки

На сайте используется калькулятор доставки (цена доставки входит в стоимость товара), для этого используется 2 аккаунта сервиса edost. Однако, поля edost требуют ввода паспортных данных, а для отдельных способов доставки (например "почта России") по сути этого не надо. Необходимо чтобы выводился правильно настроенный способ доставки.

Решение

Для решения задачи надо сделать кастомизированный способ доставки "почта России" (который тоже подключается к этому же сервису на один из аккаунтов), где надо убрать обязательный ввод паспортных данных, и js скриптом удалять блок “почта России” предоставляемый сервисом edost, оставив кастомизированный.

Этот метод не несет дополнительных финансовых расходов так как оба способа (кастомизированный и от edost), идентичны и работают через сервис edost.

Реализация как и в предыдущих методах через поиск dom элементов посредством классов стилей.

Установка обработчика в скрипте:

fgc.addFn(FirstShipping);

Заключение

Карточки товаров стали аккуратнее, а категории компактнее.

Работа менеджеров была облегчена, отпала необходимость редактировать по мелочам карточки товаров.

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


php, c++, javascript, sql, hlsl, html, css