CSS анимация корзины

[support 447]

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

К примеру, в демке http://demo.vamshop.ru добавьте товар в корзину.

Будет видно.

 

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

[geval 3]

а как это добавить в уже рабочий магазин- вот прямо сейчас?

[pal-palich 6]

В 19.02.2020 в 17:29, support сказал:

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

Выглядит прикольно. но мигает постоянно. Это может надоесть при выборе еще товаров. 2-3 раза мигнуло и хватит. Что бы покупатель знал где корзина.

[support 447]

17 часов назад, pal-palich сказал:

Выглядит прикольно. но мигает постоянно. Это может надоесть при выборе еще товаров. 2-3 раза мигнуло и хватит. Что бы покупатель знал где корзина.

А мне наоборот нравится, вообще идея была такая, что как раз подчеркнуть миганием, что у Вас корзина не пустая и надо что-то сделать.

Либо оформить заказ, либо удалить из корзины.

Но и не сильно надоедать при этом всякими текстами, popup окнами, подсказками и т.д.

Вроде как довольно неплохо выглядит, не сильно мешает, но и в тоже время настойчиво показывает - оформите заказ типа.

Либо удалите из корзины товары.

 

20 часов назад, geval сказал:

а как это добавить в уже рабочий магазин- вот прямо сейчас?

В /templates/vamshop4/css/vamshop4.css или в свой файл стилей добавьте анимацию.

.pulse-button {
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse-button:hover 
{
  -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

 

и к любой кнопке, ссылки добавляйте в атрибут class значение pulse-button

 

Например что б как в демке http://demo.vamshop.ru

Надо в файле шаблона корзины /templates/vamshop4/boxes/boxes_cart_slide_menu.html

<em class="roundpoint">{$TOTAL_QUANTITY}</em>

добавить pulse-button:

<em class="roundpoint pulse-button">{$TOTAL_QUANTITY}</em>

 

Можно любым элементам добавлять анимацию.