Содержание:
1. Создание шаблона
2. Каскадные таблицы стилей CSS
3. Редактирование дизайна существующего шаблона
4. Переход от smarty к php (создание плагинов)
5. Общая, краткая структура файлов
6. Краткие сведения о переменных smarty, которые используются в данном продукте


1.Создание шаблона
Как и при работе с другими системами управлении сайтами, создание шаблона для Webasyst Shop-
Script следует начинать с верстки вашего макета в обычный html файл и таблицу стилей css.
Далее в папке /www/published/SC/html/scripts/repo_themes/ создаем папку с именем вашего
шаблона. Разработчики рекомендуют добавлять к названию шаблона префикс user_, чтобы при
обновлении ваш шаблон никуда не пропал.
(Например, “user_mystyle”).
Внутри этой папки создадим пустую папку “temp_overridestyles” – для переопределенных через
конструктор стилей.

Информация о шаблоне:

Создаем файл theme.xml и пишем в нем следующее:
<?xml version="1.0" encoding="ISO-8859-1"?>
<theme id="user_mystyle" last_modified="2009-04-03 10:00:00">
<title><![CDATA[My Style]]></title>
<components_settings>
<component id="htmlcode">
<setting name="caption" value="HEllo text - 125"></setting>
<setting name="manage_htmlcode" value=""></setting>
</component>
</components_settings>
</theme>

Шапка шаблона:

Создаем файл head.html, в нем пишем:
<title>{$page_title|default:$smarty.const.CONF_DEFAULT_TITLE|escape:'html'}</title>
{$page_meta_tags}
{literal}скрипты и теги, которые вы хотите добавить между тегами <head></head>{/literal}
Свой файл стилей переименовываем в main.css.
(Я бы рекомендовал взять этот файл из другого шаблона, так как там очень много стилей, и я не готов дать перечень всех
необходимых стилей. В уже существующий файл просто добавить свои стили.)

Витрина магазина:

Создаем файл home.html, в нем пишем
<!-- cpt_container_start -->{cpt_root_categories categories_col_num='3' show_sub_category='enable_sub_category'
subcategories_numberlimit='' subcategories_delimiter=' '}<!-- cpt_container_end -->
можно оставить только «<!-- cpt_container_start --><!-- cpt_container_end -->», а остальное через конструктор.
Основная разметка шаблона:
Создаем файл index.html в него вставляем все содержимое нашего начального макета, которое
находится между тегами <body></body>.


В местах, где должны появиться какие-то функциональные блоки (Новости, навигация, главное
содержимое, логотип, выбор языка и т.д.) вставляем код:
<!-- cpt_container_start --><!-- cpt_container_end -->
Файлы overridestyles.php и overridestyles.css копируем из другого шаблона.
Детальная информация о товаре:
Файл product_info.html можно скопировать из другого шаблона или создать свой со следующим
содержимым:
<!-- cpt_container_start -->{cpt_product_name}<!-- cpt_container_end -->
<div id="prddeatailed_container">
{cpt_product_images}
<!-- cpt_container_start --
>{cpt_product_params_selectable}{cpt_product_params_fixed}{cpt_product_rate_form}{cpt_product_price}{cpt_product_add2cart_button}{
cpt_product_description}<!-- cpt_container_end -->
</div>
<!-- cpt_container_start -->{cpt_product_discuss_link}{cpt_product_related_products}{cpt_product_details_request}<!-- cpt_container_end -->
Файл thumbnail.jpg – мини изображение шаблона.
Все остальные можно сделать через админ-панель сайта с помощью Конструктора (WYSIWYG).
«Перетащить» любой модуль можно на позицию где мы вставляли код «<!-- cpt_container_start --><!--cpt_container_end -->».
Все дальнейшие правки лучше делать уже через админ-панель.
Если изменения вносить снова в папке repo_themes, то нужно очистить кэш через инсталлятор или в папке /published/publicdata/{DB_KEY}/attachments/SC/themes/user_mystyle.
Все. Наш шаблон готов!
Краткое руководство программиста Webasyst Shop-Script


2. Каскадные таблицы стилей (файл css)

