Николай Ланец
5 нояб. 2014 г., 6:46

Ajax-каталог на практике

На самом деле в этой статье главное, что я хочу показать - это силу Smarty-шаблонизацию :) И посмотрим мы это на реальном примере. Сразу попрошу не кидаться помидорами по поводу чистоты кода и JS-а в основной части страницы (это все будет в процессе поправлено, пока проект в работе, да и не критично это совсем). Главное - это понять механизм работы расширяемых смарти-шаблонов и блоков в них.
Итак, покликайте каталог на http://dev.capdel.ru.modxdev.webtm.ru/shop/catalog/ основные разделы слева, фильтр-сортировку и постраничность. Там на Ajax-е. И сейчас я немного расскажу как Ajax там реализован и расширяемые шаблоны.
Вот Смарти-шаблон этого каталога: https://gist.github.com/Fi1osof/22dd35b45d409bd0fc38. На самом деле в нем ни на что смотреть особо не надо, потому что самое главное в конце вот это: https://gist.github.com/Fi1osof/22dd35b45d409bd0fc38#file-gistfile1-tpl-L109. То есть в контент выводится подшаблон shop/catalog/list.tpl
{block name=content} [[!smarty?tpl=`shop/catalog/list.tpl`]] {/block}
В итоге, самое главное здесь для вывода каталога - это шаблон shop/catalog/list.tpl Вот этот шаблон: https://gist.github.com/Fi1osof/03da6107160d12575dad. Там все до кучи, включая JS. Так вот, обратите внимание на блоки в этом шаблоне, типа {block name=products_content}. Эти блоки можно переопределять в расширяющих шаблонах. И в этом шаблоне самое главное, это получение списка товаров и набивка их HTML-а в переменную https://gist.github.com/Fi1osof/03da6107160d12575dad#file-gistfile1-tpl-L20 и в конце уже вывод этого HTML-а внутри общего шаблона https://gist.github.com/Fi1osof/03da6107160d12575dad#file-gistfile1-tpl-L255. Мы подобрались к главному - это Ajax-запрос и получение HTML-а для вывода. По сути нам нужен тот же самый шаблон, ибо выводим основное содержимое каталога. Но нам не надо вообще все, то есть нам не нужен содержащийся в нем JS, блок фильтров и т.п. Создаем для Ajax-запросов документ-страничку и прописываем в нем вызов другого смарти-шаблона
[[!smarty?tpl=`shop/catalog/ajax/list.tpl`]]
А в нем вот такой код:
{extends file="shop/catalog/list.tpl"} {block name=products_content} {$products_html} {/block}
То есть все В нем больше ничего нет. И он выводит только основную часть каталога и больше ничего.
В чем магия? Переопределение блока products_content. https://gist.github.com/Fi1osof/03da6107160d12575dad#file-gistfile1-tpl-L23. То есть все, что выше этого блока (формирование фильтров, вызов процессора, набивка HTML-а товаров и т.п.), и ниже этого блока (если что-то там появится) - все это будет так же выполняться, а основной блок products_content в расширяющем процессоре переопределяется и выводится только HTML товаров. Таким образом мы имеем единый механизм вывода каталога обычным способом и Ajax-ом. То есть и логика выборки единая, и оформление единое и т.д. и т.п., но вывод мы аккуратно переопределяем.
Да, действительно хороший пример, причём AJAX замечательно индексируется) Думаю этот ход явно в сторону будущего, скоро, да уже и сейчас многие магазины переходят на AJAX, а лидеры рынков уже давно на этой технологии. ShopModx замечательно выглядит, подскажите только пожалуйста, где я могу изучить фильтрацию поподробнее, а так же как лучше устроить магазин, если товаров планируется более 7000. Причём изменение цен происходить будет каждую неделю. Есть ещё интересная задача, как решить на MODX - не знаю, но предполагаю что можно задачей на CRON. Суть задачи - загружать прайс-лист с тем же названием каждую пятницу в определённую папку и чтобы он автоматически обновлял цены. Или может есть ещё пути решения?
Думаю этот ход явно в сторону будущего
На самом деле в этом мы идем не в будущее, а возвращаемся в прошлое))), так как Smarty - ветеран шаблонизации, и все это делалось уже не один год назад. А мы просто подтягиваем эти технологии и методики в MODX.
причём AJAX замечательно индексируется)
Нет, гораздо лучше реализация была здесь: http://home-ex_ru.portfolio.modxclub.ru/catalog/, при чем я делал это года три-4 назад, и там много фишек, включая смену адресной строки, сохранение страниц в кеш браузера и работу исторических кнопок браузера. Это одна из лучших вещей, что я делал. Но вот как раз там мне очень не хватало Smarty-шаблонизации.
где я могу изучить фильтрацию поподробнее
Очень полезна в этом будет эта статья.
а так же как лучше устроить магазин, если товаров планируется более 7000
. Ничего особенного для этого не надо, разве что в настройках MODX-а отключите кеширование карты ресурсов cache_alias_map, чтобы сократить объем кеш-файла при инициализации MODX-а.
Причём изменение цен происходить будет каждую неделю. Есть ещё интересная задача, как решить на MODX - не знаю, но предполагаю что можно задачей на CRON.
Теории импорт/экспорт в двух словах не буду рассказывать. Все это решаемо. Научить в короткий срок не получится, если сами не справитесь с импортом - заказывайте индивидуальную разработку.
причём AJAX замечательно индексируется)
В каком смысле?
В каком смысле?
Да это он скорее всего про то, что ссылки абсолютные, реальные, и даже если отключен JS, контент подается идентичный.

Добавить комментарий