#1 2012-09-25 16:38

komkom
Пользователь

Две верстки одной категории

Всем добрый день!
Как можно воплотить возможность переключения пользователем в категории с одного вида верстки на другой.

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

Есть ли готовое решение? Если нет, то как сделать?

Неактивен

 

#2 2012-09-25 16:46

rat
Администратор

Re: Две верстки одной категории

Переключение можно реализовать средствами JavaScript. И этим же JavaScript-кодом задавать значение cookie-переменной, в зависимости от которой формировать в шаблонах Smarty нужный вариант верстки по умолчанию для других страниц, открываемых посетителем.

Неактивен

 

#3 2012-09-25 16:49

komkom
Пользователь

Re: Две верстки одной категории

Спасибо rat. но это для меня темный лес. Хотелось бы поподробней.) Или кто то может помочь реализовать?

Неактивен

 

#4 2012-09-25 18:09

rat
Администратор

Re: Две верстки одной категории

Попробуем для начала переключение верстки для текущей страницы.

1. В файле published/SC/html/scripts/templates/frontend/category.tpl.html в самом начале добавьте

Код:

<script>
{literal}

var DEFAULT_VIEW = true;
var ORIGINAL_HTML = null;
var CUSTOM_HTML = null;
var COLUMNS = 4;

function toggleProductsView(){
  DEFAULT_VIEW = !DEFAULT_VIEW;
  
  var products_table = document.getElementById('products');
  if(DEFAULT_VIEW){
    products_table.innerHTML = ORIGINAL_HTML;
    removeClass(products_table, 'custom_view');
  }else{
    if(CUSTOM_HTML === null){
      var products_table_cells = products_table.getElementsByTagName('td');

      var cells_data = [];
      for(var i = 0, c = products_table_cells.length; i < c; i++){
        cells_data.push(products_table_cells[i].innerHTML);
      }

      ORIGINAL_HTML = products_table.innerHTML;
      products_table.innerHTML = '';

      var current_row = null;
      for(var i = 0, c = cells_data.length; i < c; i++){
        if(i == 0 || i % COLUMNS == 0){
          current_row = products_table.insertRow(-1);
        }
        
        var cell = current_row.insertCell(-1);
        cell.innerHTML = cells_data[i];
      }
      CUSTOM_HTML = products_table.innerHTML;
    }else{
      products_table.innerHTML = CUSTOM_HTML;
    }
    addClass(products_table, 'custom_view');
  } 
}

function addClass(element, class_name){
  var element_classes = element.className.split(' ');
  element_classes.push(class_name);
  element.className = element_classes.join(' ');
}

function removeClass(element, class_name){
  var element_classes = element.className.split(' ');
  for(var i = 0, c = element_classes.length; i < c; i++){
    if(element_classes[i] == class_name){
      element_classes.pop(element_classes[i]);
      break;
    }
  }
  element.className = element_classes.join(' ');
}

{/literal}
</script>
<style>
{literal}

.custom_view .prdbrief_brief_description{
  display: none;
}

{/literal}
</style>

Конечно, на jQuery получится короче, но так же интереснее wink

2. В этом же файле измените строку

Код:

<table cellpadding="6" border="0" width="95%">

так

Код:

<table cellpadding="6" border="0" width="95%" id="products">

3. И в нужном месте в этом же файле добавьте ссылку для переключения верстки:

Код:

<a href="javascript:void()" onclick="toggleProductsView(); return false;">{'change_layout'|translate}</a>

Неактивен

 

#5 2012-09-26 11:16

rat
Администратор

Re: Две верстки одной категории

А чтобы переключение запоминалось, делаем так:

1. В начало этого файла вставляем

Код:

{assign var=custom_columns value=4}

<script>

var COLUMNS = {ldelim}
  'original': {$smarty.const.CONF_COLUMNS_PER_PAGE},
  'custom': {$custom_columns}
{rdelim};

var CELLS = null;

{literal}
function toggleProductsView(){
  var new_view = (getCookie('category_view') == 'custom')? 'original' : 'custom';
  document.cookie = (new_view == 'custom')? 'category_view=custom': 'category_view=';

  var products_table = document.getElementById('products');
  var products_table_cells = products_table.getElementsByTagName('td');

  CELLS = [];
  for(var i = 0, c = products_table_cells.length; i < c; i++){
    CELLS.push(products_table_cells[i].innerHTML);
  }

  products_table.innerHTML = '';
  var current_row = null;
  for(var i = 0, c = CELLS.length; i < c; i++){
    if(i == 0 || i % COLUMNS[new_view] == 0){
      current_row = products_table.insertRow(-1);
    }
    
    var cell = current_row.insertCell(-1);
    cell.innerHTML = CELLS[i];
  }

  if(new_view == 'original'){
    removeClass(products_table, 'custom_view');
  }else{
    addClass(products_table, 'custom_view');
  }
}

function addClass(element, class_name){
  var element_classes = element.className.split(' ');
  element_classes.push(class_name);
  element.className = element_classes.join(' ');
}

function removeClass(element, class_name){
  var element_classes = element.className.split(' ');
  for(var i = 0, c = element_classes.length; i < c; i++){
    if(element_classes[i] == class_name){
      element_classes.pop(element_classes[i]);
      break;
    }
  }
  element.className = element_classes.join(' ');
}

function getCookie(name){
  var cookies = document.cookie.split('; ');
  for(var i = 0, c = cookies.length; i < c; i++){
    var cookie_data = cookies[i].split('=');
    if (cookie_data[0] === name){
      return cookie_data[1];
    }
  }
  return null;
}

{/literal}
</script>

<style>
{literal}

.custom_view .prdbrief_brief_description{
  display: none;
}

{/literal}
</style>

2. Меняем

Код:

<table cellpadding="6" border="0" width="95%">
  {foreach from=$products_to_show item=product_item name=product_brief}
    {if $smarty.foreach.product_brief.index is div by $smarty.const.CONF_COLUMNS_PER_PAGE}<tr>{/if}
    <td valign="top" width="{math equation="100 / x" x=$smarty.const.CONF_COLUMNS_PER_PAGE format="%d%%"}">
        {include file="product_brief.html" product_info=$product_item}
    </td>
    {if ($smarty.foreach.product_brief.index+1) is div by $smarty.const.CONF_COLUMNS_PER_PAGE}</tr>{elseif $smarty.foreach.product_brief.last}</tr>{/if}
  {/foreach}
</table>

на

Код:

<table cellpadding="6" border="0" width="95%" id="products"{if $smarty.cookies.category_view == 'custom'} class="custom_view"{/if}>
  {if $smarty.cookies.category_view == 'custom'}
    {assign var=columns value=$custom_columns}
  {else}
    {assign var=columns value=$smarty.const.CONF_COLUMNS_PER_PAGE}
  {/if}
  {foreach from=$products_to_show item=product_item name=product_brief}
    {if $smarty.foreach.product_brief.index is div by $columns}<tr>{/if}
    <td valign="top" width="{math equation="100 / x" x=$columns format="%d%%"}">
        {include file="product_brief.html" product_info=$product_item}
    </td>
    {if ($smarty.foreach.product_brief.index+1) is div by $columns}</tr>{elseif $smarty.foreach.product_brief.last}</tr>{/if}
  {/foreach}
</table>

3. Добавляем ссылку для переключения:

Код:

<a href="javascript:void()" onclick="toggleProductsView(); return false;">{'change_layout'|translate}</a>

Неактивен

 

#6 2012-09-26 13:49

komkom
Пользователь

Re: Две верстки одной категории

Спасибо rat, пробую.

Неактивен

 

#7 2014-02-20 14:28

Fumerok
Пользователь

Re: Две верстки одной категории

как-то кривовато первый пример работает, выводит в три колонки, но все вразнобой (название в разных местах, на некоторых только изображение остается)

Неактивен

 

#8 2014-04-22 09:48

Fumerok
Пользователь

Re: Две верстки одной категории

вот как-то так получается
http://forum.webasyst.ru/uploads/thumbs/12564_2014-04-22_094733.jpg

Неактивен

 

#9 2014-04-26 12:44

D_1
Пользователь

Re: Две верстки одной категории

Делается путём нескольких {include file="product_brief.html" product_info=$product_item}
делаете дубли prduct_brief с другим названием и подключаете. Переключение с помощью js

Неактивен

 

#10 2014-04-26 20:10

Fumerok
Пользователь

Re: Две верстки одной категории

а возможно этот js-скрипт переписать/исправить?

Неактивен

 

#11 2015-04-02 09:50

lumpi
Пользователь

Re: Две верстки одной категории

Последний вариант почти нормал. За одним минусом. Переключение происходит только после обновления страницы в браузере.

Неактивен

 

#12 2015-04-02 10:27

Fumerok
Пользователь

Re: Две верстки одной категории

lumpi написал:

Последний вариант почти нормал. За одним минусом. Переключение происходит только после обновления страницы в браузере.

а по другому и не получится, это ж WebAsyst Х)

Неактивен

 

#13 2015-04-02 10:30

lumpi
Пользователь

Re: Две верстки одной категории

или так можно
<a href="javascript:window.location.reload()" return false; onclick="toggleProductsView();">Переключатель</a>

Неактивен

 

#14 2015-04-02 11:48

Fumerok
Пользователь

Re: Две верстки одной категории

lumpi написал:

или так можно
<a href="javascript:window.location.reload()" return false; onclick="toggleProductsView();">Переключатель</a>

я просто внутри функции toggleProductsView() прописал  location.reload() в конце

Неактивен

 

#15 2015-04-02 14:16

lumpi
Пользователь

Re: Две верстки одной категории

еще нюанс. если в одном наименование товара длинное, а в другом короткое - то пляшут таблицы. можно ли как нить поправить?

Неактивен

 

#16 2015-04-02 14:24

Fumerok
Пользователь

Re: Две верстки одной категории

lumpi написал:

еще нюанс. если в одном наименование товара длинное, а в другом короткое - то пляшут таблицы. можно ли как нить поправить?

например у меня название товара в отдельном div-блоке, в котором стоит overflow: hidden;

Неактивен

 

#17 2015-04-02 15:09

lumpi
Пользователь

Re: Две верстки одной категории

не совсем подходит. надо полное наименование. а как фиксированной ширины сделать?

Неактивен

 

#18 2015-04-02 15:10

lumpi
Пользователь

Re: Две верстки одной категории

т.е. высоты

Неактивен

 

#19 2015-04-04 10:45

Fumerok
Пользователь

Re: Две верстки одной категории

lumpi написал:

т.е. высоты

прописываете для ячейки таблицы свойство height, ширина будет фиксированная, но все равно придется использовать свойство overflow: hidden; , чтобы название не выходило за рамки

Неактивен

 

#20 2015-04-05 12:51

Fumerok
Пользователь

Re: Две верстки одной категории

а как можно сделать кастомный вид видом по умолчанию?

Неактивен

 

#21 2015-04-06 11:39

lumpi
Пользователь

Re: Две верстки одной категории

получилось сделать размер ячейки через  css

Неактивен

 

Board footer

Powered by PunBB