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

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

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

Преста 1.6
08 Марта 2015, 10:30:53
Ответ #1
  • Партнер
  • Ветеран
  • ****
  • Сообщений: 22126
  • Репутация: +17110/-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
  • Ветеран
  • *****
  • Сообщений: 13284
  • Репутация: +14557/-0
  • Сообщество 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
  • Ветеран
  • *****
  • Сообщений: 13284
  • Репутация: +14557/-0
  • Сообщество 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; }