Php модуль корзины товаров. Пошаговая инструкция по созданию корзины

В шестой части статьи, как и обещал, сделаем нашу корзину аяксовой, а так же стилизуем её с помощью CSS.

Статья обещает быть длинной, поэтому запаситесь терпением, нам надо много изучить и сделать.

Т.к. изучение CSS не входит в планы этих уроков, то я просто приведу уже готовый код без пояснений. В первых уроках мы создавали файл assets/css/styles.css , который был пустым. В этом файле и будет храниться весь CSS код сайта:

assets/css/styles.css

Body { font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; font-size: 16px; color: black; } .content { width: 700px; margin: 20px auto; } .cart-items, .products-list { width: 100%; text-align: center; } .cart-items thead { font-weight: bold; } .products-list .product-title, .products-list .price { margin-bottom: 5px; } .products-list .product-title { font-weight: bold; } .products-list .price { color: red; } .cart { background: #eee; padding: 10px; } .cart .controls { margin-top: 10px; } .message-success, .message-error { width: 100%; padding: 10px; border-radius: 8px; border-width: 1px; color: white; box-sizing: border-box; margin-bottom: 10px; } .message-success { background: #5db954; border-color: #51a34a; } .message-error { background: #b94545; border-color: #ab4040; } /* Стили HTML форм */ *:focus { outline: none; } button, input, input { position: relative; display: inline-block; padding: 7px 12px; font-size: 13px; font-weight: bold; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,0.9); white-space: nowrap; vertical-align: middle; cursor: pointer; background-color: #eeeeee; background-image: -moz-linear-gradient(#fcfcfc, #eee); background-image: -webkit-linear-gradient(#fcfcfc, #eee); background-image: linear-gradient(#fcfcfc, #eee); background-repeat: repeat-x; border: 1px solid #d5d5d5; border-radius: 3px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; } button:hover, input:hover, input:hover { text-decoration: none; background-color: #dddddd; background-image: -moz-linear-gradient(#eee, #ddd); background-image: -webkit-linear-gradient(#eee, #ddd); background-image: linear-gradient(#eee, #ddd); background-repeat: repeat-x; border-color: #ccc; } button:active, input:active, input:active { background-color: #dcdcdc; background-image: none; border-color: #b5b5b5; box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); }

Вот мы и добрались до самого интересного - написание клиентского js кода функиционала ajax корзины. В основном шаблоне уже из первых уроков подключена библиотека jQuery и скрипт cart.js , в котором мы будеим писать весь js код.

application/views/template.php

...