Umicms - Вклад участника [ru]

Сгруппировать товары по категориям (xslt / demodizi)

2012-04-12T14:09:02Z

Romario:

Описание:

На демонстрационном сайте UMI.CMS с шаблоном дизайна современный, товары на втором уровне каталога (например DVD Техника) отображаются все вместе.

Задача:

Разбить товары на категории в зависимости от поткатегорий этого каталога.

Решение:

Шаблон отвечающий за отображение товаров на втором уровне каталога, по умолчанию, находится в файле ~\xsltTpls\modules\catalog\category-view.xsl:
<source lang="xml">
<xsl:template match="/result[@method = 'category'][count(/result/parents/page) = 1]">
<xsl:apply-templates select="document(concat('udata://catalog/getObjectsList/', page/@id, '////2/'))/udata" />
</xsl:template>
</source>
В данной конструкции вызываются все объекты каталога из 2х подуровней каталога.

Данный шаблон заменим на следующий:
<source lang="xml">
<xsl:template match="/result[@method = 'category'][count(/result/parents/page) = 1]">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))//item" mode="main_cat" />
</xsl:template>
</source>
В данном шаблоне мы заменили вызов объектов каталога на вызов категорий каталога.

Теперь нам необходимо написать шаблон для категорий каталога, таким образом, чтобы из каждой категории вызывались только "свои: объекты:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="main_cat">
<h2>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</h2>
<hr/>
<xsl:apply-templates select="document(concat('udata://catalog/getObjectsList//',@id))/udata" />
</xsl:template>
</source>

Таким образом мы получим на втором уровне каталога список товаров разбитый по категориям.

[[Категория:Верстка в XSLT]]

Участник:Romario

2012-04-03T07:44:25Z

Romario:

== Октябрь: ==

<ul>
<li>[[Поиск последнего заказа, который оформил покупатель.]]</li>
<li>[[Работа с корзиной без перезагрузки]]</li>
</ul>
== Ноябрь: ==
<ul>
<li>[[Размещение фотографии любого размера ]]</li>
<li>[[Вывод страницы контента, вместо страницы "Лучшие предложения" на главной странице сайта с шаблоном "современный"]]</li>
</ul>
== Декабрь: ==
<ul>
<li>[[Динамическое меню каталога товаров в demodizi]]</li>
<li>[[Подключение скрипта для записи значения формы в куки]]</li>
</ul>

== Январь: ==
<ul>
<li>[[Изменение числа объектов каталога в строке сайт Demo-dizzy (шаблон современный)]]</li>
<li>[[Правильное название статуса заказа в письмах пользователю]]</li>
</ul>

== Февраль: ==
<ul>
<li>[[Как запретить гостям оформлять заказы (TPL)]]</li>
<li>[[Как запретить гостям оформлять заказы (XSLT)]]</li>
</ul>

== март: ==
<ul>
<li>[[Сгруппировать товары по категориям (xslt / demodizi)]]</li>
<li>[[Изменение директорий по умолчанию в файловых менеджерах UMI.CMS]]</li>
</ul>

Сгруппировать товары по категориям (xslt / demodizi)

2012-03-30T08:43:59Z

Romario:

Описание:

На демонстрационном сайте UMI.CMS с шаблоном дизайна современный, товары на втором уровне каталога (например DVD Техника) отображаются все вместе.

Задача:

Разбить товары на категории в зависимости от поткатегорий этого каталога.

Решение:

Шаблон отвечающий за отображение товаров на втором уровне каталога, по умолчанию, находится в файле ~\xsltTpls\modules\catalog\category-view.xsl:
<source lang="xml">
<xsl:template match="/result[@method = 'category'][count(/result/parents/page) = 1]">
<xsl:apply-templates select="document(concat('udata://catalog/getObjectsList/', page/@id, '////2/'))/udata" />
</xsl:template>
</source>
В данной конструкции вызываются все объекты каталога из 2х подуровней каталога.

Данный шаблон заменим на следующий:
<source lang="xml">
<xsl:template match="/result[@method = 'category'][count(/result/parents/page) = 1]">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" mode="main_cat" />
</xsl:template>
</source>
В данном шаблоне мы заменили вызов объектов каталога на вызов категорий каталога.

Теперь нам необходимо написать шаблон для категорий каталога, таким образом, чтобы из каждой категории вызывались только "свои: объекты:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="main_cat">
<h2>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</h2>
<hr/>
<xsl:apply-templates select="document(concat('udata://catalog/getObjectsList//',@id))/udata" />
</xsl:template>
</source>

Таким образом мы получим на втором уровне каталога список товаров разбитый по категориям.

[[Категория:Верстка в XSLT]]

Участник:Romario

2012-03-30T08:38:18Z

Romario:

Сгруппировать товары по категориям (xslt / demodizi)

2012-03-30T08:35:33Z

Romario: Новая страница: «Описание: На демонстрационном сайте UMI.CMS с шаблоном дизайна современный, товары на втором…»

Описание:

На демонстрационном сайте UMI.CMS с шаблоном дизайна современный, товары на втором уровне каталога (например DVD Техника) отображаются все вместе.

Задача:

Разбить товары на категории в зависимости от поткатегорий этого каталога.

Решение:

Шаблон отвечающий за отображение товаров на втором уровне каталога, по умолчанию, находится в файле ~\xsltTpls\modules\catalog\category-view.xsl:
<source lang="xml">
<xsl:template match="/result[@method = 'category'][count(/result/parents/page) = 1]">
<xsl:apply-templates select="document(concat('udata://catalog/getObjectsList/', page/@id, '////2/'))/udata" />
</xsl:template>
</source>
В данной конструкции вызываются все объекты каталога из 2х подуровней каталога.

Данный шаблон заменим на следующий:
<source lang="xml">
<xsl:template match="/result[@method = 'category'][count(/result/parents/page) = 1]">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" mode="main_cat" />
</xsl:template>
</source>
В данном шаблоне мы заменили вызов объектов каталога на вызов категорий каталога.

Теперь нам необходимо написать шаблон для категорий каталога, таким образом, чтобы из каждой категории вызывались только "свои: объекты:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="main_cat">
<h2>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</h2>
<hr/>
<xsl:apply-templates select="document(concat('udata://catalog/getObjectsList//',@id))/udata" />
</xsl:template>
</source>

Таким образом мы получим на втором уровне каталога список товаров разбитый по категориям.

Участник:Romario

2012-02-29T20:14:26Z

Romario:

Как запретить гостям оформлять заказы (XSLT)

2012-02-29T20:13:31Z

Romario: Новая страница: «Задача: Сделать невозможным оформить заказ незарегистрированным пользователям, но при эт…»

Размещение фотографии любого размера

2012-02-27T14:22:22Z

Romario:

задача: выводить фотографии объектов каталога без обрезания на демонстрационном сайте demodizi (шаблон современный).
Решение:

За вывод обьектов каталога отвечает шаблон ~\xsltTpls\modules\catalog\common.xsl

В этом файле нужно заменить вызов, отвечающий за создание уменьшенной картинки:
<source lang="xml">
<a href="{@link}" class="image">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>

<xsl:with-param name="width">114</xsl:with-param>
<xsl:with-param name="height">120</xsl:with-param>
/xsl:call-template>
</a>
</source>

на вызов следующего шаблона с доработанной логикой.

<source lang="xml">

<xsl:variable name="image_w" select="document(concat('upage://', @id))/udata/page/properties/group[@name='opisanie_tovara']/property/value/@width"/>

<xsl:variable name="image_h" select="document(concat('upage://', @id))/udata/page/properties/group[@name='opisanie_tovara']/property/value/@height"/>

<xsl:choose>
<xsl:when test="$image_h < $image_w">
<td>
<a href="{@link}" class="image">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="width">160</xsl:with-param>
<xsl:with-param name="height">auto</xsl:with-param>
</xsl:call-template>
</a>
</td>
</xsl:when>
<xsl:when test="$image_h > $image_w">
<td>
<a href="{@link}" class="image">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="height">160</xsl:with-param>
<xsl:with-param name="width">auto</xsl:with-param>
</xsl:call-template>
</a>
</td>
</xsl:when>
<xsl:otherwise>
<td>
<a href="{@link}" class="image">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="height">160</xsl:with-param>
<xsl:with-param name="width">auto</xsl:with-param>
</xsl:call-template>
</a>
</td>
</xsl:otherwise>
</xsl:choose>

</source>

[[Категория:Верстка в XSLT]]

Размещение фотографии любого размера

2012-02-27T14:19:54Z

Romario:

задача: выводить фотографии объектов каталога без обрезания на демонстрационном сайте demodizi (шаблон современный).
Решение:

За вывод обьектов каталога отвечает шаблон ~\xsltTpls\modules\catalog\common.xsl

В этом файле нужно заменить вызов, отвечающий за создание уменьшенной картинки:
<source lang="xml">
<a href="{@link}" class="image">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>

<xsl:with-param name="width">114</xsl:with-param>
<xsl:with-param name="height">120</xsl:with-param>
/xsl:call-template>
</a>
</source>

на вызов следующего шаблона с доработанной логикой.

<source lang="xml">

<xsl:variable name="image_w" select="document(concat('upage://', @id))/udata/page/properties/group[@name='opisanie_tovara']/property/value/@width"/> <xsl:variable name="image_h" select="document(concat('upage://', @id))/udata/page/properties/group[@name='opisanie_tovara']/property/value/@height"/>

