Несколько изображений к товару средствами дополнительных полей

Актуально для версии 2.9.5

Задача

Вывести на сайте несколько изображений к товару, не прибегая к созданию дополнительных папок или страниц-фотографий(фотоальбомов).

Решение

Задачу можно решить средствами модуля "Шаблоны данных", ниже дан пример.

Вариант 1

1) Создадим в типе данных, к которому относится товар, столько полей типа изображение, сколько будет изображений у товара:

2) Создадим товар с этим типом данных и заполним созданные поля в карточке товара:

3) Теперь осталось это вывести, вывод в tpl есть в статье Добавление_нескольких_фотографий_к_описанию_объекта_каталога, первый вариант. В xslt же все еще проще, у нас будет примерно следующий xml документ, который нужно обработать:

<group id="5573" name="kartinki">
	<title>Картинки</title>
	<property id="971" name="kartinka_1" type="img_file">
		<title>Картинка 1</title>
		<value path="./images/cms/data/sovet/sovet-cv_tc21.jpg" folder="/images/cms/data/sovet" name="sovet-cv_tc21" ext="jpg" width="680" height="499">/images/cms/data/sovet/sovet-cv_tc21.jpg</value>
	</property>
	<property id="972" name="kartinka_2" type="img_file">
		<title>Картинка 2</title>
		<value path="./images/cms/data/sovet/sovet-tc3.jpg" folder="/images/cms/data/sovet" name="sovet-tc3" ext="jpg" width="350" height="350">/images/cms/data/sovet/sovet-tc3.jpg</value>
	</property>
	<property id="973" name="kartinka_3" type="img_file">
		<title>Картинка 3</title>
		<value path="./images/cms/data/sovet/sovet-tv-tc1.jpg" folder="/images/cms/data/sovet" name="sovet-tv-tc1" ext="jpg" width="500" height="412">/images/cms/data/sovet/sovet-tv-tc1.jpg</value>
	</property>
	<property id="974" name="kartinka_4" type="img_file">
		<title>Картинка 4</title>
		<value path="./images/cms/data/sovet/soviet-tv-b1.jpg" folder="/images/cms/data/sovet" name="soviet-tv-b1" ext="jpg" width="500" height="375">/images/cms/data/sovet/soviet-tv-b1.jpg</value>
	</property>
	<property id="975" name="kartinka_5" type="img_file">
		<title>Картинка 5</title>
		<value path="./images/cms/data/sovet/soviet-tv-ba.jpg" folder="/images/cms/data/sovet" name="soviet-tv-ba" ext="jpg" width="680" height="573">/images/cms/data/sovet/soviet-tv-ba.jpg</value>
	</property>
	<property id="977" name="kartinka_6" type="img_file">
		<title>Картинка 6</title>
		<value path="./images/cms/data/sovet/soviet-tv-t7.jpg" folder="/images/cms/data/sovet" name="soviet-tv-t7" ext="jpg" width="890" height="630">/images/cms/data/sovet/soviet-tv-t7.jpg</value>
	</property>
</group>

Обработать это дерево можно с помощью следующей конструкции:

<div style="max-width: 300; max-height: 300;">
	<ul class="bxslider">
		<xsl:for-each select="./page/properties/group[@name = 'kartinki']/property[@type = 'img_file']">
			<li>
				<xsl:apply-templates select="document(concat('udata://system/makeThumbnail/(.', ./value, ')/200/auto'))"/>
			</li>
		</xsl:for-each>
	</ul>
</div>

и шаблона, знакомого нам по статье Несколько_изображений_к_товару_средствами_протокола_ufs (bxslider мы берем оттуда же):

<xsl:template match="udata[@module = 'system' and @method = 'makeThumbnail']">
	<img src="{src}"/>
</xsl:template>

Плюсы

• Легко реализовать в административном интерфейсе
• Легко вывести на сайте
• Легко менять изображения, в том числе и через eip

Минусы

• Нельзя добавить дополнительное изображение ни через eip, ни через редактирование страницы
• Пользователю будет нужно редактировать типы данных, а это чревато Ошибка_(coreException):_Give_me_a_normal_type_to_create_;)

Вариант 2

1) Создадим в типе данных, к которому относится товар составное поле и справочник к нему:

2) Создадим в типе данных этого справочника поле типа изображение:

3) Заполним справочник элементами:

4) Выберем на странице товара эти элементы:

5) Теперь осталось это вывести. В tpl для этого понадобится макрос %data getProperty()%, который выведет опцию, а в шаблоне для вывода опции понадобится макрос %data getPropertyOfObject()%, для вывода картинки. В xslt же все еще проще, у нас будет примерно следующий xml документ, который нужно обработать:

<property id="976" name="pictures" type="optioned">
	<title>Изображения</title>
	<value>
		<option int="1">
			<object id="5726" name="Картинка 1" type-id="620" ownerId="2" xlink:href="uobject://5726"/>
		</option>
		<option int="1">
			<object id="5727" name="Картинка 2" type-id="620" ownerId="2" xlink:href="uobject://5727"/>
		</option>
		<option int="1">
			<object id="5728" name="Картинка 3" type-id="620" ownerId="2" xlink:href="uobject://5728"/>
		</option>
		<option int="1">
			<object id="5729" name="Картинка 4" type-id="620" ownerId="2" xlink:href="uobject://5729"/>
		</option>
		<option int="1">
			<object id="5730" name="Картинка 5" type-id="620" ownerId="2" xlink:href="uobject://5730"/>
		</option>
		<option int="1">
			<object id="5731" name="Картинка 6" type-id="620" ownerId="2" xlink:href="uobject://5731"/>
		</option>
	</value>
</property>

Обработать это дерево можно с помощью следующей конструкции (снова используется bxslider):

<div style="max-width: 300; max-height: 300;">
	<ul class="bxslider">
		<xsl:for-each select="./page/properties/group[@name = 'kartinki']/property[@type = 'optioned']/value/option">
			<li>
				<xsl:apply-templates select="document(concat('udata://system/makeThumbnail/(.', document(concat('uobject://', ./object/@id,  '.kartinka'))//value, ')/200/auto'))"/>
			</li>
		</xsl:for-each>
	</ul>
</div>

и уже знакомого темплейта:

<xsl:template match="udata[@module = 'system' and @method = 'makeThumbnail']">
		<img src="{src}"/>
	</xsl:template>

Плюсы

• Легко вывести на сайте
• Легко менять изображения, в том числе и через eip
• Можно добавить дополнительное изображение через редактирование страницы

Минусы

• Нельзя добавить дополнительное изображение через eip
• В интерфейсе страницы не видны изображения выбранных элементов
• Муторно добавлять элементы в справочник, а потом еще и опции на страницу

Кастомизация административного интерфейса

Попробуем решить два последних минуса и облегчить жизнь пользователю, то есть будет нужно:

1)Сделать отображение картинок выбранных элементов. 2)Дать возможность заполнить справочник прямо со страницы товар.