Автор Тема: Вид страницы товара Grid или List  (Прочитано 6767 раз)

31 Декабрь 2013, 14:46:02
Ответ #15
  • Ветеран
  • *****
  • Сообщений: 1090
  • Репутация: +5/-1
  • Иногда заглядываю
    • Просмотр профиля
    • Помощь патентообладателям по продаже патентов.
Спасибо, попробую, но уже после нового года.

Всех кто заглянул "С новым годом!!!!!!!!!!!!!!!!!!"
Не боги горшки обжигают, не зачем им такой хренью заниматься.
16 Март 2014, 20:53:29
Ответ #16
  • Ветеран
  • *****
  • Сообщений: 1090
  • Репутация: +5/-1
  • Иногда заглядываю
    • Просмотр профиля
    • Помощь патентообладателям по продаже патентов.
Можно сделать так.
В product-sort.tpl добавить переключатель
<ul id="viewtabs" class="shadetabs">
<li class="grid"><a href="#" rel="grid-view" class="selected"></a></li>
<li class="list"><a href="#" rel="list-view"></a></li>
</ul>
В product.tpl добавить 2 вида - grjd и list.
{if isset($products)}
<!-- Products grid -->
<div id="product_list">

{assign var='columnCount' value=3}
{assign var='i' value=0}
<div id="grid-view" class="tabcontent">

{foreach from=$products item=product name=products}
{if $i++ % $columnCount == 0}
<ul id="in_grid" class="clear">
{/if}
                       <li...
                       </li>
{if $i % $columnCount == 0}
</ul>
{/if}
{/foreach}
</ul>
</div>

<!-- /Products grid -->

<!-- Products list -->
<div id="list-view" class="tabcontent">
<ul id="in_list" class="clear">
{foreach from=$products item=product name=products}
<li ...
                </li>
{/foreach}
</ul>
</div>
<!-- /Products list -->
</div>
{/if}
<script type="text/javascript">
var count=new ddtabcontent("viewtabs")
count.setpersist(true)
count.setselectedClassTarget("link")
count.init()
</script>
Фвйл list-gris.js положить в папку /themes/ваша тема/js/
Стили еще дописать для табличного показа.

Наконец дошли руки до переключения  LIST-GRID, пока не понял как это работает.

Как работает переключатель, может быть можно вот так?
<p id="viewtabs" class="shadetabs">
<a class="grid" href="#" rel="grid-view" class="selected"><img src="{$img_dir}product-grid.gif" height="18" width="18"></a> &nbsp;
<a class="list" href="#" rel="list-view"><img src="{$img_dir}product-list.gif" height="18" width="18"></a> &nbsp;
</p>
Почему вторая часть вставляется в product.tpl
Не боги горшки обжигают, не зачем им такой хренью заниматься.
17 Март 2014, 12:28:55
Ответ #17
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86688
  • Репутация: +25428/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Переключатель вида работает на основе javascript. В шаблоне добавляется блок с переключателем видов.
<ul>
    <li id="grid"><a onclick="display('grid');"><i class="icon-grid"></i>{l s='Grid'}</a></li>
    <li id="list"><a onclick="display('list');"><i class="icon-list"></i>{l s='List'}</a></li>
</ul>
И добавляется фкнция на js.
<script type="text/javascript">
function display(view) {
if (view == 'list') {
$('ul.product_list').removeClass('grid').addClass('list row');
$('.display').find('li#list').addClass('selected');
$('.display').find('li#grid').removeAttr('class');
$.totalStorage('display', 'list');
} else {
$('ul.product_list').removeClass('list').addClass('grid row');
$('.display').find('li#grid').addClass('selected');
$('.display').find('li#list').removeAttr('class');
$.totalStorage('display', 'grid');
}
}
view = $.totalStorage('display');
if (view) {
display(view);
} else {
display('grid');
}
</script>
17 Март 2014, 12:43:15
Ответ #18
  • Ветеран
  • *****
  • Сообщений: 1090
  • Репутация: +5/-1
  • Иногда заглядываю
    • Просмотр профиля
    • Помощь патентообладателям по продаже патентов.
Функция на JS тоже в шаблон product-list.tpl добавляется?
А все что внутри этого файла удаляется или что с ним делать?
Не боги горшки обжигают, не зачем им такой хренью заниматься.
17 Март 2014, 19:55:26
Ответ #19
  • Ветеран
  • *****
  • Сообщений: 33325
  • Репутация: +26771/-0
    • Просмотр профиля
Код javascript можно добавить в шаблон, только заключить его в теги literal.