Mein erster onlineshop
mit shopware 5
Man sieht es oft, die Shops verwenden andere Themes, aber die Icons sehen überall gleich aus. Das ganze soll jetzt ein Ende haben!
Wie schon oft auf diesem Blog erwähnt sind wir von Font Awesome begeistert.
Daher wollen wir Euch zeigen, wie schnell man Icons in Shopware ändern kann.
Es gibt mehrere Möglichkeiten Font Awesome einzurichten. Wir entscheiden uns für den einfachsten. Font Awesome Getting Started
Dazu müssen wir den Code einbinden, den wir per E-Mail bekommen:
<script src="http://use.fontawesome.com/b1935d111a.js"></script>Wo packen wir das ganze hin? Da es sich um Javascript handelt schauen wir uns in dieser Datei um:
themes/Frontend/Bare/frontend/index/header.tplWeiter unten in Zeile 94 finden wir den Code:
{* Add Modernizr in the ""-element to have all the classes before the page was rendered *}
{block name="frontend_index_header_javascript_modernizr_lib"}
{/block}Wunderbar!
Wir können uns also an den Smarty Block frontend_index_header_javascript_modernizr_lib hängen.
Dazu legen wir die Datei header.tpl in unserem Theme an:
themes/Frontend/DEINTHEME/frontend/index/header.tplDa erweitern wir den Smarty Block und hängen den Code für die Javascript Datei von Font Awesome an.
{extends file="parent:frontend/index/header.tpl"}
{block name="frontend_index_header_javascript_modernizr_lib"}
{$smarty.block.parent}
<script src="http://use.fontawesome.com/b1935d222a.js"></script>
{/block}Font Awesome ist korrekt eingebunden und wir müssen die Icons nur noch verwenden.
Wie können wir die Font Awesome Icons verwenden? Ganz einfach!
Ihr sucht Euch ein Icon aus.
Uns gefällt das shopping-bag Icon besonders gut. Wenn Ihr auf das Icon klickt, seht Ihr den Code für das Icon: shopping-bag Icon
Das Icon können wir mit folgendem Code benutzen
<i class="fa fa-shopping-bag"></i>Also ändern wir den Einkaufswagen in die Einkaufstasche.
Dafür erstellen wir folgende Datei:
themes/Frontend/DEINTHEME/widgets/checkout/info.tplDort überschreiben wir den Block der Originalen Datei und ändern wie oben gezeigt, nur die eine Klasse.
{* Cart entry *}
{block name="frontend_index_checkout_actions_cart"}
<ul>
<li class="navigation--entry entry--cart"><a class="btn is--icon-left cart--link" title="{" href="{url controller='checkout' action='cart'}" name="IndexLinkCart">
<span class="cart--display">
{if $sUserLoggedIn}
{s name='IndexLinkCheckout' namespace='frontend/index/checkout_actions'}{/s}
{else}
{s namespace='frontend/index/checkout_actions' name='IndexLinkCart'}{/s}
{/if}
</span></a><span class="badge is--primary is--minimal cart--quantity{if $sBasketQuantity < 1} is--hidden{/if}">{$sBasketQuantity}</span>
<span class="cart--amount">
{$sBasketAmount|currency} {s name="Star" namespace="frontend/listing/box_article"}{/s}
</span>
<div class="ajax-loader"></div>
</li>
</ul>
{/block}Wie man sieht, tricksen wir ein bisschen, indem wir die neuen Klassen einfach dahinter packen.
Dadurch bleibt das Design der originalen Klasse erhalten.
Man kann natürlich über Less unseren Klassen ein eigenes Design verpassen und macht die originale icon--basket überflüssig.
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Bernhardstraße 34
04315 Leipzig
Kontakt
E-Mail: support@8mylez.com
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Über 8mylez
✓ 38 Mitarbeiter
✓ Shopware Gold Partner
✓ 40.000+ Plugin Downloads
✓ 160+ betreute Shops
✓ Full-Service Shopware Agentur
✓ 70 Shopware Videos auf Youtube
✓ Alle Shopware Zertifizierungen
Social
ich bin eher zufällig auf Deinen Blog gestoßen und finde ihn ausgesprochen hilfreich! Dickes Lob.
Nun wollte ich mich daran machen und u.a. das Thema "Eigene Font Awesome Icons" einbinden angehen.
Leider bekomme ich es irgendwie nicht hin. Zum einen unterscheidet sich Dein Beispielcode von meiner info.tpl. Bei mir schaut der so aus:
"{* Cart entry *}
{block name="frontend_index_checkout_actions_cart"}
{if $sUserLoggedIn}
{s name='IndexLinkCheckout' namespace='frontend/index/checkout_actions'}{/s}
{else}
{s namespace='frontend/index/checkout_actions' name='IndexLinkCart'}{/s}
{/if}
{$sBasketQuantity}
{$sBasketAmount|currency} {s name="Star" namespace="frontend/listing/box_article"}{/s}
{/block}"
Zum anderen kann ich in Deinem Beispielcode nicht erkennen, wo Du "" eingebunden hast.
Erstezte ich "icon--basket" mit "fa fa-shopping-bag fa-2x", dann bekomme ich zwar das gewünschte Icon, aber dieses ist dann nicht mehr linksbündig ausgerichtet.
Was muss ich machen, damit das Icon links ausgerichtet wird?
Viel Grüße,
Tom
vielen Dank für die netten Worte. Wir versuchen unsere Erkenntnisse immer zu teilen :)
Du kannst mal schauen wie der Less Code bei dem 'icon--basket' aussieht und evtl. für das Font-Awesome Icon auch nutzen.
Viele Grüße
Ewald
danke für die Anleitung, sehr gut und einfach erklärt :-)
Aber ist FA nicht sowieso schon in Shopware 5 eingerichtet und wird mit den Icons laufend aktualisiert?
Zumindest hatte ich den Eindruck, auch beim Blick auf: 8mylez.com/blog/shopware-5-jedes-icon-anpassen/
Oder verwechsel ich da etwas?
Grüße,
Andrei
der Beitrag, den du nennst bezieht sich auf die in Shopware integrierten Icons. Die hier von Font Awesome eingebunden werden sind nochmal andere.
Einige sehen sich zwar ähnlich, aber es sind andere als die von Shopware.
Vielen Dank für dein Feedback!
Viele Grüße,
Ewald
Was denkst du?