Echte Bewertungen Widget einfügen

Shopware 5 Themes & Design
1

Hallo.

Ich habe folgendes Problem / Frage. Für unseren Shop nutzen wir das Bewertungssystem von echte-bewertungen.com   . Der Anbieter stellt dabei verschieden Designs an Widgets zur Einbindung in die Seite bereit. Für unseren Shop nutzen wir das Template: Themeware Clean von TC-Innovations.

Nun zu meiner Frage. Ich möchte das Widget in meine Seite einbinden, möglichst oben rechts und wenn möglich das es mit läuft wenn man nach unten scrollt. Meine bisherigen Versuche über die Theme Einstellungen im Backend brachten keinen Erfolg. Ich vermute also ich muss es irgendwie in die index.tpl oder so einbinden. Hier bin ich allerdins Neuling und habe keine Ahnung wo ich den Code rein kopieren muss und wenn ja, was davon. Ich hänge hier mal ein Bild und den Code an und hoffe es kann mir jemand weiterhelfen. Für eine Antwort bin ich sehr dankbar.

 

Hier einmal der Code den es einzubinden gilt.

 

 

 

Vielen Dank 

Florian

2

Hi Florian,

 

wie die Template Vererbung funktioniert weißt du hoffentlich?

Wenn ja, dann erstellst du einfach eine header.tpl im Ordner Index(falls noch nicht verhanden) in deinem eigenen Template.

Dort erweiterst du den block „frontend_index_header_meta_tags_inner“ mit dem obrigen Codeschnipsel.

 

Bei mir im Standart funktionierts dann perfekt.

 

Liebe Grüße und falls noch Fragen offen sind gerne her damit.

 

Alex

1 „Gefällt mir“
3

Hallo und vielen Dank für deine Antwort und Hilfe. Ja mit der Template Vererbung weis ich bescheid und auch die Sache mit den Block Erweiterungen und etwas vor oder nach dem Block einfügen habe ich mir schon angesehen. Ich wusste eben nur nicht welche tpl Datei und welcher Block. Wie hast du das heraus gefunden ?
Deine Anleitung hat funktioniert, super. Kannst ja mal schauen. Das Teil hängt jetzt oben rechts in der Ecke. Kann ich da auch noch einen Abstand angeben ? Bzw. müsste man es in nen anderen Block oder die Index.tpl einfügen um es unter der schwarzen Leiste oben einzufügen nehme ich an ? Ich weis halt nicht wie ich raus finde wo und was die einzelnen Blöcke und Dateien beinhalten. Oder überschreibt das Widget sowieso jede Postion und erscheint eben immer rechts oben oder rechts unten (je nachdem wie gewählt), egal in welcher tpl ich es ergänze?

4

Hi,

 

Wie hast du das heraus gefunden?

Erfahrungswerte, wo man hin langen muss. 

Kann ich da auch noch einen Abstand angeben?

Wenn du in deinem Browser(in meinem Fall Chrome) rechtsklick auf das Element machst und auf untersuchen gehst kriegst du die ID des Widgets raus.

Anhand dieser kannst du dann mit margin-top, margin-right oder gleich mit top und right die Position noch abändern bzw. anpassen. Einfach erstmal im Browser probieren wie’s hinhaut.

 

Ich hoffe das hilft dir weiter.

 

Grüße

Alex 

1 „Gefällt mir“
5

Also die id habe ich gefunden, nur wo suche ich jetzt nach dieser um top etc einzustellen. Im Browser hab ich es schon mal getestet die Werte zu ändern für top und right, das sah auch gut aus. Die Frage ist wo hinterlege ich das nun ?

939×550 86.4 KB

6

du legst eine Css/Less Datei in deinem Template an.

frontend/_public/src/less/_components/rating-widget.less

dort fügst du dann sowas ein wie:

#netreviewsWidgetNum1306widget21av{

 margin-right:20px;

 margin-top:20px;

}

in der Datei frontend/_public/src/less/all.less  (falls noch nicht vorhanden anlegen)

sagst du dann:

@import "_components/rating-widget.less";

 

*als kleine Lektüre noch: https://developers.shopware.com/designers-guide/getting-started/#add-less-files

 

Gruß

Alex

1 „Gefällt mir“
7

Das probiere ich heute Nachmittag aus. Klingt aber gut. Da fällt mir noch eine Frage ein die dann noch ein Stück weiter geht. kann ich das Widget dann auch ausblenden ab einer bestimmten Auflösung und ein anderes einblenden ? Das wäre dann so das Sahne Häub’chen. Ich danke dir aber jetzt schon sehr für deine kompetente und schnelle Hilfe :slight_smile:

 

Gruß Florian

8

@MrAle schrieb:

du legst eine Css/Less Datei in deinem Template an.

frontend/_public/src/less/_components/rating-widget.less

dort fügst du dann sowas ein wie:

#netreviewsWidgetNum1306widget21av{

margin-right:20px;

margin-top:20px;

}

in der Datei frontend/_public/src/less/all.less  (falls noch nicht vorhanden anlegen)

sagst du dann:

@import „_components/rating-widget.less“;

 

*als kleine Lektüre noch: https://developers.shopware.com/designers-guide/getting-started/#add-less-files

 

Gruß

Alex

Hat super geklappt :)