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

[doctorfolk]

Добрый день

сайт gaston.com.ua

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

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

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

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

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

[todaymars]

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

Змінено 21 вересня 2017 користувачем todaymars

[jaffagold]

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/