Add products to cart using drag & drop in magento

Question

I want to add products to cart using Drag & drop. For that I am using jQuery UI Droppable . Code is:-

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

});

Using this code products name become droppable to cart but they are not added to cart. I try but don’t able to add product name to cart. Please help me.

Does these products have any product options? – MagePal Extensions Feb 06 '13 at 11:19 — MagePal Extensions, Feb 06 '13 at 11:19

score 1 · Accepted Answer · answered Feb 06 '13 at 12:03

1

Assuming that your product dont have any custom option.

Store your product id as an hidden field within you product list (draggable li)

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

Then do

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

See http://jsfiddle.net/C2Ufk/

You will need to do something similar to remove item

answered Feb 06 '13 at 12:03

MagePal Extensions

17,646
2
47
62

Thanks for answer. Product name & shopping cart box is in different phtml file. when I will pass p_id value then it show undefined value. please help me – Ankita Agrawal Feb 06 '13 at 12:27
Since this is do using javascript it should not make a different which phtml files it is in. Please add a screenshot so I can have a better understanding of what your trying to do – MagePal Extensions Feb 06 '13 at 12:38
Sorry I got the mistake. Now I am getting proper url in alert box. – Ankita Agrawal Feb 06 '13 at 12:50
Now I am getting url but I have to add product to cart. I think for that I have to use ajax to add products to cart. Please help me – Ankita Agrawal Feb 06 '13 at 12:56

score 0 · Answer 2 · edited Jan 16 '14 at 08:21

0

I got one module for the same..

Drag & Drop Sort Products for which it works fine for me.. and really great development.

edited Jan 16 '14 at 08:21

Stein G. Strindhaug

5,077
2
28
41

answered Jan 16 '14 at 07:29

DYS

11
3

Add products to cart using drag & drop in magento

2 Answers2