Модератор форума: likbezz  
Оформление работы корзины для лучшей конверсии сайтов юкоз
Дата: Вторник, 21.05.2013, 08:37 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Andrio,
Цитата (Andrio, Пн, 20.05.2013, 01:58:48)
конечно ... это очевидно ...

На)



http://beltex.org/shop/

Цитата (Andrio, Пн, 20.05.2013, 01:58:48)
да ..работает ...но как-то не стабильно затирает тег инпута ( через раз ...то просто данные с поля покажет, то вместе с полем,

..Ну, я вообще, не совсем это имел в виду, .. но возможность косяков очевидна при таком методе..

Прикрепления: 9394885.png (28.3 Kb)

 
Дата: Вторник, 21.05.2013, 23:30 |
Лейтенант
Группа: Проверенные
Сообщений: 59
Награды: 0
Репутация: 0
Статус: Offline


Цитата (likbezz, Вт, 21.05.2013, 08:37:56)
На)

...называется на ... снеси себе мозг ... и так то в JS ноль ... дак ещё и шаблонизатор на JS

Код
<script type="text/x-tpl" id="t-bsBx1">
<div id="bsBx1" style="width:300px;">


офигенно ... я не что с type="text/x-tpl" я нормально с type="text/javascript" не всегда могу работать

это может вариант для реализации удаления товаров, кстати изменения количества нет ... но я уже мозг себе просверлил что и как с этими скриптами .. а толку пока не много ... точнее почти нет ( ... хрен с ним с редактированием корзины ... просто вывести и оформить как на креме можешь помочь ?

для начала оптимизировать код по количеству запросов ...


Сообщение отредактировал Andrio - Вторник, 21.05.2013, 23:31
 
Дата: Вторник, 21.05.2013, 23:36 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Andrio,
Цитата (Andrio, Вт, 21.05.2013, 23:30:16)
дак ещё и шаблонизатор на JS

Ну так получилось, мне лень было пихать таблицы в js.. )

Цитата (Andrio, Вт, 21.05.2013, 23:30:16)
это может вариант для реализации удаления товаров, кстати изменения количества нет

Кстати, об этом ты и не спрашивал, сам же убирал инпут.. Ты чего?

Цитата (Andrio, Вт, 21.05.2013, 23:30:16)
просто вывести и оформить как на креме можешь помочь ?

Хорошо, сделаю. Только каркас, оформление сам.

Цитата (Andrio, Вт, 21.05.2013, 23:30:16)
для начала оптимизировать код по количеству запросов ...

В моем варианте ни одного..


 
Дата: Вторник, 21.05.2013, 23:50 |
Лейтенант
Группа: Проверенные
Сообщений: 59
Награды: 0
Репутация: 0
Статус: Offline


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

в принципе ... заготовка, кривая конечно но есть smile ... в ней запросы лишние потереть/оптимизировать
2 что надо ... в шапку вывести обновляемые данные( количество товаров и сумма заказа), при этом корзина сама остаётся в ГБ
3 событие на вывод, после небольшой задержки, итоговой таблицы, после добавления товара ( предполагаю что это тригером делается) ... но правильно это всё прописать сам не осилю ... и это надо НЕ как на креме ( у него просто добавляется один товар по клику на тег ссылки) а через пару/связку инпутов ...т.е указывается кол-во(по умолчанию один)

Цитата (likbezz, Вт, 21.05.2013, 23:36:06)
В моем варианте ни одного.
я не сомневаюсь в твоём мастерстве маэстро smile


Сообщение отредактировал Andrio - Вторник, 21.05.2013, 23:51
 
Дата: Среда, 22.05.2013, 00:05 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Andrio,
Цитата (Andrio, Вт, 21.05.2013, 23:50:47)
а на креме по идее проще ...

Ну.. в общем-то, да, там проще, за счет того что контент не создается а просто загружается.. правда в ущерб скорости.

Цитата (Andrio, Вт, 21.05.2013, 23:50:47)
а через пару/связку инпутов ...т.е указывается кол-во(по умолчанию один)

а где эти импуты? ссылку что ли оставил бы на товар с инпутами.

Цитата (Andrio, Вт, 21.05.2013, 23:50:47)
я не сомневаюсь в твоём мастерстве маэстро

Да я просто подумал - нафига мне запрос, когда все данные можно из корзины взять, один фик на странице присутствует.


 
Дата: Среда, 22.05.2013, 00:12 |
Лейтенант
Группа: Проверенные
Сообщений: 59
Награды: 0
Репутация: 0
Статус: Offline


Цитата (likbezz, Ср, 22.05.2013, 00:05:06)
нафига мне запрос, когда все данные можно из корзины взять, один фик на странице присутствует.

