Класс продукта в зависимости от тега

Товарищи, подскажите, как при выводе списка товаров назначить класс товару в зависимости от тега, который указан в его настройках?

Для наглядности приведу пример:
Предположим, я хочу менять цвет фона элемента в зависимости от тега.
Некоторые товары имеют тег «Зеленый», а другие «Красный», как добавить «green» и «red» соответствующим пунктам в чанке для msProducts, чтобы получилось, как в нижеуказанном коде?

<ul class="product-list">
    <li class="product-item green">Товар1</li>
    <li class="product-item red">Товар2</li>
</ul>
start.exe
start.exe
04 октября 2014, 10:59
modx.pro
1
1 128
0

Комментарии: 2

    start.exe
    start.exe
    17 октября 2014, 06:30
    0
    Копировал сниппет msOptions, назвал его products_class и добавил три строчки внизу:

    <?php
/* @var array $scriptProperties */
/* @var pdoFetch $pdoFetch */
if (!$modx->loadClass('pdofetch', MODX_CORE_PATH . 'components/pdotools/model/pdotools/', false, true)) {return false;}
$pdoFetch = new pdoFetch($modx, $scriptProperties);

if (empty($product) && !empty($input)) {$product = $input;}
if (empty($selected)) {$selected = '';}
if (empty($outputSeparator)) {$outputSeparator = "\n";}
if ((empty($name) || $name == 'id') && !empty($options)) {$name = $options;}

$output = '';
$product = !empty($product) ? $modx->getObject('msProduct', $product) : $product = $modx->resource;
if (!($product instanceof msProduct)) {
	$output = 'This resource is not instance of msProduct class.';
}
elseif (!empty($name) && $options = $product->get($name)) {
	if (!is_array($options) || $options[0] == '') {
		$output = !empty($tplEmpty)
			? $pdoFetch->getChunk($tplEmpty, $scriptProperties)
			: '';
	}
	else {
		$rows = array();
		foreach ($options as $value) {
			$pls = array(
				'value' => $value
				,'selected' => $value == $selected ? 'selected' : ''
			);
			$rows[] = empty($tplRow) ? $value : $pdoFetch->getChunk($tplRow, $pls);
		}

		$rows = implode($outputSeparator, $rows);
		$output = empty($tplOuter)
			? $pdoFetch->getChunk('', array('name' => $name, 'rows' => $rows))
			: $pdoFetch->getChunk($tplOuter, array_merge($scriptProperties, array('name' => $name, 'rows' => $rows)));
	}
}

if ($output=='Зеленый'){$output='green';}
if ($output=='Красный'){$output='red';}

$modx->setPlaceholder('products_class',$output);


    в своем чанке my.msProducts.row вызываю созданный сниппет и вывожу результаты в плейсхолдере:

    [[products_class?
 &name=`tags`
 &product=`[[+id]]`
 &tplRow=`@INLINE [[+value]]` &tplOuter=`@INLINE [[+rows]]`
 ]]

<li class="product-item [[+products_class]]">[[+pagetitle]]</li>


    в чанке со списком товаров делаю «вкладки», где указывается количество соответствующего товара, подсчитанное через jquery и вызываю сниппет msProducts, который выводит все товары:

    <ul id="tabs-anchor" class="item-tabs">
    <li class="tab-title1 active">Все элементы <sup>[[countProducts]]</sup></li>
    <li class="tab-title2">Красные<sup><span class="count-red"></sup></li>
    <li class="tab-title3">Зеленые<sup><span class="count-green"></sup></li>
</ul>

[[msProducts?
            &includeContent=`1` 
            &limit=`16`
            &maxLimit=`50`
            &tplWrapper=`my.msProducts.Wrapper`
            &tpl=`my.msProducts.row`
]]


    Подключаю скрипт, который организует работу «вкладок», по нажатию на которые показываются либо все товары, либо товары определенного цвета:

    $(document).ready(function() {
    
    $("ul.item-tabs li:first").addClass("active").show(); //Активировать первую вкладку
    $(".tab_content:first").show(); //Показать контент первой вкладки
 
    $("ul.item-tabs li").click(function() {
        $("ul.item-tabs li").removeClass("active"); //Удалить "active" класс
        $(this).addClass("active"); //Добавить "active" для выбранной вкладки
    });           
           
    $('.tab-title1').click(function() {
        $(".product-item").show(); 
    });    
    
    $('.tab-title2').click(function() {
        $(".product-item").hide(); 
        $(".red").show(); 
    });
    
    $('.tab-title3').click(function() {
        $(".product-item").hide(); 
        $(".green").show(); 
    });
});


    И скрипт, который считает количесто товаров в зависимости от тега (класса):

    $(document).ready(function() {

var red= $("li.red").size();
$("span.count-red").text(red);

var green= $("li.green").size();
$("span.count-green").text(green);

});

    Написано не особо лаконично, но вроде всё работает, может кому-то сгодится.
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      2