Классы и идентификаторы объектов, используемые в Shop-Script:
Блоки (div):
.cpt_news_short_list – краткий список новостей на главной
.cpt_category_tree – дерево категорий
.cpt_maincontent – главное содержание
.cpt_currency_selection – выбор валюты
.cpt_language_selection – выбор языка
.cpt_divisions_navigation – ссылки на разделы
.cpt_auxpages_navigation – ссылки на информационные страницы
.cpt_survey – блок голосования
.cpt_root_categories – категории на главной (витрина)
.cpt_product_lists – список продуктов (например, «специальные предложения»)
.cpt_tag_cloud – облако тегов
Общие для всего магазина:
ul.vertical, ul.horizontal – вертикальный или горизонтальный (соответственно) список ссылок
(используется в навигации разделов и инф. страниц)
.cpt_shopping_cart_info – корзина (уменьшенная, на всех страницах)
.survey_question – вопрос голосования
.cpt_category_tree ul – список категорий
.cpt_category_tree ul a – ссылки в списке категорий
.cpt_category_tree ul a:hover – ссылка в списке категорий при наведении мышкой
.cpt_category_tree .parent a – ссылка на родительскую категорию, в списке категорий
.cpt_category_tree .child a – ссылка на подкатегорию, в списке категорий
.cpt_category_tree .parent_curent a, .cpt_category_tree .child_curent a – текущая (активная) категория и
подкатегория
.bullet – блок в списке категорий перед ссылкой
.tab – блок в списке категорий перед ссылкой подкатегории, количество таких блоков соответствует
уровню подкатегории
.cpt_product_add2cart_button – кнопка «добавить в корзину»
h1.welcome – надпись под витриной на главной
#searchstring – поле ввода поиска продуктов
.error_block – блок вывода ошибок
.news_date – дата новости
.news_title – заголовок новости
.news_viewall а – ссылка на все новости
.news_subscribe – подписка на новости
.news_thankyou – сообщение после подписки на новости
#cat_advproduct_search – блок расширенного поиска в категории
.row_odd td – нечетная строка в корзине
.row_even td – четная строка в корзине
#powered_by – надпись «работает на Webasyst shop-scrip»

Продукт:
.regularPrice – старая цена
.totalPrice – общая цена
.youSaveLabel – надпись «вы экономите в %»
.youSavePrice – в деньгах
.prd_out_of_stock – надпись «нет на складе»
.prdbrief_name – название товара
.review_block – блок отзывов
.review_title – заголовок отзыва
.review_date – дата отзыва
Обычно этого хватает. 


3. Редактирование дизайна существующего шаблона
Дизайн -> Редактор дизайна -> Текущая тема -> Редактировать
В режиме конструктора все интуитивно понятно и, как мне кажется, не требует лишних пояснений.

Переходим в режим Редактировать HTML-код.
Все функциональные блоки заключены в между <!-- cpt_container_start --> и <!-- cpt_container_end-->
Например,
<!-- cpt_container_start -->{cpt_logo file='sls_logo.gif' overridestyle=':7gjdmx'}<!-- cpt_container_end-->
cpt_logo – идентификатор объекта
overridestyle – идентификатор переопределенного стиля, когда вы два раза кликнете по блоку,
там есть checkbox “переопределить стили”
Некоторые блоки имеют дополнительные параметры.
Примеры блоков – описание – параметры :
{cpt_logo file='sls_logo.gif' overridestyle=':7gjdmx'} – логотип – файл логотипа
{cpt_shopping_cart_info overridestyle=':usix7z'} – корзина
{cpt_currency_selection overridestyle=':ew8dku'} – выбор валюты
{cpt_language_selection view='flags' overridestyle=':9z8isi'} – выбор языка – флаги или выпадающий список
{cpt_divisions_navigation divisions='29:54:183:107:32:189' view='horizontal' overridestyle=':6sqpv6'} – навигация по
разделам – список разделов – горизонтальная(вертикальная)
{cpt_auxpages_navigation select_pages='all' auxpages='' view='vertical' overridestyle=':4df0k7'} – навигация информ.
страниц
{cpt_category_tree overridestyle=':wpe3jv'} – дерево категорий
{cpt_product_search overridestyle=':z1u93x'} – поиск продуктов
{cpt_maincontent overridestyle=':vg6a7y'} – главное содержание
{cpt_tag_cloud tags_num='50' overridestyle=':uxbg09'} – облако тэгов – количество тэгов
{cpt_custom_html code='0m8bt2r7' overridestyle=':kagfdl'} – пользовательский html код – id кода


