оглавление

Требования к CSS

Предварительное замечание:  конкретные содержания стилей в тексте, кроме display и z-index — указаны для примера

 

1.  В коде страницы должна быть только одна ссылка на  CSS , если нужно использовать несколько файлов CSS – подключать их путём: @import url("bla-bla-bla.css").


2.  Обязательные классы и стили id, которые должны быть описаны в CSS:

.pointer {cursor:hand;cursor:pointer;} - вешается на все активные элементы шаблона, обрабатываемые javascript

.r {text-align:right;}

.top {vertical-align:top}

#topnavi {} -  обёртка строчки навигации по сайту - «хлебные крошки» (например: главная → ноутбуки → apple) строчка вставляется обработчиком {#_CRUMBS}

.pagenavi – обёртка зоны навигации по страницам выборки товаров из каталога и их сортировки

.num ul, .num li {} - навигация по страницам раздела каталога (внутри .pagenavi )

.sorting ul, .sorting li {} - сортировка товаров в каталоге (внутри .pagenavi )

.fastenter {  } - стили для формы быстрой авторизации (содержит логин, пароль и кнопку «войти»)

span.tobasket {}- обёртка кнопки «добавить в корзину» - текст или картинка прописывается в разделе настроек, реакция по клику, кроме добавления товара в корзину — задаётся в настройках: (a) переход в корзину, или (б) смена изображения кнопки (смена URL картинки) - на эти элементы вешается обработчик клика

a.inbasket { } - обёртка кнопки «в корзине» - текст или картинка внутри ссылки прописывается в разделе настроек, реакция по клику всегда — переход в корзину

Возможно до 3-х разных вариантов кнопок  «tobasket» и «inbasket» на одном сайте - в шаблоне товара они прописываются как: {#buy_1} {#buy_2} {#buy_3} . HTML-код для каждого из них  прописывается в разделе настроек административной панели (2варианта - 1-товар ещё не куплен и 2-уже в корзине)

#searchform { } - внешний div поисковой формы - на странице может быть только 1 поисковая форма, одной формы, перечень элементов формы - зависит от настроек и раздела каталога, в котором она отображается. В шаблон страницы поисковая форма вставляется обработчиком {#_SEARCH_FORM}

Поисковая форма имеет элементы трёх типов:

a) тип: слайдеры - для задания целых и вещественных параметров)

b) тип: выбор  - для параметров с перечисляемыми значениями (чекбоксы для мультивыбора могут включаться/отключаться в настройках):

с) тип: артикул товара (варианта)

#search_num_items {position:absolute; top:0;left:0; z-index:999; display:none;..... } - всплывающий div количества товаров в результате поиска, позиция окна вычисляется по событию клика  на элементы поисковой формы + поправочные значения из  раздела настроек, в стилях прописываются его размеры,цвет и пр

#compare_num_items {position:absolute; top:0;left:0; z-index:999; display:none;..... } - всплывающий div количества товаров в таблице сравнения, позиция окна вычисляется по событию клика  на элементы поисковой формы + поправочные значения из  раздела настроек...

#compare {} - таблица сравнения товаров

.good_foto {  /* главная фотография товара на странице товара (увеличенная) - div.good_foto и img.good_foto  */  } - на  img.good_foto в CMS вешается обработчик события «клик по фото товара», размеры фото задаются в разделе настроек административной панели CMS

.good_fotos {  /* все фотографии товара на странице товара - div-обёртка  и img */} - на  img.good_fotos вешаются обработчики событий «клик по фото товара», размеры фото задаются в разделе настроек, div.good_fotos-определяет ширину и обтекание  каждой фотографии

ul.sitemap {} - автоматически генерируемая карта сайта

.register { } -  форма регистрации клиента — на отдельной странице ( input.register ,  textarea.register ….)

 

.comments { } - зона отображаемых комментариев  к товару

.comments_h {} - заголовок блока комментариев

#comments_add{} - внешний div для формы добавления комментария

#comments_add textarea, #comments_add input {} - элементы формы добавления комментария

 

стили для элементов с подсказкой при заполнении формы регистрации (страна, город):

.suggest-wrap input {border:solid 1px #cccccc;}

.autosuggest {width:100%; border:solid 1px #DEffDE; display:none;}

.autosuggest ul {padding:2px;}

.autosuggest li {border-top:solid 1px #DEffDE;}

 

.blacklayer {/* полупрозрачный чёрный слой для восстановления пароля и листания фотографий*/

  position:absolute;top:0;left:0; z-index:1000;display:block;width:100%;height:100%;

  background-image: url(../img/blacklayer.png);  border:0;

  text-align:center; vertical-align:middle;

  }

3. Необязательные классы (элемента может и не быть на странице, но если  он есть — классы  должны называться именно так):

.paramstable {} - стили автоматически формируемой таблицы параметров товара (table.paramstable,.paramstable td …..)

.variants {} - стили автоматически формируемой таблицы вариантов товара

span#basketstatus — количество товаров в корзине (число) – обновляется аяксом при клике на кнопку «в корзину»

span#basketsum — сумма в корзине (число) – обновляется аяксом при клике на кнопку «в корзину»