Главная › Настройки › Скрипт корзины для landing page

Скрипт корзины для landing page

В этом еженедельном уроке screencast + мы научимся создавать собственную корзину покупок с PHP и MySQL. Вы увидите, что всё не так сложно, как кажется.

Предварительный просмотр скринкастов Шаг 1

Начнём со структуры папок:

Структура

reset.css - вы можете получить по this ссылке
style.css - наш css файл для стиля HTML макета
connection.php - файл для соединения с базой данных
index.php - шаблон корзины покупок
cart.php - файл, который меняет продукты в корзине (добавлять, удалять)
products.php - страница списка продуктов

Шаг 2

Начнем с разметки html, а затем её оформления. Откройте index.php и скопируйте/вставьте код:

Shopping cart

Как вы видите, наша страница имеет две колонки: основной столбец и sidebar. Теперь пройдём в CSS. Откройте файл style.css и пропишите код:

Body { font-family: Verdana; font-size: 12px; color: #444; } #container { width: 700px; margin: 150px auto; background-color: #eee; overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ padding: 15px; } #main { width: 490px; float: left; } #sidebar { width: 200px; float: left; }

Вот как теперь выглядит наша страница продуктов:

Полный скринкаст Шаг 3

Прежде чем перейти к части PHP/MySQL, нам нужно создать базу данных. Откройте phpMyadmin и выполните следующие действия:

Перейдите на вкладку Privileges , нажмите кнопку добавления нового пользователя и настройте: Username : tutorial; Host : localhost; Password : supersecretpassword. Теперь убедитесь, что установлены Global privileges; затем переходите к следующему шагу.

Создайте новую базу данных под названием tutorials .

Создайте новую таблицу products и установите количество полей 4. Теперь заполните эти поля так: id_integer - убедитесь, что он установлен в INT и пометьте его как PRIMARY (также установите его в auto_increment); name - будет VARCHAR длиной 100; description - VARCHAR длиной 250; price - значение DECIMAL (2,6)

Заполните таблицу несколькими примерами продуктов.

Для экономии времени я экспортировал свою таблицу, чтобы вы просто запустили следующий запрос:

CREATE TABLE IF NOT EXISTS `products` (`id_product` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(100) NOT NULL, `description` varchar(250) NOT NULL, `price` decimal(6,2) NOT NULL, PRIMARY KEY (`id_product`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ; INSERT INTO `products` (`id_product`, `name`, `description`, `price`) VALUES (1, "Product 1", "Some random description", "15.00"), (2, "Product 2", "Some random description", "20.00"), (3, "Product 3", "Some random description", "50.00"), (4, "Product 4", "Some random description", "55.00"), (5, "Product 5", "Some random description", "54.00"), (6, "Product 6", "Some random description", "34.00");

Шаг 4

До извлечения данных из базы данных я сделаю index.php шаблон для списка продуктов и корзины. Поэтому добавьте следующий код в начало страницы index.php :

session_start() - для дальнейшего использования; это позволит нам использовать сеансы (очень важно, чтобы session_start был написан прежде, чем другие данные будут отправлены в браузер).

Во второй строке мы укажем connection.php, который установит соединение с базой данных (мы рассмотрим это в секунду). И ещё одно: разница между include и require заключается в том, что если вы используете require и файл не может быть найден, выполнение скрипта закончится. Если вы используете "include", скрипт продолжит работать.

Вместо копирования всего html-кода (ссылка на css, на js) для каждого файла на вашем сайте, можете просто сделать их все относительно одного файла. Сначала я проверяю, есть ли переменная GET, называемая "page set". Если нет, я создаю новую переменную _pages . Указывая сначала переменную GET, называемую pages, я хочу убедиться, что файл, который я собираюсь включить, является допустимой страницей.

Для этого нам нужно включить файл; добавьте эту строку в index.php между div с id "main":

Теперь у нас полный index.php :

Shopping Cart

Давайте создадим соединение с MySQL. Откройте connections.php и пропишите следующее:

Шаг 5

Пропишем разметку для страницы продуктов. Откройте её и введите следующее:

Product List

Name Description Price Action

Product 1	Some random description	15 $	Add to cart
Product 2	Some random description	25 $	Add to cart

Давайте посмотрим на страницу:

Как видите, это довольно уродливо. Давайте добавим этот CSS.

A {color: #48577D; text-decoration: none;} a:hover {text-decoration: underline;} h1, h2 {margin-bottom: 15px} h1 {font-size: 18px;} h2 {font-size: 16px} #main table { width: 480px; } #main table th { padding: 10px; background-color: #48577D; color: #fff; text-align: left; } #main table td { padding: 5px; } #main table tr { background-color: #d3dcf2; }

Okay: другое дело:

Выглядит намного лучше, не так ли? Внизу указан полный код style.css :

Body { font-family: Verdana; font-size: 12px; color: #444; } a {color: #48577D; text-decoration: none;} a:hover {text-decoration: underline;} h1, h2 {margin-bottom: 15px} h1 {font-size: 18px;} h2 {font-size: 16px} #container { width: 700px; margin: 150px auto; background-color: #eee; padding:15px; overflow: hidden; } #main { width: 490px; float: left; } #main table { width: 480px; } #main table th { padding: 10px; background-color: #48577D; color: #fff; text-align: left; } #main table td { padding: 5px; } #main table tr { background-color: #d3dcf2; } #sidebar { width: 200px; float: left; }

Шаг 6

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

Product 1 Some random description 15 $ Add to cart Product 2 Some random description 25 $ Add to cart

Отлично! Теперь в том месте, где были строки таблицы, введите следующий код PHP:

Go to cart

Сначала проверим, установлен ли сеанс корзины. Если нет, мы выводим сообщение, предупреждая пользователя о том, что корзина пуста.

Затем создаём mysql SELECT, но мы выбираем только те продукты, которые присутствуют в этом сеансе. Для этого используем функцию foreach. Итак, мы проходим цикл и добавляем идентификатор продукта в SELECT. Затем мы используем функцию substr для удаления последней запятой из SELECT.

В конце выводим данные в браузер.

Посмотрите на картинку снизу:

Поскольку index.php является шаблоном для всех файлов, sidebar также будет виден в cart.php . Разве это не круто?!

Шаг 9

Наконец, откройте cart.php и введите код:

View cart Go back to products page

Name Quantity Price Items Price

шт.
Оформить заказ

< div class = "smalcart" >

< strong > Товароввкорзине: < / strong > шт.

< br / > < a href = "" > Оформитьзаказ< / a >

< / div >

В данном случае используется содержимое массива $smal_cart. Он станет доступен в основном шаблоне интернет-магазина несколько позже. Для этого потребуется провести еще ряд определенных действий.

2. Чтобы корзина обладала простым и гармоничным видом, добавьте в файл style.css следующие стили:

#header .smalcart { float: right; height: 55px; padding: 10px; padding-left: 15px; margin: 10px; border: 1px solid gray; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background: #E6DEEA; }

#header .smalcart {

float : right ;

height : 55px ;

padding : 10px ;

padding - left : 15px ;

margin : 10px ;

border : 1px solid gray ;

border - radius : 10px ;

Moz - border - radius : 10px ;

Webkit - border - radius : 10px ;

background : #E6DEEA;

После этого уже можете взглянуть на визуальные изменения во внешнем виде интернет-магазина.

3. Теперь нам с вами нужно углубиться в системную структуру корзины. В связи с тем, что модуль корзины не является отдельной страницей, дополнительный контроллер под нее можно не создавать. Внешний вид уже отображен в шаблоне, поэтому разработку views не делаем. Ограничимся лишь проработкой параметра model.

Для этого зайдите в папку application, а затем в models. После этого создайте файл с названием cart.php. В него добавляете следующее содержание:

class Application_Models_Cart { function addToCard($id, $count=1) { $_SESSION[‘cart’][$id]=$_SESSION["cart"][$id]+$count;return true; } function delFromCart($id, $count=1){} function clearCart(){} }

class Application_Models_Cart

function addToCard ($ id , $ count = 1 )

$ _SESSION [ ‘cart ’] [ $ id ] = $ _SESSION [ "cart" ] [ $ id ] + $ count ; return true ;

function delFromCart ($ id , $ count = 1 ) { }

function clearCart () { }

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

Информация о товарах в корзине будет содержаться в массиве $_SESSION. Он представляет собой ассоциативный массив, в котором ключами являются ID продукции, а значением - количество товаров, добавленных в корзину. Стратегия минимализма позволит упростить процесс передачи информации в cookies.

Таким образом, мы получили готовую базу Application_Models_Cart. Теперь необходимо ее активировать.

4. Перед этим давайте еще внесем изменения в атрибут href для более правильной работы модуля: