Форум русской поддержки Joomla!® CMS
08.12.2016, 18:17:27 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1] 2  Все   Вниз
  Добавить закладку  |  Печать  
Автор

Товар улетающий в корзину

 (Прочитано 7490 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« : 05.10.2012, 19:33:35 »

Вот код реализующий эффект полета товара в корзину как тут http://stepasyuk.org.ua/polet-tovara-v-korzinu-metod-animate-na-jquery немного доработано правда.

Код вставлял в начало файла /components/com_jshopping/templates/default/list_products/product.php

Код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script>
   <script type="text/javascript"> 
$('a.button_buy').click(function() {
$('#target').clone().appendTo(".image_block")
.css( {'position' : 'absolute', 'z-index' : '10000', 'left':$(".image_block").offset()['left'], 'top':$(".image_block").offset()['top']} )
.animate({opacity: 0.05,
                            left: $(".korzina").offset()['left'],
                            top: $(".korzina").offset()['top'],
                            position: 'absolute',
                            width: 20}, 1000, function() {
                   $(this).remove();
              });
});
    </script>   

где #target - id который я приписал к картинке товара.
.korzina - id блока с корзиной
.image_block - контейнер товара в списке категории

Проблема в том что в корзину улетает только картинка 1-го товара, вне зависимости какой мы нажали купить. Как доработать код? Помогите пожалуйста

Демо http://skras.ru.xsph.ru/parikmakherskoe-oborudovanie/kresla.html
« Последнее редактирование: 05.10.2012, 19:39:59 от Ramil8009 » Записан
dmitry_stas
Профи
********

Репутация: +798/-4
Offline Offline

Сообщений: 7774



« Ответ #1 : 05.10.2012, 20:09:50 »

по крайней мере, чтобы дать понять скрипту какой рисунок ему улететь, надо блокам задать разные id, а не одинаковый как сейчас target
Записан
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #2 : 05.10.2012, 20:18:26 »

Да, спасибо это ясно, но не хватает знаний, как присвоить этот id в цикле, вот сижу пока мануалы читаю по php
А нельзя ли доработать скрипт, чтобы он брал не id блока а адреса картинок? например как берет их сам JS <?php print $product->image?>

Пробовал вставлять скрипт прямо в контейнер товара, а не в самое начало, результат то же
Записан
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #3 : 05.10.2012, 20:37:23 »

id разный каждой картинке и присвоил вот так: id="image<?php print $product->product_id?>"
и картинку обернул дивом <div class="block<?php print $product->product_id?>"></div>
, теперь нужно как то вставить эти id в скрипт

итого

Код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script>
   <script type="text/javascript"> 
$('a.button_buy').click(function() {
$('#image_id').clone().appendTo(".block_id")
.css( {'position' : 'absolute', 'z-index' : '10000', 'left':$(".block_id").offset()['left'], 'top':$(".block_id").offset()['top']} )
.animate({opacity: 0.05,
                            left: $(".korzina").offset()['left'],
                            top: $(".korzina").offset()['top'],
                            position: 'absolute',
                            width: 20}, 1000, function() {
                   $(this).remove();
              });
});
    </script> 
« Последнее редактирование: 05.10.2012, 21:40:14 от Ramil8009 » Записан
dmitry_stas
Профи
********

Репутация: +798/-4
Offline Offline

Сообщений: 7774



« Ответ #4 : 05.10.2012, 22:19:39 »

вообще гораздо правильнее будет построить путь к картинке относительно нажатой кнопки купить. тогда и скрипт надо будет всего один раз вставить, а не так как сейчас - сколько товаров - столько раз скрипт вставлен
Записан
SDKiller
Dev Team
******

Репутация: +325/-5
Offline Offline

Пол: Мужской
Сообщений: 2749


...ergo sum


« Ответ #5 : 05.10.2012, 22:21:33 »

вообще гораздо правильнее будет построить путь к картинке относительно нажатой кнопки купить. тогда и скрипт надо будет всего один раз вставить, а не так как сейчас - сколько товаров - столько раз скрипт вставлен

Ага, тем более что

Код:
$('a.button_buy').click(function() {
Записан
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #6 : 05.10.2012, 22:23:38 »

А можно подробнее как это сделать, я знаю php и java script только в пределах необходимых для верстки))
Записан
dmitry_stas
Профи
********

Репутация: +798/-4
Offline Offline

Сообщений: 7774



« Ответ #7 : 05.10.2012, 23:14:42 »

у jQuery есть все необходимые методы для получения ссылки на нужный элемент на странице. Вам нужно получить элемент не по конкретному ID как сейчас ( $('#image_id') ), а относительно текущей кнопки, на которую вы вешаете событие.
т.е. от $(this). Например, подняться до уровня <td class="image">, несколько раз получив родительский элемент, затем получить первый дочерний элемент и уже в нем получить img
Записан
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #8 : 05.10.2012, 23:17:56 »

я все таки вставил в код нужные id-шки, исхитрившись
Код:
<?php $myimage = "$product->product_id"; ?>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script>
   <script type="text/javascript"> 
$('<?php echo "#knopka"; echo "$myimage"; ?>').click(function() {
$('<?php echo "#image"; echo "$myimage"; ?>').clone().appendTo("<?php echo ".block"; echo "$myimage"; ?>")
.css( {'position' : 'absolute', 'z-index' : '10000', 'left':$("<?php echo ".block"; echo "$myimage"; ?>").offset()['left'], 'top':$("<?php echo ".block"; echo "$myimage"; ?>").offset()['top']} )
.animate({opacity: 0.05,
                            left: $(".korzina").offset()['left'],
                            top: $(".korzina").offset()['top'],
                            position: 'absolute',
                            width: 50}, 1000, function() {
                   $(this).remove();
              });
});
    </script> 

В HTML коде страницы в яваскрипте все показывает как надо, только вот это не работает как нужно, теперь улетают все товары((

Спасибо за ссылку буду теперь пытаться делать по другому
« Последнее редактирование: 05.10.2012, 23:53:35 от Ramil8009 » Записан
dmitry_stas
Профи
********

Репутация: +798/-4
Offline Offline

Сообщений: 7774



« Ответ #9 : 05.10.2012, 23:23:48 »

да, надо попытаться по другому

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

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #10 : 05.10.2012, 23:28:35 »

У меня такое ощущение, что если я смог сделать чтоб все товары улетали в корзину одновременно, то возможно сделать таким же образом, чтоб улетал только нужный.
Кнопке "купить" тоже привязал id и вставил его в скрипт. По логике должно было сработать наконец, но скрипт не пашет, хотя на с странице все верно. В чем проблема, почему скрипт перестает работать если кнопке присвоить id?
« Последнее редактирование: 06.10.2012, 00:07:50 от Ramil8009 » Записан
SDKiller
Dev Team
******

Репутация: +325/-5
Offline Offline

Пол: Мужской
Сообщений: 2749


...ergo sum


« Ответ #11 : 06.10.2012, 01:02:19 »

а относительно текущей кнопки, на которую вы вешаете событие.

По id всё же надёжнее (иначе при правке вёрстки может быть потом придётся лезть и править скрипт), и производительнее.

Для ТС - почему бы вместо этого в самом начале не объявить именованную функцию, которую можно будет повесить непосредственно на атрибут "onclick" кнопки? И DOM быстрее отработает, чем вешать события по классу или id, и в функцию можно будет непосредственно передать id параметром.
Что-то типа

Код:
<button ...... onclick="myFuction('<?php echo $product_id;?>'); return false;">Купить</button>
« Последнее редактирование: 06.10.2012, 01:06:08 от SDKiller » Записан
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #12 : 06.10.2012, 01:05:57 »

Цитировать
Для ТС - почему бы вместо этого в самом начале не объявить именованную функцию, которую можно будет повесить непосредственно на атрибут "onclick" кнопки? И DOM быстрее отработает, чем вешать события по классу или id, и в функцию можно будет непосредственно передать id параметром.
Я не владею настолько Javascript

А все таки почему скрипт перестает рабоать если кнопе "купить" тоже присвоить ID ?
Записан
SDKiller
Dev Team
******

Репутация: +325/-5
Offline Offline

Пол: Мужской
Сообщений: 2749


...ergo sum


« Ответ #13 : 06.10.2012, 01:07:09 »

Я не владею настолько Javascript

А все таки почему скрипт перестает рабоать если кнопе "купить" тоже присвоить ID ?

Яваскрипт перестаёт работать не от присвоения id а от того что где-то не хватает или наоборот лишняя запятая, кавычка и т.п.
В консоли файербага смотрите ошибки.
Записан
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #14 : 06.10.2012, 01:12:57 »

Спасибо, но я меняю только один элемент $('<?php echo "a.button_buy"; echo "$myimage"; ?>')  и перестает работать
Вроде все чисто
Записан
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #15 : 06.10.2012, 01:53:17 »

И все таки я его добил. Ура товарищи, в связке с ice_cart работает прилично.
Вот мое "не кошерное" решение, может кому пригодится
Скрипт не работал потому что <?php $myimage = "$product->product_id"; ?> нужно было вставить в каждый цикл
Вот код скрипта вставляем в начало /components/com_jshopping/templates/default/list_products/product.php
Код:
<script type="text/javascript"> 
$('<?php echo "a.button_buy"; echo "$myimage"; ?>').click(function() {
$('<?php echo "#image"; echo "$myimage"; ?>').clone().appendTo("<?php echo ".block"; echo "$myimage"; ?>")
.css( {'position' : 'absolute', 'z-index' : '10000', 'left':$("<?php echo ".block"; echo "$myimage"; ?>").offset()['left'], 'top':$("<?php echo ".block"; echo "$myimage"; ?>").offset()['top']} )
.animate({opacity: 0.05,
                            left: $(".korzina").offset()['left'],
                            top: $(".korzina").offset()['top'],
                            position: 'absolute',
                            width: 50}, 1000, function() {
                   $(this).remove();
              });
});
    </script>

       

В том же файле  после
Код:
   <td class="image">
вставляем
Код:

<?php $myimage = "$product->product_id"; ?>
меняем
Код:
<div class="image_block">
на
Код:
<div class="image_block<?php print $product->product_id?>">

Оборачиваем ссылку с картинкой и присваеваем ей id 
Код:
<div class="block<?php print $product->product_id?>">     <a href="<?php print $product->product_link?>">
 <img class="jshop_img" src="<?php print $product->image?>" id="image<?php print $product->product_id?>" alt="<?php print htmlspecialchars($product->name);?>" /></div>
 </a></div>
меняем код кнопки
Код:
<a class="button_buy"
на
Код:
<a class="button_buy<?php print $product->product_id?>"
У вас в шаблоне должен существовать класс .korzina, туда и будет лететь картинка товара.
Только почему-то jQUERY у меня магазинный не работал, пришлось вставлять отдельно.
Может работать (добавлять товар) без обновления страницы вместе с модулем Ice Jshopping Cart
« Последнее редактирование: 06.10.2012, 02:23:47 от Ramil8009 » Записан
dmitry_stas
Профи
********

Репутация: +798/-4
Offline Offline

Сообщений: 7774



« Ответ #16 : 06.10.2012, 23:49:09 »

По id всё же надёжнее
полностью согласен. во-первых по указанной причине, во-вторых я в принципе не люблю и стараюсь где можно избегать таких массовых навешиваний событий, ибо зачем нужна эта лишняя нагрузка, если onclick отлично отработает только когда необходимо, не понятно
Записан
moolkin
Осваиваюсь на форуме
***

Репутация: +15/-0
Offline Offline

Пол: Мужской
Сообщений: 67



« Ответ #17 : 07.10.2012, 21:38:59 »

вынес скрипт в файл list_products.php

Код:
<script type="text/javascript">
        function FlyImage(myimage)  {

            jQuery('#image'+myimage).clone().appendTo(".block"+myimage)
                .css( {'position' : 'absolute', 'z-index' : '10000', 'left':jQuery(".block"+myimage).offset()['left'], 'top':jQuery(".block"+myimage).offset()['top']} )
                .animate({opacity: 0.05,
                    left: jQuery(".cartajax-module-list").offset()['left'],
                    top: jQuery(".cartajax-module-list").offset()['top'],
                    position: 'absolute',
                    width: 50}, 1000, function() {
                    jQuery(this).remove();
                });
        }

</script>

самой кнопке навешиваем такое событие:
Код:
<a onclick="FlyImage(<?php echo $product->product_id;?>); return false;" href="<?php print $product->buy_link?>"><?php print _JSHOP_BUY?></a>

разметка та - что даёт автор постом выше.
вот только непонятно как сделать, чтобы картинка отлетала не из абстрактной точки экрана, а из самой картинки, и летела строго в корзину.

на демке кстати тоже летит непойми откуда.... http://skras.ru.xsph.ru/parikmakherskoe-oborudovanie/kresla.html
« Последнее редактирование: 07.10.2012, 21:44:31 от moolkin » Записан
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #18 : 07.10.2012, 21:42:11 »

О, классно! Чуть позже попробую
Цитировать
вот только непонятно как сделать, чтобы картинка отлетала не из абстрактной точки экрана, а из самой картинки, и летела строго в корзину.
Я на свой шаблон грешил, думал сверстаю другой будет норм.
Записан
moolkin
Осваиваюсь на форуме
***

Репутация: +15/-0
Offline Offline

Пол: Мужской
Сообщений: 67



« Ответ #19 : 07.10.2012, 21:47:59 »

О, классно! Чуть позже попробуюЯ на свой шаблон грешил, думал сверстаю другой будет норм.

как я понял позиция элемента block считается от родительского блока со свойством relative. у каждого в шаблоне они разные. и соответственно картинка смещается непонятно куда...

и как это победить пока непонятно. видел такой эффект на магазинах типа simpla shop или что-то такое. там отлетает чётко от картинки
Записан
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #20 : 07.10.2012, 23:44:37 »

Решил проблему неправильного места отрыва картинки, путем подстройки шаблона под сам скрипт . Вставил в самый верх контейнера с товаром пустой DIV с присвоенным id  <div class="start<?php print $product->product_id?>"></div> и  в скрипте само собой поправил .block на .start
Теперь все четко. В общем можно индивидуально править верстку под скрипт. Может кто знает как универсальнее решить проблему ?
« Последнее редактирование: 07.10.2012, 23:48:26 от Ramil8009 » Записан
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #21 : 08.10.2012, 00:13:46 »

Были проблемы в браузерах кроме Firefox. Однако проблема осталась
« Последнее редактирование: 08.10.2012, 00:39:17 от Ramil8009 » Записан
SDKiller
Dev Team
******

Репутация: +325/-5
Offline Offline

Пол: Мужской
Сообщений: 2749


...ergo sum


« Ответ #22 : 08.10.2012, 02:20:18 »

на демке кстати тоже летит непойми откуда.... http://skras.ru.xsph.ru/parikmakherskoe-oborudovanie/kresla.html

Вот тут посимпатичнее летает

http://demo.simplacms.ru/catalog/mobilnye-telefony


Но особенно весело - кликнуть на парочку в самом низу страницы  а потом быстро проскроллить вверх и дожидаться прилёта  Grin


Показать текстовый блок
« Последнее редактирование: 08.10.2012, 14:47:33 от SDKiller » Записан
moolkin
Осваиваюсь на форуме
***

Репутация: +15/-0
Offline Offline

Пол: Мужской
Сообщений: 67



« Ответ #23 : 08.10.2012, 08:29:48 »

Решил проблему неправильного места отрыва картинки, путем подстройки шаблона под сам скрипт ... Может кто знает как универсальнее решить проблему ?

решение подсказал SDKiller, за что ему + в репку Wink

итак, опишу что в конечном итоге требуется:

1) скачиваем скрипт jquery-ui.min.js
2) подключаем в файле list_products.php два скрипта:
Код:
<script src="templates/имя_вашего шаблона/js/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function FlyImage(myimage)  {
        var o1 = jQuery('#image'+myimage).offset();
        var o2 = jQuery('#vm_cart').offset();
        var dx = o1.left -  o2.left;
        var dy = o1.top - o2.top;
        var distance = Math.sqrt(dx * dx + dy * dy);
        jQuery('#image'+myimage ).effect("transfer", { to: jQuery("#link_to_move"), className: "transfer_class" }, distance);
        jQuery('.transfer_class').html(jQuery('.block'+myimage).html());
        jQuery('.transfer_class').find('img').css('height', '100%');
        jQuery('.transfer_class').find('img').css('width', 'auto');
        return false;
    };
