208

Верстка интернет-магазина по продаже шин

Модульность

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

За счет чего это достигается?

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

Вся внутренняя стилизация остается внутри компонента, а вот отступы, ширина задается извне.

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

Возьмем список товаров:

Особенности 1
Товары на странице «Каталог»

И имеем тот же блок на посадочной странице

Особенности 2
Товары на посадочной странице

То есть мне нужно было один раз создать блок и потом просто скопировать его.
Это ведь просто осознать, не так ли?

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

Слайдер

Слайдер — карусель изображений

Была интересная задачка. Есть 4 вкладки. В каждой вкладке есть карусель с товарами.

Было 2 проблемы:

  • Из-за особенностей кода, нельзя было стрелки разместить вне плитки товаров. Чтобы они были автоматически связаны со слайдером, нужно было положить их в том же контейнере, что и товары.
  • Обычно для каждого слайдера свои стрелки. Мне не хотелось делать 4 блока с стрелками, чтобы они накладывались друг на друга.
Карусель переключение

Как я поступил.

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

Код, если интересно:

// Клик по кнопке "Назад"
$(".js-great-slider-prev").click(function() {
  // Переключаем слайдер
  $(".js-products-slider.active").slick("slickPrev")
});
// Клик по кнопке "Вперед"
$(".js-great-slider-next").click(function() {
  // Переключаем слайдер
  $(".js-products-slider.active").slick("slickNext")
});

Переполнение меню

Эта особенность связана с переполнением меню.

Смотрите. Где поместится список ссылок у блока «Контакты» при наведении?

Особенности 3
Переполнение меню

Правильно. Уедет вправо и создаст полосу прокрутки сайта.

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

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

Код:

/* .nav__sublist — класс списка, который появляется при наведении */

// Jquery
$('.nav__sublist').each(function(i, item) { 
  var offset = $(item).offset().left + 
 $(item).outerWidth();

  if ($(window).width() < offset) {
    $(item).addClass('position-right');
  }
});

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

Сделал окно браузера уже
Сделал окно браузера уже

Калькуляция товаров в корзине

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

В таблице, при изменении количества или удаления товаров считается: общая сумма, сумма товара.

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

Демо:

Калькуляция товаров в корзине
Поделиться
Отправить
Линкануть
Вотсапнуть
← К списку проектов