Шаблон адаптивной корзины для магазина

В данной заметке речь пойдет о том, как создать адаптивную корзину для интернет-магазина. Само собой, шаблон не привязан к какой-либо конкретной CMS и, соответственно, с небольшими модификациями (изменение названий переменных и проч.) его можно использовать в любом проекте. Сам шаблон — это html + css, без использования различных «наворотов». Хотя, при желании, функционал можно значительно расширить с помощью ajax и прочих технологий.

Небольшое предисловие: Сразу стоит заметить, что приведенный шаблон, конечно, адаптивен, но при этом применим не ко всем сайтам (например, если на сайте число товаров в одной корзине больше двух, то лучше выбрать шаблон, основанный на табличной верстке). Также есть другие реализации концепции данного шаблона. В остальном, он полностью рабочий и его легко можно «портировать» на любую CMS (при условии, что подключена библиотека bootstrap).

Итак, первый шаг это, конечно, подключение bootstrap и jquery (вариативно). Правда, вполне возможно, что он уже подключен в шаблоне. Для того, чтобы подключить данные библиотеки нужно в head добавить ссылки на них (я пользуюсь cdn-ссылками, но это дело привычки):

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Далее, собственно, разметка. У нас, в данной корзине, будет пять колонок: Фото, Название, Цена, Количество и кнопка «Удалить». Следовательно, html-скелет будет выглядеть следующим образом:

 <div class="row">
    <div class="col-lg-3 col-sm-3 col-xs-12" style="height: 100px; line-height: 100px;">
    <img  src="ссылка на фото" style="width: 80px; height: 80px;  " />
    </div>
    <div  class="col-lg-3 col-sm-3 col-xs-12 mob-fix" style="height: 100px; line-height: 100px;">
     Название
    </div>
    <div class="col-lg-2 col-sm-2 col-xs-12 mob-fix" style="height: 100px; line-height: 100px;">
    Цена
    </div>
    <div class="col-lg-1 col-sm-2 col-xs-12 mob-fix" style="height: 100px; line-height: 100px;">
    Количество
    </div>
    <div class="col-lg-3 col-sm-2 col-xs-12 mob-fix" style="height: 100px; line-height: 100px;">
    Удалить
    </div>
  </div>

Из данного скелета видно, что все колонки одинаковой высоты, а стиль line-height с таким же значением, как и высота, добавлен для того, чтобы выровнять контент ячеек по высоте.

Далее, следует добавить небольшой «фикс» для мобильных устройств ( обратите внимание на класс mob-fix у всех колонок, кроме фото). Для данного класса в css пропишем следующее условие:

@media (max-device-width: 768px){
.mob-fix {
height: auto !important;
line-height: 20px !important;
text-align: center;
}
}

Зачем это нужно? Учитывая то, что наши колонки на мобильном устройстве выстраиваются друг под другом, логичным шагом будет уменьшение высоты всех колонок (за исключением фотографии) до разумных размеров. Этот шаг избавит конечного пользователя от необходимости прокручивать наши 100-пиксельные блоки на маленьком мобильном экране.

Завершающим шагом будет добавление разделителя hr между блоками с товаром (можно заменить на border-bottom у родительского элемента) и пары кнопок в самом низу:

<hr>
<div style="width: 100%; text-align: right;">
	<div style="width: 50%; float: right;">
	<button>Пересчитать</button>
	<button>Оформить заказ</button>
	</div>
</div>

В общем и целом все. Единственное, стоит заметить, что все указанные элементы нужно стилизовать под конкретный сайт, а тут на вкус и цвет…
И второе: Очень схематично, интеграция данного шаблона на сайт с CMS будет выглядеть следующим образом:

<?foreach ($PRODUCT as product):?>
<!-- Здесь скелет, в котором прописаны переменные товаров корзины -->
<?endforeach;?>
<!-- Кнопки пересчитать и оформить -->