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 href="<?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, удаление товаров которые уже в корзине, изменение количества товаров. Первым делом я напишу функцию для нашего ajax запрос, с стилизованной загрузкой.

Для красивой загрузки в файле style.css нашего сайта напишем такие стили , так же не забудьте в блок который будете грузить контент добавить position: relative , изображения загрузки и затемнения прикреплены к статье.

.ajaxloader  {
  position: absolute ;
  left: 0px;
  top: 0px;
  width: 100%;
 
  background: url(/js/ajax/ajaxfon2.png) repeat;
}
 
.ajaxloader .imgcode {
  position: absolute;
  top: 10px;
  left: 10px
}

Далее создадим файл который будет принимать и обрабатывать данные приходящие в корзину назовем его basket.php , разместим его в папке /include/ajax/ . В нем у нас находится три обработчика 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 корзина с возможностью удаления и изменения количества товара готов

Помогла заметка? Жмите кнопки ниже

Tweet