ну да ))
Цитата (likbezz, Ср, 22.05.2013, 00:05:06)
за счет того что контент не создается а просто загружается.. правда в ущерб скорости.

почему в ущерб скорости? ... из за запроса?


 
Дата: Среда, 22.05.2013, 00:19 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Andrio,
Цитата (Andrio, Ср, 22.05.2013, 00:12:06)
из за запроса?

Да. ты загружаешь целую страницу, а тут данные берутся с текущей, а кол-во обращений к элементам примерно одинаковое.
Не, вру, там раза в два больше. с одного элемента кидает «клик» на другой, там его подхватывает fancybox, .. и тд и тп..
А что бы данные были обновленные, приходится вешать громадные там-ауты.


 
Дата: Пятница, 24.05.2013, 14:46 |
ix
Рядовой
Группа: Зарегистрированные
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


Добрый день, подскажите как использовать два магазина с одной корзиной, но чтобы заказы не смешивались, спасибо

 
Дата: Воскресенье, 26.05.2013, 12:12 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


ix,
Цитата (ix, Пт, 24.05.2013, 14:46:49)
Добрый день, подскажите как использовать два магазина с одной корзиной, но чтобы заказы не смешивались, спасибо

Подозреваю что никак..
Во всяком случае, на юКоз.


 
Дата: Воскресенье, 26.05.2013, 12:12 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Andrio,
Собственно.
Цитата (Andrio, Вт, 21.05.2013, 23:50:47)
2 что надо ... в шапку вывести обновляемые данные( количество товаров и сумма заказа), при этом корзина сама остаётся в ГБ

ok
Цитата (Andrio, Вт, 21.05.2013, 23:50:47)
3 событие на вывод, после небольшой задержки, итоговой таблицы, после добавления товара ( предполагаю что это тригером делается) ... но правильно это всё прописать сам не осилю ... и это надо НЕ как на креме ( у него просто добавляется один товар по клику на тег ссылки) а через пару/связку инпутов ...т.е указывается кол-во(по умолчанию один)

Сколько добавишь столько и выведется.
Это не влияет на функционал.



И так.
Нам нужно:
1. Блоки для счетчиков контента.
Код
<p>Кол-во товаров <span id="bskCount"></span></p>

и
Код
<p>Итого: <span id="bskTotal"></span></p>

По месту, где нужно.

2. Блоки для окна эмуляции добавления:
Код
<div id="bskGo" style="display:none;">
<div class="bskGoCont"><img src="/_st/ico/_ajax.gif" width="100" height="100" /></div>
</div>


3. Блок для самой таблицы:
Код
<div id="bskApp" style="display:none;">
<div id="bskAppBox">
<b title="Закрыть окно" style="cursor:pointer;color:#F00;font:28px/16px Arial,sans-serif;" onclick="$.fancybox.close();return false;">×</b>
<div id="bskAppCont"><script type="text/javascript">if(window.bsk){bsk.lib.init()};</script></div>
</div>
</div>

Почему так много вложенных?
Потому что верхний скрытый, bskAppBox для статичного контента, там кнопка закрыть и тп., bskAppCont для загружаемого контента.

Ну и сам скрипт.
По сути, у нас три действия.
Функция загрузка контента, функция эмуляции добавления, и функция открытия окошка.
Я сделаю четыре, что бы визуально разделить эти моменты.

Вот получился такой простенький объект:
Код
var bsk={lib:{
init:function(){
bsk.lib.app();
},

add:function(){
if(!document.getElementById('bskGo'))return;
var cont=document.getElementById('bskGo').innerHTML;
bsk.lib.show(cont);
},

app:function(){
if(!document.getElementById('bskApp'))return;
$.get('/shop/checkout',function(d){
var o=$('#order-table',d),j=0;
$('th.order-head-del,td.order-item-del',o).remove();
$('input',o).each(function(){
var e=this.parentNode;
if(e.className.indexOf('order-item')!=-1){j++;
$(e).html(this.value);         
}else{
$(this).remove();
}
});
$('#bskAppCont').html(o);
$('#bskCount').html(j);
$('#bskTotal').html($('td.order-total:last',o).html());
if(document.getElementById('fancybox-overlay')){
   setTimeout(function(){
   bsk.lib.show(document.getElementById('bskApp').innerHTML);
},1000);
}
});         
},

show:function(cont){
$.fancybox({type:'inline',content:cont,helpers:{title:null,overlay:{opacity:0.2,speedIn:0,speedOut:0}}});
}
}}


Функция: bsk.lib.init() служит для начального заполнения данными всех блоков.
Вызывается из блока с контеном.

Функция: bsk.lib.add() служит для открытия окна с картинкой загрузки.
Добавляется в системную функцию добавления: add2Basket
Вот так:
Код
function add2Basket(id,pref){
if(lock_buttons) return false; else lock_buttons = 1;
var opt = new Array();
$('#b'+pref+'-'+id+'-basket').attr('disabled','disabled');
$('#'+pref+'-'+id+'-basket').removeClass('done').removeClass('err').removeClass('add').addClass('wait').attr('title','');
$('#'+pref+'-'+id+'-options').find('input:checked, select').each(function(){ opt.push(this.id.split('-')[3]+(parseInt(this.value) ? '-'+this.value :''));});
_uPostForm('',{type:'POST',url:'/shop/basket',data:{'mode':'add', 'id':id, 'pref':pref, 'opt':opt.join(':'), 'cnt':$('#q'+pref+'-'+id+'-basket').attr('value')}});
bsk.lib.add();
return false;
}


Функция: bsk.lib.app() служит для обновления контента блока, вызывается из самой корзины, добавляется вот сюда:
Код
<?if($NUM_ENTRIES$)?>
<script type="text/javascript">if(window.bsk){bsk.lib.app(true);}</script>
...

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

Ну и функция: bsk.lib.show() служит для открытия окна с необходимыми настройками - по умолчанию там слишком темный оверлей, и кнопок лишних полно..
..

Ну вот, в принципе, и все описание.
Прикладываю скрипт, на всякий.

Еще раз вкраце.
В глобальный блок пихаешь:
Код
<?if($BASKET$)?>
<script type="text/javascript" src="http://likbezz.ru/_source/_js/2013/_bskLib.js"></script>
<p>Кол-во товаров <span id="bskCount"></span></p>
<p>Итого: <span id="bskTotal"></span></p>
<div id="bskGo" style="display:none;">
<div class="bskGoCont"><img src="http://likbezz.ru/_theme1/_st/ico/_ajax.gif" width="100" height="100" /></div>
</div>
<div id="bskApp" style="display:none;">
<div id="bskAppBox">
<b title="Закрыть окно" style="cursor:pointer;color:#F00;font:28px/16px Arial,sans-serif;" onclick="$.fancybox.close();return false;">×</b>
<div id="bskAppCont"><script type="text/javascript">if(window.bsk){bsk.lib.init()};</script></div>
</div>
</div>
<?endif?>


Открываете шаблон корзины, находишь начало условия:
Код
<?if($BODY$)?><ul id="bsList">$BODY$</ul><?endif?>
<?if($NUM_ENTRIES$)?>

Добавляешь ниже скрипт, что было вот так:
Код
<?if($BODY$)?><ul id="bsList">$BODY$</ul><?endif?>
<?if($NUM_ENTRIES$)?>
<script type="text/javascript">if(window.bsk){bsk.lib.app(true);}</script>


Там же, находишь функцию: add2Basket и перед закрывающей скобкой добавляешь функцию вызова: bsk.lib.add();
Было так:
Код
function add2Basket(id,pref){
if(lock_buttons) return false; else lock_buttons = 1;
var opt = new Array();
$('#b'+pref+'-'+id+'-basket').attr('disabled','disabled');
$('#'+pref+'-'+id+'-basket').removeClass('done').removeClass('err').removeClass('add').addClass('wait').attr('title','');
$('#'+pref+'-'+id+'-options').find('input:checked, select').each(function(){ opt.push(this.id.split('-')[3]+(parseInt(this.value) ? '-'+this.value :''));});
_uPostForm('',{type:'POST',url:'/shop/basket',data:{'mode':'add', 'id':id, 'pref':pref, 'opt':opt.join(':'), 'cnt':$('#q'+pref+'-'+id+'-basket').attr('value')}});
return false;
}


Стало так:
Код
function add2Basket(id,pref){
if(lock_buttons) return false; else lock_buttons = 1;
var opt = new Array();
$('#b'+pref+'-'+id+'-basket').attr('disabled','disabled');
$('#'+pref+'-'+id+'-basket').removeClass('done').removeClass('err').removeClass('add').addClass('wait').attr('title','');
$('#'+pref+'-'+id+'-options').find('input:checked, select').each(function(){ opt.push(this.id.split('-')[3]+(parseInt(this.value) ? '-'+this.value :''));});
_uPostForm('',{type:'POST',url:'/shop/basket',data:{'mode':'add', 'id':id, 'pref':pref, 'opt':opt.join(':'), 'cnt':$('#q'+pref+'-'+id+'-basket').attr('value')}});
bsk.lib.add();
return false;
}

..

Сохраняешь все, оформляешь как вам угодно.
Если будешь менять ID - будь внимателен, меняй и там и там - и в коде и в скрипте.
Актуальные реквизиты на главной в левой колонке, нижний блок.


 
Дата: Среда, 29.05.2013, 02:47 |
Лейтенант
Группа: Проверенные
Сообщений: 59
Награды: 0
Репутация: 0
Статус: Offline


Есть некоторые вопросы, возможно что-то не так сам сделал, по порядку:
Цитата (likbezz, Вс, 26.05.2013, 12:12:06)
Блоки для счетчиков контента.

Цитата (likbezz, Вс, 26.05.2013, 12:12:06)
По месту, где нужно.

это я использовал как мини информер в шапке - сделал ссылкой, поскольку клик по тексту не открывал улайт-окно
Код
<a rel="nofollow" href="#bskApp" class="ulightbox" title="Заглянуть в корзину">
    Кол-во товаров: <span id="bskCount"> </span> |    
    Итого: <span id="bskTotal"> </span>
    </a>

получается что для этого момента фрагмент
Цитата (likbezz, Вс, 26.05.2013, 12:12:36)
Блоки для окна эмуляции добавления:
Код
<div id="bskGo" style="display:none;">    
    <div class="bskGoCont"><img src="/_st/ico/_ajax.gif" width="100" height="100" /></div>    
    </div>

в принципе и не нужен

тут маленький вопрос ещё: НЕ хотел бы лишнюю ссылку с якорем иметь в шапке( типа для сео не гуд) потому хотел бы сделать это дело через онклик, по типу
Код
onclick="location.href='/shop'"

можно это в таком формате оформить?
Код
<p onclick=" что-то ">
    Кол-во товаров: <span id="bskCount"> </span> |    
    Итого: <span id="bskTotal"> </span>
</p>


второй важный момент: при клике на кнопку "В корзину" ( это второй инпут по сути, в первом указывается кол-во в странице товара или в виде товара в каталоге) не происходит автоокрытия улайт окна с текущим состоянием корзины.
По идее надо что-то добавить в шаблоны страницы товара и вида товара ( где есть кнопка "В корзину") ... но вроде для этих шаблонов ничего не было сказано

