Модульность
Просмотрев макеты, я понял, что многие блоки повторяются на нескольких страницах, значит следует сделать их переиспользуемыми.
За счет чего это достигается?
Следует писать код так, чтобы можно было вырезать целую секцию и переместить ее ниже, выше или на другую страницу. Нужно разбивать верстку на компоненты, которые будут написаны не зависимо оттого, где будут вставлены.
Вся внутренняя стилизация остается внутри компонента, а вот отступы, ширина задается извне.
После создания главной страницы и страницы каталога, другие страницы можно было собирать как на конструкторе.
Возьмем список товаров:
И имеем тот же блок на посадочной странице
То есть мне нужно было один раз создать блок и потом просто скопировать его.
Это ведь просто осознать, не так ли?
К сожалению во многих проектах я замечаю, как программисты дублируют десятки строк кода, затягивают разработку и усложняют себе работу.
Слайдер
Слайдер — карусель изображений
Была интересная задачка. Есть 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")
});Переполнение меню
Эта особенность связана с переполнением меню.
Смотрите. Где поместится список ссылок у блока «Контакты» при наведении?
Правильно. Уедет вправо и создаст полосу прокрутки сайта.
Для этого нужно было придумывать решение, ведь не будешь каждый раз помечать тот блок, который может заехать за сайт.
Решение: при загрузке сайта брать все подменю и проверить их отступ слева + ширину, если это число больше чем ширина сайта, то есть будет вылезать наружу, добавлять стили для отображения справа.
Код:
/* .nav__sublist — класс списка, который появляется при наведении */
// Jquery
$('.nav__sublist').each(function(i, item) {
var offset = $(item).offset().left +
$(item).outerWidth();
if ($(window).width() < offset) {
$(item).addClass('position-right');
}
});В итоге на любом разрешении экрана при видимости меню подменю будут автоматически перемещены для предотвращения выпадания за границы сайта.
Калькуляция товаров в корзине
По техническому заданию нужно было реализовать калькуляцию товаров.
В таблице, при изменении количества или удаления товаров считается: общая сумма, сумма товара.
Так же был добавлен функционал, который показывает сообщение об ошибке, когда пользователь пытается заказать товаров больше, чем есть на складе.
Демо: