Курсы обучения
+7 (351) 777-80-70
2021.05.07

Настройка с помощью шестеренки - Линейка решений INTEC: Universe

В этой главе мы рассмотрим как с помощью шестеренки настроить внешний вид каталога.
  • Режимы работы галереи в карточке товарa
  • Вид торговых предложений в карточке товара
  • Отображать таблицу размеров в карточке товара
  • Отображать справочную информацию о доставке в карточке товара
  • Отображать справочную информацию об оплате в карточке товара
  • Вид бокового меню каталога
  • Использовать быстрый просмотр в каталоге
  • Использовать быстрый просмотр вместо перехода в карточку товара
  • Отображать нижнюю панель в карточке товара (в мобильной версии)
  • Отображать верхнюю панель в карточке товара
  • Отображать меню в корне каталога
  • Использовать расчет доставки
  • Пересчет цены при изменении количества товара
  • Отображать форму "Нашли дешевле"
  • Расположение элементов в корне каталога
  • Шаблон корня каталога
  • Расположение элементов в разделах каталога
  • Шаблон разделов каталога
  • Использовать AJAX при фильтрации каталога
  • Шаблон фильтра каталога
  • Шаблон элементов каталога вида "Список"
  • Шаблон элементов каталога вида "Расширенный список"
  • Шаблон элементов каталога вида "Плитка"
  • Количество колонок в шаблоне элементов каталога вида "Плитка" на мобильной версии
  • Шаблон карточки товара
Данный метод настройки будет работать, если для компонента bitrix:catalog ("Каталог") включены глобальные настройки
Чтобы проверить, включены ли глобальные настройки, переходим на страницу, где размещен компонент каталога. В режиме разработки переходим в настройки компонента "Каталог".


catalog333.png

Ищем параметр "Использовать глобальные настройки". Если галочка снята, то нужно ее поставить.


catalog44.png

Настройка каталога с помощью шестеренки производится в соответствующем разделе.






Режимы работы галереи в карточке товарa


catalog1.PNG

  1. Лупа - при наведении на главную картинку товара в детальном просмотре изображение увеличивается.

    catalog3.PNG

    catalog2.png

  2. Всплывающее окно - при клике на главную фотографию откроется окно с галереей на весь экран.

    catalog4.PNG


Вид торговых предложений в карточке товара
catalog5.PNG

  • Динамический:

     catalog6.PNG

  • Список:

     catalog7.PNG


Отображать таблицу размеров в карточке товара
catalog8.PNG

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

catalog9.png

Обратите внимание, что таблица размеров отображается не во всех карточках. На изображении ниже указаны карточки, в которых таблица размеров присутствует.

table_size.png
Для редактирования контента заходим в настройки компонента "Каталог". 
Находим параметры, связанные с настройкой таблицы размеров. 

  1. Если галочка не поставлена, поставьте ее.
  2. Это путь до файла с таблицей размеров. Там можно отредактировать ее.
  3. Везде - для каждой карточки товара будет отображаться одна и та же таблица размеров.
Определяется для каждого элемента - в изменении элемента можно выбрать свойство, при котором будет отображаться таблица.

table_size1.png




Отображать справочную информацию о доставке в карточке товара
сфе1.PNG

При включении данной опции в карточке товара появляется возможность посмотреть информацию о доставке товара. Редактируется в настройках каталога.

ыф.PNG

Для редактирования справочной информации находим соответствующие параметры в настройках компонента "Каталог".
Проверяем, установлена ли галочка "Отображать информацию об оплате". Если снята, то установить.

payment1.PNG




Отображать справочную информацию об оплате в карточке товара

spravka.PNG
Эти два пункта настраиваются аналогично.

Выглядят в карточке так:

spravka1.png

Данная функция выводится в следующих карточках:

spravka2.png
Чтобы изменить информацию нужно в режиме правки зайти в настройки компонента "Каталог".

spravka4.png

Проверяем, включены ли глобальные настройки.

global_settings.PNG

Далее ищем следующие параметры(аналогично для другого пункта):

spravka5.png

Детальная страница. Информация о доставке. Путь до файла с текстом. - по этому адресу в административной части сайта можно менять выводимую информацию.



