Вы не авторизованы.
Всем добрый день!
Как можно воплотить возможность переключения пользователем в категории с одного вида верстки на другой.
Например: по умолчанию имеется табличная верстка в один столбец с кратким описанием карточек. Сделать возможность переключения пользователем в 4 столбца без краткого описания.
И соответственно, возможности переключения назад. При этом, было бы важно, что бы после переключения пользователем в тот или иной вид, дальнейшее его блуждание по магазину отображалось бы в выбранной верстке.
Есть ли готовое решение? Если нет, то как сделать?
Неактивен
Переключение можно реализовать средствами JavaScript. И этим же JavaScript-кодом задавать значение cookie-переменной, в зависимости от которой формировать в шаблонах Smarty нужный вариант верстки по умолчанию для других страниц, открываемых посетителем.
Неактивен
Спасибо rat. но это для меня темный лес. Хотелось бы поподробней.) Или кто то может помочь реализовать?
Неактивен
Попробуем для начала переключение верстки для текущей страницы.
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 получится короче, но так же интереснее
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>
Неактивен
А чтобы переключение запоминалось, делаем так:
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>
Неактивен
как-то кривовато первый пример работает, выводит в три колонки, но все вразнобой (название в разных местах, на некоторых только изображение остается)
Неактивен
Делается путём нескольких {include file="product_brief.html" product_info=$product_item}
делаете дубли prduct_brief с другим названием и подключаете. Переключение с помощью js
Неактивен
а возможно этот js-скрипт переписать/исправить?
Неактивен
Последний вариант почти нормал. За одним минусом. Переключение происходит только после обновления страницы в браузере.
Неактивен
lumpi написал:
Последний вариант почти нормал. За одним минусом. Переключение происходит только после обновления страницы в браузере.
а по другому и не получится, это ж WebAsyst Х)
Неактивен
или так можно
<a href="javascript:window.location.reload()" return false; onclick="toggleProductsView();">Переключатель</a>
Неактивен
lumpi написал:
или так можно
<a href="javascript:window.location.reload()" return false; onclick="toggleProductsView();">Переключатель</a>
я просто внутри функции toggleProductsView() прописал location.reload() в конце
Неактивен
еще нюанс. если в одном наименование товара длинное, а в другом короткое - то пляшут таблицы. можно ли как нить поправить?
Неактивен
lumpi написал:
еще нюанс. если в одном наименование товара длинное, а в другом короткое - то пляшут таблицы. можно ли как нить поправить?
например у меня название товара в отдельном div-блоке, в котором стоит overflow: hidden;
Неактивен
не совсем подходит. надо полное наименование. а как фиксированной ширины сделать?
Неактивен
lumpi написал:
т.е. высоты
прописываете для ячейки таблицы свойство height, ширина будет фиксированная, но все равно придется использовать свойство overflow: hidden; , чтобы название не выходило за рамки
Неактивен
а как можно сделать кастомный вид видом по умолчанию?
Неактивен
получилось сделать размер ячейки через css
Неактивен