Produktbilder im Shop-Backend per Drag and Drop sortieren

Shops wie xt-commerce und modified-shop bieten die Möglichkeit, eine fast unbegrenzte Menge an Bildern zu einem Produkt abzulegen. Ein großer Nachteil bei der Art der Bilderverwaltung ist jedoch, dass die einmal hochgeladenen Bilder nachträglich nicht sortiert werden können. Oder nur dadurch, dass sie erneut in anderer Reihenfolge hochgeladen werden. Mit unserem AJAX-Drag-and-Drop-Modul können Sie die Artikelfotos einfach in die richtige Reihenfolge schieben, ohne lange auf einen Upload zu warten.

1. Fügen Sie dem Admin-Verzeichnis die Datei k1_ajax_port.php sowie dem javascript-Verzeichnis im benutzten Template ein aktuelles jQuery-Framework wie z.B. das mitgelieferte jquery-ui-1.10.4.custom.min.js hinzu (s. auch Struktur des Download-ZIP-Ordners).

2. Suchen Sie in der Datei admin/categories.php das Ende des HEAD-Bereichs "</head>". Fügen Sie davor folgendes ein:

<?php // BOF hk: Bildersortierung per jQuery ?>
<script type="text/javascript" src="../templates/<?= CURRENT_TEMPLATE ?>/javascript/jquery.js"></script>
<script type="text/javascript" src="../templates/<?= CURRENT_TEMPLATE ?>/javascript/jquery-ui-1.10.4.custom.min.js"></script>
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#sortable li { margin: 6px 3px 3px 3px; padding: 0.4em; padding-left: 6px; font-size: 1.4em; width: 90%; height: auto; background-color: #CCCCCC; border-radius: 8px }
#sortable li span { position: absolute; margin-left: 0; }
.drag_handle { background-color: #333333; cursor:move; margin-top:-12px; color:#999999; font-size:10px; border-radius:3px; margin-left:4px; padding:2px }
.drag_handle a:link { color:#999999; cursor:move; text-decoration:none; }
.drag_handle a:hover { color:#CCCCCC; cursor:move; text-decoration:none; }
#result { background-color:#FFFF33; border:1px #333333 solid; border-radius:4px; padding:6px; color:#333333 }
</style>
<?php // EOF hk: Bildersortierung per jQuery ?>

3. Suchen Sie nach folgendem Code in der Datei admin/includes/modules/products_images.php:

  
  // display MO PICS
  if (MO_PICS > 0) {
    $mo_images = xtc_get_products_mo_images($pInfo->products_id);
    for ($i = 0; $i < MO_PICS; $i ++) {
      echo '<tr><td colspan="4">'.xtc_draw_separator('pixel_black.gif', '100%', '1').'</td></tr>';
      echo '<tr><td colspan="4">'.xtc_draw_separator('pixel_trans.gif', '1', '10').'</td></tr>';
      if ($mo_images[$i]["image_name"]) {
        echo '<tr><td colspan="4"><table><tr><td align="center" class="main" width="'. (PRODUCT_IMAGE_THUMBNAIL_WIDTH + 15).'">'.xtc_image(DIR_WS_CATALOG_THUMBNAIL_IMAGES.$mo_images[$i]["image_name"], 'Image '. ($i +1)).'</td>';
      } else {
        echo '<tr>';
      }
      echo '<td class="main">'.TEXT_PRODUCTS_IMAGE.' '. ($i +1).'<br />'.xtc_draw_file_field('mo_pics_'.$i).'<br />'.xtc_draw_separator('pixel_trans.gif', '24', '15').'&nbsp;'.$mo_images[$i]["image_name"].xtc_draw_hidden_field('products_previous_image_'. ($i +1), $mo_images[$i]["image_name"]);
      if (isset ($mo_images[$i]["image_name"])) {
        echo '</tr><tr><td align="center" class="main" valign="middle">'.xtc_draw_selection_field('del_mo_pic[]', 'checkbox', $mo_images[$i]["image_name"]).' '.TEXT_DELETE.'</td></tr></table>';
      } else {
        echo '</td></tr>';
      }
    }
  }

Bitte durch folgendes ersetzen:

  // display MO PICS
  if (MO_PICS > 0) {
    // BOF hk #967: Bildersortierung per jQuery
    echo '<tr><td>';
    echo '<div id="result" style="display:none">&nbsp;</div>';
    echo '<ul id="sortable">';
    // EOF hk #967: Bildersortierung per jQuery
    $mo_images = xtc_get_products_mo_images($pInfo->products_id);
    for ($i = 0; $i < MO_PICS; $i ++) {
        // BOF hk #967: Bildersortierung per jQuery
        echo '<li id="'.$mo_images[$i]["image_id"].'">';
        echo '<table>';
        echo '<tr><td class="drag_handle" colspan="4"><a href="">Klicken und Ziehen zum Sortieren</a></td></tr>';
        // EOF hk #967: Bildersortierung per jQuery
      //echo '<tr><td colspan="4">'.xtc_draw_separator('pixel_black.gif', '100%', '1').'</td></tr>';
      echo '<tr><td colspan="4">'.xtc_draw_separator('pixel_trans.gif', '1', '10').'</td></tr>';
      if ($mo_images[$i]["image_name"]) {
        echo '<tr><td colspan="4"><table><tr><td align="center" class="main" width="'. (PRODUCT_IMAGE_THUMBNAIL_WIDTH + 15).'">'.xtc_image(DIR_WS_CATALOG_THUMBNAIL_IMAGES.$mo_images[$i]["image_name"], 'Image '. ($i +1)).'</td>';
      } else {
        echo '<tr>';
      }
      echo '<td class="main">'.TEXT_PRODUCTS_IMAGE.' '. ($i +1).'<br />'.xtc_draw_file_field('mo_pics_'.$i).'<br />'.xtc_draw_separator('pixel_trans.gif', '24', '15').'&nbsp;'.$mo_images[$i]["image_name"].xtc_draw_hidden_field('products_previous_image_'. ($i +1), $mo_images[$i]["image_name"]);
      if (isset ($mo_images[$i]["image_name"])) {
        echo '</tr><tr><td align="center" class="main" valign="middle">'.xtc_draw_selection_field('del_mo_pic[]', 'checkbox', $mo_images[$i]["image_name"]).' '.TEXT_DELETE.'</td></tr></table>';
      } else {
        echo '</td></tr>';
      }
        // BOF hk #967: Bildersortierung per jQuery
        echo '</table>';
        echo '</li>';
        // EOF hk #967: Bildersortierung per jQuery
    }
    // BOF hk #967: Bildersortierung per jQuery
    echo '</ul>';
    echo '</td>'; ?>
        <script type="text/javascript">
              var timeOut;
              
              function k1_hide_container(container) {
                  //alert(container);
                  $(container).fadeOut('slow');
                  window.clearTimeout(timeOut);
              }

            //alert('sortable area initialized..');
            $( "#sortable" ).sortable({
                scroll: true,
                handle: ".drag_handle",
                update: function( event, ui ) {
                    var sortedIDs = $( "#sortable" ).sortable( "toArray" ); // kommagetrennter String
                    var file = "k1_ajax_port.php?action=sort_mo_images&sortedIDs=" + sortedIDs;
                    $( "#result" ).load( file, function() {
                        $("#result").fadeIn('slow');
                        var container = "#result";
                          var call = 'k1_hide_container("' + container + '")';
                          timeOut = window.setTimeout(call, 3000);
                    });
                }
            });
        </script>
    <?php
    // EOF hk #967: Bildersortierung per jQuery
  }

4. Jetzt noch mittels phpMyAdmin die Datenbanktabelle 'admin_access' erweitern und den Admin-Benutzern dieses Recht zuweisen (hier exemplarisch beim Benutzer mit der ID 1), damit die AJAX-Anfragen ausgeführt werden können:

ALTER TABLE `admin_access` ADD `k1_ajax_port` INT( 1 ) NOT NULL DEFAULT '0';
UPDATE `admin_access` SET `k1_ajax_port` = '1' WHERE `customers_id` = '1';

Nun können Sie mit der Bildersortierung beginnen. Viel Erfolg..

Download: k1-ajax-bildersortierung.zip

Schreibe einen Kommentar