Остальное вроде как работает, информер без обновления страницы в целом, обновляется и пишет корректные данные с корзины, в таблице выводимой в окне всё как надо( инпут не кажет на количестве товара, все данные тоже корректные, статический контент пока не дорабатывал, но думаю не должно возникнуть вопросов ( кнопки закрыть, оформить, продолжить покупки и может ещё что-то текстом ... думаю справлюсь smile )


Сообщение отредактировал Andrio - Среда, 29.05.2013, 02:57
 
Дата: Среда, 29.05.2013, 03:46 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Andrio,
Цитата (Andrio, Ср, 29.05.2013, 02:47:43)
получается что для этого момента фрагмент
Цитата (likbezz, Вс, 26.05.2013, 12:12:36)
Блоки для окна эмуляции добавления:
Код
<div id="bskGo" style="display:none;">       
       <div class="bskGoCont"><img src="/_st/ico/_ajax.gif" width="100" height="100" /></div>       
       </div>

в принципе и не нужен

Этот “фрагмент” выводит картинку загрузки, что бы не ощущения что щелкнул а ничего не произошло.

Цитата (Andrio, Ср, 29.05.2013, 02:47:43)
тут маленький вопрос ещё: НЕ хотел бы лишнюю ссылку с якорем иметь в шапке( типа для сео не гуд)

Запихни в ноиндекс.

Цитата (Andrio, Ср, 29.05.2013, 02:47:43)
можно это в таком формате оформить?

Можно.

Цитата (Andrio, Ср, 29.05.2013, 02:47:43)
не происходит автоокрытия улайт окна с текущим состоянием корзины.

На какой странице?

Цитата (Andrio, Ср, 29.05.2013, 02:47:43)
в таблице выводимой в окне всё как надо

Так у тебя открывается окно добавления или нет?

Цитата (Andrio, Ср, 29.05.2013, 02:47:43)
инпут не кажет на количестве товара

Какой инпут?
Ты ж сказал, никакого инпута, только текст. И он кажет верно.

Ты уж если пишешь о косяких, скриншоты прикладывай что ли.. а то непонятно, работает у тебя или нет.. или прямые ссылки до бага.
Лично проверял на рабочем магазине, все работает как надо.


 
Дата: Четверг, 30.05.2013, 23:54 |
Лейтенант
Группа: Проверенные
Сообщений: 59
Награды: 0
Репутация: 0
Статус: Offline


Цитата (likbezz, Ср, 29.05.2013, 03:46:42)
На какой странице?

непосредственно на самой странице товара ... есть поле для указания количества товара которое хочешь добавить в корзину, по умолчанию 1 пишет, рядом есть кнопка ( по коду тоже инпут) "в корзину" ... по клику "в корзину" хотел, что бы отрывалось улайт окно ( пишу именно улайт, потому как это не увинд smile ... другое оформление, а по принципу функционала скрипта наверно схоже ) ... в котором отображается таблица с текущим ( что в итоге после очередного добавления товара) заказа ... т.е то что показало бы при переходе на чекаут ( ну или просто стало показывать в корзине по количеству и сумме ... одинаково по сути но по разному оформлено)
Цитата (likbezz, Ср, 29.05.2013, 03:46:42)
Какой инпут?
Ты ж сказал, никакого инпута, только текст. И он кажет верно.

да тут нет вопросов ... всё норм smile .... просто сказал что работает нормально, потому как у меня( в моём примере) сам инпут затирался ччерез раз, и работало не стабильно, сейчас всё гуд по этому моменту.
Цитата (likbezz, Ср, 29.05.2013, 03:46:42)
Этот “фрагмент” выводит картинку загрузки, что бы не ощущения что щелкнул а ничего не произошло.

у меня почему-то этого не роисходит ... просто сразу ( практически сразу) открывается окно с таблицей заказа
Цитата (likbezz, Ср, 29.05.2013, 03:46:42)
Ты уж если пишешь о косяких, скриншоты прикладывай что ли.

пока не оформил до конца по стилям ... особо нечего показывать

Цитата (likbezz, Ср, 29.05.2013, 03:46:42)
или прямые ссылки до бага

сечас это видно только амину и модераторам( условными закрыл некоторые фрагменты хтмл, скрипты конечно прописаны без условий smile )

Добавлено (30.05.2013, 23:54)
---------------------------------------------
если зайдёш то тебе тоже видно будет smile .... если затерял пароль и логин ... могу кинуть в личку


Сообщение отредактировал Andrio - Четверг, 30.05.2013, 23:55
 
Дата: Пятница, 31.05.2013, 00:23 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Andrio,
Цитата (Andrio, Чт, 30.05.2013, 23:54:38)
непосредственно на самой странице товара ... есть поле для указания количества товара которое хочешь добавить в корзину, по умолчанию 1 пишет, рядом есть кнопка ( по коду тоже инпут) "в корзину" ... по клику "в корзину" хотел, что бы отрывалось улайт

Там другая функция выполняется - пропиши и в не открытие, и будет открываться.
Продублируй вызов так же, как в add2Basket, но в ту функцию что висит на той кнопке - посмотри я не помню просто.



и почему у тебя функция вызова тут?
Я же написал:
Цитата
Там же, находишь функцию: add2Basket и перед закрывающей скобкой добавляешь функцию вызова: bsk.lib.add();

..

Цитата (Andrio, Чт, 30.05.2013, 23:54:38)
у меня почему-то этого не роисходит ... просто сразу ( практически сразу) открывается окно с таблицей заказа

..хм..
а это уже странно..

Цитата (Andrio, Чт, 30.05.2013, 23:54:38)
если затерял пароль и логин ... могу кинуть в личку

Я не теряю пароли, у меня записано ) как в лучших домах .. ))

Прикрепления: 6002984.png (16.9 Kb)

 
Дата: Воскресенье, 02.06.2013, 00:43 |
Лейтенант
Группа: Проверенные
Сообщений: 59
Награды: 0
Репутация: 0
Статус: Offline


Да ... олень я smile ... не туда прописал, на скрине показал мою ошибку ... поправил, теперь по клику "в корзину" всё гуд
Цитата (likbezz, Пт, 31.05.2013, 00:23:43)
..хм..

это про тот фрагмент, где я сам прописал вызов улайт окна ( в шапке, самый верх ... в твоём примере там не было прописано как правильно это окно вызывать, потому прописал сам как умею ... там этот фрагмент(появление картинки загрузки) не работает ... пробовал по разному, наверно надо либо хтмл окна с этой картинкой сделать вложенной, или как то по другому, но в принципе именно для скриптового информера в шапке это не принципиально, это логично только при добавлении товаров, а при просмотре корзины в улайт окне это уже по идее не принципиально)
Цитата (likbezz, Пт, 31.05.2013, 00:23:43)
как в лучших домах ..

smile


Сообщение отредактировал Andrio - Воскресенье, 02.06.2013, 02:49
 
Поиск:


Мобильная версия