Режим отображения списка товаров по умолчанию

spisok1.PNG


В данном пункте определяется режим отображения списка товаров по умолчанию при входе в каталог.

  1. Список 

    список.PNG

  2. Подробный список 

    лист.PNG

  3. Плитка

    плитка.PNG





  4. Вид бокового меню каталога 
    вид каталога.PNG

    1. Обычный

      обычный.png

    2. С изображениями 

      изображ.png




    3. Использовать быстрый просмотр в каталоге


      fast1.PNG


      При включенной опции на всех видах отображения появляется иконка, при нажатии на которую клиент увидит компонент быстрого просмотра.


      fast2.png



      Использовать быстрый просмотр заместо перехода в карточку товара


      fast3.PNG


      При включении данной опции переход в карточку товара осуществляться не будет. Будет только быстрый просмотр при нажатии на товар.




      Отображать нижнюю панель в карточке товара (в мобильной версии)


      fast4.PNG

      Включает в себя название элемента и кнопку "Купить". Удобно использовать в длинных карточках товара для быстрого доступа к покупке.


      fast5.PNG


      Функционал работает на данных карточках товара и будет внедрен в другие карточки в последующих обновлениях решения.

      fast6.png



      Отображать верхнюю панель в карточке товара

      fast7.PNG

      При скролле страницы карточки товара сверху появляется фиксированная панель следующего вида:

      fast8.PNG

      Используется для быстрого доступа к кнопке "купить" и просмотре информации.



      Отображать меню в корне каталога
      Отображать меню в разделах каталога
      Отображать меню в карточке товара

      main_catalog2.PNG

      Добавляет отображение меню в корне и соответствующих разделах каталога.

      main_catalog1.png



      Использовать расчет доставки 


      main_catalog3.PNG
      При включенной опции появляется элемент, при нажатии на который открывается всплывающее окно с компонентом расчета доставки.

      дост.png

      Данный функционал присутствует во всех видах кроме шаблона 4.

      main_catalog4.png



      Пересчет цены при изменении количества товара 
      spravka6.PNG

      Функционал работает следующим образом:
      При нажатии на + или - при изменении количества товара цена изменяется и можно посмотреть общую стоимость сразу же. 

      Это распространяется как на карточку товара так и на все виды списков и быстрый просмотр.

      spravka7.png



      Отображать форму "Нашли дешевле" 
      При включенной опции появляется элемент, при нажатии на который открывается всплывающее окно с формой обратной связи.

      зушч.png



      Расположение элементов в корне каталога 
      Шаблон корня каталога 

      1у.PNG


      Расположение элементов в разделах каталога 
      Шаблон разделов каталога 

      Данные названия пунктов говорят сами за себя. При помощи них настраивается внешний вид каталога.




      Использовать AJAX при фильтрации каталога 

      ajax_fiil1.PNG


      При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. В данном случае обновляется каталог с применением фильтрации. Это очень удобно, так как страница не перезагружается. 




      Шаблон фильтра каталога 

      ajax_fiil2.PNG


      Можно выбрать из доступных шаблонов фильтр, исходя из своих предпочтений.





      Шаблон элементов каталога вида "Список"

      temp_list1.PNG
      С помощью данных настроек можно выбрать шаблон для вида элементов каталога "Список" исходя из своих предпочтений.


      • Список 1

        spisok1_temp.PNG


      • Список 2

        spisok1_temp2.PNG




      Шаблон элементов каталога вида "Расширенный список"


      temp_res_1.PNG

      • Расширенный список 1

        temp_res_2.PNG

      • Расширенный список 2 temp_res3.PNG





      Шаблон элементов каталога вида "Плитка"


      Данная настройка визуально отображена в шестеренке. Можно выбрать шаблон из предложенных вариантов по своему усмотрению.


      temp_res4.PNG




      Количество колонок в шаблоне элементов каталога вида "Плитка" на мобильной версии


      temp_res5.PNG


      Одна
      temp_res7.PNG


      Две 
      temp_res6.PNG


      Шаблон карточки товара

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

      temp_res8.PNG

Наши решения