Телеграм: @bazarow_ru Почта: mihail@bazarow.ru

Фиксированная корзина с обновлением, без перезагрузки страницы.

Просмотров: 18455

Иногда нужно сделать так, чтобы корзина в интернет магазине, созданном на Битрикс, была постоянно на виду, при этом обновлялась бы при добавлении товара без перезагрузки всей страницы. Собрал эту записку из нескольких разрозненных инструкций, быть может кому-то пригодится.

Обновление корзины без перезагрузки страницы

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

Нам нужно сделать так, чтобы при клике на кнопку "купить" корзина обновлялась автоматически без перезагрузки всей страницы и без подключения AJAX, который присутствует в компоненте каталога Битрикс.

Для этого в header.php шаблона сайта добавляем следующий скрипт, предварительно подключив jQuery:

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready( 
function(){ 
   function getBasketHTML(html) 
    { 
        txt = html.split('<!--start--><div id="bid">'); 
        txt = txt[2]; 
        txt = txt.split('</div><!--end-->'); 
        txt = txt[0]; 
        return txt; 
    } 
    $('input[name*="actionADD2BASKET"]').click( 
       function(){ 
           parent = $(this).parent(); 
           quantity_val = $('input[name*=quantity]').attr('value'); 
           id_val = $('input[name*=id]').attr('value'); 
           $.ajax({ 
           type: "post", 
           url: parent.attr('action'), 
           data: {quantity: quantity_val, id: id_val, actionADD2BASKET: 'В корзину', action: "BUY"}, 
           dataType: "html", 
           success: function(out){ 
               $("#bid").html(getBasketHTML(out)); 
               alert("Товар добавлен в корзину"); 
           } 
        }); 
        return false; 
       } 
    ); 
}); 
</script>

Далее открываем для редактирования template.php малой корзины, которую предварительно вывели на сайт в требуемом по дизайну месте и сверстали внешний вид. И обворачиваем в <!--start--><div id="bid"> </div><!--end-->.

<!--start-->
<div id="bid"> 
 <?php if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> 
 <?php 
    function getNumEnding($number, $endingArray) 
    { 
        $number = $number % 100; 
        if ($number>=11 && $number<=19) 
        { 
            $ending=$endingArray[2]; 
            } else { 
                $i = $number % 10; 
                switch ($i) { 
                    case (1): $ending = $endingArray[0]; break; 
                    case (2): case (3): case (4): $ending = $endingArray[1]; break; 
                    default: $ending=$endingArray[2]; } 
                } 
            return $ending; 
        } 
?> 
 
<?php $defaultCurr = CSaleLang::GetLangCurrency(SITE_ID); ?> 
<?php 
$quant='0';$price='0'; 
foreach ($arResult["ITEMS"] as $v) 
    { 
        if ($v["DELAY"]=="N" && $v["CAN_BUY"]=="Y") 
        { 
        $quant=$quant+$v["QUANTITY"]; 
        $pr=$v["QUANTITY"]*$v["PRICE"]; 
        $price=$price+$pr; 
        } 
    } 
if($quant==0){?> 
<span>В Вашей корзине<br/> 
пока нет товаров.</span> 
<?php }else{?> 
<span>У Вас <a href="/basket/">в корзине</a> 
<?=$quant?> <?php echo getNumEnding($quant, array("товар", "товара", "товаров")); ?></br> 
на <?php echo SaleFormatCurrency($price, $defaultCurr); ?></span> 
<?php }?> 
</div>
<!--end-->

После этих манипуляций корзина будет обновляться без перезагрузки страницы

Фиксируем корзину при прокрутке страницы

А теперь давайте заставим корзину прикрепляться к краю экрана. Имеет смысл проделывать это только на страницах с каталогом, так, чтобы корзина не мешала читать контент на других страницах. Поэтому вставляем нижеследующий скрипт в самый низ файла /bitrix/templates/ваш_шаблон_сайта/components/bitrix/catalog/ваш_шаблон_каталога/bitrix/catalog.section/.default/template.php

