Перейти к основному контенту

Стилизация корзины

Иконка корзины имеет следующую структуру

<div className="basket-round">
	<span className="basket-count">1</span>
    <span className="basket-money">1234 ₽</span>
</div>

где

    .basket-round - собственно иконка

    .basket-count - кружочек с количеством товаров в корзине

    .basket-money - общая сумма товаров в корзине. Появляется в момент добавления в корзину товара и гаснет через некоторое время.

    Задавая стили для этих классов в файле css Вашего сайта можно изменить внешний вид корзины. Например заменить цвет иконки корзины с черного на зеленый, а кружочек с количеством покупок из нижнего правого угла перенести в верхний левый:

    .basket-round {
    	background-color: green !important;
    }
    
    .basket-count {
      top: 0 !important;
      left: 0;
      right: auto !important;
    }

    Также имеется возможность полностью заменить иконку корзины на кастомную, например вписанную в заголовок Вашего сайта.