Витрина "Standart": убираем крошки с главной страницы и добавляем (меняем) слайдер

Что бы удалить хлебные крошки с главной страницы и поместить туда слайдер, необходимо отредактировать шаблон index.tpl (/html/index.tpl). Для слайдера можно использовать любой скрипт, в качестве примера возьму TinySlider 2.

Учитывая ограниченные возможности, установить готовый слайдер, или сделать backend для него не получится, добавлять фото придется через FTP с правкой HTML кода, менять - путем добавления изображений через панель управления (если задавать одинаковые имена файлов).

Для начала зайтем на FTP и откроем для правки шаблон - /html/index.tpl

Удаление хлебных крошек с главной страницы

Найдем в шаблоне код, который отвечает за вывод хлебных крошек:

  <div class="breadcrumbs">
                <ul>
                    <li class="back-home"><a class="active-bghome" href="/"><span><img
                                        src="/design/images/pointer.gif"
                                        alt="home"></span></a></li>
                    <li class="center_text"><img src="/design/images/pointer-05.gif" alt=""></li>
                    <li class="home">
                        <a href="/">Главная</a>
                    </li>

                    {foreach from=$path item=place}
                        <li class="product">
                            <span>
                                <img src="/design/images/pointer-05.gif" alt="">
                            </span>
                            <a href="{$place->url}">{$place->name|escape}</a>
                        </li>
                    {/foreach}                     </ul>
            </div>

И добавим проверку на главную страницу. Отобразим только если находимся на главной

 {if ($quicky.server['REQUEST_URI']!='/')}
 {*-----Здесь должен быть код вывода хлебных крошек, который выше---- *}
{/if}

Добавление (замена) слайдера на главной

По умолчанию в шаблоне уже есть слайдер на главной странице - Owl carusel - его уберем.

Для начала скачаем слайдер - TinySlider 2 и раскидаем файлы по папкам, предварительно переименовав style.css слайдера в sliderstyle.css (такой файл в папке назначения уже есть):

Теперь подключим скрипт и таблицу стилей слайдера. в файле /html/index.tpl в самом начале добавим (будем грузить только на главной странице):

{if ($quicky.server['REQUEST_URI']=='/')}
<script type="text/javascript" src="/design/js/script.js"></script>
<link rel="stylesheet" type="text/css" href="/design/css/sliderstyle.css">
{/if}

Внесем изменения в таблицу стилей слайдера - заменим пути к изображениям - открываем файл /css/sliderstyle.css и меняем "images/" на "../images/"

Теперь сам блок слайдера. Находим:

 {if ($quicky.server['REQUEST_URI']==''||$quicky.server['REQUEST_URI']=='/') && $quicky.server['HTTP_HOST']=='demo.qnits.ru'}
                    <div id="owl-demo" class="owl-carousel">
                        <div><a href="#1"><img src="/design/images/banner.jpg"></a></div>
                        <div><a href="#2"><img src="/design/images/banner2.gif"></a></div>
                        <div><a href="#3"><img src="/design/images/banner3.gif"></a></div>
                        <div><a href="#4"><img src="/design/images/banner4.gif"></a></div>
                    </div>
                {/if}

И меняем на:

           {if ($quicky.server['REQUEST_URI']==''||$quicky.server['REQUEST_URI']=='/')}
<div id="slidecontainer">
<div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>
<div id="slider">
<ul>


    
<li>
<a href="/products/147159487-samsung-galaxy-note-edge">
<div class="price" class="title">42 000<br /><span>руб.</span></div>
<img src="/design/images/banner.jpg" alt="Samsung Galaxy" />
<div class="text">Смартфон от Samsung - Galaxy и здесь небольшой заголовок
</div>
</a>
</li>


<li>
<a href="/products/ssylka-na-stranicu">
<div class="price" class="title">3 875<br /><span>руб.</span></div>
<img src="/design/images/banner.jpg" alt="Какой то товар" />
<div class="text">Какой то товар, его описание сюда
</div>
</a>
</li>



</ul>
</div>
<div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div>

</div>
<script type="text/javascript">
{literal}
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:5,
resume:false,
vertical:false,

activeclass:'current',
position:0,
rewind:false,
elastic:true,
left:'slideleft',
right:'slideright'
});
{/literal}
</script>
{/if}

Соответственно следующая конструкция и будет отдельно взятый слайд:

<li>
<a href="/products/beats-pro-red-2013-naushniki">
<div class="price" class="title">3 875<br /><span>руб.</span></div>
<img src="/design/images/banner.jpg" alt="Наушники Beats Pro Red 2013" />
<div class="text">Наушники с отсоединяемым кабелем Beats Pro Red 2013
</div>
</a>
</li>

Если все работает, теперь осталось сделать изображения для слайдера нужного размера и внести изменения в таблицу стилей (/css/sliderstyle.css)

#slidecontainer {position: relative;}
.sliderbutton {position: absolute; width:25px; height:30px; cursor:pointer; top:40%; display: none; z-index: 100;}
#slidecontainer:hover .sliderbutton {display: block;}
#slideleft {background:url(../images/slidearr.png) 0px 0px no-repeat;
left: 5px;}
#slideleft:hover {background-position:0 -35px}
#slideright {background:url(../images/slidearr.png) -30px 0px no-repeat; right: 5px;}
#slideright:hover {background-position:-30px -35px}
#slider {position:relative; overflow:auto; width:980px; height:300px}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:980px; height:300px; position: relative;}
#slider li .title {position: absolute; top:10px; left: 0px; background: rgba(255, 255, 255, 0.72); padding: 5px 2%; width: 56.1%; color: #000;}
#slider li .text {position: absolute;
background: rgba(255, 255, 255, 0.76);
top: 25px;
width: 50%;
text-align: center;
right: 0px;
padding: 5px 80px 5px 5px;
color: #ff4806;
font-style: italic;
font-family: georgia;
line-height: 35px;
font-size: 25px;
text-shadow: 0px 0px 5px #fff;}
#slider .price{position: absolute;
background: #ff4205;
font-size: 2em;
font-style: italic;
bottom: 35px;
left: 50%;
text-align: center;
color: #fff;
border-radius: 100px;
width: 130px;
height: 90px;
padding-top: 40px;
font-weight: 300;}
#slider .price span {font-size: 0.6em;}
- изображение для навигации слайдера. поместите в каталог images

Еще 4 материала, которые возможно Вам понравятся:

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

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