Инструкция по интеграции круизного модуля
Сайт www.atlantisline.ru предоставляет партнерам возможность интеграции сайт
www.atlantisline.ru на сайт партнера
Эта возможность позволяет использовать функционал сайта www.atlantisline.ru для поиска круизов
и оформления заявок на любые понравившиеся круизы
Сайт www.atlantisline.ru, интегрированный в партнерский сайт, будем называть «Круизным модулем».
Круизный модуль может быть интегрирован на сайт двумя способами:
1.
Интеграция в качестве iframe, направленного на www.atlantisline.ru, на сайте партнера
2.
Размещение специальной ссылки, по нажатии на которую, открывается всплывающее окно сайтом www.atlantisline.ru,
представленного пользователю как круизный модуль
Для интеграции в iframe с сайтом www.atlantisline.ru необходимо добавить HTML код на сайт,
примерно следующего содержания:
<script type='text/javascript' language='javascript' src='http://www.atlantisline.ru/AgentCode.ashx?partnerId=[ваш идентификатор]'></script>
Для интеграции в виде специальной ссылки, по нажатии на которую, открывается всплывающее окно с сайтом
www.atlantisline.ru необходимо добавить HTML код на сайт, примерно следующего содержания:
<script type='text/javascript' language='javascript' src='http://www.atlantisline.ru/AgentCode.ashx?partnerId=[ваш идентификатор]&inshadow=1'></script>
Если для отображения круизного модуля Вы пожелаете использовать shadowbox ссылку, то для корректной работы Ваш сайт должен в заголовке
содержать одну из нижеследующих строчек:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Это Doctype – он предназначен для указания типа документа, подробнее почитать о нем можно в справочной информации
Для изменения текста shadowbox ссылки вы можете изменить значение поля , на странице регистрации, на то, что вы хотите видеть внутри
ссылки:
Если поле оставить пустым, то будет отображаться значение по умолчанию - название сайта www.atlantisline.ru
Вы можете настроить стили партнерского модуля в соответствии с дизайном вашего сайта
<script type='text/javascript' language='javascript' src='http://www.atlantisline.ru/AgentCode.ashx?partnerId=[ваш идентификатор]&css=[путь
к файлу стилей]'></script>
ОПРЕДЕЛЯЕМ ТЕКСТОВЫЕ СТИЛИ ДЛЯ ФОРМЫ ПОИСКА
1. Изменение стиля заголовка круизного модуля для формы поиска
h2.popular_cruise_title
{
font-size: 17px !important; /* Размер шрифта */
}
h2.popular_cruise_title a
{
color: #d71216; /* Цвет сылки */
}
2. Изменение стилей заголовков над формами для модуля поиска
.search_color {
font-size: 13px !important; /* Размер шрифта */
color:#00478C; /* Цвет заголовка */
}
3. Изменение кнопки "Поиск" для формы поиска
.real_button300 {
color:#BAD8DC; /* Цвет текста */
}
4. Изменение кнопки "Очистить" для формы поиска
.real_button400 {
color:#BAD8DC; /* Цвет текста */
font-size:14px !important; /* Размер текста */
}
5. Изменение цвета границ у форм с выбором параметров для модуля поиска
.param_border select {
border-color:#10285A;
}
6. Изменение цвета границ у текстбоксов для формы поиска
.param_ch {
/*этим классом Вы можете сами настроить отображение данного поля*/
}
7. Добавление блока с изображением (блок находится вверху партнерского модуля).
К блоку применяется класс "block_for_partners" который Вы можете изменять. Например:
.block_for_partners {
height: 100px; /* Указываем высоту блока */
background: #ff0 url(www.site.ru/test.jpg) no-repeat; /* Изменяем фон блока и устанавливаем изображение на background */
display: visible !important; /* Переключаем видимость блока (по умолчанию он не отображается - display: none; */
}
ОПРЕДЕЛЯЕМ ТЕКСТОВЫЕ СТИЛИ ДЛЯ РЕЗУЛЬТАТОВ ПОИСКА
1. Изменение стиля заголовка найденного круиза для результатов поиска
h2.popular_cruise_title
{
font-size: 17px !important; /* Размер шрифта */
}
h2.popular_cruise_title a
{
color: #d71216; /* Цвет сылки */
}
2. Изменение стиля отображения цены и количества дней для результатов поиска
.price_cruise span.h5
{
color: #D71216; /* Цвет текста */
font-size: 19px; /* Размер шрифта */
}
3. Изменение стиля текста для результатов поиска
.price_cruise {
color:#000000; /* Цвет текста */
font-size:14px; /* Размер шрифта */
}
4. Изменение стиля текста для результатов поиска
.appertures small.small_text_cruise {
color:#D71216 !important; /* Цвет текста */
}
5. Изменение стиля текста для результатов поиска
.date_company_liner_container_r {
color:#000000; /* Цвет текста */
font-size:14px; /* Размер шрифта */
line-height:16px; /* Расстояние между строками */
}
6. Изменение стиля текста для результатов поиска
.date_company_liner_container_r span {
color:#D71216 !important; /* Цвет текста и ссылок */
}
7. Изменение стиля других дат для результатов поиска
.crusise_item b a {
color:#333333; /* Цвет сылки */
}
.appertures b a {
font-size:11px; /* Размер шрифта */
}
Изменение цветовой схемы и изображений
ОПРЕДЕЛЯЕМ ГРАФИЧЕСКИЕ СТИЛИ ДЛЯ МОДУЛЯ ПОИСКА
1. Изменение шапки модуля поиска
.popular_cruises_head1 {
background:url("../img/atl/hed/111.png") no-repeat scroll left top transparent; /* фоновое изображение */
}
2. Изменение фона под шапкой модуля поиска
.header_modules_part {
background:url("../img/searchlist.png") no-repeat scroll left top #FFFFFF; /* фоновое изображение */
}
3. Изменение фона под заголовком модуля / верхняя часть модуля поиска
.header_modules_1 {
background:url("../img/search_header.png") no-repeat scroll 0 0 transparent; /* фоновое изображение */
}
4. Изменение центральной части модуля поиска
.header_modules_2 {
background:url("../img/search_middle.png") repeat-y scroll 0 0 transparent; /* фоновое изображение */
}
5. Изменение нижней части модуля поиска
.header_modules_3 {
background:url("../img/search_bottom.png") no-repeat scroll 0 0 transparent; /* фоновое изображение */
}
6. Изменение кнопки "Поиск" в модуле поиска
.real_button300 {
background-image:url("../img/atl/button_search.png"); /* фоновое изображение */
}
7. Изменение кнопки "Очистить" в модуле поиска
.real_button400 {
background-image:url("../img/atl/button_clear.png"); /* фоновое изображение */
}
ОПРЕДЕЛЯЕМ ГРАФИЧЕСКИЕ СТИЛИ ДЛЯ РЕЗУЛЬТАТОВ ПОИСКА
1. Изменение шапки модуля при выводе результатов поиска
.crusise_item {
background:url("../img/arr_t_r.jpg") no-repeat scroll right 25px transparent; /* фоновое изображение */
}
2. Изменение основного фона при выводе результатов поиска
.search_item {
background:url("../img/bg_cruise_main.jpg") repeat-x scroll left bottom #F2F4F5; /* фоновое изображение */
}
3. Изменение правого нижнего угла при выводе результатов поиска
.r_col_cruise {
background:url("../img/arr_b_r.jpg") no-repeat scroll right bottom transparent; /* фоновое изображение */
}
4. Изменение левого нижнего угла при выводе результатов поиска
.cruise_table {
background:url("../img/arr_b_l.jpg") no-repeat scroll left bottom transparent; /* фоновое изображение */
}
5. Изменение левой части модуля при выводе результатов поиска
.inner_arr_t_l {
background:url("../img/inner_arr_t_l.gif") no-repeat scroll 0 0 transparent; /* фоновое изображение */
}
6. Изменение правой части модуля при выводе результатов поиска
.inner_arr_t_r {
background:url("../img/inner_arr_t_r.gif") no-repeat scroll right top transparent; /* фоновое изображение */
}
7. Изменение левой части верхнего информационного блока при выводе результатов поиска
.date_company_liner_container {
background:url("../img/date_company_liner_container.gif") no-repeat scroll 0 0 transparent; /* фоновое изображение */
}
8. Изменение правой части верхнего информационного блока при выводе результатов поиска
.date_company_liner_container_r {
background:url("../img/date_company_liner_container_r.gif") no-repeat scroll right top transparent; /* фоновое изображение */
}
9. Изменение горизонтального разделителя при выводе результатов поиска
.separate_cities {
background:url("../img/separate_cities.gif") no-repeat scroll center bottom transparent; /* фоновое изображение */
}
10. Изменение верхней границы нижнего блока при выводе результатов поиска
.sh_cruise_price {
background:url("../img/sh_cruise_price.gif") repeat-x scroll 0 0 transparent; /* фоновое изображение */
}
11. Изменение левой части в нижнем блоке при выводе результатов поиска
.price_cruise_bg_l {
background:url("../img/price_cruise_bg_l.gif") no-repeat scroll 0 0 transparent; /* фоновое изображение */
}
12. Изменение правой части в нижнем блоке при выводе результатов поиска
.price_cruise_bg_r {
background:url("../img/price_cruise_bg_r.gif") no-repeat scroll right top transparent; /* фоновое изображение */
}
МЕНЯЕМ СТИЛИ ВЫВОДА КРУИЗА
1. Изменение рамки вокруг карты
.cruise_map_big
{
background: url(www.site.ru/image.jpg) no-repeat !important;
}
2. Изменение рамки у выбранного пункта
.tabnav a {
border: 1px solid #96DDC3;
border-bottom: none;
}
3. Изменение рамки у неактивного пункта
.tabNav span {
border-bottom: 1px solid #CAF4E5;
}
4. Изменение стиля оформления заголовков таблицы
.cruise_info_table thead th {
background-color: #96DDC3; /* Цвет фона */
border:1px solid #96DDC3; /* Параметры границ таблицы */
color: #171846; /* Цвет текста в заголовках */
5. Изменение границ таблицы
.cruise_info_table tbody td {
background-color: #96DDC3; /* Цвет фона */
border:1px solid #96DDC3; /* Параметры границ таблицы */
color: #171846; /* Цвет текста в заголовках */
}
6. Изменение фонового изображения у кнопок
/* Неактивная кнопка */
.real_button {
background-image: url("../img/real_btn5.png"); /* картинка кнопки */
color: #FFFFFF !important; /* цвет шрифта */
font-size: 18px !important; /* размер шрифта */
width: 200px !important; /* ширина кноки */
}
/* Активная кнопка */
.real_button:hover {
background-image: url("../img/real_btn5.png"); /* картинка кнопки */
background-position: -200px 0 !important; /* полодение картинки */
}
Файл со стилями Вы можете скачать по ссылке www.atlantisline.ru/cruisesmodule.css
Затем Вам нужно поместить этот файл на свой ресурс. Предположим это "www.mysite.ru". В итоге скрипт будет выглядеть следующим образом:
<script type='text/javascript' language='javascript' src='http://www.atlantisline.ru/AgentCode.ashx?partnerId=[ваш идентификатор]&css=http://www.mysite.ru/cruisesmodule.css'></script>
Если Вы не знакомы веб-версткой, для настройки стилей обращайтесь к профессионалам.