Produktbilder im Bestellformular

Die Partnerprogramm-Software ist bewusst schlank gehalten, um die Anpassung an individuelle Begebenheiten oder Einbindung in eine bestehende Shoplösung so einfach wie möglich zu gestalten. Aufgrund dessen enthält sie keine Möglichkeit zur Verwaltung von Produktbildern oder -beschreibungen. Mit Hilfe des Tutorials auf dieser Seite können Sie Produktbilder über das Admin-Menü hochladen und im Bestellformular anzeigen lassen.

Produktbilder-Upload

Der erste Schritt der erforderlichen Anpassungen betrifft den Admin-Bereich. Dieser soll um Upload und Darstellung des Produktbildes erweitert werden.

Datenbankanpassung

Zunächst erweitern wir die Produkt-Datenbanktabelle um eine Spalte zur Aufnahme des Bildnamens. Führen Sie hierfür bitte nachfolgenden SQL-Befehl, z.B. via phpMyAdmin aus:

ALTER TABLE `pay_produkte` ADD `bild` VARCHAR(30) NOT NULL AFTER `preis`; 

 

Bilderverzeichnis

pics-Verzeichnis

Der zweite Schritt ist die Erstellung eines Verzeichnisses, das der Speicherung hochgeladener Produktbilder dient. Bitte greifen Sie dazu auf Ihr FTP-Programm, z.B. FileZilla zurück und legen Sie auf der Ebene des Installationsverzeichnisses der Software ein neues Verzeichnis namens pics an. Dieses muss beschreibbar sein, benötigt also je nach Serverkonfiguration Zugriffsrechte 666 oder 777.

Anpassung des Produkt-Templates

Sofern Sie keine individuellen Änderungen an der Datei admin/templates/produkt_edit.html vorgenommen haben, ersetzen Sie sie bitte einfach durch nachfolgend zum Download bereitstehende Datei. Andernfalls übertragen Sie bitte das eingefügte Attribut

 enctype="multipart/form-data"

im form-Tag sowie die Tabellenzeile in Ihre angepasste Template-Datei:

<tr class="bg2 vt">
      <td class="pt10">
      Bild:
      </td>
      <td class="pt10">
      {$tpl_produkt_bild}
      </td>
</tr>
DateiZuletzt geändertGröße
5,2 KB
admin/templates/produkt_edit.html

Erweiterung der admin.php-Datei

Die Produktbilder-Funktion erfordert zwei neue Code-Passagen in der admin.php-Datei. Zum einen betrifft dies die Datenbank-Abfrage und Aufbereitung der Anzeige von Bild bzw. Dateiauswahl im Bearbeiten-Formular. Zweitens betrifft den Bild-Upload selbst sowie die Speicherung des Bildnamens in der Datenbank.

