[ADDED][Hack] Drag & Drop to re-order products in categories VM2.0.20b

[stephanbais]

This hack allows you to drag & drop to re-order products using jQuery when in the VM Admin Backend (Eg Products -> List Products).

Open:
/administrator/components/com_virtuemart/views/product/tmpl/default.php

Insert these lines of code at the very end of the file

Code Select Expand

<?php
/// DRAG AND DROP PRODUCT ORDER HACK
if ($this->virtuemart_category_id ) { ?>
<script>

jQuery(function() {

jQuery( ".adminlist" ).sortable({
                        items: 'tr:not(:first,:last)',
                        opacity: 0.8,
update: function(event, ui) {
var i = 1;
jQuery(function updaterows() {
   jQuery(".order").each(function(index){
      var row = jQuery(this).parent('td').parent('tr').prevAll().length;
      jQuery(this).val(row);
      i++;
   });

});
},
stop: function () {
            var inputs = jQuery('input.ordering');
            var rowIndex = inputs.length;
            jQuery('input.ordering').each(function(idx) {
                jQuery(this).val(idx + 1);
            });
        }
                     
});
});
jQuery('input.ordering').css({'color': '#666666', 'background-color': 'transparent','border': 'none' }).attr('readonly', true);
</script>


<?php } 

/// END PRODUCT ORDER HACK
?>


Also if you wish to display thumbnails of the products in this list as well

replace the code starting on line 116:

Code Select Expand

<!-- Product name -->
<?php
$link = 'index.php?option=com_virtuemart&view=product&task=edit&virtuemart_product_id='.$product->virtuemart_product_id.'&product_parent_id='.$product->product_parent_id;
                                /* Product list should be ordered */
$parent_id = JRequest::getVar('product_parent_id');

?>
<td><?php
                        echo JHTML::_('link', JRoute::_($link), $product->product_name, array('title' => JText::_('COM_VIRTUEMART_EDIT').' '.$product->product_name));

                                ?></td>

with this code:

Code Select Expand

<!-- Product image & Product name -->
<td align ="left>"><?php
if (!class_exists( 'vmMediaHandler' )) require(JPATH_ADMINISTRATOR.DS.'components'.DS.'com_virtuemart'.DS.'helpers'.DS.'mediahandler.php');
$db =JFactory::getDBO();if (!class_exists('TableMedias')) require(JPATH_VM_ADMINISTRATOR . DS . 'tables' . DS . 'medias.php');
$data = new TableMedias($db);
$data->load((int)$product->virtuemart_media_id[0]); 
$media = VmMediaHandler::createMedia($data,'product');    
$img = $media->displayMediaThumb('',false,'',true,true,'false');
$link = 'index.php?option=com_virtuemart&view=product&task=edit&virtuemart_product_id='.$product->virtuemart_product_id.'&product_parent_id='.$product->product_parent_id;     
$thumb = str_replace('<img', '<img width="50px" style="float:left;clear:both" ', $img); 

                                /* Product list should be ordered */
$parent_id = JRequest::getVar('product_parent_id');

                        echo JHTML::_('link', JRoute::_($link), $thumb, $product->product_name, array('title' => JText::_('COM_VIRTUEMART_EDIT').' '.$product->product_name));
                        ?><span style="float:left; clear:left"><?php
                        echo JHTML::_('link', JRoute::_($link), $product->product_name, array('title' => JText::_('COM_VIRTUEMART_EDIT').' '.$product->product_name));
                        ?>
</span></td>

[Milbo]

Very nice, I add the dragndrop thing to the core. Could you add the same for the shopperfields and the categories? and to top it, I would like that you use the Cross icon as we do in the prices and this icon is also missing for the customfields :-)

It was intended to not display the images of hte products for listing performance.

[Milbo]

btw, why so complex, when you have a product, then you can simply use

Code Select Expand


$product = $pModel->getProduct($virtuemart_product_id);
$pModel->addImages($product,1);


so in our case it should be just

Code Select Expand


$this->model->addImages($product,1);
$img = $product->images[0]->displayMediaThumb('',false,'',true,true,'false');


[CE WebDesign München]

Hi stephanbais,
thank you so much for sharing this!

works great for me (J 2.5.11 + VM 2.0.21)

[stephanbais]

Hi Milbo,

Thanks for the hint on the thumbnails. I have implemented this in my revised version of the code. I also included the remove option in jQuery, however I need some help in passing this to the server when hitting the save button.

code from line 116

Code Select Expand

<!-- Product image & Product name -->
<td align ="left>"><?php
$link = 'index.php?option=com_virtuemart&view=product&task=edit&virtuemart_product_id='.$product->virtuemart_product_id.'&product_parent_id='.$product->product_parent_id; 
                               
    /* Product list should be ordered */
