Перейти к содержанию
doctorfolk

Вид отображения товара в категориях

Рекомендуемые сообщения

Добрый день

сайт gaston.com.ua

1. как сделать, что бы отображалось в строчке не 3 а 4 товара.

2. как привязать отображение цены к определенному месту снизу, что бы не скакала.

3. как уменьшить размер самой карточки отображения товара.

4. как убрать краткое описание товара в карточке.

5. как задать конкретный шрифт, а не подтягивало параметр из css.

2017-09-21_20-27-18.thumb.png.650c983983f299aeb3c64ff3e28821b1.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

1. Bootstrap вместо product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12 -> product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12

2. Css .product-thumb .caption { position: relative; } .price { position: absolute; bottom: 0; }

3. Css .product-thumb .caption { min-height: 120px;}

4. ?

5. Только css

Изменено пользователем todaymars

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 часа назад, doctorfolk сказал:

1. как сделать, что бы отображалось в строчке не 3 а 4 товара.

2. как привязать отображение цены к определенному месту снизу, что бы не скакала.

3. как уменьшить размер самой карточки отображения товара.

4. как убрать краткое описание товара в карточке.

5. как задать конкретный шрифт, а не подтягивало параметр из css.

Главное правило:

Перед внесением изменений делать резервные копии файлов.

1.

\catalog\view\javascript\common.js

в этом куске кода вместо выделенный кусок кода

Спойлер

    // Product Grid
    $('#grid-view').click(function() {
        // What a shame bootstrap does not take into account dynamically loaded columns
        var cols = $('#column-right, #column-left').length;

        if (cols == 2) {
            $('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
        } else if (cols == 1) {
            $('#content .product-list').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
        } else {
            $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
        }

меняем на

Спойлер

    // Product Grid
    $('#grid-view').click(function() {
        // What a shame bootstrap does not take into account dynamically loaded columns
        var cols = $('#column-right, #column-left').length;

        if (cols == 2) {
            $('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
        } else if (cols == 1) {
            $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
        } else {
            $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
        }

 

2.

.product-layout.product-grid .price {

    position: absolute;

    bottom: 100px;

}

 

3.

.product-thumb .caption {

    min-height: 140px;

}

или другое число, по вкусу

 

4.

\catalog\view\theme\default\template\product\category.tpl

В куске кода удаляем или комментируем выделенный абзац

Спойлер

        <?php foreach ($products as $product) { ?>
        <div class="product-layout product-list col-xs-12">
          <div class="product-thumb">
            <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>
            <div>
              <div class="caption">
                <h4><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4>
                <p><?php echo $product['description']; ?></p>
                <?php if ($product['price']) { ?>

5.

Прописать свой конкретный шрифт в stylesheet.css

 

Вам бы чуток подучиться.

http://htmlbook.ru/

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.