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

7369  |  6

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

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

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

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

© 2011—2016 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.
Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

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