$parent_id = JRequest::getVar('product_parent_id');
$this->model->addImages($product,1);
$img = $product->images[0]->displayMediaThumb('',false,'',true,true,'false');?>
<span class= "vm_thumb_image img"><?php echo JHTML::_('link', JRoute::_($link), $img, $product->product_name, array('title' => JText::_('COM_VIRTUEMART_EDIT').' '.$product->product_name));?>
                <span class="vmicon vmicon-16-remove" title="<?php echo JText::_('COM_VIRTUEMART_DELETE'); ?>"></span>
                <?php echo JHTML::_('link', JRoute::_($link), '<span class="edit-24-grey" style="float:right; position:relative"></span>', array('title' => JText::_('COM_VIRTUEMART_EDIT').' '.$product->product_name));?>
                </span>
  <span style="float:left; clear:left">
  <?php echo JHTML::_('link', JRoute::_($link), $product->product_name, array('title' => JText::_('COM_VIRTUEMART_EDIT').' '.$product->product_name)); ?>
</span>
</td>


Insert this code at the end of the document

Code Select Expand

<?php
/// DRAG AND DROP PRODUCT ORDER HACK
if ($this->virtuemart_category_id ) { ?>
<script>
jQuery(function() {

jQuery( ".adminlist" ).sortable({
                        items: 'tr:not(:first,:last)',
                        opacity: 0.8,
                        update: function() {
var i = 1;
jQuery(function updatenr(){
            jQuery('input.ordering').each(function(idx) {
                jQuery(this).val(idx);
            });
            });

       
jQuery(function updaterows() {
    jQuery(".order").each(function(index){
var row = jQuery(this).parent('td').parent('tr').prevAll().length;
      jQuery(this).val(row);
      i++;
      });

});
},
create: function (event, ui) {
jQuery(function deleterow() {
jQuery(".vmicon-16-remove").click(function(){   
    jQuery(this).parent('td').parent('tr').fadeOut("500",function() {jQuery(this).remove();});
                  jQuery('input.ordering').each(function(idx) {
                jQuery(this).val(idx);
            });
                });
               
  });   
jQuery(function updaterows() {
    jQuery(".order").each(function(index){
var row = jQuery(this).parent('td').parent('tr').prevAll().length;
      jQuery(this).val(row);
      i++;
});
});
}
});

jQuery(".vmicon-16-remove").click(function() {
jQuery(this).parent().parent().parent().fadeOut("500",function() {jQuery(this).remove()})
});
});

jQuery('input.ordering').css({'color': '#666666', 'background-color': 'transparent','border': 'none' }).attr('readonly', true);
</script>

<?php }
else { ?> /// SORTABLE SCRIPT WHEN NO CATEGORY SELECTED
<script>

jQuery(function() {

jQuery( ".adminlist" ).sortable({
                        items: 'tr:not(:first,:last)',
                        opacity: 0.8,
                        create: function (event, ui) {
jQuery(function deleterow() {
jQuery(".vmicon-16-remove").click(function(){   
    jQuery(this).parent('td').parent('tr').fadeOut("500",function() {jQuery(this).remove();});
                  jQuery('input.ordering').each(function(idx) {
                jQuery(this).val(idx);
            });
                });
                       
  });   
jQuery(function updaterows() {
    jQuery(".order").each(function(index){
var row = jQuery(this).parent('td').parent('tr').prevAll().length;
      jQuery(this).val(row);
      i++;
});
});
}
});

jQuery(".vmicon-16-remove").click(function() {
jQuery(this).parent().parent().parent().fadeOut("500",function() {jQuery(this).remove()})
});
});

jQuery('input.ordering').css({'color': '#666666', 'background-color': 'transparent','border': 'none' }).attr('readonly', true);
</script>

<?php
} 

/// END PRODUCT ORDER HACK
?>

[CE WebDesign München]

maybe this drag'n'drop-solution can be used to re-order 'Related Products' too?
(Products->Custom Fields->Related Products)

or like it already works with the images (Products->Product Images->Images)

[lindapowers]

Thanks you 2 for adding this great feature, wish more people contributed with code fixes and improvements.

Regards

[servlet]

Good work @stephanbais
Moving forward

[CE WebDesign München]

hello,
stephanbais provided some new code including suggestions by milbo:
some posts above or here: http://forum.virtuemart.net/index.php?topic=115829.msg390414#msg390414
maybe it got overseen...

[Milbo]

yeh but we cannot use it that way. If no category is selected, there is only ordering of childs products in relation to their parent. So I wonder what is the second option, for dragndrop if there is no category selected? Would make sense, if a parent is selected.

[Milbo]

I also do not understand, why there is suddenly a function create? and remove?

[d0ublezer0]

OMG, stephanbais, this is awesome! Probably, most awaited functionality of VM admin panel!

Thank you for sharing this hack!

[servlet]

Please include [ADDED] in the title
regards and thanks

[d0ublezer0]

Please, add this functionality to category list too.

[d0ublezer0]

Hi! How about drag and drop for userfields?