22.06.2014, 09:06
|
Интересующийся
|
|
Регистрация: 22.06.2014
Сообщений: 10
|
|
2 функции одним кликом
Помогите плииз решить проблему нулевику в javascript. Вобщем, есть скрипт добавления товаров в корзину - при нажатии на ссылку <a class="in_bas" href="javascript :cart_add('1399792083')">В корзину!</a>
товар добавляется в корзину (происходит запись в cookie)
function cart_add(n)
{
var in_cart = $.cookie( 'bas' );
var selected = in_cart ? in_cart.split('|') : [];
selected.push( n );
$.cookie( 'bas', selected.join('|'), { expires: 1, path: '/'} );
show_cart_count( selected.length );
$('#'+n).html('<div class=incart>Добавлено!</div>');
}
Но я также хочу подцепить к этой функции полет картинки товара в корзину, есть такой вот код
$('.product').live('click', function() {
var o1 = $(this).offset();
var o2 = $('#st').offset();
var dx = o1.left - o2.left;
var dy = o1.top - o2.top;
var distance = Math.sqrt(dx * dx + dy * dy);
$(this).closest('.product').find('.image img').effect("transfer", { to: $("#st"), className: "transfer_class" }, distance);
$('.transfer_class').html($(this).closest('.product').find('.image').html());
$('.transfer_class').find('img').css('height', '100%');
return false;
});
Но проблема в том, что эти коды работают только по отдельности, то есть если я подключаю код полета в коризну, то товар летит, все красиво, но перестает работать код добавления в корзину. Вопрос в том, как эти скрипты склеить вместе, чтоб они друг другу не мешали?
Последний раз редактировалось martinways, 22.06.2014 в 09:08.
|
|
22.06.2014, 09:41
|
Аспирант
|
|
Регистрация: 30.07.2013
Сообщений: 47
|
|
<a class="in_bas" href="1399792083">В корзину!</a>
$('.product').on('click', function() {
cart_add($(this).attr('href'));
...
}
|
|
22.06.2014, 10:07
|
Интересующийся
|
|
Регистрация: 22.06.2014
Сообщений: 10
|
|
Огромное спасибо, заработало, товар добавляется в корзину, фото летит, но не работает последняя часть первого кода
$('#'+n).html('<div class=incart>Добавлено!</div>');
То есть после нажатия кнопки "купить" не появляется блок <div class=incart>Добавлено!</div>
Последний раз редактировалось martinways, 22.06.2014 в 10:12.
|
|
22.06.2014, 11:07
|
Аспирант
|
|
Регистрация: 30.07.2013
Сообщений: 47
|
|
А до этого сообщение выскакивало?
Можно код того элемента, куда происходит вставка?
|
|
22.06.2014, 11:59
|
Интересующийся
|
|
Регистрация: 22.06.2014
Сообщений: 10
|
|
Короче я тут сам не справлюсь, давайте я Вам заплачу (например по вебмани) если сможете сделать. Это вобщем я купил скрипт корзины (добавляение товаров, офомрление заказа, есть примитивная админка) и пытаюсь его доделать под свои нужды.
Вот демка с отключенным полетом
http://pro.evokit.ru/
А вот с включенным http://1.evokit.ru/
Скрипт полета подключается в самом низу страницы /cart/js/ajax_cart.js
В него нужно добавить функцию, чтоб он находил в внутри <div class=product></div> ссылку с классом in_bas и по её нажатию картинка летела в корзину. Сейчас в данном виде картинка летит при нажатии на любую ссылку внутри блока product, а также мешает скрипту по адресу /cart/js/cart.js добавлять товары в корзину, записывать cookie, а тажке мешает открывать описание товара (при нажатии на фото или название). Ссылку на исходники могу скинуть в личку, если согласны сделать.
|
|
22.06.2014, 17:51
|
Аспирант
|
|
Регистрация: 30.07.2013
Сообщений: 47
|
|
$('div.product').on('click','a.in_bas', function() {
cart_add($(this).attr('href'));
...
}
Летели от всех ссылок, т.к. в on() не было указано, а какая конкретно ссылка должна вызывать полет картинки.
Подключите /cart/js/ajax_cart.js в head (но после библиотеки jquery).
Вроде должно работать.
PS. А если я хочу купить 3 одних и тех же часов? Получается, чтобы добавить их в корзину, нужно 3 раза перезагрузить страницу, чтобы появилась кнопка "В корзину!".
Мне кажется лучше убрать все эти полеты, а где-нибудь в углу экрана пусть появляется всплывающее сообщение, мол товар такой-то добавлен в корзину в количестве столько-то штук.
И саму кнопку "В корзину" оставить в покое - чтобы не перекрывалась никам элементом)
|
|
22.06.2014, 19:21
|
Интересующийся
|
|
Регистрация: 22.06.2014
Сообщений: 10
|
|
Насчет перекрытия - Вы правы, разместил элемент "ДОБАВЛЕНО" вверху блока поверх фото, кнопка купить свободна. Насчет полета - не знаю почему, но очень хочется реализовать, всегда мечтал))) В общем по Вашему совету теперь срабатывает только на кнопку "купить", но проблема совместимости осталась, то есть товар летит, но перестает появляться блок ДОБАВЛЕНО и в куки записывается неправильная информация, при доабвлении одного товара в куку под названием "bas" должно быть значение например 1399792083 , а после включения полета в эту куку записывается значение javascript%3Acart_add('1399792083') , то есть прямо вся строчка из скрипта
function cart_add(n)
{
var in_cart = $.cookie( 'bas' );
var selected = in_cart ? in_cart.split('|') : [];
selected.push( n );
$.cookie( 'bas', selected.join('|'), { expires: 1, path: '/'} );
show_cart_count( selected.length );
$('#'+n).html('<div class=incart>Добавлено</div>');
} //
Две версии с выключеным и включенным полетом залил на поддомены
http://pro.evokit.ru/ и http://1.evokit.ru/
А также если подключить скрипт полета в head или даже просто выше кнопки КУПИТЬ, то он вовсе не работает.
Последний раз редактировалось martinways, 22.06.2014 в 19:24.
|
|
22.06.2014, 21:18
|
Аспирант
|
|
Регистрация: 30.07.2013
Сообщений: 47
|
|
function cart_add(n)
{
var in_cart = $.cookie( 'bas' );
var selected = in_cart ? in_cart.split('|') : [];
selected.push( n );
$.cookie( 'bas', selected.join('|'), { expires: 1, path: '/'} );
show_cart_count( selected.length );
$('<div class=incart>Добавлено</div>').appendTo('#'+n).delay(2000).fadeOut(function() { $(this).remove(); }); //так будет поинтересней =)
}
$(document).ready(function()
{
$('a.in_bas').click(function() {
cart_add($(this).attr('href'))
var o1 = $(this).offset();
var o2 = $('#st').offset();
var dx = o1.left - o2.left;
var dy = o1.top - o2.top;
var distance = Math.sqrt(dx * dx + dy * dy);
$(this).closest('.product').find('.image img').effect("transfer", { to: $("#st"), className: "transfer_class" }, distance);
$('.transfer_class').html($(this).closest('.product').find('.image').html());
$('.transfer_class').find('img').css('height', '100%');
return false;
});
});
С файлом main.js какие-то проблемы. Из-за него не срабатывает полет или изменение количества. В нем тонна скриптов - ниасилил)))
Без него у меня все работает - картинка летит, количество изменяется.
PS Добавьте 100 товаров в корзину - она станет некрасивой)
PPS У летающей картинки сделайте z-index побольше, а то она вроде летит, и при этом залетает под какой-нибудь другой элемент.
PPPS $('<div class=incart>Добавлено</div>') - я его изначально бы вставил в код страницы и в стилях скрыл бы. А при нажатии на "В корзину" работал бы с show() и hide() (или fadeToggle()), чтобы не насиловать jquery постоянной вставкой и удалением.
PPPPS <a class="in_bas" href="1399792083">В корзину!</a> - в таком случае, а не <a class="in_bas" href="javascript :cart_add('1399792083')"></a>
|
|
22.06.2014, 21:41
|
Интересующийся
|
|
Регистрация: 22.06.2014
Сообщений: 10
|
|
100 товаров никто добавлять не будет, поэтому не заморачивался. z-index картинки в css чето не помогает, может его надо прописать в самом скрипте полета, но это не главная проблема сейчас. Проблема совместимости не решилась, main.js отключил, это я выдрал из какого-то сайта галерею в модальном окне и видимо в том файле много всего что относится к функциям того сайта. галерею потом заменю на менее увесистую, но не в нем проблема, именно после подключения скрипта полета неправильно пишет в куки и не появляется блок ДОБАВЛЕНО. кстати, спасибо за эффект исчезновения)) Может все-таки скину Вам исходники, чтобы вы посмотрели что к чему или так видите на демке? Замучался с этим полетом, но уже отступать назад не хочеться) Вид ссылки добавления в корзину менять не вариант, так как без полета она же работает. Перезалил демку с закомментированным полетом http://pro.evokit.ru/
P.S. Файл main.js почистил от всего лишнего, оставил необходимые для работы галереи скрипты.
Последний раз редактировалось martinways, 22.06.2014 в 22:13.
|
|
22.06.2014, 22:17
|
Аспирант
|
|
Регистрация: 30.07.2013
Сообщений: 47
|
|
Исходники не нужны - они у меня уже есть=) Иначе как я исправил бы.
Так я же написал:
1. Во всех ссылках с классом in_bas надо писать так:
<a class="in_bas" href="тут ид товара">В корзину!</a>
2. В head подключить
<script src="/cart/js/ajax_cart.js"></script>
А то я его что-то не увидел - кажется в нем полет прописан.
3. Firefox говорит, что с одним из <div> проблемы -
<a class=in_bas href=javascript:cart_add('1399863349')>В корзину!</a></div></div></form></td></tr></table><!--</div><script src="/cart/js/ajax_cart.js"></script>-->
Там где два дива подряд идут - один из них красным подсвечен - видимо лишний. В редакторе стоит проверить разметку страницы.
|
|
|
|