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="https://www.k1-mediendesign.de/../templates/<?= CURRENT_TEMPLATE ?>/javascript/jquery.js"></script>
<script type="text/javascript" src="https://www.k1-mediendesign.de/../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 (Der Code ist hier nur angerissen und steht beim Download vollständig zur Verfügung):

// 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>
...

Bitte durch folgendes ersetzen(Der Code ist hier nur angerissen und steht beim Download vollständig zur Verfügung):

  // 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="https://www.k1-mediendesign.de/">Klicken und Ziehen zum Sortieren</a></td>
		</tr>
		';
		// 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: