Добавление дополнительного слайдера с товарами в тему 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} – {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 });
Сборник полезных статей