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

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

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

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

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

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

Нам нужно сделать так, чтобы при клике на кнопку "купить" корзина обновлялась автоматически без перезагрузки всей страницы и без подключения 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-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Настройка выгрузки товаров в Яндекс Маркет с сайта Битрикс Просмотров: 36703 Настройка выгрузки в Яндекс маркет в формате yml, выполняется достаточно просто, кроме одн... Отфильтровать новости в Битрикс за заданный период Просмотров: 15592 Иногда, нужно отфильтровать элементы (новости например) по дате в Битрикс, с помощью компо... Заполнить поля пользователя из свойства заказа, на примере ФИО Просмотров: 1201 При создании заказа покупатель заполняет поле "ФИО". Необходимо скопировать эти данные в п... Фотогалерея на базе компонента новостей, с fancybox. Просмотров: 1544 Это заметка обновление к очень старой, уже имеющейся на сайте. Сделаем что-то типа фотогал... Валидация пароля и подтверждения при регистрации в битрикс Просмотров: 14266 Встала задачка сделать валидацию пароля и его подтверждения в стандартной форме регистраци... Вывести компонент новостей на страницу в Битрикс Просмотров: 63592 Посмотрел Яндекс метрику на свой сайт, и решил что буду частенько писать сюда именно то, ч... Вывести множественное свойство типа файл с названием и весом файла в ... Просмотров: 20203 В этой заметке расскажу как красиво вывести множественное свойство типа файл в инфоблоке 1... Основные функции вывода в шаблонах Битрикс Просмотров: 155358 Знаю, что все их знают. Но иногда не бывает лишним собрать все самое используемое в одну к... Получение доступа к железу устройства из Битрикс мобильное приложение Просмотров: 5604 Документация к мобильному приложению 1С-Битрикс очень куцая. В основном описывает функцион... Показ страницы сайта в боковом слайдере, на примере всплывающей формы... Просмотров: 1872 Если вы хотите сделать подгрузку любой страницы сайта в боковой слайдер, для этого в битри... Увеличение диска на готовой виртуальной машине Битрикс Просмотров: 8767 Как всем известно, на официальном сайте 1С-битрикс можно скачать готовую виртуальную машин... Вывести все товары, с постраничной навигацией, из всех разделов инфоб... Просмотров: 28421 По сути, эта заметка, небольшой лайфхак. Достаточно часто нужно, в корне каталога, в ТОП-е... Как подобрать редакцию Битрикс под задачи Просмотров: 6349 Последнее время, все чаще, при общении с заказчиками, сталкиваюсь с вопросом "— К... Индивидуальные цены в 1С-Битрикс: в каталоге и при оформлении заказа Просмотров: 4961 В этой заметке постараюсь описать процесс реализации индивидуальных цен, для пользователей... Вывести артикул в печатную форму бланка заказа Просмотров: 386 Задача: в печатную форму бланка заказа добавить артикулы товаров и данные о пользователе. ... Настройка обмена между 1С:Предприятие и магазином на "1С-Битрикс24: И... Просмотров: 2488 В этой заметке расскажу как настроить синхронизацию между 1С:предприятие и "1С-Битрикс24: ... Сравнение двух типов цен для иммитации системы скидок, в Битрикс Просмотров: 5854 Встала задачка, иммититровать систему скидок в интернет магазине на Битрикс. Из 1С-УТ, на ... Свойство: привязка к Яндекс:Картам - вывести из нескольких элементов ... Просмотров: 17737 Предположим, что у вас есть инфоблок со свойством "Привязка к яндекс картам". В этом инфоб... Дать пользователю возможность быстро отредактировать материал Просмотров: 4366 На одном из разрабатываемых сайтов, пользователи формирую его контент. После регистрации, ... Добавление своих полей в почтовые шаблоны Битрикс Просмотров: 43636 Иногда нужно внести свои поля в почтовые шаблоны битрикс. Например: добавить имя и номе...