Использование промо-карточки и слайдер вместе Есть решение

Question

Опубликовано: 5 декабря 2015

Использование промо-карточки и слайдер вместе Есть решение

Добрый день. Спасибо за прекрасную тему.

Вопрос о слайдере и промо-карточках. я хотел бы показывать в слайдере одни предложения, в блоке промо-карточки который активировал по этой инструкции другие. Как это сделать? В свойствах промокарточки не нашел такой параметр.

пример реализации http://www.euro-interiors.co.uk/

Спасибо

промо-карточка

2

Artem D

Комментарии (8)

Решение

Тирон Александр 7 декабря 2015 10:44 #

Можно просто ограничить вывод количества карточек в слайдере, а вывод блока ниже слайдера начать с определенного номера.

1) В файле homepage.slider.html заменим код:

{foreach $promocards as $promo}
                    <li style="background-image: url('{$promo.image}');">
                        <a href="{$promo.link|escape}">
                            {if !empty($promo.title)}<h3>{$promo.title|escape}</h3>{/if}
                            {if !empty($promo.body)}<p>{$promo.body}</p>{/if}
                        </a>
                    </li>
                {/foreach}

кодом:

{foreach $promocards as $promo}
{if $promo@iteration < 5}
                    <li style="background-image: url('{$promo.image}');">
                        <a href="{$promo.link|escape}">
                            {if !empty($promo.title)}<h3>{$promo.title|escape}</h3>{/if}
                            {if !empty($promo.body)}<p>{$promo.body}</p>{/if}
                        </a>
                    </li>
{/if}
                {/foreach}

2) В файле home.html заменим код:

{foreach $promocards as $promo}
                --><li id="s-promo-{$promo.id}">
                    <a href="{$promo.link|escape}" style="background-image: url('{$promo.image}');">
                        <div class="background-color-layer"></div>
                        {if !empty($promo.title)}<h5 style="color: {$promo.color};">{$promo.title|escape}</h5>{/if}
                        {* if !empty($promo.body)}<p style="color: {$promo.color};">{$promo.body|escape}</p>{/if *}
                    </a>
                </li><!--
            {/foreach}

кодом:

{foreach $promocards as $promo}
{if $promo@iteration >= 5}
                --><li id="s-promo-{$promo.id}">
                    <a href="{$promo.link|escape}" style="background-image: url('{$promo.image}');">
                        <div class="background-color-layer"></div>
                        {if !empty($promo.title)}<h5 style="color: {$promo.color};">{$promo.title|escape}</h5>{/if}
                        {* if !empty($promo.body)}<p style="color: {$promo.color};">{$promo.body|escape}</p>{/if *}
                    </a>
                </li><!--
{/if}
            {/foreach}

Теперь в слайдере будут показаны все промокарточки до пятой карточки, а в блоке под слайдером все после пятой карточки включая и ее.

1

ответить

Тирон Александр 18 января 2016 10:36 #

Проверьте то что сделали, скорее всего вы где то ошиблись. Попробуйте восстановить файл из оригинала и проделать эти операции еще раз.

1

ответить

Илья Кабазов 5 июня 2016 22:24 #

Александр, как в новой версии теперь сделать тоже самое?
Заранее спасибо.

1

ответить

Тирон Александр 6 июня 2016 11:12 #

В новой версии пункт первый следует выполнить в файле slider.promos.html, только в первых двух циклах, которые начинаются строками:

{foreach $promos as $promo}

Пункт два остается неизменным.

1

ответить

Илья Кабазов 9 июня 2016 00:20 #

Заменил в Сайт-Дизайн-Шаблоны в slider.promos.html

{foreach $promos as $promo}
                    <li class="gps-user-image-tag">
                        <a href="{$promo.link|escape}">
                            <img src="{$promo.image}" alt="{$promo.title|escape}">
                            <div class="gps-user-caption">
                                {if !empty($promo.title)}<h3>{$promo.title|escape}</h3><br />{/if}
                                {if !empty($promo.body)}<div class="gps-user-body">{$promo.body|strip}</div>{/if}
                                {if !empty($promo.countdown_datetime) && time() <= strtotime($promo.countdown_datetime)}
                                    <div class="countdown">
                                        <span class="js-promo-countdown"
                                              data-start="{date('Y-m-d H:i:s')}"
                                              data-end="{$promo.countdown_datetime}">
                                        </span>
                                    </div>
                                {/if}
                            </div>
                        </a>
                    </li>
                {/foreach}

и

{foreach $promos as $promo}
                    <li class="gps-user-image-background" style="background-image:url({$promo.image});">
                        <a href="{$promo.link|escape}">
                            <div class="gps-user-caption">
                                {if !empty($promo.title)}<h3>{$promo.title|escape}</h3><br />{/if}
                                {if !empty($promo.body)}<div class="gps-user-body">{$promo.body|strip}</div>{/if}
                                {if !empty($promo.countdown_datetime) && time() <= strtotime($promo.countdown_datetime)}
                                    <div class="countdown">
                                        <span class="js-promo-countdown"
                                              data-start="{date('Y-m-d H:i:s')}"
                                              data-end="{$promo.countdown_datetime}">
                                        </span>
                                    </div>
                                {/if}
                            </div>
                        </a>
                    </li>
                {/foreach}

на

{foreach $promocards as $promo}
{if $promo@iteration < 5}
                    <li style="background-image: url('{$promo.image}');">
                        <a href="{$promo.link|escape}">
                            {if !empty($promo.title)}<h3>{$promo.title|escape}</h3>{/if}
                            {if !empty($promo.body)}<p>{$promo.body}</p>{/if}
                        </a>
                    </li>
{/if} 
{/foreach}

(оба правила)

и второй пункт Магазин-Витрина-Шаблоны на

{foreach $promocards as $promo}
{if $promo@iteration >= 5}
                --><li id="s-promo-{$promo.id}">
                    <a href="{$promo.link|escape}" style="background-image: url('{$promo.image}');">
                        <div class="background-color-layer"></div>
                        {if !empty($promo.title)}<h5 style="color: {$promo.color};">{$promo.title|escape}</h5>{/if}
                        {* if !empty($promo.body)}<p style="color: {$promo.color};">{$promo.body|escape}</p>{/if *}
                    </a>
                </li><!--
{/if} 
{/foreach}

Баннеры вовсе пропали, выглядит теперь вот так:

Сайт: www.alllan.ru

Я сделал что-то не верно?

1

ответить

Тирон Александр 9 июня 2016 10:57 #

Да, вы сделали неверно, слепо все менять не нужно - можно же было найти отличия кода в 1 пункте и добавить это отличие в новый файл. Суть же всего лишь в условии:
{if $promo@iteration < 5}
...
{/if}
вот эти две строки следовало добавить после {foreach} и перед {/foreach} соответственно

1

ответить

Тирон Александр 20 июня 2016 11:41 #

Версия темы оформления оформления у вас какая?

1

ответить

Vyacheslav Fedorov 22 июня 2016 00:23 #

1.2.0

1

ответить

Тирон Александр 22 июня 2016 10:38 #

Если нужно выводить блок возле большого слайдера, то в файле home.html строку:
{include file="homepage.slider.html" inline}
замените строками:
<div class="row-grid"> <div class="col-grid s12 l8"> {include file="homepage.slider.html" inline} </div> <div class="col-grid s12 l4"> Тут код вашего блока </div> </div>
*где замените код вашего блока на код нужного вам блока

1

ответить
Тирон Александр 26 июля 2016 15:55 #

Для версии 1.2.0 в файле slider.promos.html(приложения Сайт) после строки:
{foreach $promos as $promo}
вставить строку:
{if $promo@iteration >= 5}
перед строкой(парный закрывающий тег):
{/foreach}
вставить строку:
{/if}
В файле home.html(приложения Магазин) после строки:
{foreach $promocards as $promo}
вставить строку:
{if $promo@iteration < 5}
перед строкой(парный закрывающий тег):
{/foreach}
вставить строку:
{/if}

1

ответить

Vyacheslav Fedorov 30 июля 2016 19:06 #

Не получается чего то у меня, вот кусок моего кода: home.html

