"Ларек"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>
    В отличие от ячейки таблицы, здесь для срабатывания фильтра прозрачности необходимо указывать абсолютное позиционирование и размеры объекта.
    Этим методом кодирования следует пользоваться с осторожностью или на страницах, скомпонованых позиционироваными объектами.
    Возможный вариант - разместить абсолютно позиционированный объект вложенным в относительно позиционированный.

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

Здесь, как и везде, цифра в скобках означает номер записи товара в файле array.js.

Кроме того, предусмотрена функция 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 имеет этот номер.