Компонент "Каталог"

Компонент "Каталог" является локальным компонентом.

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

Как правило, добавление данного компонента разрешено в регионе основного содержимого сайта и доступно на тарифном плане "Сайт с каталогом".

Тарифный план: Компонент "Каталог"
Парковка домена  Недоступен
Сайт-визитка  Недоступен
Сайт-компании  Недоступен
Сайт с каталогом  Доступен

 

Данный компонент может размещаться только на страницах, имеющих тип "Раздел каталога". Т.е. чтобы добавить данный компонент на сайт, вы должны предварительно создать страницу с типом "Раздел каталога" (см раздел "Типы страниц").

 

 

Примерная последовательность действий для создания каталога на вашем сайте:

 
 

  1. Убеждаемся, что используется тарифный план "Сайт с каталогом".
     
  2. Создаем необходимую иерархию из страниц, имеющих тип "Стандартная".

    Например: 

    Каталог детских игрушек (тип страницы: "Стандартная")

            Транспорт (тип страницы: "Стандартная")

            Куклы (Тип страницы: "Стандартная")
     
  3. Добавляем конечные категории (страницы типа "Раздел каталога"), в которых как раз и будет находиться компонент "Каталог". Итоговая иерархия будет выглядеть так (Рисунок 1.1):

    Каталог детских игрушек (тип страницы: "Стандартная")

            Транспорт (тип страницы: "Стандартная")

                    Машинки (тип страницы "Раздел каталога")

                    Мотоциклы (тип страницы "Раздел каталога")

            Куклы (тип страницы: "Стандартная")

                    Барби (тип страницы: "Раздел каталога")

                    Матрешки (тип страницы: "Раздел каталога")

    Рисунок 1.1 

    Рисунок 1.1


4. При создании страницы типа "Раздел каталога", на нее автоматически добавляется компонент "Каталог" с одним тестовым демо-товаром (Рисунок 1.2):


Рисунок 1.2

Рисунок 1.2



Данный товар рекомендуется удалить и начать заполнять каталог реальными данными.

5. Добавьте на родительские страницы компонент "Текст" со ссылками на вложенные разделы каталога. Например, на странице "Транспорт" должны присутствовать 2 ссылки - на страницу "Машинки" и на страницу "Мотоциклы". В таком случае наша иерархия разделов приобретет законченный вид.

6. Настраиваем компонент

Чтобы открыть меню настроек компонента, щелкните на пиктограмму Редактирование настроек компонента панели инструментов компонента.

Диалог настройки компонента "Каталог" (Рисунок 1.3) состоит из 2 основных областей: панели товаров из других каталогов и панели товаров текущего каталога.

 

Рисунок 1.3

Рисунок 1.3

 


В панели товаров из других каталогов отображаются товары, присутствующие в других каталогах, добавленных на сайт. В нашем случае, там присутствуют позиции из каталога "Мотоциклы". Если вдруг вы пожелаете, чтобы в каталоге "Машины" отображались еще и мотоциклы, просто перетащите нужный товар из левой панели в правую панель с помощью мыши. Панель товаров из других каталогов может быть скрыта с помощью кнопки Скрыть панель.

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

В нижней части диалога настройки компонента выводятся общие настройки каталога:
 

    • количество товаров, выводимых на одной странице каталога. Данное поле по умолчанию заблокировано. Нажмите кнопку "Редактировать", введите желаемое количество товарных позиций, нажмите кнопку "Сохранить".
       
    • куда добавляем новые товарные позиции. Вновь добавляемые товары будут появляться либо вверху, либо внизу списка, в зависимости от выбранного значения в этом поле.



Чтобы добавить новый товар, нажмите кнопку "Создать товар". Откроется диалог добавления нового товара (Рисунок 1.4).

 

Рисунок 1.4

Рисунок 1.4

 

Заполните следующие поля:

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


Обратите внимание, что первая по порядку фотография товара будет считаться основной. Именно она будет выводиться в списке анонсов каталога, и будет присутствовать в увеличенном размере на странице подробного описания товара (Рисунок 1.5).