</script>

небольшие комментарии по элементам:
'#image'+myimage - это уникальный id картинки;
'#vm_cart' - id модуля корзины;
#link_to_move - в моём случае это "значок" корзины, чтобы картинка улетала прямо в значок корзинки, вместо него можно использовать '#vm_cart';
'.transfer_class'  - любой класс, ни на что не влияет
'.block'+myimage - родительский класс блока с картинкой


3) правим файл product.php в папке list_product:
а именно - заворачиваем ссылку с картинкой в div с классом и добавляем самой картинке уникальный id
Код:
<div class="block<?php print $product->product_id?>">
            <a href="<?php print $product->product_link?>">
               <img  id="image<?php print $product->product_id?>" src="<?php print $product->image?>" alt="<?php print htmlspecialchars($product->name)?>" />
            </a>
         </div>
    4) кнопке купить вешаем событие onclick:
Код:
<a onclick="FlyImage(<?php echo $product->product_id;?>); return false;" href="<?php print $product->buy_link?>"><?php print _JSHOP_BUY?></a>


всё после этого всё должно заработать (если конечно у вас есть либо модуль корзины от ice либо платный от разработчиков)

пример того, как работает у меня: http://gekon.moolkin.ru/catalog/biblioteka-shkolnika
« Последнее редактирование: 08.10.2012, 08:32:51 от moolkin » Записан
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #24 : 08.10.2012, 09:53:48 »

Все отлично работает. Спасибо большое лично от меня, и думаю многие решат так украсить магазин, потому что сам процесс добавления в корзину в JoomShopping - по умолчанию очень убогий
Записан
nevigen
Moderator
*****

Репутация: +734/-16
Offline Offline

Пол: Мужской
Сообщений: 8809


http://n*****n.com


« Ответ #25 : 08.10.2012, 10:01:58 »

он не убогий. он стандартный.
все эти полёты и перетаскивания, это для тинейджеров
ни один серьезный магазин не перегружает себя такой .....

в больших магазинах главное строгость и минимальные пути. Остальное.. в Новый Год на елке можно посмотреть.
Записан
moolkin
Осваиваюсь на форуме
***

Репутация: +15/-0
Offline Offline

Пол: Мужской
Сообщений: 67



« Ответ #26 : 08.10.2012, 10:09:53 »

он не убогий. он стандартный.
все эти полёты и перетаскивания, это для тинейджеров
ни один серьезный магазин не перегружает себя такой .....

в больших магазинах главное строгость и минимальные пути. Остальное.. в Новый Год на елке можно посмотреть.

про полёты согласен, а вот перезагрузка после покупки - это унылость, как ни смотри на это. хорошо хоть платная доработка есть, но имхо, во многих CMS такой функционал - стандартный...
Записан
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #27 : 08.10.2012, 10:18:44 »

Nevigen, я имел в виду не столько перетаскивания, а саму реализацию покупки вообще. По умолчанию нет надписи "Товар добавлен в корзину", нет функционального окошечка как в Вирте, страница вынуждена обновлятся, и так далее.
Думаю так все равно лучше, поскольку меня например клиенты все время просят, как то обозначить что товар добавился в корзину,и желательно без обновления страницы.
Записан
nevigen
Moderator
*****

Репутация: +734/-16
Offline Offline

Пол: Мужской
Сообщений: 8809


http://n*****n.com


« Ответ #28 : 08.10.2012, 10:36:37 »

Nevigen, я имел в виду не столько перетаскивания, а саму реализацию покупки вообще. По умолчанию нет надписи "Товар добавлен в корзину", нет функционального окошечка как в Вирте, страница вынуждена обновлятся, и так далее.
Думаю так все равно лучше, поскольку меня например клиенты все время просят, как то обозначить что товар добавился в корзину,и желательно без обновления страницы.
По умолчанию нет надписи "Товар добавлен в корзину" - есть ! выводится как системное сообщение. Возможно у Вас позиция для вывода сиситемных сообщений в шаблоне профукана Wink

Без обновления.. это да... момент такой есть, но есть Аякс корзины например.
Записан
Ramil8009
Осваиваюсь на форуме
***

Репутация: +1/-1
Offline Offline

Сообщений: 124


« Ответ #29 : 08.10.2012, 18:41:38 »

Пытался вставить скрипт в страницу карточки товара. Никак не получается подключить не один из вариантов. Странно как то
Записан
Страниц: [1] 2  Все   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet