Adems

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

Recommended Posts

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

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


Ссылка на сообщение
Поделиться на других сайтах
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 это понятно, вопрос что править как удалить вообще этот вывод.

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


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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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

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

display-list.thumb.jpg.a1cfe411447038e1d2d836344f99409a.jpg

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

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

display-grid.thumb.jpg.3712970ebdcfe14a5f836ee097984d1a.jpg

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

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

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

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

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


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

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

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


Ссылка на сообщение
Поделиться на других сайтах
25 минут назад, jaffagold сказал:

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

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

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

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

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

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

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

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

display-list.thumb.jpg.a1cfe411447038e1d2d836344f99409a.jpg

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

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

display-grid.thumb.jpg.3712970ebdcfe14a5f836ee097984d1a.jpg

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

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

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

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

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

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

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


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

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

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

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


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

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

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


Ссылка на сообщение
Поделиться на других сайтах
1 минуту назад, jaffagold сказал:

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

да

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


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

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

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


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

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

Меняем разметку по-умолчанию (в 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');

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

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

 

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


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

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

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


Ссылка на сообщение
Поделиться на других сайтах
В 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)

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

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

 

 

 

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

Помогло.

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


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

Создайте аккаунт или войдите для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу