Ajax корзина с возможностью удаления и изменения количества товара.
При создании магазина часто приходится делать ajax корзину, то что есть в стандарте меня не совсем устраивает, поэтому мы делаем свою простую гибкую корзину, с возможностью удалять товары и изменять их количество
Первым делом нам надо будет загрузуть jquery , грузить мы будем его с хранилища гугла .
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> |
Далее нам нужно будет создать в каталоге товара кнопку для добавления в корзину товара , в id хранится параметры для обработчика ajax запроса.
<a hrf="<? echo $arElement['ADD_URL'];?>" class="catalog-item-buy input-basket-submit"
rel="nofollow" id="ajaxaction=add&ajaxaddid=<?=$arElement['ID'];?>">
<?echo GetMessage("CATALOG_ADD")?>
</a>
|
Теперь нам надо написать скрипт который будет передавать и забирать данные о состоянии корзины с помощью ajax, удаление товаров которые уже в корзине, изменение количества товаров.
<script type="text/javascript">
/* Function for ours ajax inquiry */
function ajaxpostshow(urlres, datares, wherecontent ){
$.ajax({
type: "POST",
url: urlres,
data: datares,
dataType: "html",
success: function(fillter){
$(wherecontent).html(fillter);
}
});
}
$('.input-basket-submit').live("click",function(){
var addbasketid = $(this).attr('id');
ajaxpostshow("/include/ajax/basket.php", addbasketid, ".basket" );
return false;
});
/* Inquiry ajax at removal of the goods from a basket */
$('.basket .basket-list-delete').live("click",function(){
var deletebasketid = $(this).attr('id');
ajaxpostshow("/include/ajax/basket.php", deletebasketid, ".basket" );
return false;
});
/* Inquiry ajax at change of quantity of the goods */
$(".basket .basket-count-update").live("change", function(){
var countbasketid = $(this).attr('id');
var countbasketcount = $(this).val();
var ajaxcount = countbasketid + '&ajaxbasketcount=' + countbasketcount;
ajaxpostshow("/include/ajax/basket.php", ajaxcount, ".basket" );
return false;
});
</script>
|
Далее создадим файл который будет принимать и обрабатывать данные приходящие в корзину назовем его basket.php , разместим его в папке /include/. В нем у нас находится три обработчика ajax: добавление в корзину, изменение количества и удаление товара из корзины.
<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
?>
<?
CModule::IncludeModule("sale");
CModule::IncludeModule("catalog");
/* Addition of the goods in a basket at addition in a basket */
if($_POST["ajaxaddid"] && $_POST["ajaxaction"] == 'add'){
Add2BasketByProductID($_POST["ajaxaddid"], 1, array());
}
/* Goods removal at pressing on to remove in a small basket */
if($_POST["ajaxdeleteid"] && $_POST["ajaxaction"] == 'delete'){
CSaleBasket::Delete($_POST["ajaxdeleteid"]);
}
/* Changes of quantity of the goods after receipt of inquiry from a small basket */
if($_POST["ajaxbasketcountid"] && $_POST["ajaxbasketcount"] && $_POST["ajaxaction"] == 'update'){
$arFields = array(
"QUANTITY" => $_POST["ajaxbasketcount"]
);
CSaleBasket::Update($_POST["ajaxbasketcountid"], $arFields);
}
?>
<?$APPLICATION->IncludeComponent(
"bitrix:sale.basket.basket.small",
"smallbasker",
Array(
"PATH_TO_BASKET" => "/personal/cart/",
"PATH_TO_ORDER" => "/personal/order/"
)
);?>
|
В конце мы вызываем компонент , в нем можем стилизовать вывод корзины, так же в коде у меня присутствует вызов шаблона компонента вот код самого шаблона вы его естественно украсите под свои нужды
<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<?
$sum = 0;
$quantity = 0;
?>
<? foreach ($arResult["ITEMS"] as $itemres): ?>
<?
$sum += $itemres["QUANTITY"] * $itemres["PRICE"];
$quantity = $quantity + 1;
?>
<? endforeach;?>
<p>
В вашей корзине
<b><? print $quantity?></b>
товаров на
<br>
сумму
<b><?php echo number_format($sum, 0, '', ' ')." руб."; ?> </b>
</p>
<ul class="basket-list">
<? $i = 1; ?>
<? foreach ($arResult["ITEMS"] as $item): ?>
<li>
<b><? echo $i;?></b> <a href="<?echo $item["DETAIL_PAGE_URL"] ?>"><?echo $item["NAME"]?></a>
цена за шт.<?echo $item["PRICE_FORMATED"]?><br />
<input id="ajaxaction=update&ajaxbasketcountid=<?=$item['ID'];?>" type="text" value="<? print floor($item['QUANTITY']) ;?>" size="1" class="basket-count-update"/>
<a href="/personal/cart/?action=delete&id=<?=$item['ID'];?>" class="basket-list-delete" id="ajaxaction=delete&ajaxdeleteid=<?=$item['ID'];?>" >удалить</a>
</li>
<? $i++;?>
<? endforeach;?>
</ul>
<a href="<?=$arParams["PATH_TO_BASKET"];?> ">перейти в корзину</a> <br />
<? if($arParams["PATH_TO_ORDER"]):?>
<a href=" <?=$arParams["PATH_TO_ORDER"];?>">мои заказы</a>
<? endif;?>
|
В шаблоне компонента корзины мы создали ссылку на удаление товара из корзины и изменение количества товаров. Так же еще необходимо создать в шаблоне страницы место для вывода корзины .
<div class="basket">
<?$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "file",
"PATH" => "/include/basket.php",
"EDIT_TEMPLATE" => ""
)
);?>
</div>
|
Вот собственно и все ajax корзина с возможностью удаления и изменения количества товара готова. Ее останется стилизовать под свои нужды
Назад в раздел