اگر تا حالا از سایت های اینترنتی خرید کرده اید حتما با این موضوع مواجه شده اید که برخی از این سایت ها به شما این امکان را می دهند که کالای مورد نیاز خود را با دراگ و دراپ در سبد خرید خود بیاندازید.
ایجاد این فروشگاه را در این تمرین می بینیم.
امکان دراگ کردن موس برای خرید کالا
اگر شما هم از آن دسته کاربرانی هستید که قصد دارید در وبگاه خود محصولاتان را بفروشید ولی حوصله تایپ کردن مدام نام محصول را ندارید و انتضار دارید وبگاه شما کمی گرافیکی تر عمل کند تا تنها با کشیدن کالای مورد نیاز و انداختن آن در قسمت خرید بتوانید خرید کنید. این آموزش را حتما بخوانید.
استفاده از دراگ برای خرید کردن با استفاده از JQUERY ، Ajax و Php
ما در این آموزش به شما نشان خواهیم داد چگونه ایتم هایی را به سبد خرید خود با استفاده از Drag & drop (کشیدن و رها کردن موس ) اضافه کنید . ما برای این کار از JQUERY ، Ajax و Php استفاده می کنیم استفاده از کشیدن و رها کردن موس برای خرید کردن راهکار جدید و کاملا مدرنی است و شما تنها باید کالای دلخواه خود را یافته و آن را به درون سبد خرید خود بیاندازید.
برای ایجاد خرید به کمک کشیدن و رها کردن موس تنها چهار گام زیر مورد نیاز است:
1. یک فایل PHP برای درج کد های وب و اسکریپت ها ایجاد کنید
2. یک فایل جاوا اسکریپت برای درج اسکریپت ها ایجاد کنید.
3. یک فایل Php برای درج کالاهای خریداری شده در کارت خرید (سبد خرید ) ایجاد کنید.
4. یک فایل CSS برای ایجاد استایل ها ایجاد کنید.
گام 1. یک فایل Php برای درج کد های وب و اسکریپت ها ایجاد کنید
ما در اینجا این فایل را به نام cart.php ایجاد و ذخیره کرده ایم.
<html>
<head>
<link href="cart.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="cart.js"></script>
</head>
<body>
<div id="wrapper">
<div id="item_div">
<div class="items" id="item1">
<img src="images/product1.jpg">
<p>Simple Navy Blue T-Shirt</p>
<p>Price - $95</p>
<input type="hidden" id="item1_name" value="Simple Navy Blue T-Shirt">
<input type="hidden" id="item1_price" value="$95">
</div>
<div class="items" id="item2">
<img src="images/product2.jpg">
<p>Trendy T-Shirt With Back Design</p>
<p>Price - $105</p>
<input type="hidden" id="item2_name" value="Trendy T-Shirt With Back Design">
<input type="hidden" id="item2_price" value="$105">
</div>
<div class="items" id="item3">
<img src="images/product3.jpg">
<p>Two Color Half-Sleeves T-Shirt</p>
<p>Price - $120</p>
<input type="hidden" id="item3_name" value="Two Color Half-Sleeves T-Shirt">
<input type="hidden" id="item3_price" value="$120">
</div>
</div>
<div id="cart_label_div">
<p id="cart_label" onclick="show_cart();"><?php echo count($_SESSION['items']);?> Items In Your Cart</p>
</div>
<div id="mycart">
<?php
if($_SESSION['items'])
{
for($i=0;$i<count($_SESSION['items']);$i++)
{
$item_val=explode("+",$_SESSION['items'][$i]);
?>
<div class='cart_items'>
<img src='<?php echo $item_val[2];?>'>
<p><?php echo $item_val[0];?></p>
<p><?php echo $item_val[1];?></p>
<input type='button' value='Remove Item' onclick='remove_item("<?php echo $_SESSION['items'][$i];?>");'>
</div>
<?php
}
}
else
{
echo "<p id='mycart_label'>Drop Items Here</p>";
}
?>
</div>
</div>
</body>
</html>
در این گام ما ابتدا سه محصول ساده ایجاد کرده ایم تا کارت خرید چیزی برای کار کردن داشته باشد. سپس ما یک تگ DIV را برای نمایش آیتم های که در درون کارت ایجاد کرده ایم این تگ همان تگی است که آیتم های مورد علاقه مان برای خرید را به آن (کارت خرید یا سبد خرید)خواهیم افزود. و ما تمام فایل های مورد نیاز برای کارت خرید مانند jquery.js, jquery-ui.js را قرار داده ایم و همچنین فایل cart.js و فایل cart.cssرا افزوده که در ادامه توضیح خواهیم داد. لطفا فایل jquery-ui.js را دانلود کنید زیرا بدون آن امکان دراگ و دراپ نیست.
درج آدرس jquery/ jquery.js و jquery-ui.js jquery/
گام دوم ایجاد یک فایل js به نام cart.js
$(document).ready(function()
{
$( ".items" ).draggable
({
containment: 'document',
opacity: 0.6,
revert: 'invalid',
helper: 'clone',
zIndex: 100
});
$("#mycart").droppable({
drop:function(e, ui)
{
var param = $(ui.draggable).attr('id');
cart(param);
}
});
});
function cart(id)
{
var ele=document.getElementById(id);
var img_src=ele.getElementsByTagName("img")[0].src;
var name=document.getElementById(id+"_name").value;
var price=document.getElementById(id+"_price").value;
$.ajax
({
type:'post',
url:'store_item.php',
data:{
item_src:img_src,
item_name:name,
item_price:price
},
success:function(response) {
if(response)
{
document.getElementById("cart_label").innerHTML=response;
show_cart();
}
}
});
}
function remove_item(item_val)
{
$.ajax({
type:'post',
url:'store_item.php',
data:{
remove_item:'remove_item',
item_val:item_val
},
success:function(response) {
document.getElementById("cart_label").innerHTML=response;
show_cart();
}
});
}
function show_cart()
{
$.ajax({
type:'post',
url:'store_item.php',
data:{
show_cart:'show_cart',
},
success:function(response) {
document.getElementById("mycart").innerHTML=response;
}
});
}
در این گام ابتدا تمام محصولاتمان را قابل دراگ کردن کردیم() draggable. draggable این فانکشن برای ایجاد قابلیت دراگ شدن محصولات به کار می رود و فانکشن() droppable برای دریافت ایدی محصول و صدا زدن فانکشن cart() هنگام رها کردن محصول در کارت area.In بکار می رود. فانکشن ()cart برای دریافت کلیه محصولات با تمام مقادیر مربوط به آنها و فرستادنشان به فایل store_item.php برای درج در کارت خرید بکار می رود اگر خرید موفقیت آمیز باشد فانکشن ()show_cart صدا زده خواهد شد.
در فانکشن() show_cart ما به سادگی محصولات کارت خود را در تگ DIv mycart نمایش می دهیم.و در فانکشن ()remove_itemحذف کالاها ما بسادگی مقادیر محصول را دریافت و از کارت حذف می کنیم و سپس فانکشن ()show_cart را فرا خوانی می کنیم تا محصولات باقیمانده در کارت نمایش داده شود.
گام 3 . یک Php فایل برای نگهداری ایتم های درون کارت بسازید.
ما این فایل PHP را ساخته و به نام store_item.php ذخیره کرده ایم.
<?php
session_start();
if(isset($_POST['item_src']))
{
$item_values=$_POST['item_name']."+".$_POST['item_price']."+".$_POST['item_src'];
if(count($_SESSION['items'])>0)
{
if(in_array($item_values,$_SESSION['items']))
{
}
else
{
$_SESSION['items'][]=$item_values;
}
}
else
{
$_SESSION['items'][]=$item_values;
}
echo count($_SESSION['items'])." Items In Your Cart";
exit();
}
if(isset($_POST['show_cart']))
{
for($i=0;$i<count($_SESSION['items']);$i++)
{
$item_val=explode("+",$_SESSION['items'][$i]);
?>
<div class='cart_items'>
<img src='<?php echo $item_val[2];?>'>
<p><?php echo $item_val[0];?></p>
<p><?php echo $item_val[1];?></p>
<input type='button' value='Remove Item' onclick='remove_item("<?php echo $_SESSION['items'][$i];?>");'>
</div>
<?php
}
exit();
}
if(isset($_POST['remove_item']))
{
$item_val=$_POST['item_val'];
for($i=0;$i<count($_SESSION['items']);$i++)
{
if($_SESSION['items'][$i]==$item_val)
{
unset($_SESSION['items'][$i]);
}
}
$_SESSION['items']=array_values($_SESSION['items']);
echo count($_SESSION['items'])." Items In Your Cart";
exit();
}
?>
در این گام ما سه شرط ()isset برای درج در کارت خرید (سبد خرید یا فروشگاه) استفاده کرده ایم . نمایش و حذف محصولات در شرط اول ما محصولات را در کارت جمع کردیم ما از sessions فایل php برای جمع آوری محصولات در کارت استفاده کرده ایم ما تمام جزییات محصول درج شده در کارت (رها شده در کارت) را گرفته و سپس از + برای جداسازی مقادیر و جمع آوری در آرایه session استفاده کرده ایم . شرط دوم ()isset ما محصولات موجود در کارت را با استفاده از حلقه for for loop() کنار هم گردآوردیم و در شرط سوم ()isset ما محصولات را به کمک علامت + از یکدیگر جداسازی کردیم. برای حذف محصولات هم به سادگی از فانکشن ()unset استفاده کرده ایم.
گام 4. ساخت یک فایل css برای درج استایل ها
ما این فایل را به نام cart.css ایجاد و ذخیره کرده ایم.
body
{
text-align:center;
width:100%;
margin:0 auto;
padding:0px;
font-family:helvetica;
}
#wrapper
{
text-align:center;
margin:0 auto;
padding:0px;
width:995px;
}
#item_div
{
float:left;
background-color:#E6E6E6;
margin-left:180px;
text-align:center;
padding:20px;
box-sizing:border-box;
}
.items
{
float:left;
padding:10px;
background-color:white;
width:150px;
height:240px;
margin-top:20px;
box-shadow:0px 0px 10px 0px #A4A4A4;
box-sizing:border-box;
margin:20px;
}
.items img
{
width:130px;
}
.items p
{
margin:5px;
font-size:14px;
color: green;
}
#cart_label_div
{
clear:both;
float:left;
text-align:center;
width:610px;
margin-left:180px;
margin-top:40px;
background-color:#E6E6E6;
}
#cart_label_div p
{
margin:10px;
color:#585858;
font-size:20px;
font-weight:bold;
}
#mycart
{
clear:both;
float:left;
width:604px;
min-height:200px;
margin-left:180px;
border:3px dashed #585858;
}
#mycart #mycart_label
{
font-size:25px;
color:#585858;
font-weight:bold;
}
#mycart .cart_items
{
border-bottom:1px dashed silver;
padding:20px;
padding-left:10px;
text-align:left;
}
#mycart .cart_items img
{
width:70px;
height:50px;
float:left;
margin-right:10px;
}
#mycart .cart_items p
{
margin:0px;
font-size:15px;
color:green;
}
این پایان کار ماست حالا امکان خرید با دراگ و دراپ کردن موس با کمک jquey و Ajax و php را دارید می توانید کد های ما را بر اساس نیاز خود سفارشی کنید.