Button für die Einkaufswelt

Shopware 5 Programmierung
1

Hallo zusammen, 

in letzter Zeit häufen sich die Fragen und ich hoffe auf diesmal, dass ihr helfen könnt :slight_smile:

Es soll ein Button für die Einkaufswelten werden, welcher in etwa so aussehen soll:

Wie erstellt ich diesen am besten? 

Mit dem Code Element? Dort ist leider kein ganzes CSS feld sondern nur „CSS Klasse“. Vielleicht kann hier jemand weiterhelfen und kurz erklären, wie das geht. 

Gibt es andere möglichkeiten?

Der Button soll auf viele Seiten und es wird diesen mit ca. 210 verschiedenen Links geben. Eine Zeitsparenste Variante wird dementsprechend bevorzugt. Auch in Anbetracht, dass der Shop zukünftig weitere Produkte bekommen soll. 

Vielen Dank und beste Grüße,
Tim 

2

HTML Grundkenntnisse sollten schon vorhanden. Ansonsten ganz einfach einen Link erstellen, eine CSS-Klasse zuweisen und dann mittels CSS farblich anpassen. Das wäre jetzt die einfachste Variante.

Etwas komfortabler geht es mit einem Widget Plugin. Aber auch hier sind Kenntnisse gefragt.

3

S‍ervus @NiklasTim‍,

ich habe mir ein bisschen Zeit genommen und habe dein Topic gelesen und ausprobiert.

Das Bild oben ist es mein Beispiel.

Wie ich das gemacht habe.

  1. Bin in meinem Einkaufswelt gegangen.

  2. Habe ein neues html code eingebaut und dazu ein button hinzugefügt über html.

 

772×133 4.26 KB

 

  1. Dann habe ich den Button noch die klasse btn-try gegeben.

  2. Dann habe bei den CSS-Klasse eine allgemeine Klasse gegeben btn-test.

768×91 5.36 KB

  1. Dann bin ich in shopware theme gegangen und habe dann meine klassen da hinzugefügt. (Am besten ist wenn du deine eigene Theme hast und das da implementierst, aber ich habe keine Theme und habe in Shopware’s Theme gemacht damit ich dir zeigen kann wie das funktionieren sollte)

Du musst dann in global.less deine Klassen eingeben und da dein Style machen.

Der Pfad zu dieser Datei ist: themes/Frontend/Responsive/frontend/_public/src/less/_modules/global.less

  1. Dann habe ich noch die Klassen gemacht und dann der CSS Code geschrieben.

  1. Habe noch den Cache geleert und das Theme neu kompiliert.

Das kannst du in Einstellungen -> Caches / Performance -> Caches / Performance.

Öffnest den tab Cache und drückst alles auswählen und leeren.

873×712 57.4 KB

Dann wird noch ein Fenstern geöffnet wo du Theme kompilierst

Drückst auf Themes kompilieren und dann fertig. Dein style sollte jetzt an deiner Knopf erscheinen.

Es gibt bestimmt bessere Wege wie man das macht aber ich habe es so auf die schnelle erledigt.

 

Ich hoffe ich konnte dir helfen.

 

VG Gabriel

4

Der Button hat kein Funktion. Da müsste noch was rein a la

onclick=„window.location.href=neueseite.html“

1 „Gefällt mir“
5

Randbemerkungen:

Der Button muss nicht zwangläufig mit

erstellt werden. Es geht auch ganz einfach mit

Test

 

Der Pfad zu dieser Datei ist: themes/Frontend/Responsive/frontend/_public/src/less/_modules/global.less

Bedenke daran, dass beim nächsten Update der Eintrag wieder weg ist! Also in diesem Falle ein eigenes Theme anlegen und dort die CSS-Einstellungen treffen! 

 

6

Mit einem direkten AnchorLink kann aber auch der Linkjuice sich abmildern.

7

@brettvormkopp schrieb:

Der Button hat kein Funktion. Da müsste noch was rein a la

onclick=„window.location.href=neueseite.html“

 

Stimmt, Sorry. Ich habs vergessen den js code mit zu geben. 

777×143 6.03 KB

 

Und wie der @R4M sagt, das muss kein button sein. Die Umsetzung ist dir überlassen.

8

@brettvormkopp schrieb:

Mit einem direkten AnchorLink kann aber auch der Linkjuice sich abmildern.

Ist ja auch nur ein Beispiel. Wie man Links setzt sollte ja klar sein :-) 

9

1000 Dank für die ganze Hilfe !! Werden die Anregungen in den kommenden Tagen umsetzen :) 
 

Eine wirklich starke Community !!

1 „Gefällt mir“