{if $promocards && $theme_settings.homepage_promocards_below_the_slider}
<div class="promos">
<ul>
{foreach $promocards as $promo}
{if $promo@iteration < 5}
<li id="s-promo-{$promo.id}">
<a href="{$promo.link|escape}" style="background-image: url('{$promo.image}');">
<div class="background-color-layer"></div>
{if !empty($promo.title)}<h5 style="color: {$promo.color};">{$promo.title|escape}</h5>{/if}
{* if !empty($promo.body)}<p style="color: {$promo.color};">{$promo.body|escape}</p>{/if *}
</a>
</li>
{/if}
{/foreach}
</ul>
</div>
{/if}
Второй файл slider.promos.html
{if !empty($promos)}
{if count($promos) < 2}{$pager = false}{$autoplay = false}{/if}
{if empty($imageBackground)}{$adaptiveHeight = true}{/if}
{$options = [
'mode' => $mode|default:'horizontal',
'infiniteLoop' => $loop|default:true,
'hideControlOnEnd' => $autoHideControl|default:false,
'speed' => $speed|default:500,
'adaptiveHeight' => $adaptiveHeight|default:false,
'pager' => $pager|default:true,
'auto' => $autoplay|default:false,
'pause' => $pause|default:4000,
'autoHover' => false,
'imageBackground' => $imageBackground|default:false
]}
<article class="global-promo-slider">
<ul class="gps-bxslider" data-options='{json_encode($options)}' style="position:relative;list-style:none;">
{if empty($imageBackground)}
{foreach $promos as $promo}
{if $promo@iteration >= 5}
<li class="gps-user-image-tag">
<a href="{$promo.link|escape}">
<img src="{$promo.image}" alt="{$promo.title|escape}">
<div class="gps-user-caption">
{if !empty($promo.title)}<h3>{$promo.title|escape}</h3><br />{/if}
{if !empty($promo.body)}<div class="gps-user-body">{$promo.body|strip}</div>{/if}
{if !empty($promo.countdown_datetime) && time() <= strtotime($promo.countdown_datetime)}
<div class="countdown">
<span class="js-promo-countdown"
data-start="{date('Y-m-d H:i:s')}"
data-end="{$promo.countdown_datetime}">
</span>
</div>
</div>
</a>
</li>
{/if}
{/if}
{/foreach}
{else}
{foreach $promos as $promo}
<li class="gps-user-image-background" style="background-image:url({$promo.image});">
<a href="{$promo.link|escape}">
<div class="gps-user-caption">
{if !empty($promo.title)}<h3>{$promo.title|escape}</h3><br />{/if}
{if !empty($promo.body)}<div class="gps-user-body">{$promo.body|strip}</div>{/if}
{if !empty($promo.countdown_datetime) && time() <= strtotime($promo.countdown_datetime)}
<div class="countdown">
<span class="js-promo-countdown"
data-start="{date('Y-m-d H:i:s')}"
data-end="{$promo.countdown_datetime}">
</span>
</div>
{/if}
</div>
</a>
</li>
{/foreach}
{/if}
</ul>
</article>

1

ответить

Тирон Александр 1 августа 2016 10:54 #

Нетрудно заметить что строк {foreach $promos as $promo} в этом тексте две.

1

ответить
Тирон Александр 2 августа 2016 10:17 #

Нет, нужно сделать то что описано тут:
http://wm-site.ru/profitbuy/432/ispolzovanie-promo-kartochki-i-slayder-vmeste/#comment1989

1

ответить

Добавить ответ

Artem D · Answer 1

Спасибо большое! Хоть и "костыль" но как временное решение спасет. Было бы оптимально если бы добавили в свой плагин "баннер категории" возможность вывода карточек в таком виде

Евгений Говорухин · Answer 2

Евгений Говорухин 17 января 2016 15:54 #

Все поменял как написано, но остальные карточки выводятся длинным списком вниз.

Подскажите как сделать именно такой вывод карточек, после большого слайдера?

1

ответить

Евгений Говорухин · Answer 3

Евгений Говорухин 18 января 2016 13:42 #

Все получилось, спасибо

А как добавить заголовок между большим слайдером и маленькими промо карточками?

1

ответить

Колмаков Игорь · Answer 4

в файле "home.html" перед блоком

{if $promocards && $theme_settings.homepage_promocards_below_the_slider}
<div class="promos">
<ul><li id="s-promo-{$promo.id}">
<a href="{$promo.link|escape}" style="background-image: url('{$promo.image}');">
<div class="background-color-layer"></div>
{if !empty($promo.title)}<h5 style="color: {$promo.color};">{$promo.title|escape}</h5>{/if}
{* if !empty($promo.body)}<p style="color: {$promo.color};">{$promo.body|escape}</p>{/if *}
</a>
</li></ul>
</div>
{/if}

Пропишите

<h1>Заголовок</h1>

Vyacheslav Fedorov · Answer 5

Vyacheslav Fedorov 18 июня 2016 12:23 #

Поясните и мне пожалуйста чтона что нужно заменить в файле homepage.slider.html

Спасибо

1

ответить

Vyacheslav Fedorov · Answer 6

Vyacheslav Fedorov 26 июля 2016 13:01 #

Я может не так обьяснил что мне нужно. Мне нужно что бы в карточках выводились первые 6 промоблоков, остальное выводилось в слайдере.

1

ответить

Vyacheslav Fedorov · Answer 7

Vyacheslav Fedorov 1 августа 2016 17:48 #

Нужно удалить одну строку? Какую именно?

1

ответить

			Коломна, ул. Кирова, 60а, офис 7 +7 (995) 656-25-45 kolmakov.igor@gmail.com
Дорогие друзья! К сожалению, Ваш браузер не поддерживает современные технологии используемые на нашем сайте.
Пожалуйста, обновите браузер, скачав его по ссылкам ниже, или обратитесь к системному администратору, обслуживающему Ваш компьютер.
Internet Explorer от Microsoft	Chrome от Google	Safari от Apple	Opera от Opera Software	Firefox от Mozilla

Использование промо-карточки и слайдер вместе Есть решение

Комментарии (8)

Добавить ответ

Услуги

Готовые решения

Разделы сайта

Контакты

Дорогие друзья!