1587 читателей, 86 постов
Как прикрутить свой дизайн к магазину Simpla
В этой заметке я хочу показать вам процесс создания нового дизайна для интернет-магазина Simpla.
В корне файловой структуры магазина вы найдете папку design. Эта папка содержит так называемые темы дизайна. По умолчанию вам в распоряжение предоставлена примитивная тема «default» (/design/default/). Мы возьмем ее за основу при создании своей темы.
Весь процесс создания темы можно представить вот в таком виде:
Теперь рассмотрим процесс подробнее.
Макет дизайна
Желательно, чтобы макет дизайна соответствовал следующей структуре:
То есть, оформление магазина должно состоять из двух частей — общей части для всех страниц, и центральной части, которая меняется в зависимости от текущей страницы.
Верстка
Никаких специальных требований к верстке макета нет. Она может быть табличная, дивная, а может быть вообще wap-версия магазина. Верстайте так, как вам нравится.
CSS
Файлы стилей, которые вы используете в своем дизайне, должны лежать в папке css, тогда они будут доступны для редактирования через панель управления магазином.
В визуальном редакторе текста в панели управления автоматически подключаются ваши стили из файла /css/style.css. Таким образом обеспечивается одинаковое отображение текста при редактировании и на сайте. Учтите это.
Картинки
В папку images вы просто складываете все картинки для вашего дизайна.
Но есть одна особенная картинка, которая используется при отображении вашей темы в панели управления при выборе темы:
Эта картинка должна называться thumbnail.jpg и иметь размер 150x150px.
Шаблоны Smarty
В теме дизайна обязательно должны присутствовать следующие файлы:
По сути — практически весь внешний вид магазина задается шаблоном 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>
* This source code was highlighted with Source Code Highlighter.Вот и все, новый дизайн прикручен. Если того требует макет дизайна, можно изменить и остальные шаблоны, задающие центральную часть. В каждом шаблоне описаны переменные, которые в нем используются, поэтому изменения не составят труда.
Конечно, в здесь я описал далеко не все возможности, касающиеся изменения дизайна. Но надеюсь, что это будет достаточным толчком для того чтобы вы сами попробовали это на практике.
PS Приглашаю вас к участию в создании шаблонов, которые с удовольствием покупали бы обладатели Симплы.
комментарии (66)
Частенько заказывают верстку с интеграцией в какую-нибудь экзотическую cms, однако симпа еще ни разу не попадалась, все таки не так она распространена еще(
Обожаю когда делают такие кратенькие мануалы, а то ковыряться в коде или в тоннах документации — не очень правильный выбор, особенно когда работу нужно выполнить быстро.
ps. А почему минусуют? О_о
Все таки статья по большей части по прикрутке дизайна, а кто чем пользуется — это личный выбор.
2) Непонятно, где найти хорошо оптимизированный и высокопроизводительный (а не написанный тяп-ляп) обработчик XSL
Или вы про обработчик, встроенный в браузер говорите?
Сам возненавидел его когда пришлось с ним работать. Но теперь, когда я с ним рабобрался, то удивляюсь почему он не стандарт де-факто? Почему любят использовать всякие смарти и прочие темплейты?
В принципе возможности XSLT несравнимо богаче в части обработки XML, но логика там принципиально отличается от того, к чему привыкли в php-шаблонах.
2. ????
На браузере xsl :)
Перефразирую: xsl обрабатывается не медленнее шаблонов.
Попробуйте и вы.
А по умолчанию php (он и сам шаблонизатор).
Да, предоставьте наконец выбор пользователю, что вы делаете только для себя.
Один блин xslt выбрал, другой Смарти.
Предоставьте выбор пользователю, вы для них делаете cms.
Если вы про систему адаптеров, чтобы можно было подключить любой шаблонизатор, то это бессмысленная и ненужная затея. Никто не меняет шаблонизаторы по 10 раз на дню, чтобы она была нужна, кроме ZF никто вроде такими извращениями не страдает.
У диска Simpla обложка будет прикольная скоро
Нужно как раз что-нибудь вроде Simpla, хотя она мне кажется слишком дорогой (да, я нищеброд :)
Или что-нибудь вроде Insales.ru — недавно на хабре был пост про этот сервис. Но они совсем недавно появились, и я боюсь что глючный получится магазин.
Денег на «битрикс-бизнес» у меня нет:)
Хабралюди, подскажите, есть ли ещё сервисы для создания интернет-магазина своими руками, наподобие Insales?
Познаний в программировании, чтобы самостоятельно возиться с osCommerce у меня нет. Да и времени не много.
Интересная у вас ситуация.
Времени нет по той причине, что есть основная работа.
Деньги в общем-то есть) но инвестировать в создание интернет-магазина я принципиально не хочу, потому что не уверен в успешности моей задумки. Максимум, на что готов — несколько сотен рублей в качестве арендной платы за аренду магазина.
С заказчиками магазинов сталкиваюсь 3-4 раза в месяц (работа такая) и знаю что говорю.
Человек, который, таким образом реагирует на совет, тем более не готов к видению бизнеса.
И слава богу )) Ну если б были — всяко не стоит.
P.S. sure, imho
И стоимость тарифа «киоск» вполне приемлемая — 250 рублей.
Вот только мучает вопрос — не будет ли такой магазин тормозить? Вам неприходилось с ним работать?
Безусловно нужно пробовать новое, но кому как.
вы создаете тему, сами назначаете ей цену и условия использования, а я просто предлагаю ее покупателю симплы. Предлагаю или в частном порядке, или создам раздел на сайте.
Суть в том, что мне выгодно когда у покупателя есть выбор тем, ему выгодно получить готовый дизайн, а вам выгодно продать свой дизайн.
Конечно, не факт что вашу тему сразу купят, но с другой стороны вы можете этим заниматься в свободное время :)
как только наберете обороты предлагайте народу дублировать темы на templatemonster. там и с условиями для дизайнеров всё прозрачнее, и вам косвенная популяризация ;)
Советую сделать вам подобный и продавать дешевле ;)
А за копейки «дописывается», это сколько? Допишите мне? Я не шучу, за сколько я могу получить систему описанную выше?
Скидки на товары, артикул, скидки по группам пользователей обойдется в 100 у.е. — это сказал программер, который все это делает на симпла.
Многое вами перечисленное есть в скрипте, если не нашли воспользуйтесь инструкцией.
Найдите в моем блоге обзор Simpla, я тоже многим был недоволен, и там много комментариев Дениса, смотрите
А Вы из команды разработчиков?
У меня есть знакомое блондинко — так она в ЖЖ продает пальто из Парижа. Привозит под заказ по 100%-ной предоплате! И прекрасно себя чувствует.
Мда… появляется аякс, красивые админки, приятные демки, документация, даже у кого-то скринкасты… Но вам не кажется, что «Список товаров», «Отдельный товар», «Список статей», «Лучшие товары» вы уже слышали четыре-пять лет назад??!!! А фраза «Общая часть одинакова для всех страниц магазина, включает в себя дизайн всей страницы» известна еще раньше. Все копируют друг у друга, меняя как будто только интерфейсы функций и классов.
Товарищ proc прав, когда говорит о том, что это красивая поделка. Только, блин, мега-разработчики все равно хотят за поделку $400.
Серьезные е-коммерческие проекты уже давно требуют значительной адаптации ЦМСок под себя. Тут без программистов не обойтись. Отбросьте нафиг мысли о том, что кто-то кроме программистов скачивает и устанавливает ваши продукты! Если делать продукт, которым смогут пользоваться даже идиоты, им будут пользоваться только идиоты! (с) Umputun
Где новые идеи в этой области? Кто выйдет за рамки? Кто решится на прорыв?
P.S.: И лучше бы вы смарти не вставляли по дефолту. Или без нее не уметь?
Так вот, симпла реально отлично решает задачи моего интернет-магазина без допиливания. Очень легко настроить, очень удобно пользоваться не экспертам в it. Всё.
А если нужно допилить — действительно написано для людей.
*выехал за еще одной лицензией simpla*