Добавление дополнительного слайдера с товарами в тему Flamingo

Если у вас появилась необходимость добавить новый слайдер с товарами (один уже установлен). Вам надо сделать следующее.

1) Открыть файл home.html и добавить блок перед кодом {if $wa->blog}

<div class="row-fluid toppadding">
    <div class="span12 foto">
           <h3>[`New products`]</h3>
        <hr>
        {$promos = $wa->shop->productSet('promo')}
        {if $promos && count($promos)}
            <div class="list_carousel">
                <a id="prev2" class="prev" href="#"><img src="{$wa_theme_url}img/prev.png" alt="Previos"></a>
                <a id="next2" class="next" href="#"><img src="{$wa_theme_url}img/next.png" alt="Next"></a>
                <ul id="slider_promo">
                {foreach $promos as $p}
                    <li>
                    <div class="img_fix_carousel">
                        <a href="{$p.frontend_url}" title="{$p.name}{if $p.summary} &ndash;  {strip_tags($p.summary)|escape}{/if}">{$wa->shop->productImgHtml($p, '0x200', ['alt' => $p.name, 'default' => "`$wa_theme_url`img/no-foto-catalog.gif"])}</a>
                        {$badge_html = $wa->shop->badgeHtml($p.badge)}{if $badge_html}{$badge_html}{/if}
                    </div>
                    <h5>{$p.name}</h5> {if $p.compare_price > 0}<s>{shop_currency($p.compare_price)}</s>{/if}     <p class="purchase"><span class="price nowrap">{shop_currency($p.price)}</span></p>
                    </li>
                {/foreach}                
                </ul>
            </div>
            {else}
        <p class="hint text-center">{sprintf('[`Product set with the ID %s either does not exist or does not contain any product. Add some products into a product set with the specified ID to make these products featured here.`]','promo')}</p>
            {/if}
    </div>
</div>

2) В этом коде вам необходимо заменить следующие переменные

а) Заменить идентификатор слайдера

{$promos = $wa->shop->productSet('promo')} - на название вашего нового слайдера в магазине.

Например: {$promos = $wa->shop->productSet('sales')}. Название списка в магазине с ID = sales

б) Изменить параметр <ul id="slider_promo"> на <ul id="slider_sales"> (идентификатор должен быть уникален для каждого слайдера)

в) Изменить параметры управления (стрелки). Т.к. мы скопировали код с нашего единственного слайдера товаров, то стрелки управления (влево-вправо) будут управлять нашим первым слайдером. Нам необходимо управлять именно вторым слайдером товаров, поэтому измените в только что вставленном коде следующие строчки:

<a id="prev2" class="prev" href="#"> на <a id="prev3" class="prev" href="#">

и

<a id="next2" class="next" href="#"> на <a id="next3" class="next" href="#">

3) Осталось прописать код слайдера в файле script.js (откройте его)

После кода $(document).ready(function () { добавьте код

$("#slider_promo").carouFredSel({
        prev : '#prev2',
        next : '#next2',
        circular : true,
        scroll : {
            timeoutDuration : 8000,
        },
        infinite : false,
        auto : true
    });

В этом коде замените #slider_promo на #slider_sales

и замените prev : '#prev2', next : '#next2', на prev : '#prev3',next : '#next3', (управление нашим слайдером)

В итоге у нас должен получиться код

$("#slider_sales").carouFredSel({
        prev : '#prev3',
        next : '#next3',
        circular : true,
        scroll : {
            timeoutDuration : 8000,
        },
        infinite : false,
        auto : true
    });

Смотрите также: