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

k1 lang compare ist ein Tool, das Ihnen die Arbeit beim Erstellen von Übersetzungen der im Shop enthaltenen Textelemente erleichtert. Viele Sprachpakete von Shopsystem und anderen Programmen sind veraltet oder wegen Erweiterungen im Laufe der Zeit unvollständig geworden.
k1 lang compare
Das Hilfsprogramm k1 lang compare prüft im ersten Schritt bei seiner Analyse alle Unterschiede zwischen einer Referenzsprache und der Zielsprache, die Sie ergänzen oder komplett neu anlegen möchten. Dabei erstellt es aus der Vielzahl von Sprach-Dateien eine einzige Übersetzungsdatei für jeden Vergleich von Referenz- und Zielsprache, die Sie oder ein Übersetzungsbüro bearbeiten können. Nebenbei werden die Anzahl Zeilen und Zeichen der erforderlichen Übersetzungen ausgegeben, so dass Übersetzer einfacher Kostenvoranschläge liefern können.
Im nächsten Schritt nach der Übersetzung importiert das Tool die übersetzten Daten und ordnet sie in die jeweilige Sprachdatei ein. Fertig ist ihr Shop in einer neuen Sprache.

Erweiterungsmöglichkeiten: Auswahl, ob in die Übersetzungsdatei Textbausteine des Backends (Adminbereichs) einbezogen werden sollen.

Wer in der Menge von angebotenen Produkten eines Online-Shops hilfreiche Tools zur Verfügung gestellt bekommt, bleibt gern Kunde. Wir haben dafür einen Produktefilter für xt-commerce und modified-shop entwickelt, der bereits in seiner Grundversion sehr komfortabel ist.
Der Filter bedient sich automatisch aller Produkteigenschaften (Optionen), die in der jeweiligen Kategorie verfügbar sind. Falls zu viele Produkteigenschaften existieren, die den Filter unnötig umfangreich machen, kann mit einem kleinen Zusatzmodul in jeder Kategorie einzeln festgelegt werden, welche Filtereigenschaften dort jeweils aus den verfügbaren angezeigt werden.

Der Filter kann sowohl mit Checkboxes, Radiobuttons oder JQuery-Slidern umgesetzt werden.
Er kennt zudem zwei verschiedene Betriebsmodi, die es erlauben, a) bei bereits getätigter Auswahl eines Eigenschaftswertes entweder alle anderen weiterhin anzuzeigen, um das Sammeln von Eigenschaften zu ermöglichen, oder b) die weiteren Eigenschaftswerte auszublenden, wenn bereits nach einem Wert gefiltert wird.
Beispiel: Im Shop werden unter anderem T-Shirts verkauft. Im Modus a werden nach Auswahl der Farbe "blau" weiterhin "rot", "grün" und "weiß" zur Auswahl angezeigt, sodass der Käufer zu "blau" auch "rot" wählen kann. Bei Auswahl einer weiteren Farbe wird die Treffermenge also eventuell größer werden.
Im Modus b werden nach Auswahl von "blau" keine weiteren Farben mehr angezeigt, so dass die Treffermenge durch weitere Auswahl bei anderen Eigenschaften (z.B. der Größe) nur noch eingeschränkt werden kann. Die Treffermenge wird so also kleiner werden.

    Mögliche Erweiterungen:

  • Filtereigenschaftenumfang je Kategorie.
  • Durch eine Erweiterung des Filters kann die Handhabung dieser Modi in jeder Produktoption (Eigenschaft) individuell eingestellt werden.
  • Ein Zusatztool erlaubt zudem die Filterung nach Grundeigenschaften wie Preis, Lieferzeit oder Artikelgewicht.