Рисунок 1.5

Рисунок 1.5

    • Свойства товара: к каждому товару вы можете прикрепить произвольное количество разнообразных свойств и их значений.

      Например, у товара "Машинка игрушечная (Модель №1)" присутствуют такие свойства как "Цена", "Остаток на складе".
      Можно придумать и другие свойства, например, "Цвет", "Габариты", "Вес", "Возрастное ограничение" и т.д. Все добавленные вами свойства будут выведены в карточке товара.

      Чтобы добавить новое свойство товара нажмите кнопку "Добавить свойство". В таблицу свойств будет вставлена новая запись с некими значеними по умолчанию. Отредактируйте данные значения, совершив двойной клик мыши в соответствующей ячейке. 
       
      • Системное имя: введите сюда уникальное имя для данного свойства на латинице. Например, "price"

        Обратите внимание, что одинаковым свойствам товаров в одном каталоге следует давать одинаковые системные имена. Например, свойство "Цена" у двух товаров каталога "Машинки" должно иметь одинаковое системное имя "price". Необходимо для корректной работы фильтрации и сортировки.

 

      • Название: название свойства. Например, "Цена".

 

      • Единица измерения: то, что будет выводиться после значения свойства. Например, "руб.".

 

      • Выводить в анонсе: будет ли свойство показано в списке анонсов каталога. По умолчанию "Да".

 

      • Важное?: если свойство помечено как "Важное", оно будет визуально выделяться в карточке товара. По умолчанию "Нет".

 

      • Тип данных: значения какого типа может принимать поле.
        Варианты: строка, число либо дробное число.
        Необходимо для корректной работы фильтрации и сортировки.

 

      • Значение: значение поля. Например, 5000.


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


После того, как вы закончите настройку добавляемого товара, нажмите кнопку "Создать товар" диалога добавления товара. Товар добавится в каталог, для него будет создана карточка (страница подробного описания), которая и откроется в новой вкладке браузера. 

 

Обратите внимание!

 

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



Когда закончите добавление товаров нажмите кнопку "Отмена", чтобы закрыть диалог добавления товаров и вернуться к списку товаров каталога.

Редактирование отдельного товара производится аналогично добавлению: нажмите кнопку Редактировать товар, чтобы открыть диалог редактирования товара, поменяйте значения нужных полей и нажмите кнопку "Сохранить".

Товар можно удалить из каталога с помощью кнопки Удалить товар. При попытке удаления товара вы увидите предупреждение следующего содержания:

 

"Если товар не используется в других каталогах, страница с подробным описанием товара также будет удалена. Вы уверены, что хотите продолжить?".

 


Если вы согласны, нажимайте "Ок" и товар будет удален (возможно, вместе со страницей подробного описания).


Кроме того, Вы можете изменить порядок следования анонсов товаров в каталоге с помощью кнопок  Вверхи Вниз.

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


В итоге, наш настроенный компонент "Каталог" приобретает подобный вид (Рисунок 1.6):

 

Рисунок 1.6

Рисунок 1.6


Страница подробного описания товара (карточка товара).



Чтобы перейти к просмотру подробного описания товара, пользователь должен щелкнуть на ссылку "Подробнее", либо на фотографию товара в анонсе. Страница подробного просмотра имеет подобный вид (Рисунок 1.7):
 

Рисунок 1.7

Рисунок 1.7


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

Обратите внимание!

Настоятельно не рекомендуется вручную изменять содержимое компонентов "Заголовок" и "Текст" в регионе основного содержимого страниц типа "Товар". Также не изменяйте алиас страницы товара. Это может привести к некорректной работе каталога. Все изменения должны производиться через диалог настройки компонента "Каталог". После сохранения изменений страница подробного описания будет перегенирирована с новыми настройками.



Чтобы со страницы карточки товара вернуться в раздел каталога, перейдите по ссылке "Вернуться в каталог", расположенной внизу описания товара.