Решение: Скрыть промо-слайдер в Дефолт 3 при отсутствии промо-карточек

1

Возможно, кому-то пригодится...

Важно! Это касается только использования промо-карточек (Товары -> Промо) в промо-слайдере.

Бывает, что промо-карточек (акций и т.п.) в магазине в настоящее время нет либо их время действия (обратный отсчет) закончилось. В таком случае их вывод в промо-слайдере становится бессмысленным.

Для того, чтоб скрыть недействительные промо-карточки, слегка меняем промо-слайдер в home.slider.html

Находим в нем этот кусок:

    {* PROMOCARDS *}
    {if $_is_promocards}
        <ul class="s-slider-block" id="js-home-slider">
            {foreach $promocards as $_slide}
                <li class="s-slide-wrapper" style="
                    {if $_slide.color}color: {$_slide.color};{/if}
                    {if $_slide.image}background-image: url({$_slide.image});{/if}
                ">
                    <div class="s-slide-block">
                        <h3 class="s-header">{$_slide.title|escape|truncate:90}</h3>
                        {if !empty($_slide.body)}
                            <p class="s-description" itemprop="description">{$_slide.body|escape}</p>
                        {/if}
                        {if !empty($_slide.countdown_datetime)}
                            <div class="s-counter">
                                <span class="js-promo-countdown" data-start="{date('Y-m-d H:i:s')}" data-end="{$_slide.countdown_datetime}"></span>
                            </div>
                        {/if}
                    </div>
                    <a class="s-slide-link" href="{$_slide.link}"></a>
                </li>
            {/foreach}
        </ul>

и меняем его на: 

    {* PROMOCARDS *}
    {if $_is_promocards}
    
        <ul class="s-slider-block" id="js-home-slider">
            {foreach $promocards as $_slide}
            {if empty($_slide.countdown_datetime) || (!empty($_slide.countdown_datetime) && $_slide.countdown_datetime > date('Y-m-d H:i:s'))}
                <li class="s-slide-wrapper" style="
                    {if $_slide.color}color: {$_slide.color};{/if}
                    {if $_slide.image}background-image: url({$_slide.image});{/if}
                ">
                    <div class="s-slide-block">
                        <h3 class="s-header">{$_slide.title|escape|truncate:90}</h3>
                        {if !empty($_slide.body)}
                            <p class="s-description" itemprop="description">{$_slide.body|escape}</p>
                        {/if}
                        {if !empty($_slide.countdown_datetime)}
                            <div class="s-counter">
                                <span class="js-promo-countdown" data-start="{date('Y-m-d H:i:s')}" data-end="{$_slide.countdown_datetime}"></span>
                            </div>
                        {/if}
                    </div>
                    <a class="s-slide-link" href="{$_slide.link}"></a>
                </li>
            {/if}
            {/foreach}
        </ul>

В итоге мы добавили условие "показывать только промо-карточки, срок действия которых (обратный отсчет) не истек, либо срок их действия не установлен вообще".

Но теперь осталась осталась еще одна проблема. В том случае, если у нас промо-карточек для показа в слайдере в текущий момент нет (нет акций, время истекло и т.п.) на странице висит пустой блок слайдера.

Чтоб избавиться от него, открываем default.css и добавляем в любом удобном месте:

.s-slider-section .s-slider-block .s-slide-wrapper {height:460px!important;}
.s-slider-section .s-slider-block {height:auto!important;}

Тем самым мы меняем подход к формированию высоты блока слайдера и он становится виден только в том случае, если в нем присутствуют слайды (промо-карточки). Можно эти стили изменить в home.slider.css, но облачным пользователям до него не добраться, насколько я понимаю, а для остальных легче будет найти default.css.

Повторюсь - это решение актуально только если вы не пользуетесь выводом остальных видов слайдов (товары).

Буду благодарен за критику и корректировку решения от экспертов.

0 комментариев

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

    Чтобы добавить комментарий, зарегистрируйтесь или войдите