Как реализовать варианты отображения списка товаров в catalog.section по нажатию кнопки?

Question

[Андрей Белый]

Нужна вот такая шутка. Как вообще этот функционал называется? И как реализовать?

Comments

[Алий Кунашев]

Это не внешний вид карточки, а варианты отображения списка товаров. Если задавать правильные вопросы, то можно даже ответ получить)

[Андрей Белый]

Алий Кунашев, а что делать, если не знаешь как задать правильный вопрос, ждать «у моря погоды»?
Но спасибо, теперь я знаю как это называется)

Answer 1

[serginhold]

как правило верстка в плане html одна общая, а css стили полностью другие, несколько вариантов, т.е. когда нажимаешь на кнопку, просто меняется класс блоку вывода списка и браузер все сам перерисует

Comments

[PetrPo]

Кто тебе такое сказал? Ты в битриксе разбираешься?
UPD даже не в битриксе, как ты будешь хотя бы менять местоположение блоков, не говоря уже о том что при разных типах отображения количество и состав блоков может отличаться?

[serginhold]

Кто тебе такое сказал? Ты в битриксе разбираешься?

PetrPo, это базовые основы html и css, причем тут битрикс, не надо в него лезть если даже основы веба не знаешь, откуда вы такие только беретесь

[Алий Кунашев]

Это было бы слишком просто)) Там список выводится компонентом с ajax-подгрузкой и множеством зависимостей от настраиваемых параметров.
Если не изменяет память, то нужно этот список кастомить и по кнопке подгрузку делать нужного вида.
Хотя, уже давно эти компоненты существуют - вполне может быть на маркетплэйсе нужные фишки, или в блоге у кого-нибудь готовый код.

[Андрей Белый]

serginhold, спасибо за идею!
Есть какая-нибудь статья или документация с реальным примером и его разбором? А то я так буду неделю копаться изобретая велосипед.

[serginhold]

Алий Кунашев, еще можно нанять нормального разраба на работу, который все сделает, чтобы было просто и функционально.
Ах да, это же битрикс, никто ничего не умеет, хотят кнопки тыкать, чтобы само работало, хотя можно даже в базовый шаблон компонента просто чуть подправить, добавить вывод класса на основе сессии или кук.

[PetrPo]

serginhold,

откуда вы такие только беретесь

Ну и сколько же у тебя опыта, судя по тому что ты говоришь, знаешь ты только html и css, тогда тебе рановато меня поучать

[PetrPo]

Андрей Белый, это ужасная идея. Никто так не делает, при нажатии кнопки надо менять шаблон компонента catalog.section.

[Алий Кунашев]

serginhold, нельзя просто так взять и подправить базовый шаблон. Ни чуть, ни просто.

[Андрей Белый]

Алий Кунашев, была идея подгружать другой шаблон catalog.section ajax'ом, но я не знаю насколько это правильный вариант. Как вообще к этому делу правильно подойти?

[serginhold]

Алий Кунашев, по этому в крупных проектах, которые почему-то до сих пор не слиняли с битрикса, делают свои компоненты/шаблоны :)

[Алий Кунашев]

Андрей Белый, есть js-библиотека в ядре, AJAX там описан внятно, с примерами.

[Алий Кунашев]

serginhold, это не так сложно как кажется на первый взгляд) Не сложнее чем подключить сторонний компонент к какому-нибудь yii ))

[serginhold]

Алий Кунашев, с yii тоже так себе удовольствие работать, там тоже как в битриксе, слишком низкий умственный порог входа, какашек в коде не меньше, если проект тьма джуниоров хотя бы пару лет поддерживала ((

[Алий Кунашев]

serginhold, бизнес голосует рублём)
1. Битрикс работает
2. Битрикс стоит за год меньше зарплаты мидла в месяц, таких надо 2-3, чтоб написали что-то подобное за полгода
3. Битрикс развивается - баги фиксит, ядро переписывает, дает новый функционал

И кому какая разница что там внутри и как работает, если это позволяет держать магазины-миллионники.

[serginhold]

Алий Кунашев,

И кому какая разница что там внутри и как работает, если это позволяет держать магазины-миллионники

ага, только большая часть гордости на сайте битрикса, типа эльдорадо или связного, давно уже не на битриксе :)
Понятно дело что проблема в деньгах, иногда дешевле все переписать, чем это чудо поддерживать, а для мини магазинов битрикс норм, да.

[Андрей Белый]

Так и не нашел ответ на свой вопрос. Как правильно это реализовать? Через AJAX подгружая другой шаблон компонента или например сверстать два шаблона карточки в одном template.php и скриптами их менять? Какие ещё варианты есть и какой максимально верный?

[serginhold]

Андрей Белый, максимально верный тут с точки зрения оптимизации, т.е. при моем варианте, других стилях, вообще ничего не происходит, кроме одной строчки на js.
При другом варианте, аякс шаблон, ты дергаешь постоянно одни и те же данные, это и нагрузка лишняя на сервер и пользователь ждет пока там что-то подгрузится. Но возможно набор данных и верстка в плане html будет у тебя на столько различаться, что аяксы будут выгоднее, правда вряд ли, но мало ли )

[PetrPo]

Андрей Белый, вот давай логически рассуждать.
Просто взгляни на свой скрин и то что рядом есть ещё сортировка. Эту сортировку через шаблон, ни то чтобы не сделать, но это тупо, если можно это сделать через параметр компонента.
По совету, горе разработчика выше, сделав через подстановку класса, а не через те же параметры, ты по сути похожий по реализации функционал сделаешь по-разному и в разных местах.
Это основная причина, почему так делать не надо. Есть ещё куча мелких
- большой объем шаблона
- неудобство расширения, при необходимости (например в одном типе отображения нужно делать дополнительные запросы, а в другом нет)
- если отображение будешь записывать в куки получишь проблему из-за кеша и т.д.
То, что человек выше, говорит что вряд-ли верстка и набор данных будут сильно отличаться - это полная херня, если ты работаешь в команде, то поверь, в любой момент заказчик или менеджер или дизайнер могу что угодно добавить/изменить (у меня ещё ни разу по-другому не было)

А теперь по делу. Ajax или нет, без разницы. В комплексном компоненте в файле section.php делаешь две ссылки вида

<a href="<?=$APPLICATION->GetCurPageParam('template=название шаблона', array('template'));?>" rel="nofollow">

Дальше где идет вызов компонента catalog.section вторым параметром передается название шаблона, вот туда и ставишь что-то типа

isset($_GET['template']) && $_GET['template'] ? $_GET['template'] : 'название шаблона по-умолчанию'

[Андрей Белый]

PetrPo, спасибо вам, впринципе нашел способ подобный вашему https://camouf.ru/blog-note/9240/
Так наверное и сделаю, после реализации отпишу

[PetrPo]

Андрей Белый, посмотрел статью. Даже не знаю как назвать автора этой статьи, редкостный говнокод...

[serginhold]

там даже слово view не правильно раз 50 написано )

PetrPo,

ты по сути похожий по реализации функционал сделаешь по-разному и в разных местах.
Это основная причина, почему так делать не надо. Есть ещё куча мелких
- большой объем шаблона
- неудобство расширения, при необходимости (например в одном типе отображения нужно делать дополнительные запросы, а в другом нет)
- если отображение будешь записывать в куки получишь проблему из-за кеша и т.д.

вот как раз твое решение, это делать одно и то же. Хотя может до тебя однажды дойдет что в шаблонах запросы делать нельзя, а всякие result_modifer это самый настойщий говнокод из коробки.

Т.к. данные один на все виды отображения, а потом просто разные шаблоны, то
кеш один на список товаров, никто селекты выбора вида в кеш не добавляют, кешируют именно выборку товаров.
И шаблон по этому один, т.к. данные одни и теже в разных шаблонах, можно конечно дергать аяксом, или перезагружать страницу, но есть одно большое НО, называется SEO. Сеошники в нормальной компннии тебя уничтожат, если в каких-то случаях на странице то одни данные, то другие, т.е. например то есть выбор свойства или цены, то нет. Для продвижения сайта это не нормально.

