Сетка категорий

Добрый день, коллеги! 

На главной странице сайта выводится блок "популярные товары" у данного блока везде одинаковый class="l-categories-compact__item. Как сделать разные значения? К примеру:

<div class="l-categories-compact__item grid_a">...</div>
<div class="l-categories-compact__item grid_b">...</div>
<div class="l-categories-compact__item grid_c">...</div>
<div class="l-categories-compact__item grid_d">...</div>

Подскажите, пожалуйста!


За вывод данного блока отвечает код:

				<div class="l-categories-compact__item {if $is_hidden}l-categories-compact__item_hidden{/if}">
					{if $show_count}
						{if $show_real_count}
							{$products_count = $category.count}
						{else}
							{$products_count = "{call products_count category=$category}"}
						{/if}

					{/if}

					{$category_image_url = "{call shop_category_image category=$category size=60}"}

					{$is_dummy_image = empty($category_image_url)}

					<div class="c-category-compact">
						{if $show_logo}
							<span class="c-category-compact__image-box">
								<span class="l-image-box l-image-box_contain">
									<a class="c-category-compact__link c-category-compact__link_image" href="{$category.url}">
									{if $category.params.logo}
										<img src="/cat_img/{$category.params.logo}">
									{/if}
										<!--{if !$is_dummy_image}
	                                        {call include_block block='lazy-image' args=[
		                                        'src' => $category_image_url,
		                                        'classes' => 'c-category-compact__image',
		                                        'alt' => $category.name,
												'use_lazy_images' => true
	                                        ]}
										{else}
											{call include_block block='svg-icon' classes='c-category-compact__image c-category-compact__image_dummy' icon='no-thumb' width=60 height=54 fill='#E0E0E0'}
										{/if}-->
									</a>
								</span>
							</span>
						{/if}
						<span class="c-category-compact__content">
							<a class="c-category-compact__link" href="{$category.url}"><span class="c-category-compact__name">{$category.name}</span></a>
							{if $show_count}
								<span class="c-category-compact__products-count">{$products_count}</span>
							{/if}
						</span>
					</div>
				</div>

2 ответа

  • 1
    Алексей Webasyst 1 октября 2020 18:36 #

    Посмотрите код выше, там вероятно должен быть {foreach}

  • 1
    Николай Иванов 2 октября 2020 07:30 #

    Ну если в качестве a,b,c... использовать id категорий, то:
    <div class="l-categories-compact__item_cat{$category.id} {if $is_hidden}l-categories-compact__item_hidden{/if}">

    Как-то так, например. Но это будет уже другой класс и вам надо будет стилизовать каждый отдельно. Лучше  так:
    <div class="l-categories-compact__item cat{$category.id} {if $is_hidden}l-categories-compact__item_hidden{/if}">

    и использовать конкатенацию классов
    .l-categories-compact__item.cat12345 {font-weight: bold;}

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите