Из чего состоит Базовый шаблон интернет-магазина

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

Что такое базовый шаблон

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

Зачем он нужен

Представьте, что у вас 50 страниц. На каждой есть одинаковая шапка с логотипом и меню, одинаковый подвал с контактами и копирайтом. Если писать этот код на каждой странице отдельно, получится огромный объём повторяющейся работы. А если вы захотите поменять телефон в подвале — придётся править все 50 файлов.

Базовый шаблон решает эту проблему. Общие части описываются один раз, а страницы просто «подставляют» свой уникальный контент в нужное место. Это принцип DRY.

💡
DRY (Don't Repeat Yourself) — принцип разработки, при котором каждый фрагмент логики или разметки существует в единственном экземпляре. Меняешь в одном месте — обновляется везде.

Из чего он состоит

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

1

Header / Шапка

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

✓
Хорошая практика: размещение поискового блока в шапке. Если пользователь захочет найти товар, он сделает это у вас в магазине, а не побежит в поисковик и не попадёт к конкурентам.

Категории в шапке

Хорошая история — когда в шапке есть категории. Здесь есть несколько видов отображения:

Мало разделов

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

Много разделов

Категории превращают меню в кашу — лучше вынести их в выпадающий список.

★
Совет: делать комбинированный вариант. Не все люди знают, как работают выпадающие блоки, плюс популярные разделы будут быстрее попадаться пользователю, чтобы он мог перейти к покупке.
2

Body — тело магазина

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

Главная Корзина Карточка товара Checkout Личный кабинет
3

Footer / Подвал

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

Также могут быть указаны:

  • Контактные данные — чтобы покупатель мог связаться с вами
  • Ссылки на соцсети
  • Разделы с новостями
  • Юридическая информация

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