<script type="text/javascript" language="javascript">                 
$(document).ready(function() { 
    var search_bar = $('#bid'); 
    var margin = 10; 
    var borderY = search_bar.offset().top - margin; 
    $(window).bind('scroll', function() 
    { 
        var currentY = $(document).scrollTop(); 
        if(currentY > borderY) 
        { 
            search_bar.css({position: 'fixed', top: margin +'px', right: '18px'}); 
        } 
        else if(currentY < borderY) 
        { 
            search_bar.css({position: '', top: ''}); 
        } 
    }); 
}); 
</script>

В общем-то все. Пример работы данного способа здесь

Разумеется, стилевое оформление и прочие дизайнерские изыски вы сможете оформить на свой вкус как угодно. Надеюсь записка была полезной

PS

Скрипт обновления корзины, описанный выше, работает только в карточке товара (в шаблоне catalog.element). Для того что бы использовать его в catalog.section, нужно воспользоваться способом, описанным на сайте битрикс http://dev.1c-bitrix.ru/:


<script type="text/javascript">
$(document).ready(function() { 
$('input.quantity').change(function() {
    var obAddToCartLink = $('a.addtoCart:first', $(this).parent());
    obAddToCartLink.attr('href', obAddToCartLink.attr('href').replace( /(quantity=)[0-9]+/ig, '$1'+$(this).val() ));
});
$('input.quantity').keypress(function() {
    $(this).trigger('change');
});
$('a.minus1, a.plus1').click(function(e){
 e.preventDefault();
 e.stopPropagation();
 var oThisQuntityInput = $('input.quantity:first', $(this).parent().parent());
 var iThisQuantity = parseInt(oThisQuntityInput.val());
 var iSubtrahend = 1; 
     if ($(this).hasClass("minus1"))
     {
         if (iThisQuantity < 2)
         {
         return false;
         } 
        iSubtrahend = iSubtrahend * (-1);
     }
 var iThisQuantityNew = iThisQuantity + iSubtrahend;
 oThisQuntityInput.val(iThisQuantityNew);
 oThisQuntityInput.trigger('change');
 });
});
</script>
<!---- ------->
 
<input 
    class="quantity" 
    type="text" 
    name="QUANTITY_<?=$arElement['ID']?>" 
    value="1" 
    size="2" d="QUANTITY_<?=$arElement['ID']?>
    "/>
<div class="count_nav">
 <a rel="nofollow"href="#" class="plus1">+</a>
 <a rel="nofollow"href="#" class="minus1">-</a>
</div>
<a href="<?echo $arElement["ADD_URL"]?>&quantity=1" 
    rel="nofollow" 
    class="addtoCart">
    В заказ
    </a>
Артем 20.02.2014
Михаил,можете снять серию уроков по созданию интернет-магазина,буду очень благодарен.
Михаил Базаров 20.02.2014
Цитата
Артем пишет:
Михаил,можете снять серию уроков по созданию интернет-магазина,буду очень благодарен.
На интерент-магазин нужно много времени, что бы все хотя бы примерно понятно объяснить. Как раз со временем, сейчас напряженка. Урок будет но дата выхода не известна (точно не скоро).
Гость сайта 18.03.2014
Сделала все по Вашему примеру, но не обновляется счетчик количества товара в корзине(
Михаил Базаров 19.03.2014
Наверное что-то делаете не правильно.
Сергей 26.08.2014
А как сделать уведомление скажем в каком нибудь POPUP окне(лайтбоксе) "Товар добавлен в корзину" - где будет картнка товара, название и пара кнопок - "продолжить покупки" или отмена"?
На всех бесплатных движках эта фишка есть - будь то виртуемарт или опенкарт.
А в битриксе почему то нет?
Михаил Базаров 26.08.2014
Цитата
Сергей пишет:
А как сделать уведомление скажем в каком нибудь POPUP окне(лайтбоксе) "Товар добавлен в корзину" - где будет картнка товара, название и пара кнопок - "продолжить покупки" или отмена"?
На всех бесплатных движках эта фишка есть - будь то виртуемарт или опенкарт.
А в битриксе почему то нет?
В типовом магазине, что ставится вместе с битрикс, это реализовано. Можете там подсмотреть

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Цвета торговых предложений из Highload инфоблоков в списке товаров Просмотров: 14905 Подвернулся на доработку очень старый сайт, работал еще на 11-ой версии Битрикс. Выполнили... Автоматическая загрузка каталогов из csv файлов в Битрикс Просмотров: 11797 Если требуется настроить автоматический импорт каталогов из csv файлов, от поставщиков. В... Вывести артикул в печатную форму бланка заказа Просмотров: 1074 Задача: в печатную форму бланка заказа добавить артикулы товаров и данные о пользователе. ... Отсортировать элементы в Битрикс по свойству привязка к разделам Просмотров: 28993 При создании достаточно сложных интернет-магазинов на Битрикс, иногда встает задача помимо... Как работает система сертификации партнеров 1С-Битрикс, уровни партне... Просмотров: 4472 Сертификация от «1С-Битрикс» – это объективная оценка знаний и практических навыков разраб... Показать пользователю накопительную скидку за все сделанные заказы, и... Просмотров: 2623 Задача: показать, текущему авторизованному, пользователю сумму всех выполненных заказов и ... Простые калькуляторы в карточке товара каталога на Битрикс Просмотров: 16178 На одном из создаваемых сайтов было необходимо сделать небольшой калькулятор и предварител... Смена вида карточек товаров в catalog.section с иммитацией AJAX Просмотров: 1627 Смену вида карточек товаров, в разделе каталога, можно реализовать с помощью сессии, запис... Валидация пароля и подтверждения при регистрации в битрикс Просмотров: 15267 Встала задачка сделать валидацию пароля и его подтверждения в стандартной форме регистраци... Получить все товары из всех заказов пользователя. История купленных т... Просмотров: 2217 Задача: нужно создать раздел, в персональном разделе пользователя, с историей всех купленн... Перенос Битрикс сайта с хостинга на хостинг, инструкция Просмотров: 27391 Достаточно часто спрашивают как перенести сайт работающий на 1С Битрикс с одного хостинга ... Простой WEB сервер на ubuntu, для Битрикс Просмотров: 35932 Расскажу как по быстрому сконфигурировать WEB сервер для работы с Битрикс. Безо всяких ngi... XML в формате Commerce ML-2, города России и Мира, для выгрузки в инф... Просмотров: 6961 Подвернулась задачка, создать инфоблок для Битрикс, в котором будут просто города России и... Создание раздела инфоблока при регистрации пользователя в Битрикс Просмотров: 8650 Например вам нужно выводить информацию исключительно для определенного пользователя. Само ... Автоматически отгрузить заказ и сменить статус отгрузки, при выполнен... Просмотров: 951 Проблема: Заказы, на сайте, обрабатываются только в 1С. При этом 1С не работает с отгрузка... Показать только один тип цены в каталоге Битрикс Просмотров: 14955 Достаточно часто, при создании сайта на битрикс, можно столкнуться с такой проблемой: на с... Кастомизация компонента восстановления пароля bitrix:system.auth.forg... Просмотров: 26777 Достаточно часто спрашивают как кастомизировать компонент восстановления пароля пользовате... Пункты меню из разделов инфоблока Битрикс Просмотров: 93237 В принципе это стандартная возможность системы управления битрикс, но почему-то часто спра... Вывести дату окончания скидки в карточке товара Просмотров: 4522 Если нужно вывести информацию о скидке в карточке товара, можно воспользоваться методом Умный фильтр на главной странице Битрикс Просмотров: 22296 Редкая но востребованная задачка- это вывести компонент "умный фильтр" на главную страницу...