Kopfchaos » shopware » Shopware 5 – hinterlegte Bilder von Eigenschaften ausgeben + awesome Alt & Title Tag!

Shopware 5 – hinterlegte Bilder von Eigenschaften ausgeben + awesome Alt & Title Tag!

Ich lasse mal außen vor, dass ich auf diesem Blog noch nie über Shopware geredet habe – also soweit ich mich daran erinnere. Shopware ist ein eCommerce CMS (Content Management System) und mein tägliches Arbeitswerkzeug.

Auf Grund meines regelmäßig eskalierendem Perfektionismus stoße ich auch regelmäßig an die Grenzen der Shopware Dokumentation. Deswegen muss ich sehr viel selbst basteln, kleben und umschreiben.

Meine letzte zwanghafte Handlung drehte sich um Eigenschaften die man Artikeln geben kann, damit diese der Kunde besser filtern und anschließend auch super easy finden kann. Diese Eigenschaften kann man zusätzlich noch mit Bildern, Icons oder Symbolen versehen, damit der Suchprozess noch ein Stückchen einfacher werden kann.

Durch intelligente Smarty-Shopware Magic werden diese Bilder/Icons oder Whatever auch sofort im Listing Filter angezeigt. Nur leider nicht auf der Detailseite. Aber da möchte ich und mein Kunde sie haben! Also einmal basteln bitte!

Mein Vorhaben scheint für den Anfang nicht sonderlich schwierig: var_dump auf verfügbare Variable ($sArticle) und in der Debug Ausgabe Bild-Adresse finden und mit einer {foreach}-Schleife ausgeben lassen.

{$sArticle|@var_dump}
 array(11) {
  ["id"]=>
    int(111)
  [...]
  ["value"]=>
    string(76) "Bessere Beschreibung 1, Bessere Beschreibung 2"
    ["values"]=>
      array(2) {
      [001]=>
        string(37) "Bessere Beschreibung 1"
      [002]=>
         string(37) "Bessere Beschreibung 2"
      }
  [...]               
  ["media"]=>
    array(2) {
      [001]=>
        array(13) {
          [...]
          ["source"]=>
             string(61) "http://urleins.de/bild1.png"
          ["description"]=>
             string(8) "Beschreibung 1"
    [...]
    }
      [002]=>
        array(13) {
          [...]
          ["source"]=>
             string(61) "http://urleins.de/bild2.png"
          ["description"]=>
             string(8) "Beschreibung 2"
     [...]
     }
}      

Aber halt! So einfach wars doch nicht.

Auf Webseiten müssen Bilder mit einem Alt und einem Title-Tag versehen werden, sonst schlägt mir/dir/uns allen ein passionierter SEO(Search Engine Optimization)-Nerd sehr heftig auf die Finger. Also habe ich meine Arrays weiter durchgesehen und festgestellt, dass die benötigten Informationen unmöglich auf meine simple Schleifenversion funktionieren wird, da ich theoretisch 3 Schritte im Array hätte zurückgehen müssen, damit es funktioniert. Und Spoiler: Das geht nicht.

Also habe ich mir einen Sonntag (ja, Sonntag! Workaholic und so…) dadurch sehr lang schlechte Laune machen lassen, bis ich am nächsten Tag meinen Arbeitskollegen um Hilfe bat. Er hat auch etwas mit den Ohren geschlackert. Ich habe wohl wirklich sehr hohe und äußerst penible Ansprüche.

Am Ende haben wir meine initiale Schleife mit der Abfrage nach dem “media” array drin gelassen und eine Abfrage nach $key hinzugefügt. Diese Variable speichert die ID’s der Array Stränge und hilft uns mit einer separaten Abfrage über $sArticle zu den benötigten Inhalten “Bessere Beschreibung 1” und “Bessere Beschreibung 2” zu kommen, abzugreifen und auszugeben. (siehe debug Ausgabe oben)

{foreach $sArticle.sProperties[42].media as $key => $sProperty}  
   <img src="{$sProperty.source}" title="{$sArticle.sProperties[42].values[$key]|escape}" 
    alt="{$sArticle.sProperties[42].values[$key]|escape}" />
{/foreach}

Ich hoffe mein jibberisch hat euch irgendwie geholfen.