<xsl:choose>
<xsl:when test="$image_h < $image_w">
<td>
<a href="{@link}" class="image">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="width">160</xsl:with-param>
<xsl:with-param name="height">auto</xsl:with-param>
</xsl:call-template>
</a>
</td>
</xsl:when>
<xsl:when test="$image_h > $image_w">
<td>
<a href="{@link}" class="image">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="height">160</xsl:with-param>
<xsl:with-param name="width">auto</xsl:with-param>
</xsl:call-template>
</a>
</td>
</xsl:when>
<xsl:otherwise>
<td>
<a href="{@link}" class="image">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="height">160</xsl:with-param>
<xsl:with-param name="width">auto</xsl:with-param>
</xsl:call-template>
</a>
</td>
</xsl:otherwise>
</xsl:choose>

</source>

[[Категория:Верстка в XSLT]]

Размещение фотографии любого размера

2012-02-27T14:18:56Z

Romario:

задача: выводить фотографии объектов каталога без обрезания на демонстрационном сайте demodizi (шаблон современный).
Решение:

За вывод обьектов каталога отвечает шаблон ~\xsltTpls\modules\catalog\common.xsl

В этом файле нужно заменить блок, отвечающий за создание уменьшенной картинки:
<source lang="xml">
<a href="{@link}" class="image">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>

<xsl:with-param name="width">114</xsl:with-param>
<xsl:with-param name="height">120</xsl:with-param>
/xsl:call-template>
</a>
</source>

на вызов следующего шаблона с доработанной логикой.

<source lang="xml">

<xsl:variable name="image_w" select="document(concat('upage://', @id))/udata/page/properties/group[@name='opisanie_tovara']/property/value/@width"/> <xsl:variable name="image_h" select="document(concat('upage://', @id))/udata/page/properties/group[@name='opisanie_tovara']/property/value/@height"/>

<xsl:choose>
<xsl:when test="$image_h < $image_w">
<td>
<a href="{@link}" class="image">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="width">160</xsl:with-param>
<xsl:with-param name="height">auto</xsl:with-param>
</xsl:call-template>
</a>
</td>
</xsl:when>
<xsl:when test="$image_h > $image_w">
<td>
<a href="{@link}" class="image">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="height">160</xsl:with-param>
<xsl:with-param name="width">auto</xsl:with-param>
</xsl:call-template>
</a>
</td>
</xsl:when>
<xsl:otherwise>
<td>
<a href="{@link}" class="image">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="height">160</xsl:with-param>
<xsl:with-param name="width">auto</xsl:with-param>
</xsl:call-template>
</a>
</td>
</xsl:otherwise>
</xsl:choose>

</source>

[[Категория:Верстка в XSLT]]

Изменение кол-ва товаров в корзине (tpl 2.8.0)

2012-02-27T06:38:54Z

Romario:

== Задача ==

Добавить в '''Корзину товаров''' возможность изменения количества выбранных товаров.

== Решение ==

Сначала необходимо подключить jQuery для этого прописать в шаблоне:
%system includeQuickEditJs()%
%system includeEditInPlaceJs()%

Для решения данной задачи нам понадобится js-скрипт [[:Файл:FrontEndBasket.zip|frontEndBasket.js]], который не входит в стандартную поставку demo-tpl шаблона. Его следует поместить в папкe '''/js/'''.

Начнем с подключения необходимых скриптов в шаблон страницы. Необходимо подключить 3 скрипта, между тегами '''<head></head>''' строками:

<source lang="html4strict">
<script type="text/javascript" src="/js/frontEndBasket.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/client/basket.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/client/utilities.js" charset="utf-8"></script>
</source>

Это необходимо вписать в шаблон, выбранный '''Основным''' в админ-панели, например, '''inner.tpl'''

В шаблоне вывода корзины(например, '''tpls/emarket/default.tpl''') в блоке вывода элементов, находящихся в корзине(блок '''order_item''') в нужное вам место(например, в ячейку таблицы, вместо '''%amount%''') необходимо вставить поле для изменения:

<source lang="html4strict">
<input type="text" value="%amount%" onkeyup="
var e = jQuery(this).next('input'), old = e.val();
e.val(this.value);
frontEndBasket.modify(%id%, this.value, old);
window.setTimeout(function() { javascript:window.location.reload(); }, 1000);" />
</source>

Теперь, перейдя в корзину('''emarket/cart''') пользователь будет видеть поля для ввода необходимого кол-ва товаров.
При отсутствии необходимости перезагрузки страницы корзины, после изменения количества, необходимо удалить строку '''javascript:window.location.reload();'''

[[category:Вопросы и уроки разработки сайтов на UMI.CMS]]

Участник:Romario

2012-02-17T07:31:44Z

Romario:

Как запретить гостям оформлять заказы (TPL)

2012-02-17T07:30:42Z

Romario:

Задача: Сделать невозможным оформить заказ незарегистрированным пользователям, но при этом оставить все другие возможности интернет магазина.
Гость может смотреть каталог, добавлять товары в корзину, но не может оформить заказ, пока не пройдет авторизацию

Решение: В TPL шаблонезаторе данная задача решается не очевидным на первый взгляд способом.

