"Ларек"v 3.0 — руководство пользователя

I. Файлы, необходимые для работы сценария

1. Файл сценария laryok3.js

Расположение файла laryok.js должно соответствовать его URL, задаваемого в страницах магазина >>>.

2. Служебный файл pingpong.html

Этот файл должен находиться в той же директории, что и HTML-страница магазина.
Если HTML-страницы магазина находятся в разных директориях, в каждой директории должна иметься копия файла pingpong.html.

3. Редактируемый js-файл — «база данных» товаров магазина

Информация о товарах записывается в js-файле — в нашем примере это array.js
В нем же в значениях переменных записывается оформление поисковой системы.
Дополнительно для оформления элементов поисковой системы можно использовать стили. Подробнее>>>

var find_title = 'Поиск товара: ' Текст заголовка поисковой системы
var find_buton_name = 'Найти' Надпись на кнопке
var stz = new Array()
var ur = new Array() 		Обязательные строки. Их не нужно редактировать
stz[1]="Товар 1|||20"; ur[1]="url.html#name" Товар 1 — Название товара;
20 — или другая цифра — цена. Цена может быть и дробной, в этом случае дробь пишется через точку (не через запятую);
между названием товара и ценой ставятся три символа вертикальной черты;
url.html#name — куда направлять поисковой системе.
stz[2]="Товар 2|||25"; ur[2]="url.html2#name2"

stz[101]="Товар 101|||15"; ur[101]="url.html101#name101" 		И так далее для каждого товара.
Важно: в каждой строке цифры в квадратных скобках должны быть одинаковы!

Цифра в квадратных скобках — это порядковый номер товара.
Однако можно пропустить любое количество номеров, оставив их «в резерве» для будущих товаров.
Здесь для примера оставлены «в резерве» номера с 3 по 100.

Нумерация начинается с «1» и может продолжаться бесконечно, однако не рекомендуем оставлять много незадействованых номеров, так как это замедлит работу сценария.
var end_stz = 102 Конец нумерации товаров.

4. Редактируемый файл edit.html

Расположение файла edit.html должно соответствовать указанному в гиперссылке "Посмотреть/изменить отобранные товары / Оформить заказ" >>>.
Ключи и допустимые значения ключей:
var mail_adress = "name@host.ru"  
var cook_name = "Test"
var mail_subject = "count"
var valut = "руб."
var cook_time = "5"
var mail_encod = "text/plain"
var lang = "ru"
  • var mail_adress - адрес, на который будет приходить заказ
    (если этот ключ оставлен пустым, сценарий начинает работать в демо-режиме.);
  • var cook_name - имя кукиса, желательно уникальное, можно урлу для неповторимости;
  • var mail_subject - поле темы приходящих писем;
  • var valut = "руб." - валюта для рассчетов;
  • var cook_time - время жизни кукиса (в минутах) после закрытия документа - имеет смысл на случай обрыва коннекта, если за заданное время коннект будет восстановлен и страница перезагружена, информация о выбранных товарах сохранится;
  • var mail_encod = "text/plain" - только при этом значении заказ размещается в теле письма, при других значениях заказ будет в приаттаченном файле - это то, что прописывается в теге <form>;
  • var lang = "ru" - поддержка национальных кодировок, без этого ключа текст не будет эскапироваться и сохранятся только латинские буквы и цифры. Если названия товаров набраны латиницей, тогда этот ключ лучше отключить;


II. Редактирование HTML-страницы

Для внедрения сценария в HTML-страницу необходимо выполнить следующие действия:

1. Заголовочный раздел

Между тегами <HEAD> и </HEAD> необходимо разместить следующий код:

<STYLE>
#find_title{}
#find_area{}
#find_buton{}
</STYLE> 		В каскадной таблице стилей можно задать форматирование элементов поисковой системы:
  • find_title{} — заголовка;
  • find_area{} — поля ввода;
  • find_buton{} — кнопки поиска.
.tr_none{}
.tr_cont_head{}
.tr_list_a{}
.tr_list_end{}
</STYLE> 		Кроме того, в каскадной таблице стилей можно задать форматирование элементов отображения содержимого корзинки:
  • tr_none{} — когда корзинка пуста;
  • tr_cont_head{} — заголовок непустой корзинки;
  • tr_list_a{} — товары в корзинке;
  • tr_list_end{} — количество единиц каждого товара в корзинке.
Описания стилей могут отсутствовать, на работу сценария они не влияют.
<script type="text/javascript" src="URL/array.js"></script> Задаём путь к js-файлу со списком товаров и оформлением поисковой системы.
<script type="text/javascript">
function read_alfa(){
read_a(ident_No_1, 1);
read_a(ident_No_2, 2);
read_a(ident_No_3, 3)
...
} 		В этом разделе кодируются товары, представленные на странице. Для каждого товара необходимо задать его уникальный идентификатор (подробнее >>). После идентификатора через запятую кодируется номер товара — тот, который присвоен в квадратных скобках в js-файле с названиями товаров (подробнее >>).
Если не прланируется выделение выбранных товаров затенением, достаточно оставить запись function read_alfa(){}
Ключи и допустимые значения ключей:
var valut = "руб."
var much = ""
var count_n = "Эта книга"
var count_g = "Этой книги"
var cook_name = "unical_name"
var cook_time = "5"
  • var valut = "руб." - валюта для рассчетов;
  • var much = "" - если установить значение этого ключа равным "1", при выборе товара не будет возникать запроса о количестве товара, и каждый товар будет добавляться в корзинку в единственном экземпляре. Если допустимо приобретение нескольких товаров каждого наименования, значение ключа должно быть отличным от единицы.
  • var count_n = "Эта книга" - название товара в именительном падеже (для диалоговых окон);
  • var count_g = "Этой книги" - название товара в родительном падеже (для диалоговых окон);
  • var cook_name - имя кукиса, желательно уникальное, можно урлу для неповторимости;
  • var cook_time - время жизни кукиса (в минутах) после закрытия документа - имеет смысл на случай обрыва коннекта, если за заданное время коннект будет восстановлен и страница перезагружена, информация о выбранных товарах сохранится;
var prior = "Microsoft Internet Explorer"
if (navigator.appName!=prior){
document.write('<META charset="windows-1251">')
}
function init_page(){
read();
if (navigator.appName!=prior){}
else{
read_alfa()
}}
</script> 		Здесь указывается кодировка, в которой созданы HTML-страницы. Если задействованы ключи var mail_encod = "text/plain" и var lang = "ru", можно использовать любые национальные кодировки. Оформленный заказ будет правильно читаться в том случае, когда та же кодировка задействована в браузере при переводе (файл translat.html).
<script type="text/javascript" src="URL/laryok_b.js"> </script> Здесь необходимо указать абсолютный или относительный путь к файлу сценария.


2. Идентификатор

(Идентификатор нужен для выделения затенением выбранных товаров. Если такое выделение не планируется, идентификаторы можно не присваивать.)

Для каждого товара нужно сформировать идентификатор (второе имя товара).
Идентификатор - произвольное сочетание букв и цифр, для пользователя нигде не отображается.
Требования к идентификатору:
  1. Используются только латинские буквы, цифры и знак подчёркивания.
  2. Идентификатор не может совпадать с именами других объектов страницы - в том числе и с именем якоря <A name=""><A>
  3. Идентификатор не чувствителен к регистру. Prishvin и prishvin - это один и тот же идентификатор. И всё же для перестраховки везде идентификатор лучше писать одинаково.
  4. Идентификатор может начинаться только с буквы; но не с цифры.

3. Размещение функций на странице

Товар должен отображаться либо рисунком, либо любым сочетанием элементов HTML внутри прямоугольного блока - ячейки таблицы или <div></div>

  • В стиле — в самом теге или через класс в таблице стилей — обязательно задать FILTER:alpha(opacity=100);
  • Объекту должен быть присвоен идентификатор;
  • Недопустимо двум разным объектам давать один идентификатор.
  • Объекту заданному тегами <div></div> должны быть заданы абсолютное позиционирование, ширина и высота в описании стиля;

Примеры:

Для примера возьмем книгу "Пришвин I том". Идентификатор prishvin_I_tom.
Варианты кодирования объекта:
  • Кодирование рисунка:
    <img src="book/prishv_s.gif" width=109 height=150 border="0" style="FILTER:alpha(opacity=100);">
  • Кодирование ячейки таблицы с текстом:
    <td id="Prishvin_I_tom" style="FILTER:alpha(opacity=100)">Пришвин I том.</td>
  • Кодирование блока с текстом:
    <div id="Prishvin_I_tom" style="FILTER:alpha(opacity=100); position:absolute; width:1px; height:1px;">Пришвин I том.</div>
    В отличие от ячейки таблицы, здесь для срабатывания фильтра прозрачности необходимо указывать абсолютное позиционирование и размеры объекта.
    Этим методом кодирования следует пользоваться с осторожностью или на страницах, скомпонованых позиционироваными объектами.
    Возможный вариант - разместить абсолютно позиционированный объект вложенным в относительно позиционированный.

Команды добавления в корзинку и удаления из корзинки:

Кроме того, предусмотрена функция winnew(URL) — открыть документ в новом окне, при повторном использовании этой функции новые документы будут перезагружаться в этом же окне.
Формат вызова функции: <a href="javascript:winnew(URL)">Текст гиперссылки</a> При этом появляется возможность закрывать новое окно из сценария командой: <a href="javascript:window.close()">Текст гиперссылки</a>

Общие команды страницы:

Их можно располагать в любых местах страницы и повторять любое число раз.

4. Команды сохранения состояния

В теге <BODY> необходимо прописать команды onunload=save() и onload=init_page() <body onunload=save() onload=init_page()>

5. Установка поисковой системы.

В том месте страницы, где требуется установить поисковую систему, нужно вставить следующую строку:
<script type="text/javascript">finder()</script> Элементы поисковой системы можно оформить в таблице стилей. Подробнее>>>

6. Установка отображения содержимого корзинки.

В том месте страницы, где должно отображаться содержимое корзинки, нужно вставить следующую строку:
<script type="text/javascript">trash_content()</script> Текст можно оформить в таблице стилей. Подробнее>>>

В качестве альтернативы предусмотрена возможность вывести на странице количество наименований выбранных товаров и общую сумму заказа. Для этого в нужных местах HTML-кода требуется вставить следующие коды:

<script type="text/javascript">document.write(tr_cyfr)</script>   —   Количество наименований выбранных товаров.
<script type="text/javascript">
if(stp_2==null){stp_2=0}
document.write(stp_2)
</script> 		  —   Сумма заказа

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

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

<script type="text/javascript">
metka_no="Товар не выбран"
metka_yes="<b>Товар выбран</b>"
metka(1)
</script> Цифра "1" означает, что изменение будет происходить при выборе в корзинку того товара, который в файле array.js имеет этот номер.
Сайт управляется системой uCoz