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

заставка2

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

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

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

index.html
[php]
<!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>
[/php]
Включаем смекалку, не вся информация нам нужна. После тега title (6 строка) видим ссылку на файл CSS-это файл описания внешнего вида картинок, это нам надо
[php]
<link href="css/main.css" rel="stylesheet" type="text/css" />
[/php]
После тега header идет тело визуального кода начинающегося с  div class=”slides, там даже есть подсказка “слайды”
[php]
<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>
[/php]
Далее открываем файл proba_gallery.tpl редактором Notepad++
[php]
<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>
[/php]
Немного поясню, если вы хотите что бы над модулем была шапка то вам необходимо оставить строки со 2 по 4, строки с 5 по 7 это наш контент модуля, т.е. тело модуля, вместо него мы вставляем необходимые нам строки из index.html
Вот что должно получиться
[php]
<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>
[/php]
Прошу заметить, что я уже изменил путь к файлам 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%, это ширина слайда по отношению центральной колонке сайта. Должно получиться:
[php]
/* Слайдер */
.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;
}
[/php]
Наш модуль практически готов. Удаляем файл index.html. Вам остается только вставить в папку images свои картинки с именами pic1.jpg, pic2.jpg, pic3.jpg и pic4.jpg, загрузить модуль на сайт и установить его.
Готовый вариант модуля выложен в моем каталоге модулей.
Надеюсь статья вам понравилась и пригодилась.

Comments (9)

Sergey
25.08.2013 - 15:43 / Ответить

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

25.08.2013 - 15:49 / Ответить

для модулей ПрестаШоп 1.5 можете почитать тут же в блоге http://webnewbie.ru/modules/blogwp/wordpress/prestashop/detalnyj-analiz-modulya-prestashop-1-5.html, для 1.4 будет позже.

Sergey
25.08.2013 - 16:00 / Ответить

да, для 1.5. А где именно? мне нужно пару полей создать, которые будут заноситься в БД, а потом я мог их использовать где либо. Например данные о стилях, чтобы я потом мог цеплять разные классы к элементам.

25.08.2013 - 16:20 / Ответить

С базой данных Вы торопитесь, я пишу статьи от простого к сложному, советую посмотреть в модулях использующих БД и по аналогии сделать свои поля. А в двух словах тут не объяснить.

Sergey
25.08.2013 - 16:21 / Ответить

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

25.08.2013 - 16:42 / Ответить

почитайте вторую часть сатьи, ссылка выше

Sergey
25.08.2013 - 17:35 / Ответить

Спасибо.
Configuration value

*

у Вас написано * , а как вывести именно то значение что было введено в этом модуле из админки. И можно ли его вывести в любое место страницы?

Sergey
25.08.2013 - 17:36 / Ответить

sup>*</sup

Mirra88
23.10.2014 - 02:26 / Ответить

Спасибо! Всё получилось! А главное, что это единственная статья (из тех, которые я нашла), где содержание не перепечатано (с изменением порядка слов и наименований) из какого-то одного источника. Перепечатывают друг у друга, а в “первоисточнике” – недоработка. Что-то не досказано, в итоге – не ставится модуль. Тут написано своим языком и с проверкой на собственном опыте. Потому всё и получилось!

Leave a Reply