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; }); Но проблема в том, что эти коды работают только по отдельности, то есть если я подключаю код полета в коризну, то товар летит, все красиво, но перестает работать код добавления в корзину. Вопрос в том, как эти скрипты склеить вместе, чтоб они друг другу не мешали? |
<a class="in_bas" href="1399792083">В корзину!</a> $('.product').on('click', function() { cart_add($(this).attr('href')); ... } |
Огромное спасибо, заработало, товар добавляется в корзину, фото летит, но не работает последняя часть первого кода
$('#'+n).html('<div class=incart>Добавлено!</div>'); То есть после нажатия кнопки "купить" не появляется блок <div class=incart>Добавлено!</div> |
А до этого сообщение выскакивало?
Можно код того элемента, куда происходит вставка? |
Короче я тут сам не справлюсь, давайте я Вам заплачу (например по вебмани) если сможете сделать. Это вобщем я купил скрипт корзины (добавляение товаров, офомрление заказа, есть примитивная админка) и пытаюсь его доделать под свои нужды.
Вот демка с отключенным полетом 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, а тажке мешает открывать описание товара (при нажатии на фото или название). Ссылку на исходники могу скинуть в личку, если согласны сделать. |
$('div.product').on('click','a.in_bas', function() { cart_add($(this).attr('href')); ... } Летели от всех ссылок, т.к. в on() не было указано, а какая конкретно ссылка должна вызывать полет картинки. Подключите /cart/js/ajax_cart.js в head (но после библиотеки jquery). Вроде должно работать. PS. А если я хочу купить 3 одних и тех же часов? Получается, чтобы добавить их в корзину, нужно 3 раза перезагрузить страницу, чтобы появилась кнопка "В корзину!". Мне кажется лучше убрать все эти полеты, а где-нибудь в углу экрана пусть появляется всплывающее сообщение, мол товар такой-то добавлен в корзину в количестве столько-то штук. И саму кнопку "В корзину" оставить в покое - чтобы не перекрывалась никам элементом) |
Насчет перекрытия - Вы правы, разместил элемент "ДОБАВЛЕНО" вверху блока поверх фото, кнопка купить свободна. Насчет полета - не знаю почему, но очень хочется реализовать, всегда мечтал))) В общем по Вашему совету теперь срабатывает только на кнопку "купить", но проблема совместимости осталась, то есть товар летит, но перестает появляться блок ДОБАВЛЕНО и в куки записывается неправильная информация, при доабвлении одного товара в куку под названием "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 или даже просто выше кнопки КУПИТЬ, то он вовсе не работает. |
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> |
100 товаров никто добавлять не будет, поэтому не заморачивался. z-index картинки в css чето не помогает, может его надо прописать в самом скрипте полета, но это не главная проблема сейчас. Проблема совместимости не решилась, main.js отключил, это я выдрал из какого-то сайта галерею в модальном окне и видимо в том файле много всего что относится к функциям того сайта. галерею потом заменю на менее увесистую, но не в нем проблема, именно после подключения скрипта полета неправильно пишет в куки и не появляется блок ДОБАВЛЕНО. кстати, спасибо за эффект исчезновения)) Может все-таки скину Вам исходники, чтобы вы посмотрели что к чему или так видите на демке? Замучался с этим полетом, но уже отступать назад не хочеться) Вид ссылки добавления в корзину менять не вариант, так как без полета она же работает. Перезалил демку с закомментированным полетом http://pro.evokit.ru/
P.S. Файл main.js почистил от всего лишнего, оставил необходимые для работы галереи скрипты. |
Исходники не нужны - они у меня уже есть=) Иначе как я исправил бы.
Так я же написал: 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. |