Как прикрутить свой дизайн к магазину Simpla

/00:00 30-Ноя--1

image
В этой заметке я хочу показать вам процесс создания нового дизайна для интернет-магазина Simpla.

В корне файловой структуры магазина вы найдете папку design. Эта папка содержит так называемые темы дизайна. По умолчанию вам в распоряжение предоставлена примитивная тема «default» (/design/default/). Мы возьмем ее за основу при создании своей темы.

Весь процесс создания темы можно представить вот в таком виде:

image

Теперь рассмотрим процесс подробнее.

Макет дизайна


Желательно, чтобы макет дизайна соответствовал следующей структуре:
image
То есть, оформление магазина должно состоять из двух частей — общей части для всех страниц, и центральной части, которая меняется в зависимости от текущей страницы.

Верстка


Никаких специальных требований к верстке макета нет. Она может быть табличная, дивная, а может быть вообще wap-версия магазина. Верстайте так, как вам нравится.

CSS


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

В визуальном редакторе текста в панели управления автоматически подключаются ваши стили из файла /css/style.css. Таким образом обеспечивается одинаковое отображение текста при редактировании и на сайте. Учтите это.


Картинки


В папку images вы просто складываете все картинки для вашего дизайна.

Но есть одна особенная картинка, которая используется при отображении вашей темы в панели управления при выборе темы:
image
Эта картинка должна называться thumbnail.jpg и иметь размер 150x150px.

Шаблоны Smarty


В теме дизайна обязательно должны присутствовать следующие файлы:
image

По сути — практически весь внешний вид магазина задается шаблоном index.tpl, в центре которого подключаются шаблоны центрального блока, в зависимости от выбранного раздела сайта.

Просто копируем весь наш html в файл index.tpl.

После того как мы скопировали в index.tpl свой html-код, необходимо заменить дизайнерскую «рыбу» на соответствующие переменные:

Формируем мета-теги


Для того, чтобы на каждой странице магазина выводились нужные мета-теги, нужно использовать переменные $title, $keywords, $description. Вот так:

<title>{$title|escape}</title>
<meta name="description" content="{$description|escape}" />
<meta name="keywords" content="{$keywords|escape}" />



Так как в движке используется mod_rewrite, нужно добавить следующую строку в до любых обращений к ресурсам:
<base href="http://{$root_url}/">


Отображаем меню каталога товаров


Так как вложенность каталога неограничена — это меню вынесено в отдельный рекурсивный шаблон. Просто подключаем его:
{include file=categories.tpl categories=$categories}


Выводим меню сайта


Там, где у нас должно находится меню сайта, пишем примерно следующее:
{foreach from=$sections item=s}
<a tooltip='section' section_id='{$s->section_id}' href='sections/{$s->url}'>{$s->name|escape}</a>
{/foreach}


Отображаем выбор валюты


Для этого вставляем в шаблон вот такую форму:
<form name=currency method=post>
<p>валюта магазина:
<select tooltip=currency name="currency_id" onchange="window.document.currency.submit();">
{foreach from=$currencies item=c}
<option value="{$c->currency_id}" {if $c->currency_id==$currency->currency_id}selected{/if}>
{$c->name|escape}
</option>
{/foreach}
</select>
</p>
</form>


Формируем корзину пользователя


{if $cart_products_num}
В <a href="cart/">корзинe</a> {$cart_products_num} товаров
на сумму {$cart_total_price*$currency->rate_from/$currency->rate_to|string_format:"%.2f"} {$currency->sign|escape}
{else}
Корзина пуста
{/if}


Создаем форму поиска


<form name=search method=get action="index.php" onsubmit="window.location='search/'+this.keyword.value; return false;">
<input type=hidden name=module value=Search>
<input type="text" name=keyword value="{$keyword|escape}"/><input type="submit" value="Найти"/>
</form>


Подключаем «счастье админа»


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

{if $smarty.session.admin == 'admin'}
<script src="js/admintooltip/php/admintooltip.php" language="Javascript" type="text/javascript"></script>
<link href="js/admintooltip/css/admintooltip.css" rel="stylesheet" type="text/css" />
{/if}


Далее для тех объектов, над которыми должны всплывать меню, нужно добавить два параметра: tooltip и object_id. Например, для разделов меню:
<span tooltip='section' section_id='{$s->section_id}'>{$s->name|escape}</span>


И, самое главное, выводим основную часть страницы


Скрипт формирует центральную часть страницы из соотвествующих шаблонов, а в index.tpl мы просто вставляем переменную {$content}. Как-то так:
<div id="main_content">
  {$content}
</div>




Вот и все, новый дизайн прикручен. Если того требует макет дизайна, можно изменить и остальные шаблоны, задающие центральную часть. В каждом шаблоне описаны переменные, которые в нем используются, поэтому изменения не составят труда.

Конечно, в здесь я описал далеко не все возможности, касающиеся изменения дизайна. Но надеюсь, что это будет достаточным толчком для того чтобы вы сами попробовали это на практике.

PS Приглашаю вас к участию в создании шаблонов, которые с удовольствием покупали бы обладатели Симплы.

Поделиться с друзьями

Twitter Mail Facebook MySpace Linkedin Digg Google Delicious Stumbleupon Addthis
Все права на материалы принадлежат их уважаемым авторам. редакция портала не может нести ответственность за достоверность информации, содержащейся в комментариях пользователей.