Просмотр исходного текста страницы Добавляем атрибуты title и alt к изображению товара (xslt)

'''Актуально для версии 20.'''<br/>
'''Задача:''' вывести в шаблоне сайта теги alt и title для изображений товаров, чтобы улучшить SEO-показатели сайта. <br/>
'''Решение''' на примере шаблона demodizzy.<br/>

Начиная с 19 версии системы в типы данных "Изображение" и "Набор изображений" были добавлены стандартные поля "alt" и "title".<br/>

Открываем файл /templates/demodizzy/xslt/modules/catalog/object-view.xsl.<br/>
1. В шаблоне
<source lang="xml"><xsl:template match="udata" mode="object-view"></source>
определяем (если не определена) новую переменную:
<source lang="xml"><xsl:variable name="main-photo" select="//property[@name = 'photo']/value" /></source>
2. В вызов шаблона для главного фото
<source lang="xml"><xsl:call-template name="catalog-thumbnail"></source>
передаем параметры:
<source lang="xml">
<xsl:with-param name="alt" select="$main-photo/@alt" />
<xsl:with-param name="title" select="$main-photo/@title" />
</source>
3. В шаблоне для набора изображений
<source lang="xml"><xsl:template match="value" mode="photos"></source>
внутри вызова
<source lang="xml"><xsl:call-template name="catalog-thumbnail"></source>
передаем параметры:
<source lang="xml"><xsl:with-param name="alt" select="@alt" />
<xsl:with-param name="title" select="@title" /></source>


Открываем файл /templates/demodizzy/xslt/library/thumbnails.xsl.<br/>
1. В данном файле нужно во всех определениях шаблонов
<source lang="xml"><xsl:template></source>
определить параметры:<br/>
<source lang="xml">
<xsl:param name="alt" />
<xsl:param name="title" />
</source>
2. В каждом вызове шаблона
<source lang="xml"><xsl:call-template></source>
нужно передать параметры:
<source lang="xml">
<xsl:with-param name="alt" select="$alt" />
<xsl:with-param name="title" select="$title" />
</source>


----


'''Актуально для версии 18.'''<br/>
'''В примере используются кастомные поля.'''

1) Откроем на редактирование шаблон данных, например "dvd техника". <br/>
[[Файл:Alttitle01.png]]<br/>
2) К группе свойств "'''Описание товара'''", добавим два поля '''title''' и '''alt''' с типом "'''Строка'''". <br/>
[[Файл:Alttitle02.png]]<br/>
3) Откроем какой-нибудь товар с типом данных "dvd техника" и заполним появившиеся поля.<br/>
4) Откроем шаблон данных '''/templates/demodizzy/xslt/library/thumbnails.xsl''' <br/>
5) В темплейте ''<xsl:template match="udata[@module = 'system' and (@method = 'makeThumbnail' or @method = 'makeThumbnailFull')]">''<br>
Добавим переменные, в которые разместим данные из добавленных нами полей:<br>
<source lang="xml">
	<xsl:variable name="altimg" select="document(concat('upage://', $element-id, '.', 'altimg'))/udata/property/value" />
	<xsl:variable name="titleimg" select="document(concat('upage://', $element-id, '.', 'titleimg'))/udata/property/value" />
</source>
<br>
6) К изображению <img src="{src}" width="{width}" height="{height}"> добавим нужные нам атрибуты. Воспользуемся конструкцией <xsl:if test="$altimg and $titleimg">, чтобы добавить атрибуты, только в том случае, если они заполнены:<br>
<source lang="xml">
<img src="{src}" width="{width}" height="{height}">
			<xsl:if test="$altimg and $titleimg">
				<xsl:attribute name="alt">
					<xsl:value-of select="$altimg" />
				</xsl:attribute>
				
				<xsl:attribute name="title">
					<xsl:value-of select="$titleimg" />
				</xsl:attribute>
			</xsl:if>
</img>
</source>
<br>
Можно поступить проще и не создавать дополнительные поля для изображения в шаблонах данных, а использовать уже готовые поля '''Title''' для атрибута Alt изображения и '''Description''' для Title атрибута изображения:<br>
<source lang="xml">
	<xsl:variable name="altimg" select="document(concat('upage://', $element-id, '.', 'title'))/udata/property/value" />
	<xsl:variable name="titleimg" select="document(concat('upage://', $element-id, '.', 'meta_descriptions'))/udata/property/value" />
</source>
<br>
Остальной код остаётся прежним.<br>

[[Категория:Модуль Каталог]][[Категория:Модуль SEO]][[Категория:Верстка в XSLT]]