Обновление Div'а с корзиной с помощью AJAX (смена изображения корзины - полная\пустая)

3 года 1 мес. назад #6972 от fixbob
Здравствуйте! Есть необходимость (стилистическая), чтобы при добавлении товаров в корзину через AJAX, обновлялся div с корзиной (там где выводятся количество товаров и суммарная стоимость).
Переменные в этом div'е обновляются, т.е. после нажатия кнопки "Добавить в корзину" без перезагрузки страницы в корзине меняется количество товаров и их стоимость, но было бы неплохо сделать чтобы обновлялся сам div, чтобы у корзины менялась картинка (полная/пустая).
Подозреваю что нужно модифицировать файл "components\com_virtuemart\assets\js\vmprices.js", так как там идет обновление переменных "количество товара" и "суммарная стоимость" после нажатия кнопки "Добавить в корзину".

VirtueMart 2.6

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

3 года 1 мес. назад #6973 от Wedal
fixbob, на самом деле с этим модулем мини-корзины все не так просто. Вечно приходится возится с его оформлением, чтобы избежать хаков. Изменение картинки не должно вызывать особых затруднений. Всё, что вам нужно, это вместе с количеством поменять класс DIV'а. Файл верный, но его нельзя исправлять - хак. Лучше добавить в файле скриптов шаблона:
1) При загрузке страницы - проверку значения количества товаров в корзине или существования блока, характерного для заполненной корзины(зависит от вашего шаблона) - изменение класса DIV'а.
2) При нажатии кнопки добавления в корзину - изменение класса DIV'а.
Спасибо сказали: fixbob

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

3 года 1 мес. назад - 3 года 1 мес. назад #6974 от fixbob
К своему сожалению - плохо знаком с внутренним устройством virtuemarta, выделял время чтобы разобраться - но так все напутано (самопис на коленке) что караул (хорошо что хоть комменты есть).
По поводу шаблона - шаблон делал сам.
По поводу вопроса - вот и хотел бы разобраться в стратегии и выработать логику смены div корзины (да собственно не важно какого div) т.е. скрипт в идеале должен быть более менее универсальным - для любой смены любого div.

1) При загрузке страницы - проверку значения количества товаров в корзине или существования блока, характерного для заполненной корзины(зависит от вашего шаблона) - изменение класса DIV'а.
2) При нажатии кнопки добавления в корзину - изменение класса DIV'а.

теперь по пунктам:
1) Отслеживать можно по любому критерию (количеству, сумме и т.д. что там еще передается)
2) Чтобы поменять просто класс div надо чтобы вторая картинка была уже загружена (допустим в скрытый div это рассуждения) и менять первую первую при условии (что то вроде этого):
<div id="photos">
<img style="position: absolute; z-index: 200; display: block;" src="" alt="" id="photo1">
<img style="position: absolute; z-index: 100; display: none;" src="" alt="" id="photo2">
</div>

var imgs = ["img_1.jpg","img_2.jpg","img_3.jpg"];
var j=1;
var cnt = imgs.length-1;
//сразу при загрузке показываем первую картинку
$('#photo1').attr('src', imgs[0]);
//подгружаем вторую в скрытый див
$('#photo2').attr('src', imgs[1]);
//далее меняем картинку

Далее сама функция photos()(прошу прощения что в голову пришло ну как то так)

function photos() {
$('#photo1').fadeOut("slow", function() {
$(this).attr('src', imgs[j]).fadeIn("slow");
});
j++;
if(тут проверка на параметр корзины) {
условия
}
$('#photo2').attr('src', imgs[j]);
}
Как то так я вижу начало решения проблемы корзины

А какие будут Ваши предложения?
Пишем комментируем предлагаем

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

3 года 1 мес. назад #6975 от Wedal
fixbob, вы все сильно усложнили.

Первое, не нужен скрытый DIV. Достаточно сделать 2 разных css-класса и в css-файле добавить для этих классов 2 разных background'а. При загрузке страницы все это подгрузится автоматически и будет ждать только смены класса через скрипт.

Второе, используйте jQuery. Так будет короче и проще. Сама библиотека подгружается Virtuemart'ом.
И третье, не используйте "$", т.к. получите конфликт mootools и jquery. Используйте вместо "$" "jQuery", например: jQuery('#photo2').attr...
Спасибо сказали: fixbob

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

3 года 1 мес. назад #7018 от fixbob
Спасибо за советы - сделал

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.


Вверх