Центр поддержки
Получите ценные советы и руководства от наших экспертов.
Популярные ключевые слова:

Hostcms tag name: вывод дополнительных свойств в XSL

Avatar
Куратор раздела: Николай
Последнее обновление 11 апреля 2020 г.

В HostCMS есть дополнительные свойства, которые позволяют делать потрясающие штуки с интернет-магазином и информационными системами. Подробно о них можете прочитать в нашей статье: «Дополнительные свойства в HostCMS». Однако они будут совершенно бесполезны, если мы их не выведем в XSL.

Вручную свойства выводятся в XSL конструкцией <xsl:value-of select=""/>, а в select мы передаём уже то, что хотим найти, например property_value[tag_name=’string_or_number’]/value, т.е значение свойства с именем string_or_number.

Где найти tag_name у дополнительного свойства?

Для магазина: заходим в свой интернет-магазин через админку, переход по кнопке товары, выбираем Свойства товара и получаем список. В колонке XML-тег будет нужный tag_name.

Открываем список дополнительных свойств Hostcms

Колонка XML-тег:

Hostcms tag name в списке допсвойств

Для информационной системы: аналогично заходим в инфосистему, например Новости, нажимаем Информационный элемент, выбираем Дополнительные свойства:

список свойств инфосистемы hostcms

Мы знаем tag name, мы примерно знаем как выводить, остался вопрос: Куда?

В XSL-шаблоны. Переходим в раздел XSL, Находим нужный и нажимаем на зеленую кнопку с карандашом «Редактировать»:

редактирование xsl в hostcms

А теперь краткий экскурс, куда именно вставлять вывод tag name:

Для информационной системы:

<!-- Шаблон выводит ссылки подгруппы информационного элемента -->
<xsl:template match="informationsystem_group" mode="groups">
  Cюда мы вставляем свойства групп информационной системы
</xsl:template>

<!-- Шаблон вывода информационного элемента -->
<xsl:template match="informationsystem_item">
  А сюда вставляем свойства элементов информационной системы
</xsl:template>

Для интернет-магазина:

<!-- Шаблон для групп товара -->
<xsl:template match="shop_group">
  Сюда мы вставляем свойства групп интернет-магазина
</xsl:template>

<!-- Шаблон для товара -->
<xsl:template match="shop_item">
  А сюда мы вставляем свойства товаров интернет-магазина
</xsl:template>

Уже сейчас, когда вы попробовали — могло не получиться. Для этого прочитайте «Дополнительные свойства в HostCMS не отображаются. Почему?«.

Как вручную вывести дополнительные свойства через tag name

Вывод допсвойства типа «Строка», «Число», «Дата»

<xsl:value-of select="property_value[tag_name='string_or_number']/value"/>

Вывод допсвойства типа Большое текстовое поле и Визуальный редактор

Здесь обязательно использовать атрибут disable-output-escaping для value-of, иначе вместо оформленного текста у вас будет каша из тегов.

<xsl:value-of disable-output-escaping="yes" select="property_value[tag_name='big_text']/value"/>

Вывод допсвойства типа Файл

В данном случае dir выведет путь до файла, а property_value название файла с расширением как он сохранен на сервере. Обращаю внимание: дополнительные свойства можно выводить внутри html атрибутов, например href, src, style и.т.д, что открывает огромные возможности. В html атрибутах допсвойства нужно прописывать в фигурных скобках: {свойство}.

Вот вывод изображения:

<img src="{dir}{property_value[tag_name='our_file']/file}" />

А вот вывод ссылки:

<a href="{dir}{property_value[tag_name='our_file']/file}">Ссылка на файл</a>

Если выводится картинка, то у файла есть малое изображение и большое. Каждое из них можно вывести отдельно:

Малое изображение
<img src="{dir}{property_value[tag_name='our_file']/file_small}" />
Большое
<img src="{dir}{property_value[tag_name='our_file']/file}" />

Вывод малого и большого изображения позволяет делать всплывающие картинки типа Fancybox, lightbox и прочие вот так:

<a href="{dir}{property_value[tag_name='our_file']/file}" class="fancybox" rel="gallery">
  <img src="{dir}{property_value[tag_name='our_file']/file_small}" />
</a>

Т.е в картинке мы вводим миниатюру, а при нажатии на картинку открывается оригинал

Вывод допсвойства типа «Флажок»

Дополнительное свойства флажок имеет только два значения — отмечено или неотмечено, 1 или 0, поэтому область его применения не велика. В основном использование флажка сводится к проверке: если он отмечен, то сделать одно действие, а если не отмечен другое. С этого места мы плавно подходим к тому, что в XSL-шаблонах часто используются циклы и условия. Рассмотрим действие флажка на примере условия if:

<xsl:if test="property_value[tag_name='our_checkbox']/value !='0'">  
  Выводим здесь данные, если флажок активен
</xsl:if>

А вот проверка на заполненность описания:

<xsl:if test="description !=''">  
  <xsl:value-of disable-output-escaping="yes" select="description"/>
</xsl:if>

Есть второй вид двойного условия через choose (аналог If-else):

<xsl:choose>
  <xsl:when test="property_value[tag_name='our_checkbox']/value !='0'">
    Выводим здесь данные, если флажок активен
  </xsl:when>
  <xsl:otherwise>
    Вывод при неактивном флажке
  </xsl:otherwise>
</xsl:choose>

Кроме условий есть еще и циклы for-each, которые нужны для вывода нескольких значений у свойства.

Вывод множественных значений у свойства в Hostcms

Представим, что картинок у вашей новости несколько. вы отметили при создании свойства опцию «Разрешить множественные значения для свойства» вот так:

Разрешить множественные значения для свойства в hostcms

