Montag bis Freitag 09:00 - 15:00 Uhr
Forum
 
Nicholas Schmitz

73 Beiträge
14.11.2014, 14:59

Mehr Zubehör-Artikel verkaufen!

Sehr geehrte POWERGAP-Shopbetreiber,

heute möchten wir Ihnen ein neues Feature vorstellen das es Ihnen ermöglicht einem Artikel Zubehör-Artikel zuzuordnen.
Ein einfaches Beispiel: Sie verkaufen Schuhe, als Zubehör bieten Sie dazu Schuhsohlen und Schnürsenkel an.

Sind Sie in der Verwaltung eingeloggt und sehen sich die Übersicht Ihrer Artikel an, ist dort ein neues Symbol (graues bzw. grünes "Z") für die Zubehör-Zuordnung.



Ist das Symbol grün bedeutet das, dass bereits Zubehör zugeordnet ist. Ist das Symbol grau ist das nicht der Fall.
Mit einem Klick auf das "Z"-Symbol öffnet sich eine neue Maske.



Hier können Sie nach einer Artikelnummer oder einem Artikelnamen suchen. Wenn Sie mindestens zwei Zeichen eingeben beginnt das Skript nach passenden Artikeln zu suchen. Die Suche benutzt Ajax, Sie müssen also nicht Enter drücken um nach einem Artikel zu suchen. Wenn Sie einen Artikel gefunden haben, drücken Sie auf das "blaue Plus"-Icon ganz rechts um den Artikel als Zubehör zuzuordnen.

Nachdem Sie alle Artikel zugeordnet haben können Sie jetzt damit beginnen die Ausgabe dieser Artikel im Artikeldetail einzubauen.

Dafür haben wir folgenden Code im "Artikelanzeige-Template" verwendet:

CSS:

.zubehoerArtikel{border-bottom:1px dotted black;}
.zubehoerArtikel:last-child,#zubeh>div:last-child{border:0}
.zubehoerArtikel img{float:left;margin-right:30px;}
.zubehoerArtikel  p{margin:0;padding:10px 0 0 0 ;font-weight:bold}
.zubehoerArtikel  p .a3{display:block}
.zubPreis{font-weight:bold;}
.schnellButton{background:#e6e6e6;width:140px;text-align:center;padding:5px;border:1px solid #787878;float:left}


HTML:

#pruefe_zubehoer_head#<h2 style="border-top:1px dotted black;"><br>Passende Zubehörartikel</h2>#pruefe_zubehoer_head_ende#<br>
<div id=zubeh>##megatemplate##10##anr###zubehoer-artikel###name_de##<div class=zubehoerArtikel><img src=#thumb><p><a href="#a_link">#a_name</a><br><br><div class=zubasket><span class=zubPreis>Preis: #vk EUR*</span><br><br><div id="se_info_#anr"><a href="#sa_link" rel="nofollow" onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 880, height: 650, dimmingOpacity: 0.70, align: 'center' } ) "><div class="schnellButton">Schnellansicht</div></a><br></div></div></p><div style='clear:both'></div></div>##50##</div>


In diesem Fall haben wir beide Code-Teile direkt über "Layout" > "Artikelanzeige" > "Template" > "Pflege" in das "Standard-Template" eingebaut. Sie können das "CSS" allerdings auch separat über "Layout" > "Schriften / CSS" > "ALL (ROOT)" einfügen.

Für die Darstellung verwenden wir das Mega-Template. Außerdem verlinkt der Button auf die Schnellansicht.

Wenn Sie keine Schnellansicht benutzen möchten, verwenden Sie diesen Code um direkt einen Link zum Artikel anzuzeigen:


#pruefe_zubehoer_head#<p style="border-top:1px dotted black;"><br>Passende Zubehörartikel</p>#pruefe_zubehoer_head_ende#<br>
<div id=zubeh>##megatemplate##10##anr###zubehoer-artikel###name_de##<div class=zubehoerArtikel><img src=#thumb><p><a href="#a_link">#a_name</a><br><br><div class=zubasket><span class=zubPreis>Preis: #vk EUR*</span><br><br><div id="se_info_#anr"><a href="#a_link"><div class="schnellButton">Zum Artikel</div></a><br></div></div></p><div style='clear:both'></div></div>##50##</div>




Eine weitere Möglichkeit ist folgende, damit werden die Artikel nur mit Bild und Name nebeneinander dargestellt:

"Layout" > "Artikelanzeige" > "Template" > "Pflege" in das "Standard-Template":
#pruefe_zubehoer_head#<p style="border-top:1px dotted black;"><br>Passende Zubehörartikel</p>#pruefe_zubehoer_head_ende#<br>
<div id=zubeh>##megatemplate##10##anr###zubehoer-artikel###name_de##<div class=zubehoerArtikel><a href="#a_link"><img src=#thumb> #a_name</a></div>##50##</div>


"Layout" > "Schriften / CSS" > "ALL (ROOT)":
.zubehoerArtikel{float:left;width:20%}
.zubehoerArtikel img{display:block;margin:0 auto;}




Hier gibt es zwei neue Synonyme:

#pruefe_zubehoer_head#Überschrift#pruefe_zubehoer_head_ende#
Dieses Synonym sorgt dafür, dass die Überschrift nur eingeblendet wird, wenn diesem Artikel Zubehör zugeordnet ist.

#zubehoer-artikel#
Dieses Synonym listet die Artikelnummern aller Zubehör-Artikel auf, damit diese durch das Mega-Template dargestellt werden können.


Das Ergebnis im Artikeldetail könnte dann so aussehen:



Bei Fragen oder Problemen bitte einfach melden.