Доброго времени суток! Давно хочу реализовать задумку по улучшению работы с корзиной на сайте, но в силу своих скромных почти нулевых знаний в яваскрпт не могу обойтись без посторонней помощи. Суть работы корзины покажу на примере сайта 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
Че за бред? Почему у тебя в ссылке - строчном элементе, какая-то байда, да еще и скрипт..
в данной ссылке другой строчный (спан) - это вроде нормально по идее ( строчный в строчном) ...а в спан загрузил количество товара ... это так пояснил свой ход мысли ... с остальным щас буду пробовать ... респект за внимание !
Не совсем понял, пока ( так сходу ) момент про пример и скрипт ... буду мудрить .. и вникать
нет ... там именно одна цифра, спецом на странице /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: но что-то кривовато работает, не то из не согласованности используемого мной скрипта ... или ещё почему, в общем инпут затирает через раз ... то сработает, то нет ... что не так?
... или можно так сделать в аяксе с изменением количества и пересчетом суммы итоговой ?
А почему в козиночном? м? чем обусловлен твой выбор?
тем что именно в корзиночном формате ( можно сказать минимодуле)происходит обновление итоговой суммы, отображение добавляемого товара со страниц магазина(каталога), исчезновение удаляемого товара и при этом автоподсчёт суммы итоговой без перезагрузки страницы в целом. На странице чекаута при внесении изменения колличества, удаления товаров происходит автоперезагрузка страницы ... вот по этому и хотел бы что без обновления аякса ( как бы в статически открытом диалоговом окне можно было удалить товар и при этом сумма менялась) ... без перезагрузки всей страницы и аякса На этом был основан мой выбор в какую сторону смотреть
да мне от корзины надо только информер в шапку сделать - типа "Ваша корзина: N товаров на M денег" ... но есть одно "НО" )) ... в корзине количество товаров не кажет ... а на креме как-то сделано ... пока не вник как
с корзиной - еще проще, даже гетить ничего не надо, все под рукой.
в тему моих вопросов смотришь - как продублировать контент с одного id в другой на одной странице? Проблема в том что некоторые системные коды работают только в шаблоне корзины, и просто, сами по себе на других страницах ( в модулях или в индексоном, не в шопном) не отображают ничего ... каким скриптом или чем такое делают ?
имел ввиду что без гета с другой, а в рамках одной страницы
проблема пока в том, что как вывести обновляемые данные по корзине в шапке ( количество и сумму) без перезагрузки страницы всей, как это в миникорзине происходит, при этом сама эта миникозина, штатная, прописанная в ГБ так же на странице останется( просто кому что удобней, кто-то в шапку ломится, а кто-то прокрутит чуть и корзину юзает штатную)
как я понял, в корзине штатной, всё обновление, без перезагрузки, завязано на корзиночном скрипте ( потому как работает на всех страницах, не только модуля ИМ, в которых нет скриптов общих для магазина, которые в хэде цепляются к ИМ, и остаётся только скрипт прописанный в самом шаблоне корзины, судя по всему он и делает эти обновления без перезагрузки) и id этого блока, в котором эта корзина - shop-basket ... но не писать же два одинаковых id - шника ... можно как-то сделать что бы в шапке, как и в самой корзине количество и сумма обновлялись при добавлении или удалении товаров ?
на всякий случай сам этот скрипт с шаблона корзины
<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; }
но функции разные объявляются, подозреваю что эти два скрипта можно объединить, но ... увы пока не владею таким ... не стал бить код из-за недопонимания
точняк ... хотя момент времени тоже присутствует ... я много чего поделал у себя на сайте, ну ты в курсе ... а потом со временем ... полгода или больше смотришь, и думаешь :"Очём думал ...как делал?! ... даже не про то что не понимая, по примерам делал, а даже то, что раньше более быстро и правильнее делал, сейчас, после долгого перерыва не так просто и легко .... тренинига и практики мало ... быстрей забываешь
Объясни словами и подробно что делает участок вот этого кода:
как я это понимаю ... точней не совсем понимаю, но догадываюсь : для элемента хтмл top_load_basket что-то делается ( подозреваю что "d" это определение задачи загрузки) из элемента хтмл order-table
знаки $ - не понимаю для чего, но они постоянно в JS используются ... и видимо для разных целей ( обьявления/присвоения, указания на элемент или что-то подобное) html - определяет что мы работаем с документом и элементами данного типа
Ты часто делишь в столбик? Когда последний раз? За сколько минут вспомнишь?
давно не делил ... но если просто разделю, для примера 15 на 2 (заранее зная простой итог) ... для того что бы вспомнить алгоритм, то потом и послежней осилю .. наверно
Добавлено (15.05.2013, 02:56) --------------------------------------------- ... примерно через минуту стал делить 43987 на 12 ...итог 3665 и 7/12 в остатке
вообще я когда-то хотел, точнее попробовал самостоятельно позаниматься основам JS ... но ... это не хтмл и ксс ...в которых я более менее ( на 3+ по своей скромной оценке) ... много что абсолютно не понятного и потому забросил в силу нехватки времени и мозгов ... хотя хтмл то-же начинал по тихоньку .... начал с "постройки ру" читать и вникать ... и так постепенно немного освоился ... да ты про меня в курсе что я и как "могу" ... так что скрипты для меня пока тяжеловаты ... так по мелочи поправить могу ...через раз что-то для себя ... а чуть посложней и всё ... (|) (знак понятен надеюсь)
Соответственно. что бы переместить один код в другой нужно всего лишь убрать d:
а если этот изначальный элемент изменился ...благодаря скриптам корзины(сумма и количество), этот код его не обновит же ... надо что-то добавить для сравнения наверно? ... что если не одинаковы, то перегрузить снова ... и не будет ли это грузить браузер/комп посетителя ?
Добавлено (15.05.2013, 03:28) --------------------------------------------- ладно ... спс за внимание и уроки ликбеза ... завтра, точне сегодня на работу ... тепло стало, сервиса и ремонта прибавилось ... считай 10 "пятёрочек" с их говнохолодом (старое или довольно изношеное ... 3 из 5 просят уже хорошего апгрейда в среднем, да и техника не вечна, а всё денег стоит, вот и экономят ... типо сервисом компенсируем, потому после зимы это сильно проявляется - нехватка газа, забитые кондёры говном и грязью (уличные теплообменники) ) ... наверняка у кого-нибудь что-нибудь проявится ... до завтра, если не зависну на объекте
Сообщение отредактировал Andrio - Среда, 15.05.2013, 03:30