Форум русской поддержки Joomla!® CMS
06.12.2016, 12:12:17 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 284 раз)
0 Пользователей и 1 Гость смотрят эту тему.
shurakana
Живу я здесь
******

Репутация: +48/-6
Offline Offline

Сообщений: 862



« : 16.08.2015, 08:07:20 »

Всем привет!

В недавнем проекте делал анимацию цены при смене атрибутов и пр. и решил выложить решение здесь..
Качаем плагин по ссылке - 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 комментируем:

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

и ниже добавляем код:
Код
animate(json.pricefloat);

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

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

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

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

« Последнее редактирование: 16.08.2015, 11:30:36 от shurakana » Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet