使用拖放在magento中添加产品到购物车

问题描述:

我想添加产品到购物车使用拖动&下降。 为此,我使用jQuery UI Droppable。代码是: -使用拖放在magento中添加产品到购物车

<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
    $(function() { 
$(".category-products").accordion(); 
$(".product-name").draggable({ 
    appendTo: "body", 
    helper: "clone" 
}); 
$(".block-content ol").droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    accept: ":not(.ui-sortable-helper)", 
    drop: function(event, ui) { 
    $(this).find(".placeholder").remove(); 
    $("<li></li>").text(ui.draggable.text()).appendTo(this); 
    } 
}).sortable({ 
    items: "li:not(.placeholder)", 
    sort: function() { 
    // gets added unintentionally by droppable interacting with sortable 
    // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options 
    $(this).removeClass("ui-state-default"); 
    } 
}); 

});

使用此代码产品名称将成为可拖放到购物车,但它们不会添加到购物车。我尝试但不能将产品名称添加到购物车。请帮帮我。

+0

这些产品是否有任何产品选择? –

+0

不,他们没有 –

假设您的产品没有任何自定义选项。

Store中的产品ID,你的产品列表中的隐藏字段(可拖动LI)

 <li>Lolcat Shirt 
      <input type='hidden' value='2' name='pid' /> 
     </li> 

然后做

drop: function(event, ui) { 
    $(this) 
     .addClass("ui-state-highlight") 
     .find("> p") 
     .html("Dropped!"); 

    add product to cart 
    p_id = ui.draggable.find('input[name="pid"]').val(); 
    $.get("/path/to/app/checkout/cart/add?qty=1&product=" + p_id) 

    return false; 
    } 

http://jsfiddle.net/C2Ufk/

你需要做类似的东西删除项目

+0

感谢您的回答。产品名称和购物车框位于不同的phtml文件中。当我传递p_id值时,它显示未定义的值。请帮助我 –

+0

由于这是使用JavaScript的做法,它不应该使一个不同的phtml文件它是不同的。请添加一个截图,让我可以更好地了解你想做什么 –

+0

对不起,我得到了错误。现在我在alert框中获得正确的url。 –

我得到了一个模块sa我..

Drag & Drop Sort Products它对我来说工作得很好..真的很棒的发展。