Мы будем строить описанную в задаче логику на основе макроса %users auth()%. Данный макрос выводит форму авторизации для пользователя либо информацию об авторизованном пользователе. Для наших целей, мы создадим еще один шаблон для данного макроса. Шаблоны для макроса хранятся в папке ~\tpls\users\. Для примера назовем этот шаблон basket.tpl.

Суть данного шаблона заключается в том, что он будет отвечать за внешний вид кнопки "Оформить заказ". Если пользователь авторизован, он будет выводить кнопку, для оформления заказа, если же пользователь - гость, то в шаблоне можно написать информационное сообщение или дать ссылку на страницу авторизации.

Для примера наш шаблон будет выглядеть следующим образом:
<source lang="php">
<?php
$FORMS = Array();

$FORMS['login'] = <<<END

<input type="submit" value="ДЛЯ ОФОРМЛЕНИЯ ЗАКАЗА ТРЕБУЕТСЯ АВТОРИЗОВАТЬСЯ" />

END;

$FORMS['logged'] = <<<END
<form action="%pre_lang%/emarket/purchase/">
<input type="submit" value="Оформить заказ" />
</form>
END;
?>
</source>
Теперь нам нужно вставить вызов данного шаблона вместо кнопки оформить заказ в шаблоне карзины.
Для этого перейдем в шаблон корзины в файле ~\tpls\emarket\default.tpl, и заменим:
<source lang="php">
<form action="%pre_lang%/emarket/purchase/">
<input type="submit" value="Оформить заказ" />
</form>
</source>
на вызов нашего шаблона
<source lang="php">
%users auth('basket')%
</source>
Теперь блок $FORMS['order_block'] = <<<END должен выглядеть следующим образом:
<source lang="php">
$FORMS['order_block'] = <<<END
<h3>Информация о покупателе</h3>
<p>%emarket getCustomerInfo()%</p>
<h3>Список покупок</h3>

<table width="100%" rules="rows" cellspacing="0" cellpadding="0" border="0" id="order_block">
<thead>
<tr class="orow_hat">
<th>#</th>
<th>Наименования</th>
<th>Опции</th>
<th>Q</th>
<th>Цена</th>
<th>Сумма</th>
<th>Скидки</th>
<th> </th>
</tr>
</thead>
<tbody>
%items%
</tbody>
</table>
<div class="basket_remove_all">
<a href="/emarket/basket/remove_all/">Очистить корзину</a>
</div>
<h3>Скидка на заказ</h3>
%emarket discountInfo(%discount_id%)%

<h3>Доставка</h3>
%delivery-price%

<h3>Сумма</h3>
%total-price%
<p>Товаров в корзине: %total-amount%</p>

%users auth('basket')%

END;
</source>
После этих действий все незарегистрированные пользователи уже не смогут оформлять заказы, но при этом смогут просматривать каталоги и пользоваться корзиной.

[[Категория:Модуль Интернет магазин]]

Как запретить гостям оформлять заказы (TPL)

2012-02-17T07:25:41Z

Romario:

Как запретить гостям оформлять заказы (TPL)

2012-02-17T07:25:06Z

Romario:

Задача: Сделать невозможным оформить заказ незарегистрированным пользователям, но при этом оставить все другие возможности интернет магазина.
Гость может смотреть каталог, добавлять товары в корзину, но не может оформить заказ, пока не пройдет авторизацию

Решение: В TPL шаблонезаторе данная задача решается не очевидным на первый взгляд способом.

Мы будем строить описанную в задаче логику на основе макроса %users auth()%. Данный макрос выводит форму авторизации для пользователя либо информацию об авторизованном пользователе. Для наших целей, мы создадим еще один шаблон для данного макроса. Шаблоны для макроса хранятся в папке ~\tpls\users\. Для примера назовем этот шаблон basket.tpl.

Суть данного шаблона заключается в том, что он будет отвечать за внешний вид кнопки "Оформить заказ". Если пользователь авторизован, он будет выводить кнопку, для оформления заказа, если же пользователь - гость, то в шаблоне можно написать информационное сообщение или дать ссылку на страницу авторизации.

Для примера наш шаблон будет выглядеть следующим образом:
<source lang="php">
<?php
$FORMS = Array();

$FORMS['login'] = <<<END

<input type="submit" value="ДЛЯ ОФОРМЛЕНИЯ ЗАКАЗА ТРЕБУЕТСЯ АВТОРИЗОВАТЬСЯ" />

END;

$FORMS['logged'] = <<<END
<form action="%pre_lang%/emarket/purchase/">
<input type="submit" value="Оформить заказ" />
</form>
END;
?>
</source>
Теперь нам нужно вставить вызов данного шаблона вместо кнопки оформить заказ в шаблоне карзины.
Для этого перейдем в шаблон корзины в файле ~\tpls\emarket\default.tpl, и заменим:
<source lang="php">
<form action="%pre_lang%/emarket/purchase/">
<input type="submit" value="Оформить заказ" />
</form>
</source>
на вызов нашего шаблона
<source lang="php">
%users auth('basket')%
</source>
Теперь блок $FORMS['order_block'] = <<<END должен выглядеть следующим образом:
<source lang="php">
$FORMS['order_block'] = <<<END
<h3>Информация о покупателе</h3>
<p>%emarket getCustomerInfo()%</p>
<h3>Список покупок</h3>

