Интерактивна кошницата въз основа на Аякс, PHP и JQuery, друга свободна практика блог
Интерактивна кошницата въз основа на AJAX, PHP и JQuery
влизане
В тази статия, ние ще създадем пазарска количка, работещи на базата на Аякс. Всички стоки ще се съхраняват в база данни MySQL, данните ще бъдат обработени с помощта на PHP.
В JQuery, Ajax ще работи на страницата, но този плъгин simpletip. добавяне на интерактивност на целия процес.
Така че, нека да започнем, изтеглете демо файлове, и започнете да четете.
Стъпка 1 - базата данни MySQL
Ако искате да получите работна демо, ще трябва да изпълни следната SQL-заявка в базата данни на контролния панел (т.е. PhpMyAdmin). Тази заявка създава маса, и да направи няколко продукта. Това искане код е достъпен и в table.sql файл в демо файлове.
След това, трябва да попълните данните на профила си в MySQL connect.php файл.
Стъпка 2 - XHTML
Първо ние ще създадем основната оформление.
Както можете да видите от по-горе код, ние сме позиционирани нашия форум в две основни секции, напълно идентични по отношение на XHTML-маркировка. В първата колона, показваме всички наши продукти, втората колона действа като кошница.
По-долу можете да видите подробна информация за структурата на нашия раздел продукти.
Стоките, които се генерират от нашия PHP код, тъй като може да се види в съответствие 18. Ние ще анализираме по-подробно в рамките на няколко минути. Сега, нека да разгледаме как ще се отнесем към XHTML-маркиране за окончателен проект.
Стъпка 3 - CSS
По това време, на CSS-код, за да бъде много дълъг, така че аз го разделя на две части.
Забележка клас подсказка. То се създава автоматично, за плъгин simpletip. но няма стил по подразбиране. Ето защо, ние го зададете стила тук. Аз бях на граничен радиус имота. които все още не се поддържа от всички браузъри, но няма да доведе до сериозни увреждания на тези, които не ги подкрепят.
Сега, нека да погледнем на CSS стилове за частта кошница.
Всеки разработчик ще ни каже, че тук сме пропуснали нещо. Както може би предположил - специална процедура за лечение на IE6.
Лично аз скоро планират да прекрати поддръжката на IE6 във всичките си проекти - ако не за IE6, горния код ще бъде по-кратък от една четвърт, а аз не би трябвало да изразходва толкова много време, за да отстраняване на грешки.
Но във всеки случай, това е, което ние трябва да IE6 разберем какво искаме от него:
Отличен. Сега, нека да погледнем на последната версия на PHP.
Стъпка 4 - PHP
Ние използваме PHP по няколко начина и на различни места. За начало, нека да разгледаме как да създадете списък с елементи на началната страница.
Освен това, tips.php файл, ние отново се използва PHP, за да премине като параметър името на файла с изображение, проверка на продукт, свързан с образа и показва намек под формата на HTML. По-късно ще използва плъгин simpletip.
Получената обект има свойства, състояние, номер, цена и TXT. Всички те използват AJAX-функции, тъй като скоро ще видим.
И последния файл, който използваме PHP - това order.php, която се използва за обработка на поръчките. Сега, това просто отнема вашата поръчка. Ние можем да го променим, като включва форма за обратна връзка, функция на платежните системи, или нещо друго, което ще се превърне този пример във функционален онлайн магазин.
В тази част на РНР завършена. Всичко, което остава да направите е да добавите малко JQuery магия.
Стъпка 5 - JQuery
Тъй като ние ще използваме JQuery в своята цялост, трябва да се свържете на JQuery UI библиотека, както и основни.
Сега можем да продължим с нашия скрипт.
Основната идея е, че ние използваме изображение атрибут SRC на. като уникален ключ, който се предава на PHP. Всеки елемент в базата данни има поле с име в файл, който ни позволява да се намерят най-подходящия продукт за неговата снимка.
Този блок от код се активира след като страницата се зареди напълно, така че ние сме сигурни, че всички елементи на страницата се инициализират.
По-долу е втората част script.js код.
На няколко места в този код, ние използваме номер да се уточни на стоките. ID - уникален идентификатор, който се генерира база данни MySQL веднъж, когато правим нова позиция.
Тя се предава AJAX заявка, и ние трябва да го преведе на индекса-та позиция на нашата гама от продукти за бъдеща употреба, всичко изпълнява функцията findpos ().
Сега, нашата интерактивна пазарска количка е готова.
кажи на приятел
Дмитрий казва:
Необходимо е да се създаде уеб сайт брокер-дао Бао със следната функционалност:
1.
Трябва да се намери бутона "добави в кошницата" на екранната снимка по-горе, от главното меню или в друго място на вашия сайт.
2. Чрез кликване върху него се появява Аякс формуляр трябва да попълните (не можете да Аякс, а просто се свържете отново с страницата със същата форма).
Формулярът се попълва на ръка!
В края на правилното попълване и натискане на бутона "изпрати", продуктът скача в коша, но се появи следното съобщение пред нас:
Всичко е ясно, че няма да се обясни.
3. Сега около коша.
Както написах по-горе, при попълване на формата на претенция 2, и натиснете бутона "изпрати", продуктът влезе в коша.
Сега, когато кликнете върху коша зареди отделна страница със следната информация:
Информация в кошницата трябва да е същата! Толкова е просто, разбираемо и достъпно!
При поръчка, ние използваме следните опции:
Тук потребителят може да попълните данните за минали периоди и кликнете върху бутона "проблема".
4.Dalee, можете да изпратите попълнения формуляр на пощенската агент дао, и може да бъде свързан с избора на начина на плащане на плащане: Интернет портфейли, онлайн плащане с кредитни карти или плащане по банкова сметка чрез плащане terminal.Varianty, мисля, че е по-добре, за да изпратите писмото клиентите, които са направили zakaz.A може да изпълни всички онлайн плащания веднага, а едва след това образуват платена поръчка трябва да бъдат изпратени на посредник поща Тао, и ако потребителят иска да плаща за стоките на терминала, показват данни, отнасящи се до изплащането за нея, както и на медиатора tao- изпрати ПИ по предварителна заявка стоки.
Нещо подобно.
Дмитрий казва:
Интересува се от възможността за добавяне на продукти за WordPress Аякс кошница, като попълните формуляра за покупка е на този сайт: veschichka.com/help/how-to-order/. Вие не можете да Аякс, но с помощта на Форма за контакт 7 WooCommerce най-важното, за да работят.
По-конкретно: добавяне на продукт в кошницата се извършва чрез попълване на специален формуляр, който показва, че цената на стоките от Taobao сайт, връзка към нея и да се обърне на данни (Всичко това е лесно да се направи с помощта на Форма за обратна връзка 7). След попълване на елемента форма ще се появи в кошницата. На каква цена е тази, която сте посочили в самата форма.
Как мога да raelizovat същите възможности като на сайта, линка по-горе!?
Необходимо е, че данните за тази форма да навлизаме в коша, които ще бъдат на сбора от цените на ред и след това изпратиха писмо до пощенската служба на клиента за oplaty.A още по-добри, ако същата кошница се завинтва начин на плащане.