Как сделать вывод товаров всегда только сеткой?

[Adems]

Подскажите пожалуйста, как убрать кнопки (опцию) вывод сеткой и списком в категории, что всегда выводилось сеткой? (если их просто убрать то товары выводятся списком).

[jaffagold]

Скрытый текст

  <?php foreach ($products as $product) { ?>
        <div class="product-layout product-list col-xs-12">
          <div class="product-thumb">

в category.tpl вам указывает на вид "по-умолчанию"

а вам надо что-то типа: product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12

Кроме того, возможно, придется покопаться в common.js

 

[Adems]

16 часов назад, jaffagold сказал:

  Показать содержимое

  <?php foreach ($products as $product) { ?>
        <div class="product-layout product-list col-xs-12">
          <div class="product-thumb">

в category.tpl вам указывает на вид "по-умолчанию"

а вам надо что-то типа: product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12

Кроме того, возможно, придется покопаться в common.js

 

Придётся покопаться common.js это понятно, вопрос что править как удалить вообще этот вывод.

[jaffagold]

Вы в .tpl код меняли, куки чистили? И?

[Adems]

1 час назад, jaffagold сказал:

Вы в .tpl код меняли, куки чистили? И?

Да я пошел кривым путём, удалил код кнопок и просто поставил <span id="grid-view"></span> без id="grid-view" выводится списком, а надо сеткой. Другого варианта нет.

Как убить это не знаю, пробовал в common.js покопаться не дало результатов. Может знаете где убрать скрипт? Чтоб всегда было сеткой.

[jaffagold]

Смотрите, обе кнопки неактивные, ни на что не влияют. Чтобы они влияли нужен клик по ним.

Скрытый текст

          <div class="btn-group btn-group-sm">
            <button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_list; ?>"><i class="fa fa-th-list"></i></button>
            <button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_grid; ?>"><i class="fa fa-th"></i></button>
          </div>

Далее с 73 строки идет вывод товаров

Скрытый текст

      <div class="row">
        <?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']) { ?>
                <p class="price">
                  <?php if (!$product['special']) { ?>
                  <?php echo $product['price']; ?>
                  <?php } else { ?>
                  <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
                  <?php } ?>
                  <?php if ($product['tax']) { ?>
                  <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
                  <?php } ?>
                </p>
                <?php } ?>
                <?php if ($product['rating']) { ?>
                <div class="rating">
                  <?php for ($i = 1; $i <= 5; $i++) { ?>
                  <?php if ($product['rating'] < $i) { ?>
                  <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                  <?php } else { ?>
                  <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
                  <?php } ?>
                  <?php } ?>
                </div>
                <?php } ?>
              </div>
              <div class="button-group">
                <button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
                <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
                <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
              </div>
            </div>
          </div>
        </div>
        <?php } ?>
      </div>

И изначально, по дефолту он списком ( я вам говорил про это)

Но тут вступает в действие common.js

Скрытый текст

    // Product List
    $('#list-view').click(function() {
        $('#content .product-grid > .clearfix').remove();

        $('#content .row > .product-grid').attr('class', 'product-layout product-list col-xs-12');
        $('#grid-view').removeClass('active');
        $('#list-view').addClass('active');

        localStorage.setItem('display', 'list');
    });

    // 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');
        }

        $('#list-view').removeClass('active');
        $('#grid-view').addClass('active');

        localStorage.setItem('display', 'grid');
    });

    if (localStorage.getItem('display') == 'list') {
        $('#list-view').trigger('click');
        $('#list-view').addClass('active');
    } else {
        $('#grid-view').trigger('click');
        $('#grid-view').addClass('active');
    }

Он делает несколько дел.

Реагирует на клики по кнопкам, устанавливает класс  активной кнопке, снимает с неактивной

Также он устанавливает разметку (сетка или список)

А в самом конце, смотрите, он записывает в localStorage выбор пользователя (сетка или список) и этот выбор сохраняется в куках на компьютере пользователя.

Сначала, как видите, там идет блок, где устанавливается разметка для List

Потом идет блок для Grid ( причем там разметка сложнее, хотя ничего сложного, о ней в конце)

А потом происходит еще одна штука.

Если пользователь только открыл сайт, кликов по кнопкам не было, то common.js анализирует содержание localStorage

Если там сохранено (с прежних визитов пользователя), List, то он устанавливает List ( список)

Иначе ( то есть, если в localStorage сохранено Grid или там еще вообще нет никаких данных ( первый визит или куки почищены))

он устанавливает Grid.

Теперь о разметке Grid ( выделена красным)

Она меняется в зависимости от наличия сайдбар-ов (боковых колонок)

