Галерея товаров с формой заказа

Опубликовал: admin Пятница, Декабрь 28, 2012 в категории AJAX, PHP | Пока нет комментариев

Создадим в качестве примера небольшой скрипт магазина с возможностью выбора языка (английский и руссский) — продажа коллекций gif-галерей с возможностью просмотра всех фото каждой галереи, с формой заказа. Будем использовать следующие плагины: imageFlow (для просмотра галереи рисунков), fancybox (для создания формы заказа). Меню реализуем средствами базовой библиотеки jQuery. С помощью библиотеки xajax осуществим подгрузку контента страниц "О сайте" и "Контакты". Файлы примера находятся на компакт-диске в папке book_primers/2-7. Страница примера при загрузке приведена на рис. 2.27.

Рис. 2.27. Вид магазина при загрузке

Для нашего примера создадим шесть таблиц в базе данных:

primer_2_7_kategory — список категорий товаров;

primer_2_7_tovars — список товаров;

primer_2_7_images — список картинок для каждого товара;

primer_2_7_content — содержимое для страниц "О сайте", "Контакты";

primer_2_7_rate — курс валют;

primer_2_7_zakaz — учет заказов.

Дампы для создания структуры таблиц базы данных приведены в листинге 2.30

(дамп находится на компакт-диске в папке book_primers/primer2-7.sql).

Листинг 2.30

CREATE TABLE ‘book_xajax1′.’primer_2_7_kategory’ (

‘id’ int( 9 ) NOT NULL AUTO_INCREMENT , ‘name_rus’ varchar( 20 ) default NULL , ‘name_eng’ varchar( 20 ) default NULL , ‘sort’ int( 5 ) NOT NULL ,

‘visible’ set( ‘yes’, ‘no’ ) NOT NULL default ‘yes’, UNIQUE KEY ‘id’ ( ‘id’ ) ,

KEY ‘sort’ ( ‘sort’ )

) ENGINE = MYISAM AUTO_INCREMENT = 1 DEFAULT CHARSET = cp1251

CREATE TABLE ‘book_xajax1′.’primer_2_7_tovars’ ( ‘id’ int( 9 ) NOT NULL AUTO_INCREMENT ,

‘name_rus’ varchar( 20 ) default NULL , ‘name_eng’ varchar( 20 ) default NULL , ‘id_kategory’ int( 9 ) NOT NULL ,

‘sort’ int( 5 ) NOT NULL , ‘info_rus’ text,

‘info_eng’ text,

‘pay_rus’ float( 10, 2 ) default NULL , ‘pay_eng’ float( 5, 2 ) default NULL ,

‘visible’ set( ‘yes’, ‘no’ ) NOT NULL default ‘yes’, UNIQUE KEY ‘id’ ( ‘id’ )

) ENGINE = MYISAM AUTO_INCREMENT = 1 DEFAULT CHARSET = cp1251

CREATE TABLE ‘book_xajax1′.’primer_2_7_images’ ( ‘id’ int( 9 ) NOT NULL AUTO_INCREMENT ,

‘id_tovar’ int( 9 ) NOT NULL , ‘name’ varchar( 40 ) default NULL , ‘sort’ int( 5 ) NOT NULL , ‘info_rus’ varchar( 20 ) NOT NULL , ‘info_eng’ varchar( 20 ) NOT NULL ,

‘visible’ set( ‘yes’, ‘no’ ) NOT NULL default ‘yes’, UNIQUE KEY ‘id’ ( ‘id’ )

) ENGINE = MYISAM AUTO_INCREMENT = 1 DEFAULT CHARSET = cp1251

CREATE TABLE ‘book_xajax1′.’primer_2_7_content’ ( ‘id’ int( 2 ) NOT NULL AUTO_INCREMENT ,

‘zag_rus’ varchar( 20 ) NOT NULL , ‘zag_eng’ varchar( 20 ) NOT NULL , ‘info_rus’ text NOT NULL , ‘info_eng’ text NOT NULL ,

UNIQUE KEY ‘id’ ( ‘id’ )

) ENGINE = MYISAM AUTO_INCREMENT = 1 DEFAULT CHARSET = cp1251

CREATE TABLE ‘book_xajax1′.’primer_2_7_rate’ ( ‘id’ int( 5 ) NOT NULL AUTO_INCREMENT ,

‘data’ date NOT NULL ,

‘usd’ float( 8, 4 ) default NULL , UNIQUE KEY ‘id’ ( ‘id’ )

) ENGINE = MYISAM AUTO_INCREMENT = 1 DEFAULT CHARSET = cp1251

CREATE TABLE ‘book_xajax1′.’primer_2_7_zakaz’ ( ‘id’ int( 9 ) NOT NULL AUTO_INCREMENT ,

‘data_zakaz’ datetime NOT NULL , ‘data_oplata’ date NOT NULL , ‘data_dostavka’ date NOT NULL , ‘id_tovar’ int( 9 ) NOT NULL , ‘name’ varchar( 20 ) NOT NULL , ‘phone’ varchar( 15 ) NOT NULL , ‘email’ varchar( 30 ) NOT NULL , ‘address’ varchar( 100 ) NOT NULL ,

‘oplata’ set( ‘yes’, ‘no’ ) NOT NULL default ‘no’, ‘dostavka’ set( ‘yes’, ‘no’ ) NOT NULL default ‘no’, ‘visible’ set( ‘yes’, ‘no’ ) NOT NULL default ‘yes’, UNIQUE KEY ‘id’ ( ‘id’ )

) ENGINE = MYISAM DEFAULT CHARSET = cp1251;

Так как пример двуязычный, в таблицах primer_2_7_kategory, primer_2_7_tovars и primer_2_7_content предусмотрены поля для двух языков. В таблице primer_2_7_rate хранятся курсы валют для пересчета цены в доллары. В таблице primer_2_7_images находятся картинки для каждой галереи. В таблицу primer_2_7_zakaz будем записывать данные заказов. Начальные данные для вывода начального товара и языка загрузки хранятся в файле my.php. При загрузке

файла index.php подключаются файлы библиотек, анализируются данные HTTPзапроса и выводится информация о нужном товаре, по окончании загрузки страницы запускаются плагины. Для страниц "О сайте" и "Контакты" вызываются xajaxфункции, изменяющие контент страницы. Содержимое файла index.php приведено в листинге 2.31.

Листинг 2.31

<?php require_once(‘index.common.php’); require_once("mybaza.php"); require_once("my.php");

// язык

$query0="SELECT usd FROM ".BAZA_RATE." ORDER BY id DESC LIMIT 0, 1 ";

$_SESSION[usd]=mysql_result(mysql_query($query0),0); if(!isset($_GET[prg]))

$_SESSION[language]=LANGUAGE;

else

$_SESSION[language]=$_GET[language];

// товар

if(!isset($_GET[tovar]))

$_SESSION[tovar]=TOVAR_ID; else

$_SESSION[tovar]=$_GET[tovar];

// программа – tovar,about, contacts if(!isset($_GET[prg]))

$_SESSION[prg]=’tovar’; else

$_SESSION[prg]=$_GET[prg];

// если tovar —

if($_SESSION[prg]==’tovar’)

{

// товар для вывода

$query11="SELECT * FROM ".BAZA_TOVAR." WHERE id=".$_SESSION[tovar]." ";

$rez11=mysql_query($query11);

$row11=mysql_fetch_assoc($rez11);

// категория начального товара

$query12="SELECT * FROM ".BAZA_KATEGORY." WHERE id=".$row11[id_kategory]." ";

$rez12=mysql_query($query12);

$row12=mysql_fetch_assoc($rez12);

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Title</title>

img, div { behavior: url(iepngfix.htc) }

</style>

$(document).ready(function(){

$(‘.sub + ul’).hide();

$(‘.sub’).toggle( function(){$(this).next(‘ul’).slideDown(500); }, function(){$(this).next(‘ul’).slideUp(500); }

);

<?php

// открыть нужную категорию

if($_SESSION[prg]==’tovar’)

echo ‘$("#ul’.$row12[id].’").slideDown(500),’;

$("a#inline").fancybox({ ‘overlayColor’: ‘#000′, ‘overlayOpacity’: 0.7, ‘showCloseButton’: false, ‘padding’: 0,

‘margin’: 0, ‘titleShow’: false, ‘showNavArrows’: false, ‘width’:651, ‘height’:402, ‘autoDimensions’:false

});

</script>

<?php $xajax->printJavascript(”); ?>

</head>

<?php if($_SESSION[prg]==’tovar’)

echo "<body>";

// для О сайте и Контакты – вызов xajax-функций

elseif($_SESSION[prg]==’contacts’)

echo "<body onload=’xajax_Contacts();’>"; else

echo "<body onload=’xajax_About();’>";

<?php

$query14="SELECT info_".$_SESSION[language]." FROM ".BAZA_CONTENT." WHERE id=3 ";

$rez14=mysql_query($query14);

$slogan1="";

$slogan1="<p id=’slogan1′>".mysql_result($rez14,0)."</p>"; echo $slogan1;

</div>

<?php

$lang=""; if($_SESSION[language]==’rus’)

$lang="<span>Рус | <a href=’index.php?language=eng&prg=".

$_SESSION[prg]."&tovar=".$_SESSION[tovar]."’>Eng</a></span>"; else

$lang="<span><a href=’index.php?language=rus&prg=".

$_SESSION[prg]."&tovar=".$_SESSION[tovar]."’>

Рус</a>| Eng </span>"; echo $lang;

</div>

<?php

// Вывод категорий и товаров

$menu1="";

$menu1.="<ul class=’menuul’>"; if($_SESSION[language]==’rus’)

$menu1.="<li><a class=’mitem’ href=’#’>GIF галереи</a></li>"; else

$menu1.="<li><a class=’mitem’ href=’#’>GIF gallery</a></li>";

$query21="SELECT * FROM ".BAZA_KATEGORY." WHERE visible=’yes’ ORDER BY sort ASC ";

$rez21=mysql_query($query21);

while($row21=mysql_fetch_assoc($rez21))

{

$menu1.="<li><a class=’mitem sub’ href=’#’>".

$row21['name_'.$_SESSION[language]]."</a>";

$menu1.="<ul id=’ul".$row21[id]."’ class=’submenu’>";

$query22="SELECT * FROM ".BAZA_TOVAR." WHERE id_kategory=".$row21[id]." && visible=’yes’ ORDER BY sort ASC ";

$rez22=mysql_query($query22); while($row22=mysql_fetch_assoc($rez22))

{

$menu1.="<li><a class=’smitem’ href=’index.php?language=".

$_SESSION[language]."&prg=tovar&tovar=".$row22[id]."’";

$menu1.=">".$row22['name_'.$_SESSION[language]]."</a></li>";

}

$menu1.="</ul>";

$menu1.="</li>";

}

$menu1.="</ul>"; echo $menu1;

</div>

<?php

// вывод О сайте и Контакты

$menu2="<ul class=’menuul’>"; if($_SESSION[language]==’rus’)

{

$menu2.="<li class=’mitem nobg’><a href=’index.php?language=rus&prg= about&tovar=".$_SESSION[tovar]."’ class=’nobg’>О сайте</a></li>";

$menu2.="<li class=’mitem nobg’><a href=’index.php?language=rus&prg= contacts&tovar=".$_SESSION[tovar]."’ class=’nobg’>Контакты</a></li>";

} else

{

$menu2.="<li class=’mitem nobg’><a href=’index.php?language=eng&prg= about&tovar=".$_SESSION[tovar]."’ class=’nobg’>About</a></li>";

$menu2.="<li class=’mitem nobg’><a href=’index.php?language=eng&prg= contacts&tovar=".$_SESSION[tovar]."’ class=’nobg’>Contacts</a></li>";

}

$menu2.="</ul>"; echo $menu2;

</div>

<?php

// заголовок товара

if($_SESSION[prg]==’tovar’)

{

$zag="";

$zag.="<h2 class=’heading’>".$row12['name_'.$_SESSION[language]]." / ";

$zag.=$row11['name_'.$_SESSION[language]]."</h2>";

} elseif($_SESSION[prg]==’contacts’)

{ if($_SESSION[language]==’rus’)

$zag="<h2 class=’heading’> Контакты </h2>"; else

$zag="<h2 class=’heading’> Contacts </h2>";

} else

{ if($_SESSION[language]==’rus’)

$zag="<h2 class=’heading’> О сайте </h2>";

else

$zag="<h2 class=’heading’> About </h2>";

}

echo $zag;

</div>

<?php

// фотографии товара

$images="";

$query13="SELECT * FROM ".BAZA_IMAGES." WHERE id_tovar=".$_SESSION[tovar]." ORDER BY sort ASC";

$rez13=mysql_query($query13); while($row13=mysql_fetch_assoc($rez13))

{

$images.="<img src=’img/".$row13[name]."’ ";

$images.="longdesc=’img/".$row13[name]."’ ";

$images.="alt=’".$row13[name]."’ />";

} if($_SESSION[prg]==’tovar’)

echo $images;

</div>

<?php if($_SESSION[prg]==’tovar’)

{

$opisanie="";

$opisanie.=$row11['info_'.$_SESSION[language]]; echo $opisanie;

}

</div>

<br>

<?php if($_SESSION[language]==’rus’)

{

$price="<div id=’price’>";

$price.="<span id=’spanprice’>Стоимость: <span>".$row11[pay_rus]." руб.</span></span>";

$price.="<a id=’inline’ href=’#data’></a>";

$price.="</div>";

} else

{

$price="<div id=’price’>";

$price.="<span>Pay: <span>".sprintf(‘%5.0f’, ($row11[pay_rus]/$_SESSION[usd]))." $</span></span>";

$price.="<a id=’inline’ href=’#data’></a>";

$price.="</div>";

} if($_SESSION[prg]==’tovar’) echo $price;

else

echo "<table></table>";

</div>

</div>

</div>

<?php

$tovar=$row12['name_'.$_SESSION[language]]." / ".$row11['name_'.$_SESSION[language]];

if($_SESSION[language]==’rus’)

{

$name="Ваше имя";

$phone="Контактный <br/> телефон";

$email="E-mail";

$adress="Адрес доставки";

} else

{

$name="Your name";

$phone="Contact <br/> phone";

$email="E-mail";

$adress="Address";

}

$data="<form id=’Form_Zakaz’ action=’javascript:void(null);’ onsubmit=’ xajax_Create_Zakaz(xajax.getFormValues(\"Form_Zakaz\"));’ >

<tr><td></td><td><h3>".$tovar."</h3></td></tr>

<tr><td class=’right’>".$phone."</td><td>

+<input name=’phone1′ id=’phone1′ type=’text’ size=2 maxlength=2 value=”>

(<input name=’phone2′ id=’phone2′ type=’text’ value=” size=5 maxlength=5>)

<tr><td class=’right’>".$email."</td><td><input name=’email’ id=’email’ type=’text’ value=”></td></tr>

<tr><td class=’right’>".$adress."</td><td><textarea name=’address’ cols=’40′ rows=’3′></textarea></tr>

</table>

</form>"; echo $data;

</div>

<div id="big_img" style=’position:absolute;z-index:29999900; margin: 20px;top:5%;left:5%;opacity:1.0; width:90%;height:auto;display:none;

background-color: rgb(0,0,0)’ onclick=’this.style.display="none";’

onmouseout=’this.style.display="none";’>

</div>

</body>

</html>

Вид страницы при выборе другого языка иллюстрирует рис. 2.28. Содержимое файла create_zakaz.php приведено в листинге 2.33. Плагин imageFlow позволяет организовать галерею для просмотра картинок. Выбранная картинка перемещается в центр, увеличивается в размере и приобретает фокус. Соседние картинки уходят на второй план и "замыливаются". При щелчке кнопкой мыши по картинке в центре блок div c id=big_img становится видимым, и в его содержимое передается увеличенное изображение картинки. Для этого в стандартном файле imageflow.js внесем изменения в свойство click объекта imageflow (листинг 2.32).

Листинг 2.32

/*onClick: function() { document.location = this.url; }, */

/* Onclick behaviour */ onClick: function()

{document.getElementById(‘big_img’).style.display=’block’; document.getElementById(‘big_img’).innerHTML=

‘<img src="’+this.url+’" width=100%> ‘},

Вид страницы при просмотре увеличенной картинки изображен на рис. 2.29. Картинка пропадает при щелчке на ней мышью либо при выходе мыши за пределы блока:

onclick=’this.style.display="none";’ onmouseout=’this.style.display="none";’

Рис. 2.28. Вид страницы при изменении языка

При нажатии на кнопку Заказать появляется форма заказа (рис. 2.30) — еще одно применение плагина fancybox. При заполнении заказа и нажатии на кнопку Подтвердить заказ вызывается xajax-функция Create_Zakaz, расположенная в файле create_zakaz.php (листинг 2.33). Функция проверяет правильность заполнения формы и записывает информацию о заказе в базу данных и отправляет сообщение о поступившем заказе на e-mail администратора.

Рис. 2.29. Увеличенное изображение картинки

Рис. 2.30. Вид формы заказа

Листинг 2.33

<?php

function Create_Zakaz($Id)

{

$objResponse = new xajaxResponse();

// подключение к базе данных

require_once("mybaza.php");

// подключение файла настроек

require_once("my.php");

// получение данных

$tovar=$Id[tovar];

$name=utftowin($Id[name]);

$phone1=$Id[phone1];

$phone2=$Id[phone2];

$phone3=$Id[phone3];

$email=$Id[email];

$address=utftowin($Id[address]);

// ******* проверка ****

$error="";

// name

if(!ereg("^([a-z,A-Z,а-я,А-Я,0-9,\ ]{6,50})$",$name))

{ if($_SESSION[language]==’rus’)

$error.=" Неверный формат имени ";

else

$error.=" Неверный формат name ";

}

// phone

if(!ereg("^([0-9,\+]{1,2})$",$phone1))

{ if($_SESSION[language]==’rus’)

$error.=" Неверный формат телефон (код страны)";

else

}

$error.=" Неверный формат phone (код страны)";

if(!ereg("^([0-9,\+]{3,5})$",$phone2))

{ if($_SESSION[language]==’rus’)

$error.=" Неверный формат телефон (код города)";

else

}

$error.=" Неверный формат phone (код town)";

if(!ereg("^([0-9,\+]{5,7})$",$phone3))

{ if($_SESSION[language]==’rus’)

$error.=" Неверный формат телефон (номер)";

else

}

// email

$error.=" Неверный формат phone (number)";

if(!ereg("^([a-z,0-9,-_\.]{2,20})([\@]{1})([a-z,0-9,-_]{2,20}) ([\.]{1})([a-z,]{1,3})$",$email))

{ if($_SESSION[language]==’rus’)

$error.=" Неверный формат e-mail ";

else

}

$error.=" Неверный формат e-mail ";

if(strlen(trim($address))==0)

{ if($_SESSION[language]==’rus’)

$error.=" Введите адрес ";

else

}

$error.=" Введите address ";

// ошибка

if($error<>"")

{

$objResponse->alert($error); return $objResponse;

}

// **** норма — отправка e-mail админу и запись в базу ****

// запись в базу

$phone="+".$phone1."(".$phone2.")".$phone3;

$data_zakaz=date(‘Y-m-d H:i:s’);

$query1="INSERT INTO ".BAZA_ZAKAZ." SET data_zakaz=’".$data_zakaz."’, id_tovar=’".$tovar."’,name=’".$name."’, phone=’".$phone."’,email=’".$email."’,

address=’".$address."’ ";

$rez1=mysql_query($query1);

$num=mysql_insert_id();

// формирование контента

$content="";

$content.="<table id=’buy’><td><h3>"; if($_SESSION[language]==’rus’)

$content.="<center><br><br><br> <center>Ваш заказ

<br>принят <br> Номер заказа ".$num."</center>"; else

$content.="<center><br><br><br> Your zakaz <br>принят <br>Number

zakaz ".$num." </center>";

$content.="</h3></td></tr></table>";

// выдача контента

$objResponse->assign("data","innerHTML",$content);

// отправка письма администратору

$query2="SELECT kategory.name_rus,tovar.name_rus FROM kategory,tovar WHERE tovar.id=".$tovar." && kategory.id=tovar.id_kategory ";

$rez2=mysql_query($query2);

$row2=mysql_fetch_row($rez2);

$to=EMAILADMIN;

$subject=’Заказ с сайта’.SITE;

$body=’<b>Заказ на сайте ‘.SITE.’</b><br>’;

$body.=’<b>Заказан следующий товар</b><br>’;

$body.=’<b>’.$row2[0].’ \ ‘.$row2[1].’</b><br><br>’;

$body.=’<b>Данные покупателя: </b><br>’;

$body.=’<b>Имя — </b>’.$name.’<br>’;

$body.=’<b>Контактный телефон — </b>’.$phone.’<br>’;

$body.=’<b>E-mail — </b>’.$email.’<br>’;

$body.=’<b>Адрес — </b>’.$address.’<br>’;

$body.=’<b>Дата заказа — </b>’.date(‘d-m-Y H:i:s’).’<br>’;

$body.=’<b>Номер заказа — </b>’.$num.’<br>’;

$body.=’<br>’;

$headers="Content-type: text/html; charset=windows-1251;"; mail($to,$subject,$body,$headers);

return $objResponse;

}

Источник: Петин В. А., Сайт на AJAX под ключ. Готовое решение для интернет-магазина. — СПб.: БХВ-Петербург, 2011. — 432 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

Галерея товаров с формой заказа

Похожие посты:

Комментировать Cancel reply