<table width="100%" rules="rows" cellspacing="0" cellpadding="0" border="0" id="order_block">
<thead>
<tr class="orow_hat">
<th>#</th>
<th>Наименования</th>
<th>Опции</th>
<th>Q</th>
<th>Цена</th>
<th>Сумма</th>
<th>Скидки</th>
<th> </th>
</tr>
</thead>
<tbody>
%items%
</tbody>
</table>
<div class="basket_remove_all">
<a href="/emarket/basket/remove_all/">Очистить корзину</a>
</div>
<h3>Скидка на заказ</h3>
%emarket discountInfo(%discount_id%)%

<h3>Доставка</h3>
%delivery-price%

<h3>Сумма</h3>
%total-price%
<p>Товаров в корзине: %total-amount%</p>

%users auth('basket')%



END;
</source>
После этих действий все незарегистрированные пользователи уже не смогут оформлять заказы, но при этом смогут просматривать каталоги и пользоваться корзиной.

Как запретить гостям оформлять заказы (TPL)

2012-02-17T07:23:10Z

Задача: Сделать невозможным оформить заказ незарегистрированным пользователям, но при этом оставить все другие возможности интернет магазина.
Гость может смотреть каталог, добавлять товары в корзину, но не может оформить заказ, пока не пройдет авторизацию

Решение: В TPL шаблонезаторе данная задача решается не очевидным на первый взгляд способом.

Мы будем строить описанную в задаче логику на основе макроса %users auth()%. Данный макрос выводит форму авторизации для пользователя либо информацию об авторизованном пользователе. Для наших целей, мы создадим еще один шаблон для данного макроса. Шаблоны для макроса хранятся в папке ~\tpls\users\. Для примера назовем этот шаблон basket.tpl.

Суть данного шаблона заключается в том, что он будет отвечать за внешний вид кнопки "Оформить заказ". Если пользователь авторизован, он будет выводить кнопку, для оформления заказа, если же пользователь - гость, то в шаблоне можно написать информационное сообщение или дать ссылку на страницу авторизации.

Для примера наш шаблон будет выглядеть следующим образом:

<?php
$FORMS = Array();

$FORMS['login'] = <<<END

<input type="submit" value="ДЛЯ ОФОРМЛЕНИЯ ЗАКАЗА ТРЕБУЕТСЯ АВТОРИЗОВАТЬСЯ" />

END;

$FORMS['logged'] = <<<END
<form action="%pre_lang%/emarket/purchase/">
<input type="submit" value="Оформить заказ" />
</form>
END;
?>

Теперь нам нужно вставить вызов данного шаблона вместо кнопки оформить заказ в шаблоне карзины.
Для этого перейдем в шаблон корзины в файле ~\tpls\emarket\default.tpl, и заменим:

<form action="%pre_lang%/emarket/purchase/">
<input type="submit" value="Оформить заказ" />
</form>

на вызов нашего шаблона

%users auth('basket')%

Теперь блок $FORMS['order_block'] = <<<END должен выглядеть следующим образом:

$FORMS['order_block'] = <<<END
<h3>Информация о покупателе</h3>
<p>%emarket getCustomerInfo()%</p>
<h3>Список покупок</h3>

<table width="100%" rules="rows" cellspacing="0" cellpadding="0" border="0" id="order_block">
<thead>
<tr class="orow_hat">
<th>#</th>
<th>Наименования</th>
<th>Опции</th>
<th>Q</th>
<th>Цена</th>
<th>Сумма</th>
<th>Скидки</th>
<th> </th>
</tr>
</thead>
<tbody>
%items%
</tbody>
</table>
<div class="basket_remove_all">
<a href="/emarket/basket/remove_all/">Очистить корзину</a>
</div>
<h3>Скидка на заказ</h3>
%emarket discountInfo(%discount_id%)%

<h3>Доставка</h3>
%delivery-price%

<h3>Сумма</h3>
%total-price%
<p>Товаров в корзине: %total-amount%</p>

%users auth('basket')%



END;

После этих действий все незарегистрированные пользователи уже не смогут оформлять заказы, но при этом смогут просматривать каталоги и пользоваться корзиной.

Изменение числа объектов каталога в строке Demodizzy

2012-01-31T19:01:15Z