Если их две (слева и справа), то разметка первого типа, если одна- второго, если нет сайдбар-ов, то третьего.

Если вы твердо решили, то выходит, что кнопки можно выкидывать совсем.

Принудительно устанавливать нужный вариант разметки в localStorage.

При желании устанавливать в category.tpl предполагаемый вариант разметки ( скорее всего второй вариант Grid)

Обновлять кеш модификаторов.

И проверять, что получилось.

 

 

[Adems]

Спасибо большое, что не поленились ответить и подробно описать. Но я к сожалению так и не смог Принудительно установить нужный вариант разметки в localStorage.

Подскажите как это сделать?

[jaffagold]

Добавляем это в common.js непосредственно перед вышеприведенным кодом

Скрытый текст

    
    $('#list-view').removeClass('active');
    localStorage.setItem('display', 'grid');
    

То есть снимаем активный класс с кнопки List и заносим в localStorage значение display = grid

Сохраняем, обновляем модификаторы.

Теперь, при перезагрузке страницы у нас разметка Grid

Если принудительно нажать на кнопку List, то разметка изменится.

Скрытый текст

Но при обновлении страницы снова будет Grid

Скрытый текст

Кнопки удалять вы уже умеете.

После их удаления  первую добавленную в common.js строчку можно убрать, т.к. некому будет устанавливать класс active. 

Но сразу надо проверить, не вылезет ли где-то косяк в каком-то из модулей, хотя, вроде, не должно.

Напомню про бэкапы и ведение хоть какого-то лога внесенных изменений.

[Adems]

Спасибо! А если просто вместо кнопок так: <div id=grid-view></div> валидатор вроде не ругает? Я понимаю что это не красиво и слегка неправильно, но вроде косяков нет. Или у ПС могут быть подозрения на счёт пустого контейнера?

[Adems]

25 минут назад, jaffagold сказал:

Добавляем это в common.js непосредственно перед вышеприведенным кодом

  Показать содержимое

    
    $('#list-view').removeClass('active');
    localStorage.setItem('display', 'grid');
    

То есть снимаем активный класс с кнопки List и заносим в localStorage значение display = grid

Сохраняем, обновляем модификаторы.

Теперь, при перезагрузке страницы у нас разметка Grid

Если принудительно нажать на кнопку List, то разметка изменится.

  Показать содержимое

Но при обновлении страницы снова будет Grid

  Показать содержимое

Кнопки удалять вы уже умеете.

После их удаления  первую добавленную в common.js строчку можно убрать, т.к. некому будет устанавливать класс active. 

Но сразу надо проверить, не вылезет ли где-то косяк в каком-то из модулей, хотя, вроде, не должно.

Напомню про бэкапы и ведение хоть какого-то лога внесенных изменений.

У меня почему то этот  вариант не работает, кеш чистил, обновлял всё что можно, не работает и всё. Как толь убираю id=grid-view всё идёт в строку. Не пойму почему в сетку не идёт. Что то тут не чистое.

Скрипт подключён этот <script async="async" src="catalog/view/javascript/common.js" type="text/javascript"></script> всё вроде правильно но не реагирует на изменения.

[jaffagold]

Давайте начнем сначала.

Ничего не удаляем. Просто добавляем 2 строчки в common.js

Так тоже не работает?

[Adems]

Если ничего не удалять работает, показывает активную кнопку сетка, при переключении на список и обновлении показывает сеткой.

Удаляю кнопки опять показывает списком.

[jaffagold]

Если включить отображение списком (нажать кнопку), а потом, не нажимая никакую кнопку, просто обновить страницу, то должно при обновлении отобразиться сеткой. У вас так?

[Adems]

1 минуту назад, jaffagold сказал:

Если включить отображение списком (нажать кнопку), а потом, не нажимая никакую кнопку, просто обновить страницу, то должно при обновлении отобразиться сеткой. У вас так?

да

[jaffagold]

Время позднее. Завтра домучаем эту тему.
Как временное решение, дайте общему div- у  кнопок class hidden и никто никуда уже не кликнет. А загружаться только будет вид сеткой.

[Adems]

ok

[jaffagold]

Давайте с самого начала пошагово

Меняем разметку по-умолчанию (в category.tpl) на