По этому такая простая вещь как смена шаблона в списке товаров обычно делается перерисовкой DOM на ходу, без всяких запросов, в идеале конечно фронт должен быть на react, vue и т.п., тогда virtual dom решает все проблемы размещения блоков в разнобой, типа в одном виде сначала имя, потом цена, другом наоборот.

В случае типичного мини сайта на битриксе, как правила нет никаких virtual dom, и самое простое решение, с минимум кода, это сделать один общий html на все виды отображения, разные только стили, и если допустим в самом маленьком виде не надо выводить какой-нибудь артикул товара, то для такого вида в css просто блоку артикула ставим display: none. И так подход решает и проблемы сео, набор данных на странице точно будет одинаковый при любом виде отображения.
Плюс не будет не перезагрузок, не аяксов, браузер все сам сделать моментально на ходу, особенно это актуально когда вместо постраничной навигации используется бесконечная подгрузка товаров, можно все 28 погрузившихся страниц моментально перерисовать на другой вид без запросов, как это можно блин не понимать..

Конечно можно нарукожопить как в статье, кто же мешает..

[PetrPo]

serginhold, я тебе уже сказал, твой вариант для логики битрикса - это дерьмовый вариант. О каком реакте ты говоришь, в чем вообще логика??? Ну бля давай еще на java перейдем, объекты, паттерны. Вали в другую тему, здесь вопрос по тегу Битрикс. Я обосновал чем твой вариант не подходит, а ты сказал что result_modifier это говнокод из коробки, ну так и пиши это битриксоидам, меня ты убедил только в том что ты броня

[Андрей Белый]

PetrPo, доброе утро, в прошлый раз когда эту тему обсуждали задача по смене шаблонов выпала. Сейчас снова появилась, хотел уточнить момент, я тебе скинул ссылку https://camouf.ru/blog-note/9240/ тут чувак подробно описывает как реализовать смену шаблонов, но ты назвал это говнокодом, можно более подробно узнать в чем проблема данной реализации?

[PetrPo]

Андрей Белый, привет. Ну ты спросил, думаешь я помню, шрифты на сайте говно, вот и написал))

Сама идея норм, а реализация говнокод
1. ajax говно, может это тебе поможет ссылка
2. неструктурированный код, не говоря о том, что он процедурный. Если надо будет несколько таких шаблонов придется тащить это дело с собой, править потом в несольких шаблонах.

Т.е. если надо по-быстрому, можно и так. Если хочешь переиспользуемый код, надо подумать)

Просто при взгляде на такую реализацию блевать охота, даже не разбираясь

Просто на вскидку
От автора

<?
  $wievTemplates = array('blocks', 'lines', 'price');
    $wievNames = array('<i class="fa fa-th-large"></i>', '<i class="fa fa-list"></i>', '<i class="fa fa-align-justify"></i>');
    if (!isset($_SESSION['wiev'])) { $_SESSION['wiev'] = 'blocks' };
    ?>
    <div class="wiev_panel">
        <?
        $i = 0;
        foreach ($wievTemplates as $wiev) {
            ?>
            <span data-wiev="<?= $wiev ?>">
		        <?= $wievNames[$i] ?>
	        </span>
            <?
            $i++;
        }
		
?>

За 3 минуты переписанное

<?
$views = [
	['template' => 'blocks', 'button_icon' => 'fa-th-large'],
	['template' => 'lines', 'button_icon' => 'fa-list'],
	['template' => 'price', 'button_icon' => 'fa-align-justify'],
];
?>

<div class="views_panel">
	<?foreach($views as $view):?>
		<span data-view="<?=$view['template'];?>">
			<i class="fa <?=$view['button_icon']?>"></i>
		</span>
	<?endforeach;?>
</div>

<?
// Перед вызовом компонента
$template = $_SESSION['view'] ?? 'blocks';

$APPLICATION->IncludeComponent(
	"bitrix:catalog.section",
	$template,
	
//.....
?>

[Андрей Белый]

PetrPo, понял, спасибо, успехов тебе

Answer 2

[Ярослав Александров]

Получаешь куки вида отображения, сравниваешь, задаёшь значение параметра

if($cookie_view_ind == 'table')
{
$arParams['LIST_PRODUCT_ROW_VARIANTS']
}

у ссылки href="?view=table