Question

我想使用Drag＆amp; amp;将产品添加到购物车下降。为此我使用jQuery UI Droppable。代码是： -

  <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" );
  }
});

}）;

使用此代码产品名称将变为可放置到购物车，但它们不会添加到购物车。我尝试但无法将产品名称添加到购物车。请帮帮我。

Answer 1

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

将您的商品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/

您需要执行类似删除项目

的操作

Answer 2

我有一个相同的模块..

Drag & Drop Sort Products这对我来说很好..而且真的很棒。

使用drag＆amp; amp;将产品添加到购物车落入magento

2 个答案: