Drag and drop корзина tpl — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
(Новая страница: «Для того, чтобы пользователи могли просто перетаскивать товары в корзину, сделаем следующ…»)
 
 
(не показано 10 промежуточных версий 2 участников)
Строка 1: Строка 1:
−
Для того, чтобы пользователи могли просто перетаскивать товары в корзину, сделаем следующее:
+
'''Актуально для версии 2.9'''
  
 +
В этом примере мы будем делать так, чтобы пользователи могли просто перетаскивать товары в корзину.<br>
 +
 +
Для начала необходимо убедиться, что у вас в шаблоне используются макрос
 +
<source lang="php">
 +
<xsl:value-of select="document('udata://system/includeQuickEditJs')/udata" disable-output-escaping="yes" />
 +
</source>
 +
А затем в шапку шаблона добавляем следующий код:
 +
<source lang="html4strict">
 +
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
 +
</source>
 +
<source lang="css">
 +
<style type="text/css">
 +
.products{
 +
list-style:none;
 +
margin-right:300px;
 +
padding:0px;
 +
height:100%;
 +
}
 +
.products li{
 +
display:inline;
 +
float:left;
 +
margin:10px;
 +
}
 +
.object{
 +
display:block;
 +
text-decoration:none;
 +
}
 +
.object img{
 +
border:1px solid #333;
 +
}
 +
.object p{
 +
margin:0;
 +
font-weight:bold;
 +
text-align:center;
 +
color:#c3c3c3;
 +
}
 +
.basket_info{
 +
position:fixed;
 +
right:0;
 +
top:0;
 +
width:300px;
 +
height:100%;
 +
background:#ccc;
 +
padding:0px 10px;
 +
}
 +
h1{
 +
text-align:center;
 +
color:#555;
 +
}
 +
h2{
 +
position:absolute;
 +
font-size:16px;
 +
left:10px;
 +
bottom:20px;
 +
color:#555;
 +
}
 +
.total{
 +
margin:0;
 +
text-align:right;
 +
padding-right:20px;
 +
}
 +
</style>
 +
</source>
 +
<source lang="javascript">
 +
<script>
 +
var data = {"total":0,"rows":[]};
 +
var totalCost = 0;
 +
 +
$(function(){
 +
$('#cartcontent').datagrid({
 +
singleSelect:true
 +
});
 +
$('.object').draggable({
 +
revert:true,
 +
proxy:'clone',
 +
onStartDrag:function(){
 +
$(this).draggable('options').cursor = 'not-allowed';
 +
$(this).draggable('proxy').css('z-index',10);
 +
},
 +
onStopDrag:function(){
 +
$(this).draggable('options').cursor='move';
 +
}
 +
});
 +
$('.basket_info').droppable({
 +
onDragEnter:function(e,source){
 +
$(source).draggable('options').cursor='auto';
 +
},
 +
onDragLeave:function(e,source){
 +
$(source).draggable('options').cursor='not-allowed';
 +
},
 +
onDrop:function(e,source){
 +
                                        id = %element_id%;
 +
alert('Товар добавлен в корзину');
 +
                                        jQuery.post("/emarket/basket/put/element/"+id+"/");
 +
                                        location.reload();
 +
}
 +
});
 +
});
 +
 +
function addProduct(name,price){
 +
function add(){
 +
alert('Bas');
 +
}
 +
add();
 +
totalCost += price;
 +
$('#cartcontent').datagrid('loadData', data);
 +
$('div.basket_info .total').html('Total: $'+totalCost);
 +
}
 +
</script>
 +
</source>
 +
 +
На это всё, drag and drop перетаскивание в корзину должно заработать.<br>
 +
 +
Примечание: все товары которые вы желаете перетаскивать в корзину должны иметь класс "object", а сама корзина класс "basket_info".<br>
 +
Внимание: функционирование описанного выше примера гарантируется только в версии 2.8.6<br>
 
Инструкция для xslt шаблона [[Drag and drop корзина xslt]]
 
Инструкция для xslt шаблона [[Drag and drop корзина xslt]]
 +
[[Категория:Модуль Интернет магазин]][[Категория:Верстка в TPL]]

Текущая версия на 08:53, 16 августа 2018

Актуально для версии 2.9

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

Для начала необходимо убедиться, что у вас в шаблоне используются макрос 

<xsl:value-of select="document('udata://system/includeQuickEditJs')/udata" disable-output-escaping="yes" />

А затем в шапку шаблона добавляем следующий код: 

<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

<style type="text/css">
		.products{
			list-style:none;
			margin-right:300px;
			padding:0px;
			height:100%;
		}
		.products li{
			display:inline;
			float:left;
			margin:10px;
		}
		.object{
			display:block;
			text-decoration:none;
		}
		.object img{
			border:1px solid #333;
		}
		.object p{
			margin:0;
			font-weight:bold;
			text-align:center;
			color:#c3c3c3;
		}
		.basket_info{
			position:fixed;
			right:0;
			top:0;
			width:300px;
			height:100%;
			background:#ccc;
			padding:0px 10px;
		}
		h1{
			text-align:center;
			color:#555;
		}
		h2{
			position:absolute;
			font-size:16px;
			left:10px;
			bottom:20px;
			color:#555;
		}
		.total{
			margin:0;
			text-align:right;
			padding-right:20px;
		}
	</style>

<script>
		var data = {"total":0,"rows":[]};
		var totalCost = 0;

		$(function(){
			$('#cartcontent').datagrid({
				singleSelect:true
			});
			$('.object').draggable({
				revert:true,
				proxy:'clone',
				onStartDrag:function(){
					$(this).draggable('options').cursor = 'not-allowed';
					$(this).draggable('proxy').css('z-index',10);
				},
				onStopDrag:function(){
					$(this).draggable('options').cursor='move';
				}
			});
			$('.basket_info').droppable({
				onDragEnter:function(e,source){
					$(source).draggable('options').cursor='auto';
				},
				onDragLeave:function(e,source){
					$(source).draggable('options').cursor='not-allowed';
				},
				onDrop:function(e,source){
                                        id = %element_id%;
					alert('Товар добавлен в корзину');
                                        jQuery.post("/emarket/basket/put/element/"+id+"/");
                                        location.reload();
				}
			});
		});

		function addProduct(name,price){
			function add(){
				alert('Bas');
			}
			add();
			totalCost += price;
			$('#cartcontent').datagrid('loadData', data);
			$('div.basket_info .total').html('Total: $'+totalCost);
		}
	</script>

На это всё, drag and drop перетаскивание в корзину должно заработать.

Примечание: все товары которые вы желаете перетаскивать в корзину должны иметь класс "object", а сама корзина класс "basket_info".
Внимание: функционирование описанного выше примера гарантируется только в версии 2.8.6
Инструкция для xslt шаблона Drag and drop корзина xslt

Источник — «https://wiki.umisoft.ru/index.php?title=Drag_and_drop_корзина_tpl&oldid=8666»