Для клиентов Урок №7. Делаем архив новостей с календарем.

На примере темы "Корпоративный сайт".

Открываем окно настройки темы и смотрим шаблон страницы новостей:

Видим, что на странице используется виджет Section. Таким образом, для добавления календаря, необходимо использовать свой шаблон для виджета Section. Укажем виджету использовать наблон news.twig, добавив параметр template в код вызова виджета:

{% widget 'Section' with { template: 'news.twig', list_template: 'tiles.twig', list_limit: 6, material_share_buttons: 1, material_template: 'news.twig' } %}

Сохраняем шаблон и сохраняем конфигурацию темы.

Далее нужно создать шаблон "news.twig" для виджета Section. Открываем панель "Шаблоны виджетов" и открываем стандартный шаблон виджета Section:

Сохраним его как "news.twig" и приступим к модификации:

Список новостей выводится виджетом List, ({% widget 'List' with......). Добавим рядом со списком новостей виджет Calendar:

    <div class="row">
        <div class="small-12 medium-8 column">

            {% widget 'List' with {
                catalog:   widget.catalog.id,
                template:  widget.getParam('list_template'),
                where:     widget.getParam('list_where'),
                page:      widget.getParam('list_page'),
                page_param:widget.getParam('list_page_param'),
                limit:     widget.getParam('list_limit'),
                order:     widget.getParam('list_order'),
                sort:      widget.getParam('list_sort'),
                paginator: widget.getParam('list_paginator'),
                css_class: widget.getParam('list_css_class'),         
                paginator_template:  widget.getParam('paginator_template')
            } %}
        </div>
        <div class="small-12 medium-4 column">
            {% widget 'Calendar' with { } %}
        </div>
    </div>

Далее необходимо связать каледнарь со списком новостей, чтобы дата. выбранная в календаре влияла на содержимое списка. Для этого используем параметр "where" виджета List. Этот параметр позволяет организовать фильтрацию списка метериалов, который показывает виджет.

Дата, выбранная в календаре, передается через query параметр "date". В twig-шаблоне получить этот параметр можно через глобальный объект \Cetera\Application, который присвоен переменной application: application.request('date'). Формирование фильтра будет выглядеть следующим образом:

    {% if application.request('date') %}
    {# выбрана дата - формируем фильтр #}
    
        {% if application.request('month') %}
        {# новости за месяц #}
            {% set filter = "DATE_FORMAT(dat,'%Y-%m')='"~application.request('date')|date("Y-m")~"'" %}  
        {% else %}
        {# новости за день #}
            {% set filter = "DATE_FORMAT(dat,'%Y-%m-%d')='"~application.request('date')|date("Y-m-d")~"'" %}          
        {% endif %}
        
    {% else %}
        {# дата не выбрана - пустой фильтр #}
        {% set filter = "" %}    
    {% endif %}

 Полный код измененного шаблона:

{% if widget.error404 %}

    {% if widget.getParam('page404_template') %}
        {% include widget.getParam('page404_template') %}
    {% else %}
        <div class="content">
            {% include "@widget/_common/page404.twig" %}
        </div>
    {% endif %}    

{% elseif widget.material %}

    {% widget 'Material' with {
        catalog:       widget.catalog.id,
        template:      widget.getParam('material_template'),
        material_id:   widget.material.id,
        share_buttons: widget.getParam('material_share_buttons'),
        show_pic:      widget.getParam('material_show_pic'),
        show_meta:     widget.getParam('show_meta')
    } %}    

{% else %}

    {% if application.request('date') %}
    {# выбрана дата - формируем фильтр #}
    
        {% if application.request('month') %}
        {# новости за месяц #}
            {% set m = ['','январь','февраль','март','апрель','май','июнь','июль','август','сентябрь','октябрь','ноябрь','декабрь'] %}
            <h1>{{ widget.catalog.name }} за {{ m[application.request('date')|date("n")] }} {{ application.request('date')|date("Y") }}</h1>
            {# фильтр по дате #}
            {% set filter = "DATE_FORMAT(dat,'%Y-%m')='"~application.request('date')|date("Y-m")~"'" %}  
        {% else %}
        {# новости за день #}
            {% set m = ['','января','февраля','марта','апреля','мая','июня','июля','августа','сентября','октября','ноября','декабря'] %}
            <h1>{{ widget.catalog.name }} за {{ application.request('date')|date("d") }} {{ m[application.request('date')|date("n")] }} {{ application.request('date')|date("Y") }}</h1>
            {# фильтр по дате #}
            {% set filter = "DATE_FORMAT(dat,'%Y-%m-%d')='"~application.request('date')|date("Y-m-d")~"'" %}          
        {% endif %}
        
    {% else %}
        {# дата не выбрана - пустой фильтр #}
        {% set filter = "" %}    
        <h1>{{ widget.catalog.name }}</h1>
    {% endif %}

    <div class="row">
        <div class="small-12 medium-8 column">

            {# список новостей с фильтром #}
            {% widget 'List' with {
                catalog:   widget.catalog.id,
                template:  widget.getParam('list_template'),
                where:     filter,
                page:      widget.getParam('list_page'),
                page_param:widget.getParam('list_page_param'),
                limit:     widget.getParam('list_limit'),
                order:     widget.getParam('list_order'),
                sort:      widget.getParam('list_sort'),
                paginator: widget.getParam('list_paginator'),
                css_class: widget.getParam('list_css_class'),         
                paginator_template:  widget.getParam('paginator_template')
            } %}
        </div>
        <div class="small-12 medium-4 column">
            {% widget 'Calendar' with { } %}
        </div>
    </div>
    
{% endif %}

Сохраняем измененный шаблон. Итоговый результат:


Мы на связи

фото Алены Ратниковой

Алена Ратникова
Отвечаю за всё производство

фото Марии Лебедевой

Мария Лебедева
Занимаюсь новыми клиентами


Cetera Labs

График работы

Понедельник-пятница
9:00-18:00

Телефон

8 (800) 775-52-93