Всем привет, появился глупый, но животрепещущий вопрос. Может кто сталкивался?
Есть вот такая штука:
{if isset($subcategories)}
{if (isset($display_subcategories) && $display_subcategories eq 1) || !isset($display_subcategories) }
<!-- Subcategories -->
<div id="subcategories">
<ul class="clearfix">
<div class="ss22"> {foreach from=$subcategories item=subcategory}
<a class="button33" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'} </a>
{/foreach} </div>
</ul>
</div>
{/if}
{/if}
Она выводит список подкатегорий в категорию.
Проблема - в магазине большое количество подкатегорий (около 240) почти для каждой категории. Есть какое-то решение, которое позволит показывать 10-12 ссылок на категории, а остальное прятать под кнопку показать всё?
В крупных магазинах это встречается повсеместно, вот только как это сделать ума не приложу. Форумы и интернеты говорят только о том как убрать вообще, про меню, а конкретно про это нет ни слова....
Прикреплю видео подобного. (единственное тут неудачно выбрал категорию товара, а такмысль показать)
Пришёл к такому решению:
в category.tpl
{if isset($subcategories)}
{if (isset($display_subcategories) && $display_subcategories eq 1) || !isset($display_subcategories) }
<!-- Subcategories -->
<div id="subcategories">
<ul class="clearfix">
<div class="sadamasa-2">
{foreach from=$subcategories item=subcategory}
<dasa class="slop" id="sos1">
<a class="button33" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'} </a>
</dasa>
{/foreach}
<a href="#" id="loadMore">Показать ещё</a>
</div>
</ul>
</div>
{/if}
{/if}
в category.js
$(function () {
//Если меньше 12 элементов, скрываем кнопку "Показать еще"
if ($(".slop").length < 12) {
$("#loadMore").hide();
}
$(".slop").slice(0, 12).show();
$("#loadMore").on('click', function (e) {
e.preventDefault();
$("dasa:hidden").slice(0, 12).slideDown();
if ($("dasa:hidden").length == 12) {
$("#load").fadeOut('slow');
}
//Если больше нет скрытых элементов, скрываем кнопку "Показать еще", добавляем "Скрыть все"
if ($("dasa:hidden").length == 0) {
$(this).hide();
$(this).parent().append("<a id='hideAll' href='#'>Скрыть все</a>");
}
});
//Поскольку кнопка "Скрыть все" добавляется динамически, вешаем обработчик на её родителя, котрого находим через #loadMore, поскольку он изначально есть в DOM
//При нажатии на "Скрыть все" скрываем кусок массива от 12-го до последнего элемента, кнопку удаляем, #loadMore открываем
var hideAllButton = $("#loadMore").parent();
$(hideAllButton).on('click', "#hideAll", function(e) {
e.preventDefault();
$(".slop").slice(12, $(".slop").length).hide();
$("#loadMore").show();
$("#hideAll").remove();
});
});
Вдруг кому пригодится.
