От автора: на сегодняшний день интернет магазины занимают одну из наиболее популярных ниш в интернете, этот урок поможет вам постигнуть некоторые хитрости необычного эффекта для создания Вашего оригинального интернет магазина.
В этом уроке мы реализуем возможность перемещения товаров в корзину при помощи мыши на основе таких библиотек как jQuery и jQuery UI, а также используя метод AJAX.
1. Введение.
Итак, для начала несколько слов о библиотеках, которые мы будем использовать.
jQuery — это библиотека, написанная на языке Javascript, если говорить проще, то это набор готовых функций, для облегчения взаимодействия Javascript и HTML. Эта библиотека позволяет легко и быстро получить доступ к любому элементу нашей страницы.
jQuery UI – это также библиотека, написанная на языке Javascript, но с ее помощью можно легко и быстро создавать различные анимационные эффекты, выводить разнообразные виджеты, модальные окна и многое другое.
AJAX – это способ, который позволяет нам получать, так называемые, интерактивные веб-страницы, то есть обмениваться данными с сервером, без перезагрузки страницы в браузере. С помощью Javascript отправляются асинхронные запросы к серверу, а возвращаются данные обратно к пользователю в формате XML(расширяемый язык разметки). Асинхронный запрос – это запрос к серверу без перезагрузки веб-страницы в браузере.
2. Подготовка к уроку.
Для работы нам с Вами потребуется, что то похожее на интернет магазин, или же какой то простенький сайтик с каталогом товаров. Я заранее подготовил заготовку для интернет магазина – это всего одна страничка с набором товаров и корзиной. Вот так выглядит файловая система моей заготовки:
images
connect.php
index.php
style.css
Также я создал базу данных for_cart с одной таблицей, под названием magazine. В ней хранятся все данные по товарам: название, цена и путь к изображению товара. В файле connect.php мы выполняем обычное подключение к базе данных:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php //Подключаемся к серверу базы данных $db = mysql_connect('localhost','Viktor','1234'); if(!$db) { exit('Error'.mysql_error()); } //Выбираем базу данных if(!mysql_select_db("for_cart")) { exit('Error'.mysql_error()); } //Устанавливаем кодировку запросов mysql_query("SET NAMES cp1251"); ?> |
В файле index.php мы в начале, подключаем файл connect.php, затем формируем запрос на выборку всех товаров из базы данных, далее выполняем этот запрос и сохраняем товары в массиве $goods. И дальше, попросту, выводим эти товары на экран, используя цикл foreach() для постепенного прохода по массиву $goods. Как Вы видите, ничего сложного в этом нет:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<? //открываем сессию session_start(); //Подключаем файл include 'connect.php'; //Запрос на выборку все товаров $sql = "SELECT * FROM magazine"; $result = mysql_query($sql); for($i = 0;$i < mysql_num_rows($result); $i++) { $goods[] = mysql_fetch_array($result); } ?> <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta name="" content=""> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrap"> <div id="header"> <h2>Интернет магазин часов</h2> <p>Часы на любой вкус!!!</p> </div> <div id="content"> <div id="main"> <ul id="tovar"> <? foreach ($goods as $item) :?> <li> <img src="images/<?=$item['img'];?>"> <p id="title"><?=$item['title'];?></p> <p id="price"><?=$item['price'];?> руб.</p> <p id='remove_cart'>Удалить</p> </li> <? endforeach; ?> </ul> </div> <div id="sidebar"> <div id="header_cart"> Корзина </div> <div id="cart"> <div id="for_tovar"> Перетащите товар в корзину!!! </div> <ol> </ol> <div id='open_cart'> <a href="cart.php">Оформить заказ</a> </div> </div> </div> </div> <div id="footer"> <h5>Интернет магазин часов<br>2012г.</h5> </div> </div> </body> </html> |
Обратите внимание, я добавил для каждого товара ссылку – УДАЛИТЬ, она будет использоваться нами для удаления товаров из корзины. И когда товар еще не в корзине, этой ссылки не будет видно (она скрыта при помощи css). Также изначально скрыта ссылка –Оформить заказ, которая будет появляться при добавлении товаров в корзину. И последнее, я создал пустой блок ol в корзине, в который мы будем складывать товары, перемещенные в корзину.
И последний файл это файл стилей style.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#wrap{margin:0px auto 0px atuo;padding:10px;border:1px solid #074776;border-radius:10px; -moz-border-radius:10px;width:950px;background-image:url(images/clock.jpg); background-position:left top; background-repeat:no-repeat;} #header {height:100px;border-bottom:10px solid #d2d2d2;} h2 {margin-top:0px;margin-left:160px;} #header p {margin-left:160px;} #footer {height:50px;border-top:10px solid #d2d2d2;clear:both;} h5 {text-align:center;} #main {border-right:1px solid #074776;width:700px;float:left;} #sidebar {width:246px;float:left;} #tovar {margin:0px;padding:0px} #tovar li{border:1px solid #074776;border-radius:5px;-moz-border-radius:5px;float:left; width:165px;padding:10px;margin:20px;height:250px;cursor:move;list-style:none;} li {list-style:none} #tovar img {margin-left:20px;} #title {text-align:center;margin:0px;color:#35a83e;font-size:1.2em;font-weight:bold;} #price {text-align:center;margin:0px;color:red;font-size:1.4em;font-weight:bold;} #cart {width:190px;min-height:200px;border:1px solid #074776;margin:0px 0px 0px 30px; padding:5px;} #header_cart {width:200px;border:1px solid #074776;margin:10px 0px 0px 30px; background-color:#f2f2f2;text-align:center;} #for_tovar {margin:20px;font-size:1.4em;font-weight:bold;color:red; text-align:center;background-color:#f6f6f6;} ol{padding-left:25px;} ol li {clear:both;margin-bottom:10px;} #remove_cart {border:1px solid #f2f2f2;font-size:0.8em;text-align:center; margin:10px 5px 0px 65px;cursor:pointer;visibility:hidden;} #open_cart {visibility:hidden;text-align:center;} #open_cart a {font-size:1.3em;color:red;} |
В папке images расположены изображения для товаров и шапки странички. Вот так выглядит наша заготовка для интернет магазина:
Теперь нам необходимо скачать необходимые библиотеки. Первая библиотека — это библиотека jQuery. Напомню, что ее можно скачать по адресу //jquery.com, кликнув по кнопке Download. Давайте скачаем эту библиотеку и сохраним в папке js (создадим эту папку и будем хранить здесь все скрипты на javascript).
Вторая — это библиотека jQuety UI. Для этого прейдем на сайт //jqueryui.com, далее на вкладку Download и скачаем эту библиотеку. Напомню, что скачать эту библиотеку можно двумя способами, первый это скачать полную версию библиотеки с полным набором виджетов и эффектов, а можно выделить галочками только то, что Вам нужно. Я предлагаю скачать только то, что необходимо, поэтому выделим (галочками в чекбоксах) компоненты ядра библиотеки, затем выделяем компоненты взаимодействий с элементами (Draggable и Droppable), и все эффекты (виджеты нам не потребуются). После выделения выбираем цветовую тему — No Theme (цветовая тема нам не понадобится) и нажимаем кнопку Download. После скачивания распаковываем архив и находим папку js — в ней и содержится библиотека jQuery UI. Копируем ее в нашу созданную папку js и подключаем скачанные библиотеки в файле index.php:
|
1 2 |
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script> |
3. Реализуем возможность перемещения товаров.
Теперь, когда все приготовления завершены и требуемые библиотеки подключены, давайте реализуем возможность перетаскивания наших товаров. Для этого первым делом откроем теги script между тегами head и опишем код для работы с библиотекой jQuery:
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function() { //код jquery }); </script> |
Здесь мы и будем вести дальнейшее кодирование.
Теперь, давайте с помощью jQuery, сделаем выборку каждого элемента товара (заключенного между тегами li) и применим к выборке метод draggable(), который позволяет нам делать объекты перетаскиваемыми:
|
1 2 3 4 5 6 |
$("#tovar li").draggable({ helper: "clone", cursor: "move", revert: "invalid", opacity: 0.8, }); |
Обратите внимание, что при вызове метода draggable, можно указать следующие параметры:
helper: «clone» — позволяет при перетаскивании элемента делать его копию, то есть мы перемещаем не сам элемент, а его копию;
cursor: «move» — вид курсора при перемещении элемента;
revert: «invalid — это свойство означает, что если перемещаемый элемент не будет положен в корзину(или любой другой элемент использующийся при вызове метода droppable(), но об этом методе позже);
opacity: 0.8 — прозрачность перемещаемого объекта(20%).
Теперь давайте посмотрим в браузере, что у нас получилось:
Как видите товары теперь можно перемещать, но так как мы еще не реализовали возможность корзины принимать элементы, то перемещаемые товары возвращаются назад к своему исходному положению.
4. Реализуем перемещение товаров в корзину.
Для того, что бы наша корзина могла принимать товары, необходимо первым делом произвести выборку этой корзины при помощи jQuery по идентификатору #cart, а затем вызвать метод droppable(), который дает возможность элементам как бы принимать в себе другие элементы, перемещенные с помощью метода draggable(). Давайте это и проделаем:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$("#cart").droppable({ activeClass: "active_cart", hoverClass: "hover_cart", accept: "#tovar > li", drop: function( event, ui ) { //Убираем надпись - Перетащите товар в корзину!!! $(this).find( "#for_tovar" ).remove(); //Копируем содержимое перемещаемого блока и записываем в переменную var clone = ui.draggable.clone(); //Добавляем стилей к элементам перемещаемого clone.css({'height':'90px','listStyle':'decimal'}); clone.find("p").css({'fontSize':'1em'}); clone.find("#remove_cart").css({'visibility':'visible'}); clone.find("img").css({'width':'125px'}).animate({'width':'60px'}) .css({'float':'left'}); //Вставляем копию перемещаемого элемента в корзину между тегами <ol> $("#cart ol").append(clone); //Показываем ссылку - Оформить заказ $("#open_cart").css({'visibility':'visible'}); } }); |
Обратите внимание, что у метода droppable() есть также свои свойства:
activeClass: «active_cart» — это свойство принимает имя класса, который будет назначен элементу которому применен метод droppable() (в нашем случае это корзина), когда началось перемещение одного из товаров. Таким образом мы с Вами можем реализовать возможность, что при перемещении товаров, корзине будет назначаться класс active_cart у которого мы пропишем правила для цвета фона, т.е корзина будет как бы подсвечиваться, указывая пользователю куда нужно положить товар.
hoverClass: «hover_cart» – класс, который будет назначен корзине, когда перемещаемый элемент (товар) будет над ее плоскостью (проще говоря над корзиной).
accept: «#tovar > li» – в этом свойстве указываем выборку элементов которые может принимать корзина, в нашем случае корзина принимает только прямых потомков контейнера с идентификатором #tovar и потомки эти должны быть заключены в теги li.
drop: — здесь описываем функцию которая выполнится, когда перемещаемый элемент (товар), окажется в корзине. Первое что мы делаем в этой функции – это обращаемся к нашей выборке (а у нс выбрана корзина #cart), с помощью ключевого слова $(this). Далее применяем метод find( «#for_tovar» ), который позволяет найти в выборке дочерние элементы. А какие дочерние элементы нужно искать, мы передаем этому методу параметром. Затем вызываем метод remove() с помощью которого, можно удалить найденный дочерний элемент. То есть мы убираем надпись, Перетащите товар в корзину!!!. Далее создаем переменную clone в которую записываем копию перемещаемого объекта. Перемещаемый объект находится в свойстве draggable обьекта ui, для которого мы вызываем метод clone(), который выполняет копирование выборки и возвращает уже выбранную копию. Это мы делаем для того, что бы когда товар окажется в корзине он все также остался бы в магазине, а не перемещался бы полностью из магазина в корзину. Затем используя метод find() и назначаем правила css для различных элементов нашего товара. А именно уменьшаем шрифт во всех абзацах, добавляем номер для каждого добавленного товара, открываем ссылку для удаления товаров (идентификатор remove_cart). Все правила css назначаем с помощью метода css(), который параметром принимает правила css. Для изображения товара вначале указываем его первоначальную ширину, с помощью метода css(), затем используя метод animate() плавно уменьшаем размер до указанных величин. Метод animate() – позволяет создавать пользовательскую анимацию элементов. Если переданные этому методу параметры (правила css), отличаются от назначенных правил, значит произойдет плавное изменение блока до значений переданных методу animate() (к примеру, если блок имеет ширину 100 пикселей а методу animate() мы передаем ширину в 50 пикселей, то произойдет плавное уменьшение ширины блока до 50 пикселей). Затем используя метод .append() вставляем товары в нашу корзину между тегами ol. Причем особенность этого метода такова, что следующие добавленные методы будут вставляться после уже имеющихся в выбранном блоке элементов (товаров). И в конце показываем ссылку — Оформить заказ.
Так, теперь добавим в файл style.css классы, которые мы описали в свойствах для перемещаемого объекта:
|
1 2 3 4 5 6 |
.active_cart { background-color:#f4f4f4; } .hover_cart { background-color:green; } |
И теперь давайте перейдем в браузер и посмотрим что получилось:
Как Вы видите, товары успешно добавляются в корзину, да еще и c анимацией.
5. Сохранение содержимого корзины в сессии и удаление товаров из корзины.
Теперь, когда мы реализовали добавление товаров в корзину, необходимо реализовать сохранение этих товаров в сессии, так как без этого, такое перемещение товаров абсолютно бесполезное, а также необходимо сделать возможность удалять товары из корзины. Поэтому давайте этим и займемся.
Кодировать будем внутри метода droppable(), поэтому я приведу весь код этого метода, что бы вам было понятнее, а затем приведу пояснения по коду:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
$("#cart").droppable({ activeClass: "active_cart", hoverClass: "hover_cart", accept: "#tovar > li", drop: function( event, ui ) { //Убираем надпись - Перетащите товар в корзину!!! $(this).find( "#for_tovar" ).remove(); //Копируем содержимое перемещаемого блока и //записываем в переменную var clone = ui.draggable.clone(); //Добавляем стилей к элементам перемещаемого товара clone.css({'height':'90px','listStyle':'decimal'}); clone.find("p").css({'fontSize':'1em'}); clone.find("#remove_cart").css({'visibility':'visible'}); clone.find("img").css({'width':'125px'}) .animate({'width':'60px'}).css({'float':'left'}); //Сохраняем название товара в переменной var title = clone.find("#title").html(); //С помощью ajax обращаемся к фалу add_cart.php для добавления товара $.ajax({ url:'add_cart.php', data:"title=" + title, type:'POST', success: function () { //Вставляем копию перемещаемого элемента в корзину между тегами <ol> $("#cart ol").append(clone); //Показываем ссылку - Оформить заказ $("#open_cart").css({'visibility':'visible'}); //Реализуем возможность удаления товаров из корзины //Проверяем был ли клик по перемещенному товару clone.click(function(event) { //В переменную target сохраняем точку по которой был клик var target = $(event.target); //Проверяем является ли точка клика кнопкой удаления if(target.is("#remove_cart")) { //Сохраняем название товара в переменной var title_del = clone.find("#title").html(); //С помощью ajax обращаемся к фалу add_cart.php для удаления товара $.ajax({ url:'add_cart.php', data:"remove=" + title_del, type:'POST', success: function () { //Скрываем удаленный товар clone.fadeOut(500,function() { //Удаляем скрытый блок $(this).remove(); //Проверяем если блок пустой то выводим надпись //Перетащите товар в корзину!!! // И скрываем ссылку Оформить заказ var cart = $('#cart li').html(); if(cart == null) { $("#cart").prepend("<div id='for_tovar'>Перетащите товар в корзину!!!</div>"); $("#open_cart").css({'visibility':'hidden'}); } }); } }); } //// }); } }); } }); |
Итак смотрите, как только мы с Вами добавили требуемых стилей (и задали анимацию методом animate()) к перемещаемому товару, первым делом сохраняем в переменной title название товара. Я буду сохранять в сессии название товара, но было бы лучше, конечно, сохранять какие то уникальные данные, к примеру, артикул товара. Что бы по этим данным уже вести поиск данного товара в базе данных, но это уже на Ваше усмотрение.
Дальше используя библиотеку jQuery, обращаемся к методу ajax, что бы совершить запрос к файлу ‘add_cart.php’ (который мы создадим позже) и передать данные по товару, а именно название товара – для записи в сессию.
У метода ajax указываем следующие свойства:
url:’add_cart.php’ – адрес файла на сервере, к которому мы обращаемся;
data:»title=» + title – строка с данными, которые отправляются на сервер, в нашем случаем мы отправляем на сервер название товара.
type:’POST’ – тип запроса с помощью которого передаются данные на сервер, в нашем случае это запрос POST. Обратите внимание выше, как для запроса типа POST нужно формировать строку с данными – вначале указываем имя ячейки массива POST, затем через знак = добавляем уже значение этой ячейки (в нашем случае в массиве POST будет создана ячейка с ключем – remove и значение этой ячейки – будет содержатся в переменной title);
success: function () {… — функция которая выполнится в результате успешного запроса к серверу. Если запрос был удачен, мы добавляем товар в корзину (отображаем в корзине) и показываем ссылку – Оформить заказ. Далее для того, что бы пользователи имели возможность удалять товары из корзины, описываем обработчик события click(). Напомню, что этот обработчик сработает, когда по выбранному элементу пользователь кликнет мышью. Внутри этого обработчика описываем функцию которая будет выполнятся, если сработает обработчик события click(). Далее ведем кодирование в этой функции.
Первым делом в переменную target сохраняем точку клика (то есть то место в нашем товаре по которому кликнул пользователь), так как выбран у нас весь товар вместе с изображением названием и ценой, а нам нужно что бы товар удалялся с корзины при клике на кнопку — удалить. В переменную event, запишется объект элемента, по которому произошел клик мышью. А в свойстве этого объекта target хранится точка клика, то есть в переменную target запишется выборка элемента, по которому произошел клик мышью. Поэтому дальше проверяем, является ли элемент, по которому кликнули мышью блоком с кнопкой – Удалить (напомню что это блок с идентификатором #remove_cart).
Для проверки используем метод is(), который проверяет текущую выборку (которая хранится в переменной target) на соответствие выражению, переданному ей параметром. Если клик был действительно произведен по блоку с идентификатором #remove_cart, то мы создаем переменную title_del и записываем в нее название товара (которое хранится в блоке с идентификатором #title). Далее уже привычным для нас способом обращаемся к файлу add_cart.php с помощью метода ajax и передаем методом POST название товара. Далее файл add_cart.php удалит из сессии товар с указанным названием (мы это опишем позже). После удачного запроса мы с помощью метода fadeOut() скрываем удаленный товар. Напомню, что этот метод позволяет скрывать выбранные элементы при помощи анимации.
Время исчезновения элемента мы передаем первым параметром (в нашем случае это 500 миллисекунд) а вторым параметром описываем функцию, которая выполнится по завершению всех анимационных эффектов. В этой функции мы и удалим выбранный товар из корзины при помощи метода remove(). А затем, проверим есть ли в корзине еще товары. Для этого выбираем все элементы li и при помощи метода html() – получаем весь html код этой выборки. Затем проверяем если метод html() вернул нам null, то корзина пуста. Значит необходимо показать надпись — Перетащите товар в корзину!!! Для этого выбираем нашу корзину по идентификатору и с помощью метода prepend(), вставляем данные в корзину. Этот метод позволяет вставлять данные в выбранный блок (данные которые переданы ему параметром), но его особенность состоит в том, что данные вставятся перед уже существующими.
И в конце попросту скрываем ссылку — Оформить заказ с помощью метода css({‘visibility’:’hidden’});
На этом с кодированием на javascript мы закончили, осталось только создать файл add_cart.php, который будет записывать содержимое корзины в сессию. Вот код этого файла:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php //Открываем сессию session_start(); //Сохраняем содержимое в сессии // Проверяем существуют ли данные в //массиве POST для записи if(isset($_POST['title'])) { //Сохраняем в сессии $_SESSION['cart'][] = $_POST['title']; return TRUE; } //Удаляем содержимое из сессии // Проверяем существуют ли данные в //массиве POST для удаления из сессии if(isset($_POST['remove'])) { //Удаляем ячейку со значением $_POST['remove'] // из массива POST с пе unset($_SESSION['cart'][array_search($_POST['remove'],$_SESSION['cart'])]); return TRUE; } ?> |
Как Вы видите здесь все очень просто – проверяем пришли ли данные и если да, то либо записываем в сессию, либо удаляем из сессии. Конечно, здесь можно соединиться с базой данных и вытащить еще дополнительные данные по заказу, но это уже по Вашему усмотрению. Нам для урока достаточно и так.
6. Вывод содержимого корзины.
Теперь нам осталось просто вывести содержимое корзины, так как нам, не видно действительно ли данные записываются в сессию. Для этого создадим файл cart.php с таким содержимым:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <title></title> <?php //Открываем сессию session_start(); // Проверяем существуют ли данные в сессии if(isset($_SESSION['cart'])) { //Выводи содержимое сессии в табличном виде echo "<div id='cart_wrap'>"; echo "<table>"; $i = 1; foreach($_SESSION['cart'] as $item) { echo "<tr><td>".$i."</td><td><h3>".$item."</h3></td></tr>"; $i++; } echo "</table>"; echo "</div>"; } else { echo '<h2>Корзина пуста</h2><a href="index.php">Вернуться в магазин</a>'; } ?> <a href="index.php">Вернуться в магазин</a> <a class="zacaz" href="index.php">Оформить заказ</a> </body> </html> |
Как Вы видите здесь все очень просто – проверяем, есть ли сессия и выводим данные с помощью цикла foreach(). Можно конечно еще добавить стилей в файл style.css:
|
1 2 3 4 5 6 7 8 9 10 |
h3 { margin:0px; } td { padding:10px; border:1px solid #074776 } table { border:1px solid #074776 } |
Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:
Теперь если перетащить товары в корзину и нажать на кнопку оформить заказ открывается страничка корзины с перечнем товаров. Также теперь работает удаление товаров из корзины – обратите внимание, что с неплохой анимацией.
Конечно, наш эффект перетаскивания работает только на одной странице, так как, если перетащить товары в корзину, и тут же просто обновить страницу, то товары из корзины исчезнут, но в сессии они будут сохранены и если перетащить еще один товар и нажать на кнопку – Оформить заказ, то в корзине у нас окажется больше товаров чем мы ожидали. Для решения этой проблемы нужно просто в корзине проверять существует ли сессия, и если да то выводить товары на экран. Но это уже очень просто, поэтому в сегодняшнем уроке мы этим заниматься не будем.
И последний штрих – можно весь код javascript вынести в отдельный файл. Для этого создадим файл script.js и скопируем в него весь код, содержащийся между тегами script в файле index.php, и соответственно удалим этот код в файле index.php. Затем просто подключим этот файл:
|
1 |
<script type="text/javascript" src="js/script.js"></script> |
Ну а на этом у меня все, надеюсь, Вам понравился урок, и Вы подчеркнули для себя много нового и интересного.
Если будет, что то непонятно или возникнут вопросы – пишите, постараемся на них ответить.
Удачного Вам кодирования и до новых встреч!
Комментарии (19)