18 replies to this topic

[isay777]

К сожалению ночью не смотря на литр кофе, вывод в несколько столбцов не смог сделать. Запутался в стилях и выводе количества колонок через php

 

  

 

 

Если кто захочет поэкспериментировать то вот 

http://tympanus.net/...ew-mode-switch/

 

http://tympanus.net/...ViewModeSwitch/

 

 

Вы представляете как хочется такое видеть в каком-нибудь обновлении новой корзины )))

Edited by isay777, 31 March 2015 - 00:48.

[Na_uM]

бесполезный пример по ссылке, обновил и прощая выбранный стиль

на самом деле дел на 10 минут)

[CB9TOIIIA]

бесполезный пример по ссылке, обновил и прощая выбранный стиль

на самом деле дел на 10 минут)

 

сделайте и опубликуйте в маркете. Мы вам спасибо скажем!

[SmetDenis]

Убрал все сообщения, которые слабо относились к топику.

Давайте по теме. Похоже весеннее обострение началось...

[isay777]

Давайте по теме. 

 

Денис а на какой основе сделана смена отображения в сравнении?

[i001]

вся магия тут

jbuniversal ▸ templates ▸ catalog ▸ renderer ▸ compare ▸ _default.php

if ($view->layoutType == 'v') { ... }
else if ($view->layoutType == 'h') { ... }

[i001]

как вариант, на js+css ну и сам переключатель.
JS по клику на будет присваивать блокам доп классы, а дальше уже css
 

[mr.varhola]

У себя сделал так: http://joxi.ru/KAgWy0YUk6oNAl

http://childrens.web...baby-buggy.html

всю магию делает jQuery

1) В файле media\zoo\applications\jbuniversal\templates\catalog\category.php в удобном месте добавил кнопки для переключения вида отображения

    <div class="sort2">
        <h3 class="sp-title">Просмотр:</h3>
        <div class="display"><a onclick="display('list');">Список</a> <b>/</b> Сетка</div>
    </div>

2) В этом же файле находим строчку

echo $this->app->jblayout->render('items', $this->items);

и оборачиваем её в див, чтобы получилось так:

        echo "<div class=\"rborder-grid\">";
            echo $this->app->jblayout->render('items', $this->items);
        echo "</div>";

Сразу после этих трех строчек - закрываем тег php  ?> и со следующей строки пишем магический js

<script type="text/javascript"><!--
function display(view) {
    if (view == 'list') {
        jQuery('.rborder-grid').attr('class', 'rborder-list');  

            jQuery('.rborder-list .prod').each(function(index, element) {

                html  = '<div class="prod-block1">';
                    html += '<div class="label lbl">' + jQuery(element).find('.lbl').html() + '</div>';    
                    html += '<div class="images">' + jQuery(element).find('.images').html() + '</div>';    
                html += '</div>';

                html += '<div class="prod-block2">';                    
                    html += '<div class="pb2-block1">';
                        html += '<div class="name">' + jQuery(element).find('.name').html() + '</div>';    
                    html += '</div>';

                    html += '<div class="pb2-block2">';                    
                        html += '<div class="pb2b2-block1">';
                            var properties = jQuery(element).find('.properties').html();      
                            if (properties != null) {
                                html += '<div class="properties">' + properties + '</div>';
                            }
                        html += '</div>';

                        html += '<div class="pb2b2-block2">';
                            html += '<div class="buttons">' + jQuery(element).find('.buttons').html() + '</div>';
                            html += '<div class="compare">' + jQuery(element).find('.compare').html() + '</div>';
                        html += '</div>';
                    html += '</div>';
                html += '</div>';

                jQuery(element).html(html);
            });    
        
        jQuery('.display').html('Список <b>/</b> <a onclick="display(\'grid\');">Cетка</a>');
        
        jQuery.totalStorage('display', 'list'); 
    } else {
        jQuery('.rborder-list').attr('class', 'rborder-grid');

            jQuery('.rborder-grid .prod').each(function(index, element) {

                html = '';
                html += '<div class="lbl">' + jQuery(element).find('.lbl').html() + '</div>';
                html += '<div class="images">' + jQuery(element).find('.images').html() + '</div>';
                html += '<div class="name">' + jQuery(element).find('.name').html() + '</div>';
                var properties = jQuery(element).find('.properties').html();      
                if (properties != null) {
                    html += '<div class="properties">' + properties + '</div>';
                }
                html += '<div class="buttons">' + jQuery(element).find('.buttons').html() + '</div>';
                html += '<div class="compare">' + jQuery(element).find('.compare').html() + '</div>';

                jQuery(element).html(html);
            });   
                               
        jQuery('.display').html('<a onclick="display(\'list\');">Список</a> <b>/</b> Сетка');
        
        jQuery.totalStorage('display', 'grid');
    }
}

view = jQuery.totalStorage('display');

if (view) {
    display(view);
} else {
    display('list');
}
//--></script> 

Данный пример написан конкретно под мой шаблон тизера, вам нужно изменить классы и элементы html на свои.

Вся суть в том, что js берет информацию с шаблона "teaser" и в зависимости от нужного нам вида отображения отдает её.

 

В конце всех этих процедур подключаем файлик https://yadi.sk/d/IPMSPuenff5MKв index.php шаблона, данный файл сохраняет ваш выбор отображения в куках и хранит его при переходах по пагинации или другим страницам категорий.

 

Вроде все

 

Потом пишем css отталкиваясь от родителя .rborder-grid или .rborder-list в less это очень удобно)

Edited by mr.varhola, 31 March 2015 - 20:20.

[isay777]

Супер. Сейчас опробую. 

[Sliapy]

mr.varhola код до боли напоминает opencart