Как сделать сравнение в Битрикс на ajax
Создаем в корне сайта папку ajax и в ней файл list_compare.php со следующим содержанием:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?require_once($_SERVER['DOCUMENT_ROOT']. "/bitrix/modules/main/include/prolog_before.php"); $APPLICATION->IncludeComponent("bitrix:catalog.compare.list","ajax_count", Array( "AJAX_MODE" => "N", "IBLOCK_TYPE" => "catalog", "IBLOCK_ID" => "2", "DETAIL_URL" => "", "COMPARE_URL" => "/compare.php", "NAME" => "CATALOG_COMPARE_LIST", "AJAX_OPTION_JUMP" => "N", "AJAX_OPTION_STYLE" => "Y", "AJAX_OPTION_HISTORY" => "N" ) ); |
Код шаблона ajax_count:
1 2 3 4 5 6 7 |
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <?if(count($arResult) <= 0):?> <a href="javascript:void(0)">Сравнение товаров</a> <span>нет товаров</span> <?else:?> <a href="/catalog/compare.php">Сравнение товаров</a> <span>товаров <?=(count($arResult))?></span> <?endif?> |
В шаблоне сайта, там где мы хотим вывести количество сравниваемых товаров вставляем:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?$APPLICATION->IncludeComponent( "bitrix:catalog.compare.list", "compare_count", array( "IBLOCK_TYPE" => "catalog", "IBLOCK_ID" => "2", "AJAX_MODE" => "N", "AJAX_OPTION_JUMP" => "N", "AJAX_OPTION_STYLE" => "Y", "AJAX_OPTION_HISTORY" => "N", "DETAIL_URL" => "#SECTION_CODE#", "COMPARE_URL" => "compare.php", "NAME" => "CATALOG_COMPARE_LIST", "AJAX_OPTION_ADDITIONAL" => "" ), false );?> |
Шаблон compare_count:
1 2 3 4 5 6 7 8 9 10 |
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <div id="compare_list_count" class="compare cell_block"> <?if(count($arResult) <= 0):?> <a href="javascript:void(0)">Сравнение товаров</a> <span>нет товаров</span> <?else:?> <a href="/catalog/compare.php">Сравнение товаров</a> <span>товаров <?=(count($arResult))?></span> <?endif?> </div> |
В шаблоне компонента каталога (детальная, раздела и т.п.) в самом верху ставим:
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> function compare_tov(id) { var AddedGoodId = id; $.get("/ajax/list_compare.php", { action: "ADD_TO_COMPARE_LIST", id: AddedGoodId}, function(data) { $("#compare_list_count").html(data); } ); } </script> |
А ссылку на добавление к сравнению делаем так:
1 |
<a id="compareid_<? echo $arItem["ID"]; ?>" onclick="compare_tov(<? echo $arItem["ID"]; ?>);" href="javascript:void(0)" class="compare">Сравнить</a> |
Далее материал с одного блога, по которому я и сделал сравнение:
Битрикс довольно интересно устроен, но он в каком-то смысле гибок.Итак, встала задача сделать галочки для товаров чтобы их можно было добавлять и убирать из таблицы сравнения.Работать это все будет через AJAX, не стоит пугаться в Jquery он просто устроен.Итак прежде всего нужно создать файл list_compare.php внутри корневой папки сайта и наполнить его таким содержанием:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<? require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php"); $APPLICATION->IncludeComponent("bitrix:catalog.compare.list","", Array( "AJAX_MODE" => "Y", "IBLOCK_TYPE" => "catalog", "IBLOCK_ID" => "1", "DETAIL_URL" => "", "COMPARE_URL" => "/compare.php", "NAME" => "CATALOG_COMPARE_LIST", "AJAX_OPTION_JUMP" => "N", "AJAX_OPTION_STYLE" => "Y", "AJAX_OPTION_HISTORY" => "N" ) ); require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?> |
После этого нужно настроить этот компонент через админпанель перейдя с правами администратора на адрес этого скрипта адрес_сайта.рф/list_compare.php
Выбрать текущий инфоблок с продукцией и настроить некотрые параметры, которые не нравяться вам с этими настрйками.
Итак появился файл куда пользователь посредством AJAX сможет добавлять и удалять нужные товары.
Затем нужно отредактировать файл с шаблоном вывода раздела интернет-магазина (если это интернет-магазин).У меня к примеру этот файл находиться по адресу /bitrix/templates/newwave/components/bitrix/.default/template.php.Этот файл может находиться в разных папках так что внимательнее.В самый верх файла нужно добавить:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<script type="text/javascript"> function compare_tov(id) { var chek = document.getElementById('compareid_'+id); if (chek.checked) { //Добавить var AddedGoodId = id; $.get("/list_compare.php", { action: "ADD_TO_COMPARE_LIST", id: AddedGoodId}, function(data) { } ); } else { //Удалить var AddedGoodId = id; $.get("/list_compare.php", { action: "DELETE_FROM_COMPARE_LIST", id: AddedGoodId}, function(data) { } ); } } </script> |
Эта Javascript функция проверяет нажат ли checkbox и в случае если на него нажали посылает в файл который создан был перед этим команду на добавление товара с этим id.В случае же удаления наоборот. Затем в то место где нужно вывести ссылку сравнения с чекбоксом нужно вставить
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<? $id=$arElement['ID']; if(isset($_SESSION["CATALOG_COMPARE_LIST"][1]["ITEMS"][$id])) { $checked='checked'; } else { $checked=''; } ?> <input <?=$checked;?> type="checkbox" id="compareid_<?=$arElement['ID'];?>" onchange="compare_tov(<?=$arElement['ID'];?>);"> <a href="/compare.php"> </a> |
В этом вставленном коде нужно поменять эту строчку $_SESSION[«CATALOG_COMPARE_LIST»][1], вместо 1 нужно вставить id инфоблока с товарами. Этот код проверяет есть ли товар уже в таблице сравнения и если есть ставит галочку для этого товара.А также выводит ссылку на компонент сравнения и чекбокс в котором вообщем и происходит работа