Вёрстка для компании «Твой мир»

Сверстал страницу каталога с функционалом фильтров и переключением вида.

Запрограммировал калькуляцию товаров в 5 вариантов с помощью всего лишь одной функции.

Страница каталога

По странице каталога были следующие задачи:

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

Демонстрация итогового функционала

Демонстрация работы калькулятора

Страница товара

Задачи по странице товара:

  • Создание кода страницы по дизайну
  • Карусель и галерея в всплывающем окне
  • Всплывающее окно при нажатии на знак вопроса или на «купить в один клик»
  • Вкладки в описании
  • Раскрывающийся блок
  • Карусель в конце страницы
  • Расчет стоимости в 5 вариациях

Демонстрация работы

Расчет в пяти вариациях

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

Было потрачено достаточно усилий и у меня получилось написать один код для всех пяти вариаций.

Пять вариаций расчета

1. Длина, количество, с возможностью удаления и добавления новых строк.

Вёрстка для компании "Твой мир" 1
Длина, количество, с возможностью удаления и добавления новых строк.

2. Изменение только количества с длиной и шириной.

Вёрстка для компании "Твой мир" 2
Изменение только количества

3. Без длины и ширины

Вёрстка для компании "Твой мир" 3
Без длины и ширины

4. Двойной расчет

Вёрстка для компании "Твой мир" 4
Двойной расчет

5. Только количество

Вёрстка для компании "Твой мир" 5
Только количество
Хочешь такой же результат?
Имя
Контакт для связи
Подробнее о проекте

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