Переключатель список/плитка в Битриксе

<?/* переключение шаблонов оформление */?>

<?/* 1) Сначала считываем из cookie сайта параметр view каталога товаров, который отвечает за выбор шаблона. Если пустые, то ставим шаблон по умолчанию.*/?>

<?$templateName = $APPLICATION->get_cookie('view')?$APPLICATION->get_cookie("view"):"big";?>

<?/*big - это название папки с шаблоном - который по умолчанию: bitrix/имя шаблона/components/bitrix/catalog/имя каталога/bitrix/catalog.section/... */?>

<div class="select_display">

   <?   if(isset($_POST["b1"]))

   {

      $templateName = "big";

      $APPLICATION->set_cookie("view", $templateName);

   }

   if(isset($_POST["b2"]))

   {

      $templateName = "polosa";

      $APPLICATION->set_cookie("view", $templateName);

   }

   if ($templateName != "polosa" )

   {

      $class_select_display_list ="active";

      $class_select_display_galery ="normal";

   }

   else   {

      $class_select_display_list ="normal";

      $class_select_display_galery ="active";

   }

   ?>   <form action="" method="POST" style="display: none">

      <div class="list_<?echo $class_select_display_list;?>">

         <input type="submit" name="b1" value="Список" <? if(isset($_POST["b1"])) echo "disabled"; ?>/>

      </div>

      <div class="galery_<?echo $class_select_display_galery;?>">

         <input type="submit" name="b2" value="Галерея" <? if(isset($_POST["b2"])) echo "disabled"; ?>/>

      </div>

   </form>

</div>

<!--Perekluchatel spisok plitka-->

И не забудьте переменную в вызов компонента - $templateName (вон она внизу в примере):

<?$intSectionID = $APPLICATION->IncludeComponent( "bitrix:catalog.section", $templateName,
Стили для кнопок CSS оформление
.select_display {

 position: absolute;
 top: 6px;
 right: 0px;
 width: 160px;
}
.select_display input[type="button"],
.select_display input[type="submit"],
.select_display input[type="reset"],
.select_display input[type="file"]::-webkit-file-upload-button,
.select_display button {
 color: #ffffff;
 padding: 0;
 background: #138ac2;
 position: relative;
 top: -5px;
 margin-right: 5px;
 cursor: pointer;
}
.select_display input{
 -moz-appearance: none!important;
 color: #ffffff;
 background: #138ac2!important;
 padding: 0;
 cursor: pointer;
 position: relative;
 top: -5px;
}
.select_display input:hover[type="submit"]{
 color: #d1d1d1;
}
.select_display input[type="submit"]:disabled {
 padding: 0;
 background: #138ac2;
}
.select_display .list_normal {
 padding: 1px 3px 1px 12px;
 float: left;
 color: #ffffff;
 height: 7px;
 background: #138ac2 url(../img/select_display_list.png) no-repeat bottom left;
}
.select_display .list_active {
 padding: 1px 3px 1px 12px;
 float: left;
 height: 7px;
 background: #138ac2 url(../img/select_display_list.png) no-repeat top left;
}
.select_display .list_active input[type="submit"],.select_display .galery_active input[type="submit"] {
 color: #3d3d3d;
 cursor: default;
}
.select_display .galery_normal {
 padding: 1px 3px 1px 12px;
 float: left;
 color: #ffffff;
 height: 7px;
 background: #138ac2 url(../img/select_display_galery.png) no-repeat bottom left;
}
.select_display .galery_active {
 padding: 1px 3px 1px 12px;
 float: left;
 height: 7px;
 background: #138ac2 url(../img/select_display_galery.png) no-repeat top left;
}