In der Original-Datei sieht die betreffende Passage in etwa so aus:

}elseif($_GET['act'] == 'produkte_edit'){

$_GET['id']=(int)$_GET['id'];

$a=mysqli_query($con, "SELECT name,preis,verguetung from pay_produkte where id=".$_GET['id']) or die(mysqli_error($con));
$paket=mysqli_fetch_array($a);

$paket['name']=clear_input($paket['name']);
$paket['preis']=amount_print($paket['preis'],2);
$paket['verguetung']=amount_print($paket['verguetung'],2);

Ergänzen Sie den Codeausschnitt wie folgt:

}elseif($_GET['act'] == 'produkte_edit'){

$_GET['id']=(int)$_GET['id'];

$a=mysqli_query($con, "SELECT name,preis,verguetung,bild from pay_produkte where id=".$_GET['id']) or die(mysqli_error($con));
$paket=mysqli_fetch_array($a);

$paket['name']=clear_input($paket['name']);
$paket['preis']=amount_print($paket['preis'],2);
$paket['verguetung']=amount_print($paket['verguetung'],2);

if (!empty($paket['bild'])){
$tpl_produkt_bild='<img src="../produktPics/'.$paket['bild'].'" style="max-width:200px;"><br>&Uuml;berschreiben:<br>';
}else{
$tpl_produkt_bild='';
}
$tpl_produkt_bild.='<input type="file" name="bild">';

Die zweite Änderung betrifft den Upload selbst. Zu erweitern ist ein Codeabschnitt der admin.php-Datei, der im Original so aussieht:

}elseif($_GET['act'] == 'produkte_edit_update'){

 if(empty($_POST['name']) or empty($_POST['preis']) or empty($_POST['provision'])){
    $head="Fehler";
    $text="Bitte alle Felder ausf&uuml;llen.";
    }else{
    $_POST['preis']=str_replace(",",".", $_POST['preis']);
    $_POST['provision']=str_replace(",",".", $_POST['provision']);
    mysqli_query($con, "Update pay_produkte set verguetung=".$_POST['provision'].",preis='".$_POST['preis']."',name='".dbclean($_POST['name'])."' Where id=".(int)$_POST['id']) or die(mysqli_error($con));
    $head="Produktdaten aktualisiert";

Inklusive Upload-Handling ergibt sich folgender PHP-Code:

}elseif($_GET['act'] == 'produkte_edit_update'){

 if(empty($_POST['name']) or empty($_POST['preis']) or empty($_POST['provision'])){
    $head="Fehler";
    $text="Bitte alle Felder ausf&uuml;llen.";
    }else{
    $_POST['preis']=str_replace(",",".", $_POST['preis']);
    $_POST['provision']=str_replace(",",".", $_POST['provision']);
    if (!empty($_FILES['bild']['tmp_name']) && file_exists($_FILES['bild']['tmp_name'])){
$query="select bild from pay_produkte where id=".(int)$_POST['id'];
$res=mysqli_query($con, $query);
while($date=mysqli_fetch_assoc($res)){
if (file_exists('../pics/'.$date['bild'])){
unlink('../pics/'.$date['bild']);
}

}
$ext=explode('.',$_FILES['bild']['name']);
$ext=array_pop($ext);
$bild=(int)$_POST['id'].'.'.$ext;
move_uploaded_file($_FILES['bild']['tmp_name'],'../pics/'.$bild);
}
    mysqli_query($con, "Update pay_produkte set verguetung=".$_POST['provision'].",preis='".$_POST['preis']."',name='".dbclean($_POST['name'])."'".(!empty($bild)?(",bild='".dbclean($bild)."'"):'')." Where id=".(int)$_POST['id']) or die(mysqli_error($con));
    $head="Produktdaten aktualisiert";

Produktbilder-Anzeige im Bestellformular

Im Gegensatz zu den Anpassungen im Admin-Menü betreffen die für die Darstellung des Produktbildes nötigen Änderungen nur die PHP-Datei bestellen.php. Die Darstellung der Produktauswahl im Bestellformular ist davon abhängig, welche Option des Auswahlfeldes Multi-Bestellung Sie Admin-Menüpunkt Optionen getroffen haben. Die nachfolgend beschriebene Codeanpassung berücksichtigt beide Auswahl- bzw. Darstellungsmöglichkeiten.

Erweiterung der bestellung.php-Datei

Zunächst ist über die Produkt-ID und den Namen hinaus auch der Name des Produktbildes aus der Datenbank zu beziehen. Die Zeile

$b=mysqli_query($con, "Select id,name from pay_produkte where status = 1");

ist daher wie folgt zu ergänzen:

$b=mysqli_query($con, "Select id,name,bild from pay_produkte where status = 1");

Des weiteren ergänzen wir nach

$drop_1['name']=clear_input($drop_1['name']);

die beiden Varianten zur Darstellung des Produktbildes:

$drop_1['name']=clear_input($drop_1['name']);
if (!empty($drop_1['bild'])) {
if (empty($daten['order_multi'])) {
$dropdown_1_js[$drop_1['id']] = $drop_1['bild'];
} else {
$drop_1['name'].= ' <img src="./pics/' . $drop_1['bild'] . '" height="40">';
}
}

Diese Codezeilen dienen lediglich als Beispiel. Insbesondere was Ihre Anforderungen an das Layout hinsichtlich Größe und Position der Produktbilder anbelangt, sind sicherlich noch Anpassungen nötig.

Für die Darstellung des jeweils ausgewählten Produktes sind nun noch folgende Zeilen einzufügen:

$dropdown_1.= "</select>";

Diese Passage ist um das aktuelle und wechselbare Produktbild sowie den entsprechenden JavaScript-Handler zu ergänzen:

$dropdown_1.= "</select>";
if (!empty($dropdown_1_js)) {
$dropdown_1.= ' <img src="./pics/' . (reset($dropdown_1_js)) . '" height="40" id="productpic">';
$dropdown_1.= '<script>';
$dropdown_1.= 'document.querySelector("[name=\"produkte\"]").onchange=function(){';
$dropdown_1.= 'var img=document.getElementById("productpic");';
$dropdown_1.= 'var productPics=' . json_encode($dropdown_1_js) . ';';
$dropdown_1.= 'if (typeof productPics[this.value]!=="undefined"){';
$dropdown_1.= 'pic.style.display="inline-block";';
$dropdown_1.= 'pic.src=this.value;';
$dropdown_1.= '}else{';
$dropdown_1.= 'pic.style.display="none";';
$dropdown_1.= '}';
$dropdown_1.= '}';
$dropdown_1.= '</script>';
}

Schreiben Sie einen Kommentar