Romario: переименовал «Изменение числа объектов каталога в строке сайт demodizi (шаблон современный)» в «[[Изменение числа объектов каталога в строке

В данной статье мы видоизменим внешний вид каталога товаров веб сайта demodizi

[[Файл:catalog1.jpg]]

Цель: Выводить в ряд вместо 3 товаров - 4.

Решение: На сайте demodizi, перенос на следующую строку осуществляется с помощью функции position() с функцией mod(). Mod() - выдает значение равное остатку от деления. Таким образом, чтобы выводить 4 элемента на строку нам нужно делать перенос после каждого 4 элемента. То есть делать перенос поле каждого деления без остатка.

Условие для четного элемента:
<source lang="xml">
<xsl:if test="position() mod 4 = 0">
...
</xsl:if>
</source>
Изменим данную функцию нужно в файле ~\xsltTpls\modules\catalog\common.xsl
Строка 69 (по умолчанию)

Далее нам надо переделать css стиль под новые условия. Для этого в файле V:\home\umi285.my\www\css\design\modules.css изменим в блоке

#main #page div.center div.content div.catalog div.object, параметр width: на 25%;

Теперь нужно уменьшить размер картинок товаров, так как они стали выходить за рамки.
Это можно сделать в файле ~\xsltTpls\modules\catalog\common.xsl, строки 40, 41.
Поставим значения:
<source lang="xml">
<xsl:with-param name="width">114</xsl:with-param>
<xsl:with-param name="height">120</xsl:with-param>
</source>
Таким образом, мы получили 4 объекта каталога в одном ряду. Подобными манипуляциями можно добиться любого количества объектов в зависимости от запланированного дизайна.

Изменение числа объектов каталога в строке сайт demodizi (шаблон современный)

2012-01-31T19:01:15Z

#перенаправление [[Изменение числа объектов каталога в строке сайт Demo-dizzy (шаблон современный)]]

Участник:Romario

2012-01-31T19:00:03Z

Romario: /* Январь: */

Участник:Romario

2012-01-30T09:57:07Z

Romario:

Изменение числа объектов каталога в строке Demodizzy

2012-01-30T09:54:21Z

Romario:

Файл:Catalog1.jpg

2012-01-30T09:53:55Z

Romario: для статьи Изменение числа объектов каталога

для статьи Изменение числа объектов каталога

Изменение числа объектов каталога в строке Demodizzy

2012-01-30T09:51:11Z

Romario:

В данной статье мы видоизменим внешний вид каталога товаров веб сайта demodizi

[[Файл:Example.jpg]]

Цель: Выводить в ряд вместо 3 товаров - 4.

Решение: На сайте demodizi, перенос на следующую строку осуществляется с помощью функции position() с функцией mod(). Mod() - выдает значение равное остатку от деления. Таким образом, чтобы выводить 4 элемента на строку нам нужно делать перенос после каждого 4 элемента. То есть делать перенос поле каждого деления без остатка.

Условие для четного элемента:
<source lang="xml">
<xsl:if test="position() mod 4 = 0">
...
</xsl:if>
</source>
Изменим данную функцию нужно в файле ~\xsltTpls\modules\catalog\common.xsl
Строка 69 (по умолчанию)

Далее нам надо переделать css стиль под новые условия. Для этого в файле V:\home\umi285.my\www\css\design\modules.css изменим в блоке

#main #page div.center div.content div.catalog div.object, параметр width: на 25%;

Теперь нужно уменьшить размер картинок товаров, так как они стали выходить за рамки.
Это можно сделать в файле ~\xsltTpls\modules\catalog\common.xsl, строки 40, 41.
Поставим значения:
<source lang="xml">
<xsl:with-param name="width">114</xsl:with-param>
<xsl:with-param name="height">120</xsl:with-param>
</source>
Таким образом, мы получили 4 объекта каталога в одном ряду. Подобными манипуляциями можно добиться любого количества объектов в зависимости от запланированного дизайна.

Изменение числа объектов каталога в строке Demodizzy

2012-01-30T09:49:14Z

Romario: Новая страница: «В данной статье мы видоизменим внешний вид каталога товаров веб сайта demodizi Цель: Выводить…»

В данной статье мы видоизменим внешний вид каталога товаров веб сайта demodizi

Цель: Выводить в ряд вместо 3 товаров - 4.

Решение: На сайте demodizi, перенос на следующую строку осуществляется с помощью функции position() с функцией mod(). Mod() - выдает значение равное остатку от деления. Таким образом, чтобы выводить 4 элемента на строку нам нужно делать перенос после каждого 4 элемента. То есть делать перенос поле каждого деления без остатка.

Условие для четного элемента:
<source lang="xml">
<xsl:if test="position() mod 4 = 0">
...
</xsl:if>
</source>
Изменим данную функцию нужно в файле ~\xsltTpls\modules\catalog\common.xsl
Строка 69 (по умолчанию)

Далее нам надо переделать css стиль под новые условия. Для этого в файле V:\home\umi285.my\www\css\design\modules.css изменим в блоке

#main #page div.center div.content div.catalog div.object, параметр width: на 25%;

Теперь нужно уменьшить размер картинок товаров, так как они стали выходить за рамки.
Это можно сделать в файле ~\xsltTpls\modules\catalog\common.xsl, строки 40, 41.
Поставим значения:
<source lang="xml">
<xsl:with-param name="width">114</xsl:with-param>
<xsl:with-param name="height">120</xsl:with-param>
</source>
Таким образом, мы получили 4 объекта каталога в одном ряду. Подобными манипуляциями можно добиться любого количества объектов в зависимости от запланированного дизайна.

Динамическое меню каталога товаров в Demodizzy

2011-12-29T09:12:37Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для javascript:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
</source>

Некоторое пояснение к тому что именно мы добавили. Вызов отвечающий за вывод подменю мы окружили тегом
<source lang="php">
<div class="cat2" style="display: none; height:1">
</source>
Параметр style="~" отвечает за настройки стиля

display: none настройка стиля, согласно которой объект не отображается на странице

height:1 настройка стиля, согласно которой высота объекта = 1

Тег отвечающий за вызов названий разделов имеет следующий вид
<source lang="php">
<span onMouseOver="open_menu(this)" >
</source>
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]
elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=

Динамическое меню каталога товаров в Demodizzy

2011-12-29T09:12:25Z

Romario:

Динамическое меню каталога товаров в Demodizzy

2011-12-29T09:11:38Z

Romario:

Участник:Romario

2011-12-29T09:09:17Z

Romario: /* Октябрь: */

Динамическое меню каталога товаров в Demodizzy

2011-12-29T08:06:51Z

Romario:

Динамическое меню каталога товаров в Demodizzy

2011-12-29T08:03:38Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для javascript:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
</source>

Некоторое пояснение к тому что именно мы добавили. Вызов отвечающий за вывод подменю мы окружили тегом
<source lang="php">
<div class="cat2" style="display: none; height:1">
</source>
Параметр style="~" отвечает за настройки стиля

display: none настройка стиля, согласно которой объект не отображается на странице

height:1 настройка стиля, согласно которой высота объекта = 1

Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T08:01:57Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для javascript:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
</source>

Некоторое пояснение к тому что именно мы добавили. Вызов отвечающий за вывод подменю мы окружили тегом
<source lang="php">
<div class="cat2" style="display: none; height:1">
</source>
Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T08:01:44Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для javascript:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
</source>

Некоторое пояснение к тому что именно мы добавили. Вызов отвечающий за вывод подменю мы окружили тегом

<source lang="php">
<div class="cat2" style="display: none; height:1">
</source>
Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T08:01:01Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для javascript:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
</source>

Некоторое пояснение к тому что именно мы добавили. Вызов отвечающий за вывод подменю мы окружили тегом
<source lang="html">
<div class="cat2" style="display: none; height:1">
</source>
Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T07:54:27Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для javascript:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
</source>

Некоторое пояснение к тому что именно мы добавили. Вызов отвечающий за вывод подменю мы окружили тегом
<source lang="html">
<div class="cat2" style="display: none; height:1">
<source lang="xml">
Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T07:53:31Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для javascript:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
</source>

Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T07:53:00Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для javascript:

Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T07:52:41Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
</source>

Некоторое пояснение к тому что именно мы добавили:
Вызов отвечающий за вывод подменю мы окружили тегом <div class="cat2" style="display: none; height:1">

Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T07:52:14Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для яваскрипта:

Некоторое пояснение к тому что именно мы добавили:
Вызов отвечающий за вывод подменю мы окружили тегом <div class="cat2" style="display: none; height:1">

Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T07:52:01Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для яваскрипта:
<source lang="xml">

</source>
Некоторое пояснение к тому что именно мы добавили:
Вызов отвечающий за вывод подменю мы окружили тегом <div class="cat2" style="display: none; height:1">

Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T07:51:32Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для яваскрипта:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
</source>
Некоторое пояснение к тому что именно мы добавили:
Вызов отвечающий за вывод подменю мы окружили тегом <div class="cat2" style="display: none; height:1">

Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T07:51:02Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T07:50:29Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для яваскрипта:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
</source>
Некоторое пояснение к тому что именно мы добавили:
Вызов отвечающий за вывод подменю мы окружили тегом <div class="cat2" style="display: none; height:1">

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T07:49:56Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для яваскрипта:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
</source>
Некоторое пояснение к тому что именно мы добавили:
Вызов отвечающий за вывод подменю мы окружили тегом <div class="cat2" style="display: none; height:1">

Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Динамическое меню каталога товаров в Demodizzy

2011-12-29T07:48:29Z

Romario:

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>

Добавим дополнительные теги, для яваскрипта:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
</source>
Некоторое пояснение к тому что именно мы добавили:
Вызов отвечающий за вывод подменю мы окружили тегом <div class="cat2" style="display: none; height:1">
Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
ДЛя этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>

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

[[Категория:Верстка в XSLT]]

Участник:Romario

2011-12-29T07:46:36Z

Romario:

== Октябрь: ==

<ul>
<li>[[Поиск последнего заказа, который оформил покупатель.]]</li>
<li>[[Работа с корзиной без перезагрузки]]</li>
<li>[[Динамическое меню каталога товаров в demodizi]]</li>
<li>[[Размещение фотографии любого размера ]]</li>
<li>[[Подключение скрипта для записи значения формы в куки]]</li>
<li>[[Вывод страницы контента, вместо страницы "Лучшие предложения" на главной странице сайта с шаблоном "современный"]]</li>
</ul>

Динамическое меню каталога товаров в Demodizzy

2011-12-29T07:46:24Z

Romario: переименовал «Динамическое меню в demodizi» в «Динамическое меню каталога товаров в demodizi»

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

[[Файл:Example.jpg]]

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:
<source lang="xml">
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
</source>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<source lang="xml">
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
</source>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl

Изначально, интересующий нас блок выглядит следующим образом:

<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
</source>
Добавим дополнительные теги, для яваскрипта:
<source lang="xml">
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
</source>
Некоторое пояснение к тому что именно мы добавили:
Вызов отвечающий за вывод подменю мы окружили тегом <div class="cat2" style="display: none; height:1">
Параметр style="" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
ДЛя этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:

<source lang="javascript">
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)

