Сортировка дополнительных картинок в шопе drag'n'drop

+18
2.4K
Сделал возможность перемещения дополнительных картинок в шопе:
Иллюстрация

т.е. можно мышкой взять и перетащить картинку вверх-вниз, как требуется

1. для драг и дропности использовал плугин jquery.tablednd (jquery.tablednd_0_5.js)

2. в файле /admin/components/shop/js/common.js в конец приписываем:
  1.  
  2. $(document).ready(function() {
  3. $("#tbl_images").tableDnD({
  4. onDragClass: "myDragClass",
  5. onDrop: function(table, row) {
  6. $(row).fadeTo("fast", 0.3);
  7. $.ajax({
  8. type: "POST",
  9. url: "/admin/components/shop/pic_sort.php",
  10. data: $.tableDnD.serialize(),
  11. success: function(html){
  12. $(row).fadeTo("fast", 1);
  13. var rows = table.tBodies[0].rows;
  14. var j;
  15. for (var i=0; i<rows.length; i++) {
  16. j = i+1;
  17. rows[i].id = 'shop'+$(rows[i]).attr('rel')+'-'+j+'.jpg';
  18. }
  19. //alert(html);
  20. }
  21. });
  22. }
  23. }); //для сортировки картинок
  24. });
  25.  
3. в файле /admin/template.php подключаем библиотечку:
  1.  
  2. <script type="text/javascript" src="/admin/js/jquery.tablednd_0_5.js" ></script>
  3.  
4. в файле /admin/components/shop/backend.php правим вывод картинок:

  1.  
  2. if ($mod['images']){
  3. ?>
  4. <div style="margin-top:3px;margin-bottom:3px;padding:10px;border:solid 1px gray;overflow:hidden">
  5. <div style="clear:both" class="hinttext">Отмеченные изображения будут удалены</div>
  6. <table id="tbl_images" width="100%">
  7. <?php
  8. foreach($mod['images'] as $num=>$filename){
  9. ?>
  10. <tr id="<?=$filename?>" rel="<?=$mod['id']?>">
  11. <td width="20">
  12. <div style="width:45px;background:url(/admin/components/shop/images/del_small.gif) no-repeat center;">
  13. <input type="checkbox" name="img_delete[]" class="input" value="<?php echo $filename; ?>" />
  14. </div>
  15. </td>
  16. <td><img src="/images/photos/small/<?php echo $filename; ?>" width="64" height="64" /></td>
  17. </tr>
  18. <?php
  19. }
  20. ?>
  21. </table>
  22. </div>
  23. <?php
  24. }
  25.  
5. в папку /admin/components/shop/ помещаем файл pic_sort.php (он вызывается по аяксу)

  1.  
  2. <?php
  3. error_reporting(E_ALL ^ E_NOTICE);
  4.  
  5. define('PATH', $_SERVER['DOCUMENT_ROOT']);
  6. define('HOST', 'http://' . $_SERVER['HTTP_HOST']);
  7. define("VALID_CMS", 1);
  8.  
  9. include('../../../core/cms.php'); //ядро
  10. include('../../../includes/config.inc.php'); //конфиг, оставлен для старых плагинов
  11.  
  12. $inCore = cmsCore::getInstance();
  13. $inDB = cmsDatabase::getInstance();
  14.  
  15. $files_list = $inCore->request('tbl_images', 'array');
  16. $names_list = array();
  17.  
  18. $much = count($files_list);
  19. for($i=0;$i<$much;$i++) {
  20. $old_name = $files_list[$i];
  21.  
  22. $s = $files_list[$i];
  23. $pos = strrpos($s,'-');
  24. $prfx = substr($s,0,$pos+1);
  25.  
  26. $new_name = $names_list[] = $prfx.($i+1).'.jpg';
  27.  
  28. //переименовываем
  29. rename(PATH.'/images/photos/'.$old_name, PATH.'/images/photos/_'.$new_name);
  30. rename(PATH.'/images/photos/small/'.$old_name, PATH.'/images/photos/small/_'.$new_name);
  31. rename(PATH.'/images/photos/medium/'.$old_name, PATH.'/images/photos/medium/_'.$new_name);
  32. }
  33.  
  34. //теперь у переименованных картинок убираем начальное подчеркивание (_)
  35. foreach($names_list as $key=>$new_name) {
  36. rename(PATH.'/images/photos/_'.$new_name, PATH.'/images/photos/'.$new_name);
  37. rename(PATH.'/images/photos/small/_'.$new_name, PATH.'/images/photos/small/'.$new_name);
  38. rename(PATH.'/images/photos/medium/_'.$new_name, PATH.'/images/photos/medium/'.$new_name);
  39. }
  40.  
  41.  
  42. ?>
  43.  
  44.  
6. Задать класс для: .myDragClass {background: darkgray;}
+1
Bubble Gumoff Bubble Gumoff 11 лет назад #
Спасибо, за очередное улучшение SHopa!+++
0
lezginka.ru lezginka.ru 11 лет назад #
+
0
Дайвер74 Дайвер74 11 лет назад #
Однозначно +
0
Роман Роман 11 лет назад #
беру на вооружение! спасибо!
0
Bubble Gumoff Bubble Gumoff 11 лет назад #
А как функционирует? При перемещении картинок в админке, также изменяется порядок картинок на фронтенде? Если да то, нумерация наименования картинок тоже меняется?
0
vicoder vicoder 11 лет назад #
да, именно так, сортировка за счет переименования картинок

были например:

shop134-1.jpg
shop134-2.jpg

после того как нижнюю переместили вверх, она становится shop134-1.jpg, а предыдущая - соответственно shop134-2.jpg
0
Def Def 10 лет назад #
страно, у меня не переименовывает после сохранения
0
vicoder vicoder 10 лет назад #
мож че не так сделали?
0
Def Def 10 лет назад #
может для 1.10.3 не подходит? вроде в админке пермещает, но файлы не переименовывает
0
vicoder vicoder 10 лет назад #
А, вот для 1.10 не тестировал
0
печаль печаль 10 лет назад #
оу YES, пасибо за код, нашел наконец-то как в админке с AJAX работать... Благодарю за предоставленный код, коллега! joke
0
vicoder vicoder 10 лет назад #
можно бальчик в карму добавить joke

Еще от автора

связка ishop и программа Покупка на Яндекс-маркете (2)
продолжение http://instantcms.ru/blogs/uluchshenija/svjazka-ishop-i-programa-pokupka-na-jandeks-markete.htmlпервой части
связка ishop и программа Покупка на Яндекс-маркете
Яндекс маркет позволяет заказывать товары непосредственно с яндекса - удобная штука.
Глючек при попытке перенести статью из раздела в другой раздел
Обнаружился глючек при переносе статьи из раздела в раздел в функции moveArticlesToCat. У переносимой статьи не обновлялось seolink.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.