News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

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

Started by stephanbais, May 22, 2013, 17:46:52 PM

Previous topic - Next topic

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
<?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>

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.
Should I fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

Milbo

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');
Should I fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

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)
CE WebDesign München: https://ce-webdesign.de | Websites, eCommerce WebShops | Responsive Design | SEO

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
<!-- 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
?>

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)
CE WebDesign München: https://ce-webdesign.de | Websites, eCommerce WebShops | Responsive Design | SEO

lindapowers

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

Regards

servlet

Он-лайн магазин за фототапети http://mishelfoster.com

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...
CE WebDesign München: https://ce-webdesign.de | Websites, eCommerce WebShops | Responsive Design | SEO

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.
Should I fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

Milbo

I also do not understand, why there is suddenly a function create? and remove?
Should I fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

d0ublezer0

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

Thank you for sharing this hack!

servlet

Он-лайн магазин за фототапети http://mishelfoster.com

d0ublezer0


d0ublezer0