// функция которая вызывается при наведении мыши
function open_menu(elems){

//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}

function action_menu(elems){

if ( elems_old != 0 ){

//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анемированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""

elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)

}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
</source>
Все. Теперь на вашем сайте должно получится красивое анемированное меню каталога. Для того чтобы сделать его более удобным, также, следует увеличить размер пунктов меню в таблице CSS стилей.

[[Категория:Верстка в XSLT]]

Динамическое меню в demodizi

2011-12-29T07:46:24Z

Romario: переименовал «Динамическое меню в demodizi» в «Динамическое меню каталога товаров в demodizi»

#перенаправление [[Динамическое меню каталога товаров в demodizi]]

Участник:Romario

2011-12-29T07:45:22Z

Romario:

== Октябрь: ==

<ul>
<li>[[Поиск последнего заказа, который оформил покупатель.]]</li>
<li>[[Работа с корзиной без перезагрузки]]</li>
<li>[[Динамическое меню в demodizi]]</li>
<li>[[Размещение фотографии любого размера ]]</li>
<li>[[Подключение скрипта для записи значения формы в куки]]</li>
<li>[[Вывод страницы контента, вместо страницы "Лучшие предложения" на главной странице сайта с шаблоном "современный"]]</li>
</ul>

Вывод страницы контента вместо страницы "Лучшие предложения" на главной странице сайта с шаблоном "современный"

2011-12-29T07:44:40Z

Romario:

Задача: На сайте с шаблоном "Современный" (demodizi) на главной странице нужно сделать вывод страницы контента вместо страницы "Лучшие предложения"

В XSLT шаблонизаторе для страницы могут быть написано несколько шаблонов. Логика по которой примерится тот или иной шаблон такова:

- Подключится тот шаблон у которого больше условий.
- Если условий одинаковое количество - подключится тот шаблон, который в последовательности кода будет последним
- если в шаблоне указан параметр priority="*" - выполнится тот шаблон у которого имеется данный параметр, либо у которого выше значение данного параметра относительно другого.

На примере нашего демо сайта:
Обычная страница контента подключаются в шаблоне в файле ~\xsltTpls\modules\content\common.xsl в строке:

<source lang="xml">
<xsl:template match="result[@module = 'content']" priority="1">
<div umi:element-id="{$document-page-id}" umi:field-name="content" umi:empty="&empty-page-content;">
<xsl:value-of select=".//property[@name = 'content']/value" disable-output-escaping="yes" />
</div>
</xsl:template>
</source>

То есть, если modul = сnontent - подключаем шаблон описанный внутри тега.

Главная же страница подхватывается шаблоном в ~\xsltTpls\modules\catalog\special-offers.xsl, так как в нем кроме условия стоит параметр priority="1"

Вот код шаблона:
<source lang="xml">
<xsl:template match="result[page/@is-default = '1']" >
<xsl:apply-templates select="document('usel://special-offers/?limit=&specials-limit;')" mode="special-offers" />
</xsl:template>
</source>

То есть, шаблон подключается если в полученном коде страницы будет параметр is-default = '1'

is-default = '1' - говорит о том что страница является главной (в модуле структура указанно xто путь к ней следующий "/")

Внутри уже тег расположен вызов USEL выборки, которая и выбирает товары из каталога.

Если нам нужно чтобы вместо товаров выводился обычный контент - нужно поставьте у первого шаблона параметр priority="2".

[[Категория:Верстка в XSLT]]

Вывод страницы контента вместо страницы "Лучшие предложения" на главной странице сайта с шаблоном "современный"

2011-12-29T07:44:16Z

Romario: Новая страница: «Задача: На сайте с шаблоном "Современный" (demodizi) на главной странице нужно сделать вывод ст…»