Понажимали кнопки добавления еще одного значения для допсвойства типа Файл:

множественные значения у файла в hostcms

И загрузили картинки. Теперь вам нужно вывести их в XSL шаблоне вот так:

<xsl:for-each select="property_value[tag_name='products']">
  <img src="{../dir}{file}"/>
</xsl:for-each>

У dir нам нужно вернуться на предыдущий уровень XML документа, поэтому мы ставим «../dir», а для получения названия и расширения файла пишем просто file. И теперь в цикле пройдёт перебор всех картинок и мы получим сразу несколько тегов img. Оформление уже за вами — всё это можно обернуть в совершенно любую верстку.

Вывод описания файла в HostCMS

У допсвойства типа «Файл» есть поле описание, как у малого, так и большого формата.

Вывод описания файла в hostcms

Это позволит например задать понятное человеку название документа или прописать нужные для SEO alt у картинок и title у ссылок. Выводим его так:

Для одиночной картинки или документа
<img src="{dir}{property_value[tag_name='our_file']/file}" title="{property_value[tag_name='our_file']/file_description}" alt="{property_value[tag_name='our_file']/file_description}"/>

Для цикла
<xsl:for-each select="property_value[tag_name='our_file']">
  <img src="{../dir}{file_small}" title="{file_small_description}" alt="{file_small_description}" />
</xsl:for-each>

А теперь продолжим тему циклов.

Вывод допсвойства типа «Интернет-магазин» и «Информационная система»

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

допсвойство типа

Выводим свойство в XSL-шаблон, например, с помощью такой элементарной верстки (картинка + ссылка на товар):

<xsl:for-each select="property_value[tag_name='products']">

  <img class="item_img" src="{shop_item/dir}{shop_item/image_small}"  alt="{shop_item/name}" title="{shop_item/name}" />
  <a class="item-title" href="{shop_item/url}" title="{shop_item/name}">
    <xsl:value-of select="shop_item/name" />
  </a>

</xsl:for-each>

На что здесь нужно обратить внимание?

На приставку shop_item перед свойством. Всё пишется как обычно, но с shop_item: shop_item/dirshop_item/name и так далее.

Еще один очень полезный нюанс.

Проверка на количество значений свойства

Полезно всегда проверять перед выводом цикла на количество значений свойства, чтобы лишний раз не дергать XSL обработчик и чтобы контролировать вывод элементов. Покажу на примере: у нас есть товары, в которых должны быть показаны связанные новости, а перед новостями должен стоять заголовок h2. Получается что если новости есть, то и заголовок есть, в противном случае его надо убирать. Как это сделать без проверки количества? Никак. Вот так надо:

<xsl:if test="count(property_value[tag_name='our_news']/informationsystem_item) &gt; 0">

  <h2>Связанные новости</h2>

  <xsl:for-each select="property_value[tag_name='our_news']">

    <img class="item_img" src="{informationsystem_item/dir}{informationsystem_item/image_small}"  alt="{informationsystem_item/name}" title="{informationsystem_item/name}" />
    <a class="item-title" href="{informationsystem_item/url}" title="{informationsystem_item/name}">
      <xsl:value-of select="informationsystem_item/name" />
    </a>

  </xsl:for-each>

</xsl:if>

В данном примере вы видите сразу две вещи:

  1. как проверить количество значений у свойства
  2. пример вывода допсвойства типа «Информационная система»

Вывод всех дополнительных свойств в HostCMS автоматически

Автоматический вывод свойств будет полезен для интернет-магазинов или каталогов, в которых товары обладают большим числом характеристик. Так мы делали для многих магазинов: выводим сам шаблон для свойств через apply-templates.

<xsl:if test="count(property_value)">
  <h2>Характеристики товара</h2>
  <xsl:apply-templates select="property_value"/>
</xsl:if>

А внутри шаблона property_value делаем нужное оформление:

<xsl:template match="property_value">
  <xsl:if test="value/node() and value != '' or file/node() and file != ''">
    <div class="shop_property">
      <xsl:variable name="property_id" select="property_id" />
      <xsl:variable name="property" select="/shop/shop_item_properties//property[@id=$property_id]" />

      <xsl:value-of select="$property/name"/><xsl:text>: </xsl:text>
      <span><xsl:choose>
          <xsl:when test="$property/type = 2">
            <a href="{../dir}{file}" target="_blank"><xsl:value-of select="file_name"/></a>
          </xsl:when>
          <xsl:when test="$property/type = 5">
            <a href="{informationsystem_item/url}"><xsl:value-of select="informationsystem_item/name"/></a>
          </xsl:when>
          <xsl:when test="$property/type = 7">
            <input type="checkbox" disabled="disabled">
              <xsl:if test="value = 1">
                <xsl:attribute name="checked">checked</xsl:attribute>
              </xsl:if>
            </input>
          </xsl:when>
          <xsl:when test="$property/type = 12">
            <a href="{shop_item/url}"><xsl:value-of select="shop_item/name"/></a>
          </xsl:when>
          <xsl:otherwise>
            <xsl:value-of disable-output-escaping="yes" select="value"/>
            <!-- Единица измерения свойства -->
            <xsl:if test="$property/shop_measure/node()">
              <xsl:text> </xsl:text><xsl:value-of select="$property/shop_measure/name"/>
            </xsl:if>
          </xsl:otherwise>
      </xsl:choose></span>
    </div>
  </xsl:if>
</xsl:template>

На этом всё. Мы разобрались как пользоваться tag name в Hostcms и углубились в типы дополнительных свойств. Если будут вопросы — спрашивайте.

  • Пишите нам
  • Звоните
    8 902 579 86 90
Написать в поддержку
Icon