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

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

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

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

Добавление Дополнительного свойства в HostCMS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HostCMS: элементы информационной системы

❹ Добавить 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"

Добавление слайдшоу в HostCMS

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

HostCMS Добавление слайдшоу на главную страницу

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

HostCMS Создание слайдшоу

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

Создание слайдера в HostCMS

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

Настройка слайдшоу в админке HostCMS

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

Как добавить слайдшоу в HostCMS

Прочитайте еще посты:

27 Октября 2021

Просмотров: 1316

Комментариев: 0

HostCMS, cms, слайдеры, рецепты

Содержание:

    Оставьте свой комментарий!


    Разрешённые теги: <b><i><br>


    Комментарии (0)

     

    Давайте общаться

    Я хотел бы поговорить о вашем бизнесе, отправьте мне письмо на make.website.info@gmail.com.