Перейти к содержимому


Отображение Категорий Товаров Плиткой Вместо Карусели


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 3

#1 metry

metry

    Активный участник

  • Модераторы
  • 884 сообщений

Отправлено 31 Январь 2021 - 14:35

Для внесения изменений зайдите в Редактор шаблонов-->HTML и найдите:

<!-- Категории -->
<section id="catalog">
  <div class="container">
   <div class="block__title block__nav">
	<a href="{CATALOG_URL}" class="title">Категории товаров</a>
	<div class="owl-nav"></div>
   </div>
   <div class="catalog__items owl-carousel">
	{% FOR catalog_full %}
	 {% IF catalog_full.LEVEL = 0 %}
	 <div class="categories__item" data-id="{catalog_full.ID}">
	  <a href="{catalog_full.URL}" class="categories__image"><img src="{% IF catalog_full.IMAGE_MEDIUM %}{catalog_full.IMAGE_MEDIUM}{% ELSE %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=marketplace{% ENDIF %}" class="goods-image-medium"/></a>
	  <a href="{catalog_full.URL}" class="categories__name">{catalog_full.NAME}</a>
	 </div>
	 {% ENDIF %}
	{% ENDFOR %}
   </div>
  </div>
</section>

замените на:

<!-- Категории -->
<section id="catalog">
  <div class="container">
   <div class="block__title block__nav">
	<a href="{CATALOG_URL}" class="title">Категории товаров</a>
	<div class="owl-nav"></div>
   </div>
   <div class="catalog__items {% IF index_page %} index {%ENDIF%} ">
	{% FOR catalog_full %}
	 {% IF catalog_full.LEVEL = 0 %}
	 <div class="categories__item" data-id="{catalog_full.ID}">
	  <a href="{catalog_full.URL}" class="categories__image"><img src="{% IF catalog_full.IMAGE_MEDIUM %}{catalog_full.IMAGE_MEDIUM}{% ELSE %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=marketplace{% ENDIF %}" class="goods-image-medium"/></a>
	  <a href="{catalog_full.URL}" class="categories__name">{catalog_full.NAME}</a>
	 </div>
	 {% ENDIF %}
	{% ENDFOR %}
   </div>
  </div>
</section>


далее зайдите в Редактор шаблонов-->main.css и в самый конец кода вставьте:

.index .categories .categories__item {margin-bottom:20px;}
.toolbar + .categories {padding-top: 30px;}
.catalog__items.index {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-ms-flex-wrap: wrap;flex-wrap: wrap;text-align: center}
.catalog__items.index .categories__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;margin: 0 4px 30px;border: 1px solid #dce4e9;text-align: center;width: 200px;background: #fff}
.catalog__items.index .categories__item .categories__image {border-bottom: 0;margin: 0 10px 10px;line-height: 200px}
.catalog__items.index .categories__item a.categories__image {display: block;overflow: hidden;height: 195px;}
.catalog__items.index .categories__item a.categories__image img {max-width: 100%}
.catalog__items.index .categories__item .categories__name {display: -webkit-box;display: -ms-flexbox;display: flex;margin: 0;padding: 10px;background: 0 0;text-align: center;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;border-bottom: 1px solid #dce4e9}
.catalog__items.index .categories__item a.categories__name  {display: block;margin: auto;overflow: hidden;font-size: 16px;height:60px;}
.catalog__items.index .categories__item:hover a.categories__name  {color: #7e6cd6}


Результат: rezult.png

#2 Nigma

Nigma

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений

Отправлено 26 Февраль 2021 - 10:21

Добрый день!

Подскажите пожалуйста как можно сделать чтоб категории были в 2 столбика? У меня отображается вот так.

https://prnt.sc/107fkp1

#3 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 27 Февраль 2021 - 09:09

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
/*** Каталог ***/
#catalog {position: relative;}
#catalog .categories__item {width: 100%;margin: 0;}

замените на:
/*** Каталог ***/
#catalog {position: relative;}
#catalog .categories__item {width: 33%;margin: 0;}


#4 Nigma

Nigma

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений

Отправлено 27 Февраль 2021 - 11:14

Благодарю!




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных