Анимация цены при выборе атрибутов

Всем привет!

В недавнем проекте делал анимацию цены при смене атрибутов и пр. и решил выложить решение здесь..
Качаем плагин по ссылке - https://github.com/aishek/jquery-animateNumber

Идем в \components\com_jshopping\js\functions.js и в самый конец вставляем код из файла "jquery.animateNumber.min.js" из архива..

Чуть выше создаем функцию:

Код

function animate(price){
	var decimal_places = 2; // кол-во символов после разделителя, если нужен разделитель тысяч поставьте 0
	var decimal_factor = 1000; // разделитель
	var old_price = jQuery("#block_price").text().replace(' EUR', ''); // EUR меняем на свое

	jQuery('#block_price').prop('number', old_price).animateNumber({
		number: price,
		numberStep: function(now, tween){
			var floored_number = Math.floor(now) / decimal_factor, target = $(tween.elem);
			if(decimal_places > 0){
				var floored_number = floored_number.toFixed(decimal_places);
			}
			//floored_number = floored_number.toString().replace('.', ' '); // если у вас разделитель не точка, то раскомментируйте, и укажите разделитель вместо пробела
			jQuery("#block_price").text(floored_number + " EUR"); // EUR меняем на свое
		},
		easing: 'easeInQuad' // тип анимации - разницы не заметил
	},1500); // скорость анимации
}

В этом примере все делал в стандартном шаблоне, и со стандартной разметкой, так что меняем в обоих местах EUR на свою валюту, или что у вас после цены..
В строке 775 комментируем:

Код: php

//jQuery("#block_price").html(json.price);

и ниже добавляем код:

Код: php

animate(json.pricefloat);

Вот и все, теперь меняем атрибут, и ваша цена плавно анимируется..))))

UPD в функцию animate(), после:
var old_price = jQuery("#block_price").text().replace(' EUR', ''); // EUR меняем на свое

надо добавить:

Код

old_price = old_price.replace('.', ''); // если у вас разделитель пробел, ставим его вместо точки

Таблица размеров (и т.п.) Плагин модульных позиций для атрибутов на странице товара [Скачать] Автор kit2m2	Ответов: 39 Просмотров: 8807	16.05.2021, 18:16:50 от kit2m2
Плагин - Скрывать цены, если товара нет в наличии [Скачать] Автор kit2m2	Ответов: 8 Просмотров: 3121	24.01.2020, 11:01:34 от kit2m2
Назначение цены в карточке товара в зависимости от группы пользователей Автор san_san_ku	Ответов: 16 Просмотров: 1560	03.10.2019, 19:11:45 от san_san_ku
Отметить несколько атрибутов сразу Автор kadriel	Ответов: 3 Просмотров: 1107	29.04.2019, 10:44:55 от kit2m2
Дополнения к атрибутам. вложение атрибутов в атрибуты Автор Koral_n	Ответов: 4 Просмотров: 1039	04.02.2019, 17:49:39 от kit2m2

Анимация цены при выборе атрибутов - Разработки и улучшения

Новости Joomla

👩‍💻 JoomShopping: Самый полный курс по созданию интернет-магазина на CMS Joomla.

👩‍💻 SM WT CDEK аддон доставки для JoomShopping.

Вышли релизы Joomla 6.1 и Joomla 5.4.5: новые возможности и стабильность

shurakana

Анимация цены при выборе атрибутов

Похожие темы