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
<?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:
<!-- 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:
<!-- 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>
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.
btw, why so complex, when you have a product, then you can simply use
$product = $pModel->getProduct($virtuemart_product_id);
$pModel->addImages($product,1);
so in our case it should be just
$this->model->addImages($product,1);
$img = $product->images[0]->displayMediaThumb('',false,'',true,true,'false');
Hi stephanbais,
thank you so much for sharing this!
works great for me (J 2.5.11 + VM 2.0.21)
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
<!-- 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
<?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
?>
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)
Thanks you 2 for adding this great feature, wish more people contributed with code fixes and improvements.
Regards
Good work @stephanbais
Moving forward
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...
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.
I also do not understand, why there is suddenly a function create? and remove?
OMG, stephanbais, this is awesome! Probably, most awaited functionality of VM admin panel!
Thank you for sharing this hack!
Please include [ADDED] in the title
regards and thanks ;)
Please, add this functionality to category list too.
Hi! How about drag and drop for userfields?
planned