Скрытый текст

 <?php foreach ($products as $product) { ?>
        <div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">

Пока остается возможность переключения представления Сетка-Список.

Вырезаем кнопки

Скрытый текст

<div class="btn-group btn-group-sm">
            <button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_list; ?>"><i class="fa fa-th-list"></i></button>
            <button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_grid; ?>"><i class="fa fa-th"></i></button>
</div>

Остается небольшой вариант возможного переключения из-за того, что в localStorage посетителя записано значение List. Но и он по идее работать не должен, т.к. если нет кнопок, то и кликнуть по ним нельзя. Но чтобы не было разных ошибок, можем на всякий случай поставить сброс содержимого localStorage в нужное состояние (вставляем всего одну строчку common.js)

Скрытый текст

    localStorage.setItem('display', 'grid');

Я проверил, работает.

При этом кнопки Список-Сетка в Блоге продолжают работать, но будет сбрасываться в в представление Сетка после перезагрузки страницы..
 

 

[Adems]

Да, всё ок проблема была здесь: product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12

 

Спасибо!

[BuslikDrev]

А я просто так написал <div class="product-layout2 product-grid2 col-lg-4 col-md-4 col-sm-6 col-xs-12">, чтобы подкатегории и товар был сеткой всегда. Потом уже парился в common.js, чтобы вернуть обратно.
В итоге подкатегории сеткой, товар показывает линией и сеткой.

[rasdalbai]

В 10.03.2017 at 19:03, jaffagold сказал:

Смотрите, обе кнопки неактивные, ни на что не влияют. Чтобы они влияли нужен клик по ним.

  Скрыть содержимое

          <div class="btn-group btn-group-sm">
            <button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_list; ?>"><i class="fa fa-th-list"></i></button>
            <button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_grid; ?>"><i class="fa fa-th"></i></button>
          </div>

Далее с 73 строки идет вывод товаров

  Скрыть содержимое

      <div class="row">
        <?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']) { ?>
                <p class="price">
                  <?php if (!$product['special']) { ?>
                  <?php echo $product['price']; ?>
                  <?php } else { ?>
                  <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
                  <?php } ?>
                  <?php if ($product['tax']) { ?>
                  <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
                  <?php } ?>
                </p>
                <?php } ?>
                <?php if ($product['rating']) { ?>
                <div class="rating">
                  <?php for ($i = 1; $i <= 5; $i++) { ?>
                  <?php if ($product['rating'] < $i) { ?>
                  <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                  <?php } else { ?>
                  <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
                  <?php } ?>
                  <?php } ?>
                </div>
                <?php } ?>
              </div>
              <div class="button-group">
                <button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
                <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
                <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
              </div>
            </div>
          </div>
        </div>
        <?php } ?>
      </div>

И изначально, по дефолту он списком ( я вам говорил про это)

Но тут вступает в действие common.js

  Скрыть содержимое

    // Product List
    $('#list-view').click(function() {
        $('#content .product-grid > .clearfix').remove();

        $('#content .row > .product-grid').attr('class', 'product-layout product-list col-xs-12');
        $('#grid-view').removeClass('active');
        $('#list-view').addClass('active');

        localStorage.setItem('display', 'list');
    });

    // 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');
        }

        $('#list-view').removeClass('active');
        $('#grid-view').addClass('active');

        localStorage.setItem('display', 'grid');
    });

    if (localStorage.getItem('display') == 'list') {
        $('#list-view').trigger('click');
        $('#list-view').addClass('active');
    } else {
        $('#grid-view').trigger('click');
        $('#grid-view').addClass('active');
    }

Он делает несколько дел.

Реагирует на клики по кнопкам, устанавливает класс  активной кнопке, снимает с неактивной

Также он устанавливает разметку (сетка или список)

А в самом конце, смотрите, он записывает в localStorage выбор пользователя (сетка или список) и этот выбор сохраняется в куках на компьютере пользователя.

Сначала, как видите, там идет блок, где устанавливается разметка для List

Потом идет блок для Grid ( причем там разметка сложнее, хотя ничего сложного, о ней в конце)

А потом происходит еще одна штука.

Если пользователь только открыл сайт, кликов по кнопкам не было, то common.js анализирует содержание localStorage

Если там сохранено (с прежних визитов пользователя), List, то он устанавливает List ( список)

Иначе ( то есть, если в localStorage сохранено Grid или там еще вообще нет никаких данных ( первый визит или куки почищены))

он устанавливает Grid.

Теперь о разметке Grid ( выделена красным)

Она меняется в зависимости от наличия сайдбар-ов (боковых колонок)

Если их две (слева и справа), то разметка первого типа, если одна- второго, если нет сайдбар-ов, то третьего.

Если вы твердо решили, то выходит, что кнопки можно выкидывать совсем.

Принудительно устанавливать нужный вариант разметки в localStorage.

При желании устанавливать в category.tpl предполагаемый вариант разметки ( скорее всего второй вариант Grid)

Обновлять кеш модификаторов.

И проверять, что получилось.

 

 

 

Большое спасибо.

Помогло.