Автор Тема: Высота карточек товаров  (Прочитано 386 раз)

07 Март 2015, 22:27:15
  • Новичок
  • *
  • Сообщений: 10
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Добрый день (вечер, ночь, утро)!

Подскажите пожалуйста, как сделать одинаковую высоту карточек товаров.

Преста 1.6
08 Март 2015, 10:30:53
Ответ #1
  • Партнер
  • Ветеран
  • ****
  • Сообщений: 22263
  • Репутация: +17113/-1
  • Разработка веб-сайтов и веб-программирование
    • Просмотр профиля
В файле стилей product_list.css в папке вашей темы добавьте высоту для
ul.product_list.grid > li {
    height:высота в px
Интернет-магазин под ключ.
Какой выбрать движок для интернет магазина ?
Какой движок лучше ?
Magento или Prestashop ?
Решение всех Ваших вопросов в создании Интернет-магазина.
09 Март 2015, 02:36:31
Ответ #2
  • Новичок
  • *
  • Сообщений: 10
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Попробовал, не получается.

Когда описание товара длинное оно отображается в две строчки (высота ячейки 42px) если короткое то одна строчка (высота ячейки 19px).

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

Вот часть моего product_list.css

ul.product_list.grid > li {
  padding-bottom: 20px; }
  @media (min-width: 480px) and (max-width: 767px) {
    ul.product_list.grid > li {
      width: 50%;
      float: left; } }
  ul.product_list.grid > li .product-container {
    border-radius: 4px;
    background: white;
    border: 1px solid #cccbcb;
    padding: 18px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease; }
    ul.product_list.grid > li .product-container img {
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      -ms-transition: all 0.3s linear;
      transition: all 0.3s linear; }
    ul.product_list.grid > li .product-container:hover {
      -moz-box-shadow: rgba(0, 0, 0, 0.9) 0 0 7px;
      -webkit-box-shadow: rgba(0, 0, 0, 0.9) 0 0 7px;
      box-shadow: rgba(0, 0, 0, 0.9) 0 0 7px; }
      ul.product_list.grid > li .product-container:hover img {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1); }
      ul.product_list.grid > li .product-container:hover h5 a {
        color: #70ba16; }
      ul.product_list.grid > li .product-container:hover .btn.ajax_add_to_cart_button,
      ul.product_list.grid > li .product-container:hover .btn.ajax_add_to_cart_product_button {
        background: #6eb518;
        color: #fff;
        border-color: #6eb518; }
      ul.product_list.grid > li .product-container:hover .lnk_view:hover {
        color: #e50606; }
    ul.product_list.grid > li .product-container .product-image-container {
      position: relative;
      margin-bottom: 13px; }
      @media (max-width: 767px) {
        ul.product_list.grid > li .product-container .product-image-container {
          max-width: 290px;
          margin-left: auto;
          margin-right: auto; } }
      ul.product_list.grid > li .product-container .product-image-container .product_img_link {
        overflow: hidden;
        display: block;
        position: relative; }
    ul.product_list.grid > li .product-container h5 {
      padding: 0; }
      ul.product_list.grid > li .product-container h5 a span.list-name {
        display: none; }
    ul.product_list.grid > li .product-container .comments_note {
      text-align: center; }
      ul.product_list.grid > li .product-container .comments_note .star_content {
        display: inline-block;
        margin: 0 0 0 0; }
    ul.product_list.grid > li .product-container .product-desc span.list-desc {
      display: none; }
    ul.product_list.grid > li .product-container .content_price {
      padding-bottom: 9px;
      line-height: 21px; }
    ul.product_list.grid > li .product-container .old-price,
    ul.product_list.grid > li .product-container .price,
    ul.product_list.grid > li .product-container .price-percent-reduction {
      display: inline-block; }
    ul.product_list.grid > li .product-container .product-flags {
      display: none; }
    ul.product_list.grid > li .product-container .old-price {
      margin-right: 5px; }
    ul.product_list.grid > li .product-container .button-container {
      margin-bottom: 0; }
      ul.product_list.grid > li .product-container .button-container .ajax_add_to_cart_button,
      ul.product_list.grid > li .product-container .button-container span.btn,
      ul.product_list.grid > li .product-container .button-container .lnk_view {
        margin: 0 6px 10px 0; }
    ul.product_list.grid > li .product-container .right-block {
      padding-left: 0px;
      padding-right: 0px; }
    ul.product_list.grid > li .product-container .functional-buttons {
      padding: 11px 0 5px;
      margin-bottom: 7px; }
      ul.product_list.grid > li .product-container .functional-buttons div {
        padding: 3px 0 4px 0; }
  @media (min-width: 1200px) {
    ul.product_list.grid > li.hovered .product-container .product-image-container .quick-view {
      display: block; } }
  @media (min-width: 992px) {
    ul.product_list.grid > li.first-in-line {
      clear: left; } }
  @media (min-width: 480px) and (max-width: 991px) {
    ul.product_list.grid > li.first-item-of-tablet-line {
      clear: left; } }
   
09 Март 2015, 10:10:06
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 13832
  • Репутация: +14564/-2
  • Сообщество PrestaShop
    • Просмотр профиля
Цитировать
Возможно ли сделать так что при коротком названии добавлялся пробел или сделать фиксированную высоту ячейки.
Можно, установите высоту для блока с описанием
ul.product_list.grid > li .grid-name{height: 60px или 70px ... }
09 Март 2015, 12:03:04
Ответ #4
  • Новичок
  • *
  • Сообщений: 10
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Если делаю так описание просто задваивается
ul.product_list.grid > li .product-container h5 a span.list-name {
        height: 60px }
Если так ничего не меняется
ul.product_list.grid > li .product-container h5 a span.list-name {
        display: none;
        height: 60px;}
Если добавляю стиль тоже ничего не меняется
ul.product_list.grid > li .grid-name {
    height: 60px; }
09 Март 2015, 12:43:09
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 13832
  • Репутация: +14564/-2
  • Сообщество PrestaShop
    • Просмотр профиля
Задайте высоту каждому блоку в контейнере, начиная с
ul.product_list.grid > li .product-container{обшая высота}Пробуйте менять высоту прямо в браузере.
09 Март 2015, 14:24:56
Ответ #6
  • Новичок
  • *
  • Сообщений: 10
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо!
ul.product_list.grid > li .product-container h5 {
      padding: 0;
      height: 42px; }