Специальное предложение - slideshow

[dav300]

Здравствуйте,
Возможно кому пригодиться.

Задача : Оформить "Специальное предложение в виде slideshow" с возможностью показа сообщения спец. предложения из базы в привязке к товару (картинке). (Специальное предложение выбрано как пример)

Во вложении реализация.
Последовательность шагов:

0) Создайте в корне вашего сайта парку develop (потом можно сменить)
1) Распакуйте архив в папку develop. Должно получиться develop/slideshow
2) Отредактируйте файл slideshow_spez.html на предмет установки ваших данных для соединения с БД:

mysql_connect("hostname","user_name","password") or die ("Не могу создать соединение ");
mysql_select_db("BD_name") or die(mysql_error());

3) Укажите путь где лежать картинки

$dir = "images/big/"; (если ничего не меняли то оставьте как есть)

4) Создайте дополнительный модуль с админ режиме. В настройках модуля укажите "Взять содержание из файла" и укажите путь, например, develop/slideshow/slideshow_spez.html

5) В настройках Модули CMS -> Настройки CMS добавьте созданный модуль.
6) Проверьте полученный результат.

P.S.
Если оригинальный SQL заменить на

$query = "SELECT * FROM va_items WHERE big_image='$full_parth'";

и добавить

$rnd = rand(0,sizeof($files)-1);
$full_parth = $dir.$files[$rnd];

то можно просто показывать картинки из любой директории, причем порядок показа картинок будет разный (относительно )

slideshow.zip
slideshow_pic.jpg Пример того что получиться.

P.S. Исправил немного также header. Пример во вложении. Если кому будет интересно - пишите. Расскажу как сделать.
header.jpg Пример "шапки"

[oldmanager]

Спасибо за слайдшоу.
Очень интересно про header. Если не трудно, расскажите, как Вы такое сделали.

[dav300]

Здравствуйте,
Ниже по тексту постараюсь описать общие принципы, используемые средства и механизмы того как реализован header, пример которого вы сможете найти во вложении. Сразу оговорюсь что все описанное ниже делалось для шаблона classic blue (templates/user/header.html) от VS ver. 4.05. Внешний вид имеет большое значение и поэтому, я думаю возможно, в других шаблонах выглядеть будет по другому.

Основные компоненты header:
1) Логотип компании
2) Информатор о кол-ве компаний и товаров
3) Информация для пользователя
4) Часы работы компании
5) Способы связи
6) Корзина покупок
7) Вход на сайт
8) Поиск по сайту
9) Поиск по категориям

Также на картинке вы видите некую странную верхнею строку. К элементам header она не имеет никакого отношения потому как это есть ToolBar для браузера переделанного для сайта (Контакты, поиск, новости. последние поступления и т.д.)

У меня было два варианта реализации header: первый на дивах, второй в табличной форме. По ряду причин остановился на табличном представлении. Пример на дивах также есть.

Теперь подробнее:
1) Логотип компании - в принципе все просто. Это картинка соответствующих размеров. Сделать вы ее можете как самостоятельно так и заказав у какой либо компании. Могу посоветовать лишь пару сайтов на которых вы сможете подобрать логотип, сделать логотип или внести изменения в существующий. Логотип это "лицо". А с учетом того что в большинстве случаев это стартапы то даже на лицо слишком много денег тратить не хочется. Вообщем решать вам.
2) Информатор о кол-ве компаний и товаров. Мое решение возможно кому-то покажется не совсем верным но объяснение ему следующее - выводимые цифры статичны т.е. обновлять их надо в ручную потому как я не хотел чтобы излишне перегружалась БД запросами. Переделать на динамику просто. Решайте сами.
3) Информация для пользователя - просто набор ссылок на страницы сайта только с учетом того что они расположены на более видном месте
4) Часы работы компании - просто стилистически оформленная информация относительно часов работы компании. Тут относительно тоже все просто за исключением момента связанного с картинками. Где искать картинки соответствующего размера могу подсказать но думаю что вы и сами найдете. Желательно чтобы картинки были парными. Например для блока "Вход в систему" используются две разные картинки - красный человек и зеленый человек. Тоже самое и для корзины (пустая, полная)
5) Способы связи - аналогично пункту 4)
6) Корзина покупок - Специфику по отображению картинок я описал в пункте 4). Ниже код который отвечает за отображения данного блока.

<!-- begin empty_small_cart -->
<td id="logo" align="left"><img src="sate_name/images/images_new/basket/basket_no_big.png" ></td>
<td id="logo" align="left">
<br><font color=green size=2>{EMPTY_CART_MSG}</font>&nbsp;&nbsp;<br>
<a href=howtocallas.html>Получить консультацию</a>
</td>
<!-- end empty_small_cart -->
 
<!-- begin small_cart -->
<td id="logo" align="left"><img src="sate_name/images/images_new/basket/basket_yes_big.png"></td>
<td id="logo" align="left">
<br><b>Товаров</b> : <font color=green size=2><b>{total_quantity}</b></font>, <b>Сумма</b> : <font color=green size=2><b>{total_price}</b></font><br>
<a href=checkout.php>Оформить заказ</a>&nbsp;&nbsp;<a href=basket.php>Просмотр корзины</a>
<br><a href=howtocallas.html>Получить консультацию</a>
</td>
<!-- end small_cart --> 

7) Вход на сайт - При работе с ИМ оказалось немного не удобно выполнять вход в ИМ находясь, например, в корзине. С стандартном решении требовалось выполнить + несколько действий. Вынос модуля входа на сайт позволяет имеет возможность выполнять вход из любого места что на практике очень удобно. Ниже код :

<!-- BEGIN login_form -->
<td id="logo" align="left"><img src="sate_name/images/images_new/login/login_no.png"></td>
<td id="logo" align="left">
<form action="{login_form_url}#block_login" name="login" method="POST">
<input type="hidden" name="login_action" value="{login_action}">
<input type="hidden" name="return_page" value="{return_page}">
{hidden_parameters}
<br>
<!-- BEGIN login_errors -->
{errors_list}
<!-- END login_errors -->
<input class="text" type="text" name="user_login" value="{user_login}" size="15" maxlength="64"><br>
<input class="text" type="password" name="user_password" value="" size="15" maxlength="32"><br>
<input class="submit" type="submit" value=" {LOGIN_BUTTON} ">

</form>
</td>
<!-- END login_form -->

<!-- BEGIN logout_form -->
<td id="logo" align="left"><img src="sate_name/images/images_new/login/login_yes.png"></td>
<td id="logo" align="left">
<form action="{login_form_url}#block_login" name="login" method="POST">
<input type="hidden" name="login_action" value="{login_action}">
<input type="hidden" name="return_page" value="{return_page}">
{hidden_parameters}
<br>
Вошли как: <b>{user_login}<br>
<a href="{user_home_href}">Личная страница</a><br>
<input class="submit" type="submit" value=" {LOGOUT_BUTTON} "><br>
</form>
</td>
<!-- END logout_form --> 

8) Поиск по сайту. Скажу лишь что Поиск по сайту и поиск по категориям это не одно и тоже. В приведенном ниже фрагменте кода есть css стили. Я их не убирал потому как возможно и вы найдете их полезными. Также в строке поиска отображается картинка. Вставить можете все что сами захотите. Как и где искать картинки писал выше

<form action="site_search.php" method="GET" >
<a href=search.php>Расширенный поиск</a>&nbsp;&nbsp;<input type="text" value="{search_string}" name="q" style="background-image: url('images/images_new/contacts/search.png');background-repeat:no-repeat;padding-left:25px;border-color:#990000;border-style:insert;border-width:2px;width:400px;color:#990000; font-size:15px;">&nbsp;<input type="submit" name="search" value="ПОИСК ПО САЙТУ" style="width:200px;height:30px;background:#1874CD;border:0;font-weight:bold;color:white;" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</form> 

9) Поиск по категориям Добавлю лишь что для Поиска по категориям существует Расширенный поиск. Это просто ссылка на страницу вида search.php. Добавьте <a href=http:search.php>Расширенный поиск</a>

<form action="{search_href}" method="GET">
<!-- BEGIN search_categories -->
<select class="search field" name="search_category_id" STYLE="border-width: 10px; border-style: none; border-color: blue;background-color: #6699FF;text-transform:uppercase;">
<!-- begin search_category_id --><option {search_category_id_selected} value="{search_category_id_value}">{search_category_id_description}<!-- end search_category_id -->
</select>&nbsp;&nbsp;<input  type="text" name="search_string" value="{search_string}" style="background-image: url('images/images_new/contacts/search.png');background-repeat:no-repeat;padding-left:25px;border-color:#990000;border-style:insert;border-width:2px;width:400px;color:#990000; font-size:15px;">&nbsp;<input class="submit" type="submit" name="search" value="ПОИСК ПО КАТЕГОРИЯМ" style="width:200px;height:30px;background:#1874CD;border:0;font-weight:bold;color:white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<!-- begin no_search_categories -->
<input type="hidden" name="search_category_id" value="{top_id}">
<!-- end no_search_categories -->
<!-- END search_categories -->

</form> 

Ну вот собственно и все.
Так как внешний вид есть дело каждого то вариации на тему редактирования css файла не привожу. Скажу только что для выбранного в теме шаблона это файл styles/classic_blue.css Как выше обозначенные модули располагать на странице решать вам.

!!! Перед редактированием файлов обязательно сохраняйте оригинальную копию файла Чтобы потом не было мучительно больно

ИМ это не только сайт. Это еще и ряд вопросов которые идут параллельным курсом, например, вопросы связанные с телефонией (многоканальные номера, прием и учет звонков и т.д.). В рамках того что есть также существует интеграция с телефонной станцией. Но это уже немного не по теме.

Будут вопросы - пишите, помогу чем смогу.

P.S. Если кому-то интересно как это все выглядит на работающем сайте - пишите в личку, дам посмотреть. Тут не выкладываю потому как пока еще не все готово.

header_1.jpg