HostCMS: пошаговая инструкция создания слайдшоу

Вступление

Как в HostCMS добавить на главную страницу слайд шоу? На форуме HostCMS пишут, что все это очень просто. Но, согласитесь, все очень просто бывает только, когда все знаешь.

Есть минимум 2 способа настройки слайдера в HostCMS:

1. С помощью Информационной системы
2. С помощью виджета

В статье я опишу алгоритм создания слайдера Owl-carousel для главной страницы сайта на движке версии 6.7.1 по первому варианту. Надеюсь, многим это поможет быстро добавить такой функционал на свой ресурс.

Поехали!))))

Пошаговая инструкция создания слайдшоу на HostCMS сайте

Добавление слайдера на сайт состоит из: настройки этого блока в Админке, добавления его в макет сайта и стилизации внешнего вида.

❶ Добавление информационной системы

Как создать ИС в HostCMS:
https://www.hostcms.ru/documentation/modules/informationsystem/add/

Параметры для моего слайдшоу:

Вкладка Основные

Название информационной системы: Слайдшоу на Главной

Вкладка Сортировка

Сортировка: Порядок сортировки

Направление сортировки элементов: По-возрастанию

Вкладка Форматы

Макс ширина большой картинки: 1200

Макс высотабольшой картинки: 390

❷ Доп свойства Инфо элемента

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

Как создать Дополнительное свойство информационного элемента, описано в документации:
https://www.hostcms.ru/documentation/modules/informationsystem/item/property/

Информационные системы  → Слайдшоу на Главной → зеленая кнопка Информ элемент – выбрать: Дополнительные свойства → кнопка Свойство → Добавить

В моем случае:

Вкладка Основные

Название: URL-ссылка со слайда

Тип: строка

Значение по умолчанию: можно не указывать, но я указал - /uslugi-i-ceny/

Название XML-тега: url

Скриншот добавления Дополнительного свойства:

❸ Добавить элементы ИС

Контент → Информационные системы → Слайдшоу на Главной → зеленая кнопка Информ элемент → Добавить

Что необходимо указать:

Вкладка Основные

Название информационного элемента (это будет заголовок слайда)

Порядок сортировки (я указываю с шагом 10 для каждого нового элемента)

Большое изображение (я загружаю файл JPG размером 1200х390 пикселей)

Вкладка Описание

Описание информационного элемента (короткий текст для слайда, будет под заголовком)

Вкладка Дополнительные свойства

URL-ссылка со слайда (н-р: /czeny/konturnaya-plastika/)

Получится такой слайд:

 Список моих элементов Инфосистемы:

❹ Добавить XSL-шаблон

Структура сайта → XSL-шаблоны →  зеленая кнопка XSL-шаблон →  Добавить

Вкладка Основные

Название XSL-шаблона: Слайдшоу

Код XSL-шаблона: вставить код шаблона

Код подсматривал тут:
https://www.hostcms.ru/forums/2/12459/
https://www.hostcms.ru/forums/2/11370/

Мой готовый код XSL-шаблона:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:hostcms="http://www.hostcms.ru/"
 exclude-result-prefixes="hostcms">
 
 <xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>
 
 <!-- Слайдшоу -->
<xsl:template match="/">
 <xsl:apply-templates select="/informationsystem"/>
 </xsl:template>
 
 <xsl:template match="/informationsystem">
 <!-- Отображение записи информационной системы -->
 <xsl:if test="informationsystem_item">
 <div class="slider-wrap">
 <div class="width">
 <div class="owl-carousel car1 owl-slider">
 <xsl:apply-templates select="informationsystem_item" />
 </div>
 </div>
 </div>
 </xsl:if> 
 </xsl:template>
 
 <!-- Шаблон вывода информационного элемента -->
 <xsl:template match="informationsystem_item">
 <div class="item" style="background-image:url({dir}{image_large});">
 <div class="content-wrap">
 <div class="cont-slide">
 <div class="title-slide">
 <div hostcms:id="{@id}" hostcms:field="name" hostcms:entity="informationsystem_item"><xsl:value-of select="name"/></div>
 </div>
 <div class="body-slide">
 <xsl:value-of disable-output-escaping="yes" select="description"/>
 </div>
 <div class="btn-slide"><a href="{property_value[tag_name='url']/value}" class="btn-yell-frame">&label1;</a></div>
 </div>
 </div>
 </div>
 </xsl:template>
</xsl:stylesheet>

❺ Вставить код отображения инфосистемы в Макет сайта

Я вставляю слайдшоу на Главной странице. Для этого в макете (Структура сайта → Макеты сайта) добавляю условие:

<?php if (Core_Page::instance()->structure->path=='/')  { ?>
  Код слайдера . . .
<? } ?>

Мой код вставки Информационной системы «Слайдшоу на Главной»:

<?php if (Core_Page::instance()->structure->path=='/') {
  if (Core::moduleIsActive('informationsystem'))
  {
  $Informationsystem_Controller_Show = new Informationsystem_Controller_Show(
    Core_Entity::factory('Informationsystem', 33 ) // 33 – ID идентификатор информационной системы Слайдшоу на Главной (шаг 1)
  );
  $Informationsystem_Controller_Show
    ->xsl(
      Core_Entity::factory('Xsl')->getByName('Слайдшоу') // 'Слайшоу' - название xsl-шаблона из шага 4
    )
    ->groupsMode('none')
    ->itemsForbiddenTags(array('text'))
    ->group(FALSE)
    ->itemsPropertiesList(FALSE)
    ->itemsProperties(TRUE)
    ->limit(20)
    ->show();
  }
} ?>

❻ Добавить скрипты и стили

Я использую Owl-Carousel https://owlcarousel2.github.io/OwlCarousel2/

Демо страница карусели Basic: https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html

Скрипты добавляем в файл js скриптов, стили – в css файл стилей.

Мой скрипт:

$('.owl-carousel.car1').owlCarousel({
  loop:true,
  autoplay: true,
  items:1,
  nav:true
});

Описанный слайдер работает на главной странице сайта damasclinic.ru.

Если у вас есть какие-то добавления, замечания или вопросы, пишите в комментариях внизу поста! Буду рад пообщаться!

HostCMS слайдшоу с помощью Виджета

Такой вариант реализован в бесплатном Универсальном интернет-магазине https://www.hostcms.ru/shop/market/shop-templates/multipurpose/universal-template/

Здесь приведу лишь скриншоты из Админки сайта с этим макетом.

Структура сайта / Макеты сайта / Сайт2 / Макет "Основной макет сайтаСайт2"

Структура сайта / Макеты сайта / Секции макета "Для главной страницыСайт2" / Виджеты секции макета сайта

Структура сайта / Типовые динамические страницы / Сайт2 / Виджеты

Структура сайта / Типовые динамические страницы / Сайт2 / Виджеты / Главная страница

Данные слайдов добавляются здесь:
Структура сайта / Макеты сайта / Секции макета "Для главной страницыСайт2"

Структура сайта / Макеты сайта / Секции макета "Для главной страницыСайт2" / Виджеты секции макета