4. Переход от smarty к php (создание плагинов)

Некоторый функционал сложно или просто невозможно реализовать на smarty, а иногда просто
проще вернуться к уже знакомому языку программирования.
В smarty есть такая возможность, с помощью плагинов.
Рассмотрим создание плагина на примере.
Задача: в определенном месте вывести надпись “Hello world” с помощью php.
В папке /published/SC/html/scripts/smarty/plugins создаем файл function.myfunction.php с
содержанием:
(В новой версии скриптов плагины лежат в папке /kernel/includes/smarty/plugins)
<?php
function smarty_function_myfunction($params, &$smarty) {
return 'Hello, world!';
}
?>
Теперь в нужном месте html-файла необходимо вставить тег {myfunction}.
Чтобы эти теги работали в информационных страницах, нужно:
В файле \published\SC\html\scripts\templates\frontend\aux_page.html после открывающейся “{”
добавить - eval var=
Плагины в смарти делятся на несколько типов:
· function - функции
· modifier - модификаторы (например, {$str|capitalize})
· block - блоки (блоковые функции, например {foreach}…{/foreach})
· compiler - функции, запускаемые во время компиляции
· prefilter - фильтр шаблона, запускаемый перед компиляцией (работает с исходником шаблона)
· postfilter - фильтр шаблона, запускаемый после компиляции (работает с результатом компиляции
шаблона - php-кодом, который сохраняется на диск в папку templates_c)
· outputfilter - фильтр шаблона, запускаемый после компиляции шаблона, но до вывода результатов
этой компиляции
· resource - ресурсы (для взаимодействия с базой данных, сокетами и т.д.)
· insert - для тега {insert}
Мы сейчас писали плагин первой категории, т.е. function, поэтому имя файла начинается с этого
слова. А вообще, файл должен называться по таким правилам:
тип_плагина.имя_функции.php
А функция в самом файле плагина должна именоваться по таким правилам:
smarty_[тип_плагина]_[имя_функции]

Вместо вывода фразы вставляем тот функционал, который нам нужен.
Пример использования:
Гостевая и новый модуль оплаты к Webasyst Shop-Script http://uses.habrahabr.ru/blog/57292/



5. Общая, краткая структура файлов
data ваши файлы, защищенные сервером
%DB_KEY%
attachments
SC файлы продуктов в Shop-Script
products_files электронные продукты
dblist настройки баз данных
account.log лог изменений аккаунта
wbs.log лог авторизаций в системе
includes файлы для первоначальной установки
kernel ядро
includes
smarty
plugins - папка плагинов smarty
errors.log общий лог ошибок
published скрипты приложений и данные
AA Account administrator
html основные скрипты
scripts основные скрипты
MW Мой профиль
html основные скрипты
scripts основные скрипты
SC Shop-Script
html основные скрипты
scripts Shop-Script
core_functions основные функции скрипта (core – ядро)
images изображения
images_common служебные изображения
js JavaScript-библиотеки
modules различные модули
auxpages информационные страницы
discount_coupons дисконт-купоны
feedback обратная связь
localization управление локализацией и языками
news новости
payment модули оплаты
shipping модули доставки
products_files файлы перенесены — смотрите
data/%DB_KEY%/attachments/SC/products_files
repo_themes оригинальный файлы шаблонов дизайна (без изменений
дизайн-редактора)
templates шаблоны отдельных компонентов магазина
backend администрирование


email email-уведомления
forms печатные формы
frontend пользовательская часть
sms SMS-уведомления
tinymce визуальный редактор
UG Пользователи
html основные скрипты
scripts основные скрипты
WG Виджеты (кроме виджетов SC)
html основные скрипты
scripts основные скрипты
common используется всеми приложениями
publicdata ваши файлы, доступные по www
%DB_KEY% общедоступные файлы приложений
attachments
SC ваши данные: изображения, темы, файлы sitemap, rss и т.д.
wbsadmin Инсталлер
html основные скрипты
scripts основные скрипты
system новое ядро
temp временные файлы, логии
.htaccess основной .htaccess для скриптов WebAsyst
index.php работает только в случае выключенного mod_rewrite