Oтзывы и предложения для начинающим с Prestashop

webnewbie

По правилам и без

Создание модуля ч.2

Автор Патешин Евгений Мар - 11 - 2013 Комментариев: 8

заставка2

В первой части мы должны были добавить в папку нашего модуля proba_gallery файлы из урока. Всего должно быть 8 файлов. Вся визуальная информация будущего слайдера находиться в файле index.html, можете попробовать запустить его и вы увидите что у нас примерно должно получиться.

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

Открываем файл index.html с помощью Notepad++

index.html

<!DOCTYPE html>
<html lang="ru" >
    <head>
        <meta charset="utf-8" />
        <title>Слайдер CSS3 | Материалы сайта</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header tabindex="0">
            <h2>Слайдер CSS3</h2>
            <a  href="http://www.ruseller.com" class="stuts" target="_blank">Материалы сайта <span>RUSELLER.COM</span></a>
        </header>

        <div class="slides">
            <ul> <!-- Слайды -->
                <li><img src="images/pic1.jpg" alt="image01" />
                    <div>Описание #1</div>
                </li>
                <li><img src="images/pic2.jpg" alt="image02" />
                    <div>Описание #2</div>
                </li>
                <li><img src="images/pic3.jpg" alt="image03" />
                    <div>Описание #3</div>
                </li>
                <li><img src="images/pic4.jpg" alt="image04" />
                    <div>Описание #4</div>
                </li>
            </ul>
        </div>

    </body>
</html>

Включаем смекалку, не вся информация нам нужна. После тега title (6 строка) видим ссылку на файл CSS-это файл описания внешнего вида картинок, это нам надо


На этом сайте вы сможете разместить свою строчную или баннерную рекламу. Прием средств осуществляется в автоматическом режиме через сервис Мерчант WebMoney. Стоимость размещения рекламы 10 руб за 1000 показов. Подробности по ссылке в форме выше. 

<link href="css/main.css" rel="stylesheet" type="text/css" />

После тега header идет тело визуального кода начинающегося с  div class=»slides, там даже есть подсказка «слайды»

<div class="slides">
            <ul> <!-- Слайды -->
                <li><img src="images/pic1.jpg" alt="image01" />
                    <div>Описание #1</div>
                </li>
                <li><img src="images/pic2.jpg" alt="image02" />
                    <div>Описание #2</div>
                </li>
                <li><img src="images/pic3.jpg" alt="image03" />
                    <div>Описание #3</div>
                </li>
                <li><img src="images/pic4.jpg" alt="image04" />
                    <div>Описание #4</div>
                </li>
            </ul>
        </div>

Далее открываем файл proba_gallery.tpl редактором Notepad++

<div  class='block'>
                <h4>
                        <a title='proba_gallery' href='#' >proba_gallery</a>
                </h4>
                <div class='block_content'  style='text-align:center'>
                        <br /><p>=> proba_gallery <=</p><br /> 
                </div>    
        </div>

Немного поясню, если вы хотите что бы над модулем была шапка то вам необходимо оставить строки со 2 по 4, строки с 5 по 7 это наш контент модуля, т.е. тело модуля, вместо него мы вставляем необходимые нам строки из index.html
Вот что должно получиться

<div  class='block'>              
                <link href="/modules/proba_gallery/css/main.css" rel="stylesheet" type="text/css" />
                <div class='block_content'  style='text-align:center'>
                        <div class="slides">
            <ul> <!-- Слайды -->
                <li><img src="/modules/proba_gallery/images/pic1.jpg" alt="image01" />
                    <div>Описание #1</div>
                </li>
                <li><img src="/modules/proba_gallery/images/pic2.jpg" alt="image02" />
                    <div>Описание #2</div>
                </li>
                <li><img src="/modules/proba_gallery/images/pic3.jpg" alt="image03" />
                    <div>Описание #3</div>
                </li>
                <li><img src="/modules/proba_gallery/images/pic4.jpg" alt="image04" />
                    <div>Описание #4</div>
                </li>
            </ul>
        </div>
                </div>    
        </div>

Прошу заметить, что я уже изменил путь к файлам CSS и картинкам, добавив путь /modules/proba_gallery/. Ведь теперь файлы нашего модуля будут находится на сервере именно по этому пути. Поступил я немного не по правилам Prestashop, где путь надо указывать как dirname(__FILE__)…., но по моему проще и понятнее и это работает, тем более что наш модуль работать будет только на одной-Главной странице. Не забудьте еще поправить описания, вместо, например, Описание #1 напишите заснеженные горы, а вместо Описание #4-зеленые холмы. Это для картинок нашего модуля, для своих вы придумаете свои слова.
Теперь внимание! Чтобы русские слова корректно отображались необходимо файл proba_gallery.tpl перекодировать, делается это просто в Notepad++ находите вкладку Кодировка, переходите в пункт Преобразовать в UTF-8 без BOM и сохраняете изменения.
Осталось поработать со стилями. зайдите в папку css и откройте Notepad-ом файл main.css.Что бы не пугать вас большим количеством кода я покажу только то что нам надо в этом файле. Стили шаблона урока нам не нужны, у нас есть сои стили в магазине, поэтому находите строчку 45 /* Слайдер */ эти стили нам и нужны, остальное выше 45 строки удаляем. В строке 7 изменяем 900px на 100%, это ширина слайда по отношению центральной колонке сайта. Должно получиться:

/* Слайдер */
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:100%;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* Кадры анимации #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* анимация css3 */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* Задержки css3 */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}

/* Кадры анимации #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* Анимация css3 */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

Наш модуль практически готов. Удаляем файл index.html. Вам остается только вставить в папку images свои картинки с именами pic1.jpg, pic2.jpg, pic3.jpg и pic4.jpg, загрузить модуль на сайт и установить его.
Готовый вариант модуля выложен в моем каталоге модулей.
Надеюсь статья вам понравилась и пригодилась.

Рубрики: Prestashop

Комментариев: 8

  1. Sergey:
    25.08.2013 в 15:43

    Хорошо, но как теперь создать какие-то поля чтобы можно было вводить информацию в админке, и она отображалась во фронт офисе?

    Ответить
  2. Sergey:
    25.08.2013 в 16:21

    Немного разобрался, но как теперь вывести на экран эту переменную в *.tpl, что я ввел в поле? и как можно использовать эти данные, введенные в поле формы потом в других частях сайта. например ввести название класса, и он будет прикреплен к какому-то тегу.

    Ответить

Оставить комментарий