Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   2 функции одним кликом (https://javascript.ru/forum/jquery/48155-2-funkcii-odnim-klikom.html)

martinways 22.06.2014 09:06

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;
});


Но проблема в том, что эти коды работают только по отдельности, то есть если я подключаю код полета в коризну, то товар летит, все красиво, но перестает работать код добавления в корзину. Вопрос в том, как эти скрипты склеить вместе, чтоб они друг другу не мешали?

xmlns 22.06.2014 09:41

<a class="in_bas" href="1399792083">В корзину!</a>

$('.product').on('click', function() {
cart_add($(this).attr('href'));
...
}

martinways 22.06.2014 10:07

Огромное спасибо, заработало, товар добавляется в корзину, фото летит, но не работает последняя часть первого кода

$('#'+n).html('<div class=incart>Добавлено!</div>');


То есть после нажатия кнопки "купить" не появляется блок <div class=incart>Добавлено!</div>

xmlns 22.06.2014 11:07

А до этого сообщение выскакивало?
Можно код того элемента, куда происходит вставка?

martinways 22.06.2014 11:59

Короче я тут сам не справлюсь, давайте я Вам заплачу (например по вебмани) если сможете сделать. Это вобщем я купил скрипт корзины (добавляение товаров, офомрление заказа, есть примитивная админка) и пытаюсь его доделать под свои нужды.
Вот демка с отключенным полетом
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, а тажке мешает открывать описание товара (при нажатии на фото или название). Ссылку на исходники могу скинуть в личку, если согласны сделать.

xmlns 22.06.2014 17:51

$('div.product').on('click','a.in_bas', function() {
cart_add($(this).attr('href'));
...
}


Летели от всех ссылок, т.к. в on() не было указано, а какая конкретно ссылка должна вызывать полет картинки.

Подключите /cart/js/ajax_cart.js в head (но после библиотеки jquery).

Вроде должно работать.

PS. А если я хочу купить 3 одних и тех же часов? Получается, чтобы добавить их в корзину, нужно 3 раза перезагрузить страницу, чтобы появилась кнопка "В корзину!".

Мне кажется лучше убрать все эти полеты, а где-нибудь в углу экрана пусть появляется всплывающее сообщение, мол товар такой-то добавлен в корзину в количестве столько-то штук.
И саму кнопку "В корзину" оставить в покое - чтобы не перекрывалась никам элементом)

martinways 22.06.2014 19:21

Насчет перекрытия - Вы правы, разместил элемент "ДОБАВЛЕНО" вверху блока поверх фото, кнопка купить свободна. Насчет полета - не знаю почему, но очень хочется реализовать, всегда мечтал))) В общем по Вашему совету теперь срабатывает только на кнопку "купить", но проблема совместимости осталась, то есть товар летит, но перестает появляться блок ДОБАВЛЕНО и в куки записывается неправильная информация, при доабвлении одного товара в куку под названием "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 или даже просто выше кнопки КУПИТЬ, то он вовсе не работает.

xmlns 22.06.2014 21:18

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>

martinways 22.06.2014 21:41

100 товаров никто добавлять не будет, поэтому не заморачивался. z-index картинки в css чето не помогает, может его надо прописать в самом скрипте полета, но это не главная проблема сейчас. Проблема совместимости не решилась, main.js отключил, это я выдрал из какого-то сайта галерею в модальном окне и видимо в том файле много всего что относится к функциям того сайта. галерею потом заменю на менее увесистую, но не в нем проблема, именно после подключения скрипта полета неправильно пишет в куки и не появляется блок ДОБАВЛЕНО. кстати, спасибо за эффект исчезновения)) Может все-таки скину Вам исходники, чтобы вы посмотрели что к чему или так видите на демке? Замучался с этим полетом, но уже отступать назад не хочеться) Вид ссылки добавления в корзину менять не вариант, так как без полета она же работает. Перезалил демку с закомментированным полетом http://pro.evokit.ru/

P.S. Файл main.js почистил от всего лишнего, оставил необходимые для работы галереи скрипты.

xmlns 22.06.2014 22:17

Исходники не нужны - они у меня уже есть=) Иначе как я исправил бы.

Так я же написал:
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>-->

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


Часовой пояс GMT +3, время: 17:16.