ПЗ Караулова В.С. (1231750), страница 8

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 8)

<![endif]-->

<style>

@import url("styles/style.css");

@import url(http://fonts.googleapis.com/css?family=Lobster|Didact+Gothic|Exo+2:400,100,100italic,200,200italic,300,300italic&subset=latin,cyrillic);

</style>

<script src="[[++assets_url]]components/themebootstrap/js/jquery.min.js">

</script>

</head>

Код содержит два мета-тега с определением кодировки web-страницы и описание страницы для поисковых сервисов. Так же код содержит заголовок, который выводится в названии страницы при открытии ее браузером. Так же код подключает файл стилей style.css и шрифты.

Исходный код чанка Header_Str, который реализует шапку сайта представлен ниже.

<header>

<div class="topheader">

<a href="[[~1]]"> Главная </a>

<a href="[[~7]]"> Каталог </a>

<a href="[[~4]]"> О нас </a>

<a href="[[~5]]"> Оплата и доставка </a>

<a href="[[~6]]"> Контакты </a>

</div>

<div class="header">

<p><a href="[[~1]]"><img class="main_lable" src="images/lable_b.png" alt="lable"></a></p>

<p><div class="contacts">

<p>телефон - 8 (423) 272‒73‒04</p>

<p> тел/факс - 8 (423) 233‒19‒08</p>

<p> эл. почта - khomolga@yandex.ru</p>

</div>

</p>

<div class="search">

<form class="form-inline" action="[[~10]]" method="post">

<input type="text" class="search-query" name="query" placeholder="Поиск товара" value="[[+mse.query]]" size="30"/>

<button class="btnl" type="submit">

<img src="images/loupe.png" alt="search"></button>

</form>

</div></div>

<div class="basket">

<a href='[[~9]]'><img src="images/shoping.png" alt="lable";> КОРЗИНА</a>

<span>[[!msMiniCart]]</span>

</div>

</header>

Код содержит блок с ссылками на страницы, блок с контактной информацией, блок со строкой поиска и блок перехода в корзину. В блоке перехода в корзину вызывается сниппет, отвечающий за показ мини-корзины (динамическое отображение данных о количестве и суммарной стоимости добавленных в корзину товаров). Сниппет принадлежит модулю miniShop2.

Стандартный чанк tpl.msMiniCart вывода результата, выводимый сниппетом был изменен и имеет исходный код, представленный ниже.

<div id="MiniCart"

[[+total_count:isnot=`0`:then=`class="full"`:else=``]]>

<div class="not_empty">

[[%ms2_minicart_goods]]

<strong class="ms2_total_count">[[+total_count]]</strong>

[[%ms2_frontend_count_unit]],

[[%ms2_minicart_cost]]

<strong class="ms2_total_cost">[[+total_cost]]</strong>

[[%ms2_frontend_currency]]

</div>

</div>

Данный код содержит блок количества и суммарной стоимости добавленных в корзину товаров.

Исходный код подвала сайта представлен ниже.

<footer>

<div class="footercontacts">

<a href="[[~1]]"> <img src="images/lable3.png"></a>

<p>телефон - 8 (423) 272‒73‒04</br>

тел/факс - 8 (423) 233‒19‒08</br>

эл. почта - khomolga@yandex.ru</p>

<p>Владивосток, 2015</p>

</div>

<div class="footermenu">

<a href="[[~1]]"> Главная </a>

<a href="[[~7]]"> Каталог </a>

<a href="[[~4]]"> О нас </a>

<a href="[[~5]]"> Оплата и доставка </a>

<a href="[[~6]]"> Контакты </a>

</div>

<p>[STROYMAG] - удобный интернет магазин, в котором легко совершить покупку.

</br> Вы можете быть уверены в качестве обслуживания и товаров.</br>Позвоните нам - мы ответим на любые вопросы!

</p>

<p>Designed by Viktoria Karaulova</p>

</footer>

В данном коде прописана контактная информация, ссылки на основные страницы, а так же некоторая рекламной информации о магазине.

Каждая страница имеет свой набор структурных элементов. Такой набор наглядно выносить с шаблон. Для сайта Интренет-магазина «Строймаг» сделаны пять шаблонов страниц, HTML-код которых представлен в приложении В.

Шаблон главной страницы содержит такие элементы как заголовок (Head_Str), шапка главной страницы (Header_Str_Main), меню (Nav_Str), информативное содержание (*content) и подвал (Footer_Str_Main).

Исходный HTML-код меню представлен в приложении Г.

Информативное содержание описано в содержании ресурса. В исходном коде, представленном ниже показано содержание ресурса главной страницы.

<div id="content">

<div class="slider">

<ul>

<li><img src="images/welcome.jpg" alt=""></li>

<li><img src="images/tegola.jpg" alt=""></li>

<li><img src="images/wow.jpg" alt=""></li>

</ul>

</div>

<h3>&#8594; НОВЫЕ ТОВАРЫ &#8592;</h3>

<div class="products">

[[msProducts?

&parents=`0`

&depth=`3`

&limit=`6`

&tpl=`tpl.msProducts.row2`

&where=`{"Data.new":1}`]]

</div>

<h3>&#8594; ПОПУЛЯРНЫЕ ТОВАРЫ &#8592;</h3>

<div class="products">

[[msProducts?

&parents=`0`

&depth=`3`

&limit=`12`

&tpl=`tpl.msProducts.row2`

&where=`{"Data.popular":1}`]]

</div>

</div>

Данный код содержит блок с изображениями для промо-блока, а так же блоки новых и популярных товаров. Они вызываются с помощью стандартного сниппета miniShop2 – msProducts с настройками глубины поиска товара по каталогу, ограничению количества вывода, выбор по параметру, а так же применен специальный чанк, отвечающий за вид вывода информации (tpl.msProducts.row2), код шаблона представлен ниже.

<div class="col-md-3 ms2_product">

<img src="[[+thumb:default=`[[++assets_url]]components/minishop2/img/web/ms2_small.png`]]" width="120" height="90" /><br/>

<form method="post" class="ms2_form">

<p><a href="[[~[[+id]]]]">[[+pagetitle]]</a></p>

<center>[[+price]] [[%ms2_frontend_currency]]</center>

<br/>

<button class="bttn btn-default" type="submit" name="ms2_action" value="cart/add">

<i class="glyphicon glyphicon-barcode"></i>

[[%ms2_frontend_add_to_cart]]

</button><br/>

[[!AddComparison?list_id=`18`&id=`[[+id]]`]]

<input type="hidden" name="id" value="[[+id]]">

<input type="hidden" name="count" value="1">

<input type="hidden" name="options" value="[]">

</form>

</div>

Код данного шаблона является измененным и доработанным под решение для Интернет-магазина «Строймаг» со стандартного чанка tpl.msProducts.row, предоставляемого модулем miniShop2, содержит изображение товара, название, цену и кнопку добавления в корзину.

Шаблон страницы каталога содержит такие элементы как заголовок (Head_Str), шапка главной страницы (Header_Str), меню (Nav_Str), навигация по глубине каталога (Crumbs_Str), информативное содержание (*content) и подвал (Footer_Str). Шаблон страницы каталога применен ко всем созданным подкаталогам Интернет-магазина.

HTML-код навигации по глубине каталога (хлебные крошки) представлен ниже.

<h3>[[+pagetitle]]</h3>

<p>[[+introtext]]</p>

[[pdoCrumbs?

&showAtHome=`0`

&showHome=`1`

&outputSeparator=``

&tpl=`@INLINE <a href="[[+link]]">[[+menutitle]]</a>`

&tplCurrent=`@INLINE <a class="active">[[+menutitle]]</a>`

&tplWrapper=`@INLINE

<div class="breadcrumb">[[+output]]</div>`

&outputSeparator=` &rarr; `]]

</br>

Данный код вызывает сниппет pdoCrumbs, предоставляемый модулем pdoTools. Для сниппета прописаны определенные настройки.

Информативное содержание описано в содержании ресурса. Ниже представлено содержание ресурса страницы каталога.

<div id="content">

</br><h3 class="catalog">&#8594; [[*pagetitle]] &#8592;</h3>

<div>

[[!pdoPage?

&element=`msProducts`

&tpl=`tpl.msProducts.row3`

&limit=`30`

&tplPageWrapper=`@INLINE

<div class="pagination">[[+first]] [[+prev]] [[+pages]] [[+next]] [[+last]]

</div>`]]

[[!+page.nav]]

</div>

</div>

Помимо названия каталога или подкаталога данный код вызывает сниппет pdoPage модуля pdoTools, формирующий страницу с набором элементов. В данном случае – товаров. В настройках сниппета за выборку товаров отвечает вызываемый сниппет msProducts, чанк оформления результата tpl.msProducts.row3 является измененным и доработанным под решение для Интернет-магазина «Строймаг» со стандартного чанка tpl.msProducts.row. Так же в настройке сниппета прописано ограничение на количество вывода товаров и при превышении данного количества товаров будут созданы последующие страница с постраничной навигацией. HTML-код чанка tpl.msProducts.row3 представлен ниже.

<div class="row ms2_product">

<div ><img class="img" src="[[+thumb:default=`[[++assets_url]]components/minishop2/img/web/ms2_small.png`]]" width="120" height="90" /></div>

<div class="row span10 col-md-10">

<form method="post" class="ms2_form">

<a href="[[~[[+id]]]]">[[+pagetitle]]

<span class="price">[[+price]] [[%ms2_frontend_currency]]

</br>

<span class="oldprice">[[+old_price]]</span></span></a>

<p>Артикул: [[+article]]</br>

Вес: [[+weight]]</br>

Страна: [[+made_in]]</br>

Количество: <input type="number" name="count" value="1" size="10">

<button type="submit" class="btn btn-default" name="ms2_action" value="cart/add"><i class="glyphicon glyphicon-barcode"></i> [[%ms2_frontend_add_to_cart]]</button>

</p>

<span class="flags">[[+new]] [[+popular]] [[+favorite]]

</span>

<input type="hidden" name="id" value="[[+id]]">

<input type="hidden" name="options" value="[]">

</form>

</div></div><br/>

Данный код выводит изображение товара, и некоторые данные о товаре, а так же кнопку добавления в корзину.

Шаблон страницы корзины и оформления заказа содержит такие элементы как заголовок (Head_Str), шапка главной страницы (Header_Str), вывод добавленных товаров в корзину (msCart) и форма оформления заказа (msOrder), а так же подвал (Footer_Str).

Вывод товаров, добавленных в корзину происходит посредством вызова сниппета msCart от модуля miniShop2. Незначительные изменения для данного сниппета содержатся в чанках оформления результата. Так, стандартные чанки пустой корзины (tpl.msCart.empty), таблицы данных (tpl.msCart.outer), строки товара в корзине (tpl.msCart.row) были несколько изменены. Html-код измененного чанка tpl.msCart.empty приведен ниже.

<p class="emp_bas">[[%ms2_cart_is_empty]]</p>

Данный код выводит сообщение о том, что корзина пуста. Исходный код измененного чанка tpl.msCart.outer приведен ниже.

Характеристики

Список файлов ВКР