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

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

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

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

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

Все заметки
Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей

Зарегистрироваться Войти
Напомнить пароль

Быстрая регистрация через соц.сеть:
Артем
Михаил,можете снять серию уроков по созданию интернет-магазина,буду очень благодарен.
Михаил Базаров
Цитата
Артем пишет:
Михаил,можете снять серию уроков по созданию интернет-магазина,буду очень благодарен.
На интерент-магазин нужно много времени, что бы все хотя бы примерно понятно объяснить. Как раз со временем, сейчас напряженка. Урок будет но дата выхода не известна (точно не скоро).
Гость сайта
Сделала все по Вашему примеру, но не обновляется счетчик количества товара в корзине(
Михаил Базаров
Наверное что-то делаете не правильно.
Сергей
А как сделать уведомление скажем в каком нибудь POPUP окне(лайтбоксе) "Товар добавлен в корзину" - где будет картнка товара, название и пара кнопок - "продолжить покупки" или отмена"?
На всех бесплатных движках эта фишка есть - будь то виртуемарт или опенкарт.
А в битриксе почему то нет?
Михаил Базаров
Цитата
Сергей пишет:
А как сделать уведомление скажем в каком нибудь POPUP окне(лайтбоксе) "Товар добавлен в корзину" - где будет картнка товара, название и пара кнопок - "продолжить покупки" или отмена"?
На всех бесплатных движках эта фишка есть - будь то виртуемарт или опенкарт.
А в битриксе почему то нет?
В типовом магазине, что ставится вместе с битрикс, это реализовано. Можете там подсмотреть
Случайные заметки из блога
Панель управления хостином VESTA и 1С Битрикс, базовая оптимизация

Посоветовали мне тут попробовать бесплатную панель управления...

SEO новинки в 14-ой версии Битрикс

Дошли руки до изучения новинок появившихся в 14-ой версии битрикса....

Дополнительные параметры в меню Битрикс

Иногда нужно присвоить какой-то функционал к конкретному пункту...

Сортировать товары по названию, цене и дате поступления в каталоге Битрикс

Достаточно часто заказчик просит вывести сортировку по цене,...

Материалы по теме в новостях Битрикс, с картинкой, названием и текстом анонса.

Расскажу как вывести материалы по теме в новостях Битрикс, с...

Валидация пароля и подтверждения при регистрации в битрикс

Встала задачка сделать валидацию пароля и его подтверждения ...

Свежие комментарии в блоге
Всплывающее окно с формой обратной связи Битрикс

Подскажите почему может не работать скрипт  BX.ajax.onload_943827 = function() {           setTime...

19.07.2017 / Рима Уколова
Вывести товары из того же раздела в карточке товара

Михаил, скажите пожалуйста, этот метод еще актуален? Никак не могу передать ни id ни символьный код,...

19.07.2017 / Алексей Сель
Панель управления хостином VESTA и 1С Битрикс, базовая оптимизация

Здравствуйте, Михаил. Постоянно вылетает ошибка БД при создании рез.копии битрикс. Создавал виртуалк...

14.07.2017 / Сергей Стефанович
Как вывести свойства инфоблока по отдельности и немного плюшек не в тему

Здравствуйте, хочу вывести цену отдельно от общего списка свойств, использую  [CODE] 11.07.2017 / Алексей Сель

© 2011—2017 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.

Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

Информация размещенная на сайте, не является публичной офертой. Политика конфеденциальности

x
Как к Вам обращаться? *
Ваша электронная почта: *
Доп. материалы (логотип, тех. задание):
 
Обзор
Текст сообщения:

Нажимая на кнопку "Отправить", Вы соглашаетесь на обработку Ваших персональных данных согласно политике конфеденциальности. Ознакомиться с которой, можно в нижнем правом углу сайта