При проверке страниц сайта в PageSpeed Insights получили сообщение "Сократите размер структуры DOM 2 475 элементов".
Так, как сайт имеет большое количество категорий и подкатегорий, то лишь мобильное меню создает порядка тысячи элементова DOM.
Решили выводить мобильное меню лишь после нажатия на "Категории" посредством AJAX запроса. В mobile_menu.tpl
меняем на
Перед </body> добавляем:
Подскажите какой адрес серверного обработчика для вставки вместо url_to_your_categories_endpoint
Так, как сайт имеет большое количество категорий и подкатегорий, то лишь мобильное меню создает порядка тысячи элементова DOM.
Решили выводить мобильное меню лишь после нажатия на "Категории" посредством AJAX запроса. В mobile_menu.tpl
Code: Выделить всё
<ul class="second-nav">
{if $controller != 'MainController'}
<li>
<a href="{url_generator route='main'}">
{include file="svg.tpl" svgId="home_icon"}
<span data-language="mobile_menu_home">{$lang->mobile_menu_home}</span>
</a>
</li>
{/if}
<li>
<a>
{include file="svg.tpl" svgId="catalog_icon"}
<span data-language="mobile_menu_category">{$lang->mobile_menu_category}</span>
</a>
{function name=categories_tree4}
{if $categories}
<ul class="">
{foreach $categories as $c}
{if $c->visible && ($c->has_products || $settings->show_empty_categories)}
{if $c->subcategories && $c->count_children_visible}
<li class="">
<a class="{if $category->id == $c->id} selected{/if}" href="{url_generator route='category' url=$c->url}" data-category="{$c->id}">
{if $c->image}
<span class="nav-icon">
<img src="{$c->image|resize:20:20:false:$config->resized_categories_dir}" width="20" height="20" alt="{$c->name|escape}" />
</span>
{/if}
<span>{$c->name|escape}</span>
</a>
{categories_tree4 categories=$c->subcategories level=$level + 1}
</li>
{else}
<li class="">
<a class="{if $category->id == $c->id} selected{/if}" href="{url_generator route='category' url=$c->url}" data-category="{$c->id}">
{if $c->image}
<span class="nav-icon">
<img src="{$c->image|resize:20:20:false:$config->resized_categories_dir}" width="20" height="20" alt="{$c->name|escape}" />
</span>
{/if}
<span>{$c->name|escape}</span>
</a>
</li>
{/if}
{/if}
{/foreach}
</ul>
{/if}
{/function}
{categories_tree4 categories=$categories level=1}
</li>
</ul>меняем на
Code: Выделить всё
<ul class="second-nav">
{if $controller != 'MainController'}
<li>
<a href="{url_generator route='main'}">
{include file="svg.tpl" svgId="home_icon"}
<span data-language="mobile_menu_home">{$lang->mobile_menu_home}</span>
</a>
</li>
{/if}
<li id="mobile-menu-category">
<a href="#">
{include file="svg.tpl" svgId="catalog_icon"}
<span data-language="mobile_menu_category">{$lang->mobile_menu_category}</span>
</a>
</li>
</ul>
<div id="mobile-categories-container" style="display: none;"></div>
Перед </body> добавляем:
Code: Выделить всё
$(document).ready(function() {
$('#mobile-menu-category').click(function(e) {
e.preventDefault();
$.ajax({
url: 'url_to_your_categories_endpoint',
type: 'GET',
success: function(data) {
$('#mobile-categories-container').html(data);
$('#mobile-categories-container').show();
},
error: function(xhr, status, error) {
console.error(error);
}
});
});
});
Подскажите какой адрес серверного обработчика для вставки вместо url_to_your_categories_endpoint