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


Количество Товаров В Табличном Представлении Категорий Каталога

Автор Sharlex, 30 янв. 2018 11:24
Каталог категории товаров

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

#1 Sharlex

Sharlex

    Продвинутый пользователь

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

Отправлено 30 Январь 2018 - 11:24

Добрый день!

SL-416251

1. После внесения по инструкциям последних изменений, в основном для главной страницы, некорректно отображается разметка для табличного представления товаров в каталоге категорий.

В строках появилось по 5 и 6 единиц товаров, в категориях каталога и в самом корневом каталоге.
Есть категории, в которых подобных скачков нет и в строках по 5 карточек товаров

1.png               2.png

Меня устраивает, что количество товаров в строке увеличилось, 5 товаров вместо 4-х очень хорошо,
а еще лучше сделать по 6 карточек товаров в строке, можно ли выровнять разметку, чтобы количество было одинаковым?

Причину сам пока не выявил.

2. Можно ли уменьшить в 2 раза расстояние между нижним краем карточки и наименованием товара?



3. Можно ли сделать чтобы название товара умещалось в 2 строки, если не умещается в одной?

Прикрепленные изображения

  • 3.png

Сообщение отредактировал Sharlex: 30 Январь 2018 - 11:31

#2 Sharlex

Sharlex

    Продвинутый пользователь

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

Отправлено 30 Январь 2018 - 15:13

up

#3 Sharlex

Sharlex

    Продвинутый пользователь

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

Отправлено 31 Январь 2018 - 09:19

up

#4 Sharlex

Sharlex

    Продвинутый пользователь

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

Отправлено 31 Январь 2018 - 11:59

up

#5 Sharlex

Sharlex

    Продвинутый пользователь

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

Отправлено 31 Январь 2018 - 17:06

up

#6 metry

metry

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

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

Отправлено 31 Январь 2018 - 17:15

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

.container .row{display:flex; flex-wrap: wrap;}

замените на:

.container .row{display:block;}

далее найдите:
.products-grid {display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;text-align: center;}
.products-grid .item {position: relative;padding: 10px 15px;}

замените на:

.products-grid {display: block;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;text-align: center;}
.products-grid .item {position: relative;padding: 10px 10px;display:inline-block;}

2. В main.css найдите:
.products-grid .item .item-inner {position: relative;margin-bottom: 35px;padding-bottom: 100px;widt : {SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px;}

замените на:
.products-grid .item .item-inner {position: relative;margin-bottom: 25px;padding-bottom: 70px;}

далее найдите:

.products-grid .item .product-image {position: relative;background: #fff;overflow: hidden;z-index: 0;padding: 0;border: 0;border-radius: 0;text-align: center;}

замените на:

.products-grid .item .product-image {position: relative;background: #fff;overflow: hidden;z-index: 0;padding: 0;border: 0;border-radius: 0;text-align: center;height:260px;}

далее найдите:

.products-grid .item .product-shop {position: absolute;background-color: #fff;padding: 15px 0 5px;transition: all 0.3s;left: 0;right: 0;bottom: 0;text-align: center;}

замените на:
.products-grid .item .product-shop {position: absolute;background-color: #fff;padding: 15px 0 5px;transition: all 0.3s;left: 0;right: 0;bottom: 0;text-align: center;height: 60px;}

далее найдите:
.products-grid .item .product-shop .product-name a {display: block;font-family: 'PT Sans Narrow';font-size: 19px;font-weight: 400;text-transform: capitalize;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

замените на:
.products-grid .item .product-shop .product-name a {display: block;font-family: 'PT Sans Narrow';font-size: 19px;font-weight: 400;text-transform: capitalize;text-overflow: ellipsis;height:45px;}


далее в конец кода main.css вставьте:

@media all and (max-width: 768px) {
.products-grid .item .product-shop {position: absolute;background-color: #fff;padding: 15px 0 5px;transition: all 0.3s;left: 0;right: 0;bottom: 0;text-align: center;height: 100px;}
.products-grid .item .item-inner {margin-bottom: 0;padding-bottom: 0;width: 230px;}
.products-grid .item .product-image {position: relative;background: #fff;overflow: hidden;z-index: 0;padding: 0;border: 0;border-radius: 0;text-align: center;height: 360px;}
}

#7 Sharlex

Sharlex

    Продвинутый пользователь

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

Отправлено 31 Январь 2018 - 20:13

Большое спасибо! Все отлично!

#8 Sharlex

Sharlex

    Продвинутый пользователь

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

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

Добрый день!

А можно ли сделать, чтобы категории каталога с картинками, располагались по 3 юнита в ряд? Как было до внесения изменений?

11.png

12.png

Или это повлияет на число карточек товара в строке?

#9 Sharlex

Sharlex

    Продвинутый пользователь

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

Отправлено 01 Февраль 2018 - 07:53

up

#10 Sharlex

Sharlex

    Продвинутый пользователь

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

Отправлено 01 Февраль 2018 - 11:32

up

#11 metry

metry

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

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

Отправлено 01 Февраль 2018 - 11:43

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->main.css и найдите:
.categories .item {display: inline-block;position: relative;margin: 0 15px 30px;border: 1px solid #e4e4e4;text-align: center;width: {SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM | divide("2")}px;}

замените на:
.categories .item {display: inline-block;position: relative;margin: 0 15px 30px;border: 1px solid #e4e4e4;text-align: center;}

#12 Sharlex

Sharlex

    Продвинутый пользователь

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

Отправлено 01 Февраль 2018 - 12:32

Просмотр сообщенияmetry (01 Февраль 2018 - 11:43) писал:

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->main.css и найдите:
.categories .item {display: inline-block;position: relative;margin: 0 15px 30px;border: 1px solid #e4e4e4;text-align: center;width: {SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM | divide("2")}px;}

замените на:
.categories .item {display: inline-block;position: relative;margin: 0 15px 30px;border: 1px solid #e4e4e4;text-align: center;}

Супер! Благодарю!
Обратно в Каталог товаров



Темы с аналогичным тегами Каталог, категории товаров

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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Туризм
  5. → Каталог товаров
  6. Privacy Policy