Доброго времени суток! Давно хочу реализовать задумку по улучшению работы с корзиной на сайте, но в силу своих скромных почти нулевых знаний в яваскрпт не могу обойтись без посторонней помощи. Суть работы корзины покажу на примере сайта krem-brule.ru
Но ... пока не понял: - каким скриптом подгружается текущее состояние корзины, именно при добавлении ... т.е не зависимо от того что было ( или не было ничего - пустая) - возможно ли подобное сделать для страницы товара в которой можно указать количество добавляемого товара (пример такой страницы http://06-medusa-light.ucoz.com/shop/19/desc/new-fashion-uv-sunglasses-for-man ) - возможно ли в этом открытом окне ( после добавления товара, или по клику на ссыль "заглянуть в корзину, в шапке, ) управлять содержимым корзины, так же как на странице /shop/checkout ( страница оформления заказа - удалять или корректировать количество товарной позиции )
На сайте krem-brule для кнопки используется ссылка, а на сайте с демо-шаблоном используется два инпута
... нужно много ещё чего перечислить но от дальнейшего, пока, воздержусь, хотел бы услышать ответ по второму и третьему пункту ( можно ли такое сделать для кнопки "В корзину" с указанием количества и управлять содержимым в аякс окне)
Но ... пока не понял: - каким скриптом подгружается текущее состояние корзины, именно при добавлении
Никаким “именно при добавлении”, при добавлении корзина сама обновляется (системно), а скрипт просто берет данные из уже обновленного скрытого блока корзины.
Доброго дня маэстро Хотел проблему загрузки данных в аякс окно решить через этот пример всё получилось с одной стороны, вроде не сложно
<div id="top_vis-basket"> <span>Корзина :</span> //- текст для информера корзины в шапке <a href="#top_load_basket_all" rel="nofollow" class="ulightbox"> //- ссылка для открытия аякс окна <span id="inf_top_basket"><script type="text/javascript">$('#inf_top_basket').html('<img src="/.s/img/wd/1/ajax.gif">');$.get('/shop/checkout',{},function(d){$('#inf_top_basket').html($('#vse_tovs_chek',d).html());});</script></span> //-контейнер для вывода данных о количестве товара со страницы оформления заказа /shop/checkout </a>
<div id="top_load_basket_all" style="width:700px;padding:5px; display:none;text-align:left"> //- задаём размер аякс окна и контейнер для его содержимого <div class="page3h text_b2-3 sup_cent">Ваша корзина</div> //- заголовок <div class="page3h"> //- блок функциональных кнопок с корзины, но не работают правильно <a class="basketclear" href="javascript://" rel="nofollow" onclick="return clearBasket();">Очистить</a> | <a class="basketorder" href="/shop/checkout">Оформить</a> </div> <div id="top_load_basket"> //- контенер для данных со страницы оформления <script type="text/javascript">$('#top_load_basket').html('<img src="/.s/img/wd/1/ajax.gif">');$.get('/shop/checkout',{},function(d){$('#top_load_basket').html($('#order-table',d).html());});</script> </div> </div>
но не правильно работают или вообще не работают несколько моментов: - данные грузятся со страницы оформления заказа на момент загрузки страницы нахождения ( т.е например можно находится/открыть на странице каталога и положить несколько товаров, при этом число товаров понятно что не обновляется в информере, но даже по клику на ссылку(число с количеством товара), всё равно данные идут с пустой страницы, как будто ничего нет в корзине, ну и понятно, что данные загрузки не обновились, но если обновить страницу то всё нормально станет, данные правильные Можно как-то это дело поправить?
- и второе - не работают кнопки обновления корзины, ... понимаю что не хватает скрипта обработки корзины, например вот этого
<script language="Javascript"><!-- var lock_buttons = 0;
function clearBasket(){ if(lock_buttons) return false; else lock_buttons = 1; var el = $('#shop-basket'); if(el.length){ var g=document.createElement("div"); $(g).addClass('myWinGrid').attr("id",'shop-basket-fade').css({"left":"0","top":"0","position":"absolute","border":"#CCCCCC 1px solid","width":$(el).width()+'px',"height":$(el).height()+'px',"z-index":5}).hide().bind('mousedown',function(e){e.stopPropagation();e.preventDefault();_uWnd.globalmousedown();}).html('<div class="myWinLoad" style="margin:5px;"></div>'); $(el).append(g); $(g).show(); } _uPostForm('',{type:'POST',url:'/shop/basket',data:{'mode':'clear'}}); return false; }
вывел корзину на всех страницах, очищать стало, но видеть обновление заказа или полную очистку можно так же только после обновления страницы, по идее то же не логично работает, не в режиме он-лайн, а только по обновлению страницы.
Как это можно поправить или, если не сложно показать пример
Заранее респект и уважуха
Сообщение отредактировал Andrio - Воскресенье, 12.05.2013, 21:25
<a href="#top_load_basket_all" rel="nofollow" class="ulightbox"> //- ссылка для открытия аякс окна <span id="inf_top_basket"><script type="text/javascript">$('#inf_top_basket').html('<img src="/.s/img/wd/1/ajax.gif">');$.get('/shop/checkout',{},function(d){$('#inf_top_basket').html($('#vse_tovs_chek',d).html());});</script></span> //-контейнер для вывода данных о количестве товара со страницы оформления заказа /shop/checkout </a>
Че за бред? Почему у тебя в ссылке - строчном элементе, какая-то байда, да еще и скрипт.. Рядом поставить не судьба?
Че за бред? Почему у тебя в ссылке - строчном элементе, какая-то байда, да еще и скрипт..
в данной ссылке другой строчный (спан) - это вроде нормально по идее ( строчный в строчном) ...а в спан загрузил количество товара ... это так пояснил свой ход мысли ... с остальным щас буду пробовать ... респект за внимание !
Не совсем понял, пока ( так сходу ) момент про пример и скрипт ... буду мудрить .. и вникать
в данной ссылке другой строчный (спан) - это вроде нормально по идее ( строчный в строчном) ...а в спан загрузил количество товара ... это так пояснил свой ход мысли
Не кол-во товара, а целая таблица..
И ты хочешь таблицу впихнуть в ссылку?.. ну да, конечно..
нет ... там именно одна цифра, спецом на странице /shop/checkout создан отдельный элемент в котором системным кодом выводится количество товара ... ну и этим скриптом загрузил её в нужный спан ( в информере ) ... так что по идее всё по фэншую )))
эта вся таблица с заказом и прочим функционалом грузится в скрытый див <div id="top_load_basket"> который при клике по ссылке выводится в аякс окне ... результат аякс окна не в этой ссылке выводится
код корзины ($BASKET$ ) можно использовать только раз на странице, такой фрагмент
Код
<?if($BASKET$)?> $BASKET$
это грубо говоря должно стоять в каком-нибудь боковом глобальном блоке ( не факт конечно, у кого какой диз) но если не использовать примочек то место ему там, а так можно и таким способом выводить, например как тут koleso-ua.com/shop/all ... отредактировать сам шаблон корзины и повесить скрипт для визуализации удобной( решение чисто на корзине) ... я же хотел бы в аяксе сделать рабочий кусок страницы - таблицу с заказом, как она на странице /shop/checkout потому пока не совсем понял привязку корзины и своей цели, так ... что-то понимаю ( подсознательно) ... что именно сам код $BASKET$ обеспечит онлайн отображение, без перезагрузки, содержимое и его количество ...
Сама корзина да ... так и есть, в ГБ прописана ...раньше только по модулю ИМ показывал ( по умолчанию так было) ... потом раскрыл по всем модулям, ну кроме гостевой, и то вроде и там уже открыл ( для тестов что бы всё работало ) и кроме некоторых ещё страниц ( работа с заказами и что-то ещё, но не в этом суть ) ...а в том что там ( в корзине) этот код
бесполезен, или я чего-то не догоняю .... мне ничего это не даёт (если прописать его с корзиной или в корзине) а вот в моём блоке изначальном он работает ... скрипт этот лучше( компактнее) ... грузит всю таблицу с чекаута в аяксовое окно, но в нём так же не работает( онлайн отображение и обновление, как на странице чекаута) ни удаление товара, точнее его визуальное удаление, без обновления всей страницы, ни изменение количества, изменение в инпуте количества и потом клик по кнопке "пересчитать" и последующее изменение( тут не помогает даже обновить, видать события какого-то или скрипта не хватает, хотя "очистить" - т.е удалить все товары, отрабатывает после обновления всей страницы, в аяксе после обновления пустая корзина выводится) ... кстати .. для шопа есть свой системный скрипт, он вроде только модулю ИМ работает, наверно в нём вопрос ... щас проверю ... подключу условиями с системы
Добавлено (13.05.2013, 00:50) --------------------------------------------- очистить наверно роботает ( после обновления страницы в аяксе) потому что это зарыто в скрипте, который в корзине ( в отдельном шаблоне) прописан дополнительно, и соотвественно стал на всех страницах сайта ...потому и очистить, стало отрабатывать (в корзине есть такая кнопка) ... но работает только если обновить всю страницу и только потом в аяксе пусто становиться
<script language="Javascript"><!-- var lock_buttons = 0;
function clearBasket(){ if(lock_buttons) return false; else lock_buttons = 1; var el = $('#shop-basket'); if(el.length){ var g=document.createElement("div"); $(g).addClass('myWinGrid').attr("id",'shop-basket-fade').css({"left":"0","top":"0","position":"absolute","border":"#CCCCCC 1px solid","width":$(el).width()+'px',"height":$(el).height()+'px',"z-index":5}).hide().bind('mousedown',function(e){e.stopPropagation();e.preventDefault();_uWnd.globalmousedown();}).html('<div class="myWinLoad" style="margin:5px;"></div>'); $(el).append(g); $(g).show(); } _uPostForm('',{type:'POST',url:'/shop/basket',data:{'mode':'clear'}}); return false; }
Это как в корзине - добавил товар, он в этом блоке появился, БЕЗ ОБНОВЛЕНИЯ СТРАНИЦЫ ВСЕЙ, и соответственно поменялась сумма и прочие данные
Так ... по теме количества товаров в аяксе, без перезагрузки ... наверно не получится, потому как даже на стр. /shop/checkout при изменении в поле ( в инпуте) количества товара по позиции и после клика по "пересчитать" происходит автообновление всей страницы, потому наверно в аяксе, не закрывая его и не перегружая всю страницу, не получится такое, нашёл скрипт на креме( точнее понял для чего там один скрипт) который убирает тег инпут и оставляет только цифру, чуть под себя поправил ( изменил имя id-шника )
<script type="text/javascript"> $.get('/shop/checkout',function(showc){ var o=$('#order-table',showc); $('td.order-item-cnt',o).each(function(){ $(this).html($(this).find('input').val()); }); $('#top_load_basket').html(o.html()); // тут имя поправил }); </script>
td.order-item-cnt - именно в этой ячейке идёт количество в инпуте PS: но что-то кривовато работает, не то из не согласованности используемого мной скрипта ... или ещё почему, в общем инпут затирает через раз ... то сработает, то нет ... что не так?
... или можно так сделать в аяксе с изменением количества и пересчетом суммы итоговой ?
по теме количества товаров в аяксе, без перезагрузки ... наверно не получится, потому как даже на стр. /shop/checkout при изменении в поле ( в инпуте) количества товара по позиции и после клика по "пересчитать" происходит автообновление всей страницы, потому наверно в аяксе, не закрывая его и не перегружая всю страницу, не получится такое
Это почему? корзина же обновляется, а в корзине есть оператор выводящий кол-во товаров, и кол-во позиций, да там вообще хватает разных операторов. Кроме того, а зачем тебе в аяксе кол-во товаров? На глаз не заметно? Да и посчитать можно, на крайняк..