Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.06.2014, 09:06
Интересующийся
Отправить личное сообщение для martinways Посмотреть профиль Найти все сообщения от martinways
 
Регистрация: 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.
Ответить с цитированием
  #2 (permalink)  
Старый 22.06.2014, 09:41
Аспирант
Отправить личное сообщение для xmlns Посмотреть профиль Найти все сообщения от xmlns
 
Регистрация: 30.07.2013
Сообщений: 47

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

$('.product').on('click', function() {
cart_add($(this).attr('href'));
...
}
Ответить с цитированием
  #3 (permalink)  
Старый 22.06.2014, 10:07
Интересующийся
Отправить личное сообщение для martinways Посмотреть профиль Найти все сообщения от martinways
 
Регистрация: 22.06.2014
Сообщений: 10

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

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


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

Последний раз редактировалось martinways, 22.06.2014 в 10:12.
Ответить с цитированием
  #4 (permalink)  
Старый 22.06.2014, 11:07
Аспирант
Отправить личное сообщение для xmlns Посмотреть профиль Найти все сообщения от xmlns
 
Регистрация: 30.07.2013
Сообщений: 47

А до этого сообщение выскакивало?
Можно код того элемента, куда происходит вставка?
Ответить с цитированием
  #5 (permalink)  
Старый 22.06.2014, 11:59
Интересующийся
Отправить личное сообщение для martinways Посмотреть профиль Найти все сообщения от martinways
 
Регистрация: 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, а тажке мешает открывать описание товара (при нажатии на фото или название). Ссылку на исходники могу скинуть в личку, если согласны сделать.
Ответить с цитированием
  #6 (permalink)  
Старый 22.06.2014, 17:51
Аспирант
Отправить личное сообщение для xmlns Посмотреть профиль Найти все сообщения от xmlns
 
Регистрация: 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 раза перезагрузить страницу, чтобы появилась кнопка "В корзину!".

Мне кажется лучше убрать все эти полеты, а где-нибудь в углу экрана пусть появляется всплывающее сообщение, мол товар такой-то добавлен в корзину в количестве столько-то штук.
И саму кнопку "В корзину" оставить в покое - чтобы не перекрывалась никам элементом)
Ответить с цитированием
  #7 (permalink)  
Старый 22.06.2014, 19:21
Интересующийся
Отправить личное сообщение для martinways Посмотреть профиль Найти все сообщения от martinways
 
Регистрация: 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.
Ответить с цитированием
  #8 (permalink)  
Старый 22.06.2014, 21:18
Аспирант
Отправить личное сообщение для xmlns Посмотреть профиль Найти все сообщения от xmlns
 
Регистрация: 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>
Ответить с цитированием
  #9 (permalink)  
Старый 22.06.2014, 21:41
Интересующийся
Отправить личное сообщение для martinways Посмотреть профиль Найти все сообщения от martinways
 
Регистрация: 22.06.2014
Сообщений: 10

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

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

Последний раз редактировалось martinways, 22.06.2014 в 22:13.
Ответить с цитированием
  #10 (permalink)  
Старый 22.06.2014, 22:17
Аспирант
Отправить личное сообщение для xmlns Посмотреть профиль Найти все сообщения от xmlns
 
Регистрация: 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>-->

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Два файла, две функции, но с одним именем Janom Общие вопросы Javascript 19 31.01.2013 10:46
Вызов двух анимаций одним кликом Igorbek Общие вопросы Javascript 5 29.07.2012 23:37
нажать на все ссылки одним кликом Abraham jQuery 13 01.06.2011 17:14
Ссылка на скачивание контента одним кликом мыши Bebarr Swallow Общие вопросы Javascript 1 18.03.2011 10:08
вставка картинок одним кликом MegaGoblin Общие вопросы Javascript 12 25.03.2010 13:20