+7 495 008 8452 пн.-пт. 10:00 – 17:00
Загрузка...
Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.


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 корзина с возможностью удаления и изменения количества товара готова. Ее останется стилизовать под свои нужды :)

Назад в раздел

Подписаться на новые материалы раздела:
Загрузка...