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

Сверстал 7 адаптивных страниц для компании «Рекламный знак».

Модульность

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

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

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

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

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

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

Верстка интернет-магазина по продаже шин 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');
  }
});

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

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

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

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

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

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

Демо:

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

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

Вопрос-ответ

Работаете с NDA?

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

Вы отвечаете за сроки?

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

Работаете по договору?

Да, я зарегистрирован как самозанятый. Оплата может быть переводом на карту или по счету. Формат работы с самозанятым практически не отличается от работы с ИП. Составляем договор, пишем техническое задание, в договоре указываю штрафы за срыв сроков.

Какие этапы разработки сайта?

  1. Знакомство с задачей, ЦА и целью сайта.
  2. Заключение договора
  3. Предоплата 50%
  4. Изучение конкурентов, сильных и слабых мест.
  5. Создание структуры сайта
  6. Написание текстов
  7. Создание прототипа
  8. Создание дизайна
  9. Вёрстка сайта
  10. Создание админ. панели сайта
  11. Постоплата 50%
  12. Предоставление доступов и исходных материалов

Сможем ли мы самостоятельно редактировать сайт?

Да, сможете. В процессе разработки сайту будет добавлена возможно редактирования текста, изображений, блоков.

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

Нужно ли платить за сайт ежемесячно?

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

Нужно будет приобрести хостинг и домен. Хостинг — место хранения сайта в интернете. Домен — красивое название сайта. В среднем стоимость домена — 250 рублей в год, хостинга — 1800 рублей в год.

Если вы заказали разработку сайта на Тильде, вместо хостинга нужно будет оплачивать аккаунт в Тильде. Стоимость ежемесячной платы от 500 до 1200 в зависимостей от требования проекта.

Работаете по предоплате?

Размер предоплаты — 30−50%.

Можем договориться об разделении разработки на этапы. Каждый этап делится на предоплату и постоплату.

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

Вы создаете сайты на конструкторе?

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

Какие способы оплаты?

Qiwi, Яндекс деньги, Paypal, перевод на карту банка, перевод на юр. лицо, безопасные сделки через сторонние сервисы.

Вы продвигаете сайт после создания?

Я не занимаюсь продвижением. После создания сайта передаю клиента на продвижение профессионалам в области.

За какой срок выполняется создание сайта?

Срок выполнения работ зависит от объема и сложности задачи. В среднем — 14 дней. Крупные порталы могут создаваться 6 месяцев, а одностраничный сайт может быть готов уже спустя 10 дней.