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

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










Шапка шаблона:
Создаем файл head.html, в нем пишем:
{$page_title|default:$smarty.const.CONF_DEFAULT_TITLE|escape:''html''}
{$page_meta_tags}
{literal}скрипты и теги, которые вы хотите добавить между тегами {/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 в него вставляем все содержимое нашего начального макета,
которое находится между тегами .
В местах, где должны появиться какие-то функциональные блоки (Новости, навигация,
главное содержимое, логотип, выбор языка и т.д.) вставляем код:
Краткое руководство программиста WebAsyst Shop-Script стр. 4
xttp://easyweb.org.ua
<!-- cpt_container_start --><!-- cpt_container_end -->
Файлы overridestyles.php и overridestyles.css копируем из другого шаблона.
Детальная информация о товаре:
Файл product_info.html можно скопировать из другого шаблона или создать свой со
следующим содержимым:
<!-- cpt_container_start -->{cpt_product_name}<!-- cpt_container_end -->

<!-- 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.
Все. Наш шаблон готов!
Продолжение следует

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 кода
Продолжение следует

chelovekuma, tkahevs, xanrulit, aleks666, VALECHEK, Nilsan, 3d12, bilboS, max_kirs, zigmunt, murzik-murz, uruguaydata, savageserg, Foxnith, qwerty, Forward2, alexum, lordmain, anton5329, fantus, Acxad, welove, peg88, andrey2007, blud, 777i, chik666, fhfh, djeks, sym83, Astra81, andi25, serc, sergey885, oneyaros, sevlad, confignsk, lenar, re0ne, shohxusrav, obebos, vitalikxp, gufi, pehati, tehmir, koctac, Alex2k, ddd, ctok33, popadey, raiden, aroksetx, unvint, rusxxx, svitalie, realstatus01, andrsoon, maximusnet, faks, wolfkiller32, cment1, artmoment, Alexuln, Kanibalka, Engelbert, 123123, greensv, Triod, viting2012, Numark, missmp24, flaxx, Dmitry777, Unkoa, plusnin26, Gennady, dmx4747, piff, Kail_Seven, superquattro, khwedo, krahatulka, STuNT, blajack, hugog, bill-web, Pavlick, Nameless, Fubar, Hodman, viplviv, sermix