Question

На сайте сделал всплывающее окошко, которое появляется при добавлении товара в корзину.
Для этого:

1. в таблицу стилей прописал код (скрывает содержимое корзины):

#shop-basket {display: none;}

2. в шаблоне корзины в системный скрипт:

 

function add2Basket(id, pref){
 if(lock_buttons) return false; else lock_buttons = 1;
 var opt = [], err_msg = '', err_msgs = [], radio_options = {}, el_id = {};
 $('#b'+pref+'-'+id+'-basket').attr('disabled','disabled');
 $('#'+pref+'-'+id+'-basket').removeClass('done').removeClass('err').removeClass('add').addClass('wait').attr('title','');
 $('#'+pref+'-'+id+'-options-selectors').find('select, input').each(function(){
 switch (this.type) {
 case 'radio':
 el_id = this.id.split('-');
 ((typeof (radio_options[el_id[3]]) == 'undefined') && (radio_options[el_id[3]] = { 'val': - 1, 'id': this.id }));
 (this.checked && (radio_options[el_id[3]]['val'] = this.value));
 break;
 case 'checkbox':
 if (this.checked && (this.value !== '')) {
 if(this.value !== ''){
 opt.push(this.id.split('-')[3]+'-'+this.value);
 } else {
 err_msgs.push({'id':this.id.split('-')[3], 'msg':'<li>'+$(this).parent().parent().find('span.opt').html().replace(':', '')+'</li>'});
 }
 }
 break;
 default:
 if (this.value !== '') {
 opt.push(this.id.split('-')[3]+'-'+this.value);
 } else {
 err_msgs.push({'id':this.id.split('-')[3], 'msg':'<li>'+$(this).parent().parent().find('span.opt').html().replace(':', '')+'</li>'});
 }
 }
 });
 for(i in radio_options){
 if(radio_options[i]['val'] != -1){
 opt.push(radio_options[i]['id'].split('-')[3]+'-'+radio_options[i]['val']);
 }else{
 err_msgs.push({'id':radio_options[i]['id'].split('-')[3], 'msg':'<li>'+$('#'+radio_options[i]['id']).parent().parent().parent().find('span.opt').html().replace(':', '')+'</li>'});
 }
 }

 err_msgs.sort(function(a, b){ return ((a['id'] > b['id']) ? 1 : -1); });
 for (var i=0; i<err_msgs.length; i++) { err_msg += err_msgs[i]['msg']; }

 if(err_msg == ''){
 _uPostForm('',{type:'POST',url:'/shop/basket',data:{'mode':'add', 'id':id, 'pref':pref, 'opt':opt.join(':'), 'cnt':$('#q'+pref+'-'+id+'-basket').attr('value')}});
 ga_event('basket_add');
 }else{
 lock_buttons = 0;
 shop_alert('<div class="MyWinError">Опции<ul>'+err_msg+'</ul>обязательны для выбора</div>','Замечания','warning',350,100,{tm:8000,align:'left',icon:'/.s/img/icon/warning.png', 'onclose': function(){ $('#b'+pref+'-'+id+'-basket').removeAttr('disabled'); $('#'+pref+'-'+id+'-basket').removeClass('wait').addClass('add'); }});
 }
$.fancybox('#shop-basket');
 return false;
 }

 дописал функцию вызова стандартного fancybox окошка (выделил красным).

Все работает, окошко всплывает:

В верхней части сайта расположена сама корзина, код стандартный 

<?if($BASKET$)?>$BASKET$<?endif?> (содержимое корзины, как писалось выше скрыто стилем).

там же добавил иконку-ссылку корзины: 

<a href="#" onclick="$.fancybox('#shop-basket');return false;">тут иконка</a>

Возле иконки хочу чтобы выводилось сколько товаров добавлено в корзину (в корзине за это отвечает переменная $ORDER_NUM$), но корзина скрыта стилями и соответственно ничего не выводится (только иконка). НО даже если убрать #shop-basket {display: none;}

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

После перезагрузки страницы содержимое корзины отображается опять...

Т.е. по факту мне нужно, чтобы содержимое корзины отображалось и в верхней части сайта и в окне и не пропадало (остальное мелочь, ненужное скрою стилями)

Вопрос, как мне вывести кол-во товаров в корзине?

Вытаскивать как в случае с желаниями https://www.ucoz.ru/qa/index.php/181885

скриптом? Но думаю, что можно придумать более элегантное и правильное решение. Прошу помощи, т.к. сам что-то никак ничего нормально не придумаю.

Answer 1

Завернуть $ORDER_NUM$ например в спан, поставить в самый вверх в шаблоне корзина, потом стилями скрываем дочерние элементы, например #shop-basket ul {display:none}; и так далее.... в итоге останется только наш спан.

Comments

В том то и дело, помучался но вывел цифру, но она пропадает всякий раз после открытия окошка и повяляется после обновления страницы. Т.е. как я и написал в вопросе:

 "даже если убрать #shop-basket {display: none;}  то, после нажатия на кнопку добавить в корзину, или на кнопку с иконкой вся инфа с корзины с верхней части сайта пропадает (я так понимаю она переносится в это окошко).  После перезагрузки страницы содержимое корзины отображается опять...  Т.е. по факту мне нужно, чтобы содержимое корзины отображалось и в верхней части сайта и в окне и не пропадало (остальное мелочь, ненужное скрою стилями)"

Скрытие вообще не проблема (хотя и повозился). Но цифра пропадает зараза после вызова окошка.

---

bandjuk,

В фансибокс не вызавай шоп баскет, а заверни корзину в ещё один див с другим айди(его и вызывай), а над ним расположи ордер нум.

---

Sentimo,

В общем если так сделать то, получается, что во всплывающем окне не фигурирует id="shop-basket", который используется системными скриптами, даже если попытаться обмануть скрипт и сделать так:

<span class="ordernum_amount">$ORDER_NUM$</span>
<div id="shop-basket2"><div id="shop-basket">тут остальное содержимое корзины</div></div>

т.е. обернуть в ещё один блок с id="shop-basket", то появляются жуткие тормоза, удаление товаров в окне зависает, первый товар не добавляется без обновления страницы и т.д. в общем это решение совсем не подходит.

---

bandjuk,

А что мешает в системном скрипте дописать двойку к шоп баскет. var el = $('#shop-basket2');

---

Sentimo,

Тоже сообразил так сделать, везде менял #shop-basket на #shop-basket2. Даже ничего лишнего не создавал, в стандартном коде просто заменил и посмотрел как будет работать. Проблемы к сожалению те же, что писал выше, тормоза с удалением и добавлением товара. По исходнику поискал где может ещё использоваться shop-basket, но больше нигде упоминаний не нашел. Почему работает неккоретно - хз. В общем нужно как-то вытащить $ORDER_NUM$ из блока #shop-basket 

---

Так пробуй, это в корзине

<span class="num">$ORDER_NUM$</span>

Это под корзиной в верхней части сайта

<span class="tot"></span>
<script>
    $(function add(){
 var ll = $('.num').text();
    $('.tot').text(ll);
    $('#shop-basket').ajaxComplete(add);
 });
</script>

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

---

Sentimo,

Отлично! Огромное спасибо за помощь!