Реализация корзины на php. Корзина для интернет-магазина на фронте или Пишем модульный javascript

Изначально планировал написать про внедрение одного хака на странице корзины WooCommerce, однако позже решил рассказать сразу о нескольких фишках для ее модификации. Хочу заметить, что в данном блоге есть специальный раздел про , т.к. этот вопрос включает в себя множество нюансов. Сегодня статья будет посвящена больше внешнему виду и отображению информации на сайте. Начнем с настроек самого модуля, потом рассмотрим вопрос удаления доставки и заодно изменение шаблона корзины. Думаю, пост пригодится не только новичкам.

На одном из начальных шагов на WooCommerce система создает несколько ключевых страниц (корзину в том числе). Если посмотрите в редакторе ее содержимое, то увидите шорткод .

Здесь же можете изменить название и добавить немного своего текста на страницу. Также задаете МЕТА тег описания и тайтл с помощью .

В настройках модуля есть разные параметры для управления корзиной. Некоторые из них найдете во вкладке «Доставка» — «Варианты доставки».

В опции «Расчеты» можно:

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

При включенном расчете доставки на странице WooCommerce корзины появится соответствующая ссылка. При клике на нее пользователь увидит поля для ввода адреса.

Как удалить доставку со страницы корзины

Собственно, наша следующая задача — удалить на этапе формирования заказа все лишнее, что не касается выбора товаров и их количества. По-умолчанию в настройках плагина, как видите, это не предусмотрено, но в этом есть определенный смысл. Чем меньше разных отвлекающих и запутывающих пользователя факторов будет в вашем интернет-магазине, тем больше вероятность, что покупатель сможет завершить .

Для решения задачи нам понадобится вашей темы (custom-function.php или function.php) следующий хак:

function delshipping_calc_in_cart( $show_shipping ) { if ( is_cart() ) { return false ; } return $show_shipping ; } add_filter( "woocommerce_cart_ready_to_calc_shipping" , "delshipping_calc_in_cart" , 99 ) ;

function delshipping_calc_in_cart($show_shipping) { if(is_cart()) { return false; } return $show_shipping; } add_filter("woocommerce_cart_ready_to_calc_shipping", "delshipping_calc_in_cart", 99);

Шаблон корзины WooCommerce

Все основные файлы шаблона для страницы корзины в WooCommerce находятся в папке cart. Напоминаю, что нужно после того как скопируете папку templates в свою дочернюю тему. По умолчанию директория содержит нескольких файлов:

• cart-totals.php
• cross-sells.php
• cart-empty.php
• cart-item-data.php
• cart-shipping.php
• mini-cart.php
• proceed-to-checkout-button.php
• shipping-calculator.php

Каждый из них отвечает за определенные функции, например, в файле cross-sells.php задается отображение кросс продаж, в cart-empty.php — выполняется обработка пустой корзины и т.п. Вы можете изменить вывод всех элементов страницы так, как вам это нужно. Хотя некоторые правки принято делать через хаки/сниппеты как например в посте про .

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

Если внимательно изучить файлы шаблона корзины, то увидите, что за отображение блока под товарами отвечает строка:

add_action("woocommerce_cart_collaterals", "woocommerce_cross_sell_display"); add_action("woocommerce_cart_collaterals", "woocommerce_cart_totals", 10);

Теперь, по сути, у вас есть 3 варианта чтобы все это скрыть:

• закомментировать строку с do_action в cart.php;
• использовать функцию remove_action в custom-function.php (или function.php);
• подправить файлы cross-sells.php и cart-totals.php, которые непосредственно вызываются данными функциями.

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

Это лишь один из примеров работы с шаблоном, надеюсь, суть вы уловили. В принципе, есть 2 варианта его модификации — в файлах напрямую (легче и нагляднее), либо работа через хуки и функции remove_action / add_action (вроде как, считается правильнее и более гибко). Какой бы вариант вы не выбрали, помните, что правки нужно вносить в копию макета магазина в дочерней теме.

Хак для купонов

Если вы используете промокоды в магазине то можно добавить отображение новой цены напротив каждой позиции. Найденный сниппет имеет вид:

add_filter( "woocommerce_cart_item_subtotal" , "bbloomer_if_coupon_slash_item_subtotal" , 99 , 3 ) ; function bbloomer_if_coupon_slash_item_subtotal( $subtotal , $cart_item , $cart_item_key ) { global $woocommerce ; // Note: use your own coupon code here $coupon_code = "barmada" ; if ( $woocommerce -> cart -> has_discount ( $coupon_code ) ) { // Note: apply your own coupon discount multiplier here // In this case, it"s a 99% discount, hence I multiply by 0.01 $newsubtotal = wc_price( $cart_item [ "data" ] -> get_price () * 0.01 ) ; $subtotal = sprintf ( "%s %s" , $subtotal , $newsubtotal ) ; } return $subtotal ; }

add_filter("woocommerce_cart_item_subtotal", "bbloomer_if_coupon_slash_item_subtotal", 99, 3); function bbloomer_if_coupon_slash_item_subtotal($subtotal, $cart_item, $cart_item_key){ global $woocommerce; // Note: use your own coupon code here $coupon_code = "barmada"; if ($woocommerce->cart->has_discount($coupon_code)) { // Note: apply your own coupon discount multiplier here // In this case, it"s a 99% discount, hence I multiply by 0.01 $newsubtotal = wc_price($cart_item["data"]->get_price() * 0.01); $subtotal = sprintf("%s %s", $subtotal, $newsubtotal); } return $subtotal; }

Если код вам не совсем понятен загляните в статью про , где я описал его чуть подробнее (в самом конце заметки).

Если будут еще какие-то вопросы / дополнения по настройке корзины WooCommerce и модификации соответствующей страницы на сайте, пишите в комментариях.

«Какая корзина? И почему вдруг корзина?» — возможно удивитесь вы, прочитав заголовок. Так вот, корзина самая обычная — та, которую все мы используем, покупая что-нибудь в интернет-магазине. А опубликовать статью о ее создании, я решила по одной, единственной причине — не смогла устоять перед замечательным и красивым решением.

Не верите? можете посмотреть результат . А если вам интересно как это делается, читайте далее.

Вступление

В этой статье, мы собираемся создать корзину, работающую на основе технологии Ajax. Все товары будут записываться в базу данных MySQL, данные будут обрабатываться с помощью PHP.

JQuery, будет запускать Ajax на странице, кроме этого, плагин simpletip , добавит всему процессу интерактивности.

Итак, давайте начнем, скачайте демо-файлы, и начинайте чтение.

Шаг 1 – База данных MySQL

Если вы хотите получить рабочую демо-версию, вам понадобится выполнить следующий SQL-запрос в панели управления базой данных (то есть в phpMyAdmin). Этот запрос создаст таблицу, и внесет несколько продуктов. Этот код запроса, также доступен в файле table.sql, в демо-файлах.

table.sql

CREATE TABLE IF NOT EXISTS internet_shop (id int(6) NOT NULL auto_increment, img varchar(32) collate utf8_unicode_ci NOT NULL default "", name varchar(64) collate utf8_unicode_ci NOT NULL default "", description text collate utf8_unicode_ci NOT NULL, price double NOT NULL default "0", PRIMARY KEY (id), UNIQUE KEY img (img)) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ; INSERT INTO internet_shop VALUES(1, "iPod.png", "iPod", "The original and popular iPod.", 200); INSERT INTO internet_shop VALUES(2, "iMac.png", "iMac", "The iMac computer.", 1200); INSERT INTO internet_shop VALUES(3, "iPhone.png", "iPhone", "This is the new iPhone.", 400); INSERT INTO internet_shop VALUES(4, "iPod-Shuffle.png", "iPod Shuffle", "The new iPod shuffle.", 49); INSERT INTO internet_shop VALUES(5, "iPod-Nano.png", "iPod Nano", "The new iPod Nano.", 99); INSERT INTO internet_shop VALUES(6, "Apple-TV.png", "Apple TV", "The new Apple TV. Buy it now!", 300);

После этого, вам нужно заполнить данные вашей учетной записи MySQL, в файле connect.php .

Шаг 2 – XHTML

Сначала мы создадим основную разметку.

demo.php

Корзина Лучшие товары, по лучшим ценам Товары // php-код, который генерирует товары Корзина Оформить

Как вы могли заметить, из вышеприведенного кода, мы расположили наш контент в двух основных секциях, полностью идентичных с точки зрения XHTML-разметки. В первой колонке мы отображаем все наши продукты, вторая колонка выступает в качестве корзины.

Ниже, вы можете увидеть детальное представление структуры нашей секции товаров.

Товары, генерируются с помощью нашего PHP-кода, как можно увидеть в строке 18. Мы разберем это подробнее, через несколько минут. Теперь, давайте взглянем, как мы обработаем XHTML-разметку, для получения финального дизайна.

Шаг 3 – CSS

В этот раз, CSS-код получился очень длинный, поэтому я разделил его на две части.

demo.css

Body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{ /* сброс первоначальных стилей, для совместимости браузеров */ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; } body{ color:#555555; font-size:13px; background-color:#282828; } .clear{ /* clear-fix хак для чистки потока от флоатов */ clear:both; } #main-container{ /* это основной контейнер, содержащий две секции */ width:700px; margin:20px auto; } .container{ /* основной контейнер для секций контента - товаров и корзины */ margin-bottom:40px; } .top-label{ /* внешний span, включающий в себя название секции*/ background: url(img/label_bg.png) no-repeat; /* отображение левой части label_bg.png - широкого изображения с закругленными краями */ display:inline-block; margin-left:20px; position:relative; margin-bottom:-15px; /* название секции прилегает к верхнему краю секции товаров*/ } .label-txt{ /* внутренний span - обведен красной рамкой, на рисунке выше*/ background: url(img/label_bg.png) no-repeat top right; /* отображение правой части изображения label_bg.png */ display:inline-block; font-size:10px; height:36px; margin-left:10px; /* слева оставлено пустое пространство, чтобы отображить фон внешнего span"а */ padding:12px 15px 0 5px; text-transform:uppercase; } .content-area{ /* Верхняя часть изображения с закругленными краями, смотрите на рисунке выше */ background:url(img/container_top.png) no-repeat #fcfcfc; padding:15px 20px 0 20px; } .content{ /* общий отступ для обеих секций */ padding:10px; } .drag-desired{ /* индивидуально назначенные свойства */ background:url(img/drag_desired_label.png) no-repeat top right; padding:20px; } .drop-here{ /* не предназначено для других секций */ background:url(img/drop_here_label.png) no-repeat top right; } .bottom-container-border{ /* нижняя часть закругленной картинки, которая завершает секцию */ background:url(img/container_bottom.png) no-repeat; height:14px; } .product{ /* стили для товаров */ border:2px solid #F5F5F5; float:left; margin:15px; padding:10px; } .product img{ cursor:move; } p.descr{ padding:5px 0; } small{ display:block; margin-top:4px; } .tooltip{ /* тултипы, которые создаются с помощью плагина simpletip */ position: absolute; top: 0; left: 0; z-index: 3; display: none; background-color:#666666; border:1px solid #666666; color:#fcfcfc; padding:10px; -moz-border-radius:12px; /* закругленные углы */ -khtml-border-radius: 12px; -webkit-border-radius: 12px; border-radius:12px; }

Обратите внимание на класс tooltip. Он создается автоматически, плагином simpletip , но не имеет никаких стилей, по умолчанию. Вот почему, мы назначаем ему стиль здесь. Я использовал свойство border-radius , которое еще не поддерживается всеми браузерами, но не принесет сильного ущерба, тем, кто его не поддерживает.

Теперь, давайте взглянем на CSS-стили, для секции корзины.

#cart-icon{ /* div, который содержит иконку корзины */ width:128px; float:left; position:relative; /* устанавливаем относительное позиционирование, так, чтобы ajax-загрузчик позиционировался по отношению к div*/ } #ajax-loader{ position:absolute; /* абсолютное позиционирование располагает элемент на странице, относительно его родительского элемента, которому назначено относительное позиционирование */ top:0px; left:0px; visibility:hidden; } #item-list{ /* содержимое корзины будет расположено в этом блоке */ float:left; width:490px; margin-left:20px; padding-top:15px; } a.remove,a.remove:visited{ /* Удаление ссылки */ color:red; font-size:10px; text-transform:uppercase; } #total{ /* блок, с общей суммой */ clear:both; float:right; font-size:10px; font-weight:bold; padding:10px 12px; text-transform:uppercase; } #item-list table{ /* каждый товар в корзине, позиционируется внутри блока item-list*/ background-color:#F7F7F7; border:1px solid #EFEFEF; margin-top:5px; padding:4px; } a.button,a.button:visited{ /* Кнопка оформления заказа */ display:none; height:29px; width:136px; padding-top:15px; margin:0 auto; overflow:hidden; color:white; font-size:12px; font-weight:bold; text-align:center; text-transform:uppercase; background:url(img/button.png) no-repeat center top; /* отображаем только верхнюю часть фонового изображения */ } a.button:hover{ background-position:bottom; /* при наведении, мы показываем нижнюю часть фоногового изображения */ text-decoration:none; } /* Несколько менее интересных стилей */ a, a:visited { color:#00BBFF; text-decoration:none; outline:none; } a:hover{ text-decoration:underline; } h1{ font-size:28px; font-weight:bold; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; } h2{ font-weight:normal; font-size:20px; color:#666666; text-indent:30px; margin:20px 0; } .tutorialzine h1{ color:white; margin-bottom:10px; font-size:48px; } .tutorialzine h3{ color:#F5F5F5; font-size:10px; font-weight:bold; margin-bottom:30px; text-transform:uppercase; } .tutorial-info{ color:white; text-align:center; padding:10px; margin-top:-20px; }

Любой разработчик скажет нам, что здесь мы кое-что упустили. Как вы, наверное, догадались – специальные процедуры лечения для IE6.

Лично я, планирую в скором времени прекратить поддержку IE6 во всех своих проектах – если бы не IE6, вышеприведенный код, был бы на четверть короче, и мне не пришлось бы тратить столько времени на его отладку.

Но, в любом случае, вот, что нам нужно, чтобы IE6 понимал, то, что мы от него хотим:

demo.php

.pngfix { behavior: url(pngfix/iepngfix.htc);} /* this is a special htc file that fixes the IE6 transparency issues */ .tooltip{width:200px;}; /* provide a default width for the tooltips */

Отлично. Теперь, давайте взглянем на окончательный вариант PHP.

Шаг 4 – PHP

Мы используем PHP несколькими способами и в разных местах. Для начала, давайте посмотрим, как формируется список товаров на главной странице.

demo.php