Shop Warenkorb Icon anpassen

  • Da immer wieder Anfragen zur Anpassung des Warenkorb Icons gestellt werden hier ein kleines Tutorial dazu.

    • Mit unterstehendem CSS können Sie den Warenkorb-Icon des Shops von Zeta Producer anpassen.
    • Navigieren Sie zur Seite "Shop > Warenkorb", öffnen Sie hier das Widget "Shop:Warenkorb" klicken Sie unten links auf das "Mischpult" und fügen eine Grafik für Ihr "Warenkorb-Icon" ein.
    • Damit die Grafik übernommen wird gehen Sie anschließend auf: "Erweitert > Erstellen > Alle Seiten erstellen".
    • Untenstehendes CSS fügen Sie über Website > Einstellungen > CSS ein.
    • WICHTIG: Ganz am Anfang des CSS schreiben Sie ein <style> und ganz am Ende ein </style>.


    Position des Icons Oben/Rechts:

    CSS
    /*###### POSITION WARENKORB ICON ######*/
    .zpshopbasketindicator {
    bottom: auto;                      /* Aufhebung Position Unten */
    top: 16px;                         /* Abstand von Oben */
    right: 16px;                       /* Abstand von Rechts */
    }


    Warenkorb Größe "GROSS"

    CSS
    /*###### GROESSE WARENKORB ICON (GROSS) ######*/
    .zpshopbasketindicator .zpbasketindicator {min-width:80px;}
    .zpshopbasketindicator .zpbasketindicator>img.zpbasketicon {max-width:80px;}
    .zpshopbasketindicator .zpbasketindicator > span {font-size: 16px; padding: 4px 9px;}


    Warenkorb Größe "MITTEL"

    CSS
    /*###### GROESSE WARENKORB ICON (Mittel) ######*/
    .zpshopbasketindicator .zpbasketindicator {min-width:60px;}
    .zpshopbasketindicator .zpbasketindicator>img.zpbasketicon {max-width:60px;}
    .zpshopbasketindicator .zpbasketindicator > span {font-size: 14px; padding: 3px 7px;}


    Warenkorb Größe "KLEIN"

    CSS
    /*###### GROESSE WARENKORB ICON (KLEIN) ######*/
    .zpshopbasketindicator .zpbasketindicator {min-width:40px;}
    .zpshopbasketindicator .zpbasketindicator>img.zpbasketicon {max-width:40px;}
    .zpshopbasketindicator .zpbasketindicator > span {font-size: 12px; padding: 2px 6px;}


    Abstand zwischen Icon und Artikelanzahl

    CSS
    /*###### ABSTAND ICON/ARTIKELANZAHL ######*/
    .zpshopbasketindicator .zpbasketindicator>img.zpbasketicon {
    top: 22px;
    }


    Layout Artikelanzahl

    CSS
    /*###### LAYOUT ARTIKELANZAHL ######*/
    .zpshopbasketindicator .zpbasketindicator > span {
    border-radius:50% !important;                           /* (50% = Rund) (3px = 3px Runde Ecken) (0 = Eckig) */
    color:blue;                                             /* SCHRIFTFARBE */
    background-color:rgba(244, 255, 255, 0.8);              /* HINTERGRUNDFARBE */
    box-shadow: 0 0 0 1px blue;                             /* RAHMENFARBE */
    }


    Anpassung für die Mobile Ansicht


  • Hallo, ich habe auch gerade versucht, es einzubauen.
    Aber, es passiert da gar nichts... Warenkorb bleibt weiter unten rechts,

    und in relativ kleiner Größe.
    CS Eintrag ais QUELLTEXT / Test aus VORSCHAU
    Was mache ich falsch?
    ZETA 16
    shop.fotow.de

    <style>
    bottom: auto; /* Aufhebung Position Unten */
    top: 16px; /* Abstand von Oben */
    right: 16px; /* Abstand von Rechts */
    }
    /*###### GROESSE WARENKORB ICON (GROSS) ######*/
    .zpshopbasketindicator .zpbasketindicator {min-width:90px;}
    .zpshopbasketindicator .zpbasketindicator>img.zpbasketicon {max-width:90px;}
    .zpshopbasketindicator .zpbasketindicator > span {font-size: 14px; padding: 3px 7px;}
    }
    </style>
  • Das CSS ist syntaktisch inkorrekt. Vielleicht habe ich es falsch umgesetzt?

    Mario
    25. August 2022 um 21:56

    wie wäre es denn richtig?? Ich hatte es aus dem Forum entnommen... kleiner Korb /großer Korb / Korb unten / Korb oben / usw..

  • Mario
    25. August 2022 um 21:56

    wie wäre es denn richtig?? Ich hatte es aus dem Forum entnommen... kleiner Korb /großer Korb / Korb unten / Korb oben / usw..

    Da haben Sie nicht alles kopiert, am Besten nochmal löschen und jeweils vollständig kopieren

    Freundliche Grüße
    Philipp

    ---------------------------------------------------------------
    Widgets für Zeta Producer: widget-zp.de

  • Da haben Sie nicht alles kopiert, am Besten nochmal löschen und jeweils vollständig kopieren

    Ich sehe da keinen Fehler... und es geht dennoch nicht... ;( X/
    shop.fotow.de

    <style>
    /*###### POSITION WARENKORB ICON ######*/
    .zpshopbasketindicator {
    bottom: auto; /* Aufhebung Position Unten */
    top: 16px; /* Abstand von Oben */
    right: 16px; /* Abstand von Rechts */
    }
    /*###### GROESSE WARENKORB ICON (GROSS) ######*/
    .zpshopbasketindicator .zpbasketindicator {min-width:80px;}
    .zpshopbasketindicator .zpbasketindicator>img.zpbasketicon {max-width:80px;}
    .zpshopbasketindicator .zpbasketindicator > span {font-size: 16px; padding: 4px 9px;}
    </style>
  • den Hinweis beachtet?

    Untenstehendes CSS fügen Sie über Website > Einstellungen > CSS ein.

    Außerdem wäre zu beachten, dass das CSS aus dem August 2022 stammt, also für die damals aktuelle Zeta-Version geschrieben wurde. Da kann es zwischendurch auch Anpassungen im Layout oder Programm gegeben haben.

  • Es könnte helfen, wenn der Selektor

    .zpshopbasketindicator 

    nicht zwei mal hintereinander wiederholt würde.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • ich probiere es aus, danke für den Hinweis! :)

    Das CSS auf der veröffentlichten Seite ist auch immer noch falsch, das <style> gehört da nicht rein, das muss nur an den Anfang und ans Ende.

    Freundliche Grüße
    Philipp

    ---------------------------------------------------------------
    Widgets für Zeta Producer: widget-zp.de

  • Es könnte helfen, wenn der Selektor

    .zpshopbasketindicator 

    nicht zwei mal hintereinander wiederholt würde.

    Das sollte schon so stimmen, ist nicht zwei mal gleich - aber ähnlich ;)

    Freundliche Grüße
    Philipp

    ---------------------------------------------------------------
    Widgets für Zeta Producer: widget-zp.de

  • Das CSS auf der veröffentlichten Seite ist auch immer noch falsch, das <style> gehört da nicht rein, das muss nur an den Anfang und ans Ende.

    Vielen Dank für den Hinweis, besser, DIE HINWEISE. Ich werde es ausprobieren.
    Eigentlich hatte ich "nur" die CSS Hinweise von Mario zu kopieren und einzufügen.
    Dort stand auch "STYLE" beachten.. Dann hatte ich das wohl falsch verstanden.
    Gibt es denn, ansonsten, noch eine Alternative, das Button des Warenkorbs
    von unten rechts nach oben zu versetzen oder an andere Stelle und dabei zu vergrößern?
    Und.. auch MOBILE vernünftig umzusetzen?
    Nicht böse sein... Ich habe nun über SUCHEN alles nachgeschaut. Aber nichts weiteres gefunden.
    Ich gebe mir schon Mühe, etwas umzusetzen. Ich bin ja auch schon seit ZETA12 dabei :)
    Vielleicht gibts doch noch eine kleine Hilfe? Bei den Codeschnipseln habe ich auch nichts gefunden.
    DANKESCHÖN!

  • Hallo Axel,

    das Ergebnis Deiner Suche zeigt das eigentliche Problem: 99,9% der Zeta-User kommen mit Größe und Position des Warenkorbes entsprechend der Layout-Vorgaben klar, sehen also keinen Bedarf zur Anpassung. Deshalb findest Du im Forum auch keine oder kaum Fragestellungen zur Anpassung.

    Nun gibt es einen Code, der anscheinend mit Deinem Layout nicht funktioniert oder tatsächlich einen strukturellen Fehler aufweist. Wir reden aber hier über eigenes CSS, wobei "eigenes" eigentlich "EIGENES" geschrieben werden müsste. Der offizielle Support kann und wird hier nur begrenzt unterstützen, das ist rein betriebswirtschaftlich auch nachvollziehbar. Hinzu kommt, dass "eigenes CSS" inzwischen einen merkbaren Anteil (ich schätze bis zu 20%) an Darstellungsproblemen, die wir im Forum behandeln, ausmacht.

    CSS sollte nur derjenige anfassen, der auch versteht, was der Code bedeutet. Ich oute mich jetzt mal als jemand, der seeeeeeehr wenig von dem Zeug versteht und es deshalb kaum einsetzt. 😉

    Um hier weiterzumachen, schlage ich vor, dass Du eine neue Fragestellung aufmachst, gern mit Verweisen auf diesen Thread, aber entschlackt um die Diskussionen ab Beitrag #3.

    Um Codes sauber wiederzugeben, nutze bitte die Schaltfläche </> im Editor, dann haben wir auch gleich Zeilennummern, auf die wir in der Diskussion eingehen können.

    Im ersten Beitrag bitte auch gleich Link zur Seite, verwendete Version und Layout angeben und auch die bereits vorhandenen Einträge in CSS.

  • vielen Dank, Markus... ! :)

  • axelwestdoerp Sehr gerne :thumbup:

    Hallo Markus, auf MOBILE (iPhone) wird der Warenkorb als Symbol nicht wieder gegeben..
    Was mache ich noch falsch? Weder QUER noch HOCH.. wobei HOCH ja eigentlich das Thema bei MOBILE ist...
    Ich wollte ja auch so einen richtig schönen großen Warenkorb, anderes Symbol vielleicht.. hat, glaube ich,

    auch was mit SVG zu tun?

  • Hallo Axel,

    da hat Markus einen kleinen Fehler gemacht, der Code sollte so lauten:

    Code
    <style>
    .zpshopbasketindicator .zpbasketindicator>svg {
        width: 60px;
        height: 60px;
    }
    
    .zpshopbasketindicator {
        top: 75px;
    }
    </style>

    Freundliche Grüße
    Philipp

    ---------------------------------------------------------------
    Widgets für Zeta Producer: widget-zp.de

  • Stimmt phil-web hatte das nur mal schnell auf seiner Seite so probiert. Ich persönlich würde das unten lassen, schönen Warenkorb rein als SVG das kannst Du austauschen. Oben schaut das nicht so schön aus - aber das ist natürlich Geschmackssache.

  • Stimmt phil-web hatte das nur mal schnell auf seiner Seite so probiert. Ich persönlich würde das unten lassen, schönen Warenkorb rein als SVG das kannst Du austauschen. Oben schaut das nicht so schön aus - aber das ist natürlich Geschmackssache.

    Muss ich unbedingt ausprobieren, mit dem Warenkorb und SVG.. Noch eine Sache zum Warenkorb OBEN oder UNTEN.. Ich selber suche einen Warenkorb immer oben rechts, weil dort auch meist, in gleicher Größe und Anordnung, auch das LOGIN ist, für Kundenkonto/Bestellübersicht u.ä. Also immer oben rechts. Aber diese Warenkörbe und Shopsysteme sind ganz anders aufgemacht. Ich bin ja ein Mensch von "Standards"... warum nicht auch im ZETA SHOP... Kundenkonto oben rechts, Warenkorb oben rechts... gleiche Größe.. wie Shopsysteme von Apotheken, und anderen Geschäften.

  • Hallo axelwestdoerp Kundenkonto und Warenkorb kann man einblenden lassen, du müsstest nur deine Struktur etwas ändern, bei dir ist der Warenkorb versteckt unter "shop für fotofilme" oder Du machst es wie Ich und legst das oben an im Banner, einfachste Lösung,

    Ich weis aber was Du meinst, wie andere Shops das haben, aber das funktioniert bei Zeta leider nicht, ist sehr schade - aber man kann es ja anders lösen.

  • aber das funktioniert bei Zeta leider nicht, ist sehr schade - aber man kann es ja anders lösen.

    Was ist denn das Ziel / was lässt sich in ZP nicht umsetzen? Vielleicht kann man mit etwas JS und CSS da es machen

    Freundliche Grüße
    Philipp

    ---------------------------------------------------------------
    Widgets für Zeta Producer: widget-zp.de

  • Vor Nutzung von JS/CSs möchte ich gerne darauf hinweisen, dass ZP ein Baukasten ist. Der Baukasten bietet viele Funktionen, die für eine Vielzahl von Anwendern funktionieren sollen.

    Wir bieten Möglichkeiten, Projekte durch CSS/JS ausgiebig anzupassen. Aber mit großer Macht kommt auch große Verantwortung. Viele Nutzer haben nicht die nötigen Kenntnisse um die Implikationen solcher Anpassungen abschätzen zu können und daher verursachen Anpassungen sehr oft einen erhöhten Support-Aufwand und nicht selten auch Fehler in den Projekten der Anwender (schaut Euch nur mal die Länge dieses Threads an).

    Ich bitte also immer gut zu überlegen, ob man nicht besser einfach mit den Bordmitteln des Baukastens lebt bevor man Anpassungen macht, die man selbst gar nicht versteht (und ja auch nicht verstehen muss, denn dafür gibt es ja den Baukasten).

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Vor Nutzung von JS/CSs möchte ich gerne darauf hinweisen, dass ZP ein Baukasten ist. Der Baukasten bietet viele Funktionen, die für eine Vielzahl von Anwendern funktionieren sollen.

    Wir bieten Möglichkeiten, Projekte durch CSS/JS ausgiebig anzupassen. Aber mit großer Macht kommt auch große Verantwortung. Viele Nutzer haben nicht die nötigen Kenntnisse um die Implikationen solcher Anpassungen abschätzen zu können und daher verursachen Anpassungen sehr oft einen erhöhten Support-Aufwand und nicht selten auch Fehler in den Projekten der Anwender (schaut Euch nur mal die Länge dieses Threads an).

    Ich bitte also immer gut zu überlegen, ob man nicht besser einfach mit den Bordmitteln des Baukastens lebt bevor man Anpassungen macht, die man selbst gar nicht versteht (und ja auch nicht verstehen muss, denn dafür gibt es ja den Baukasten).

    Sehe ich genau so, man kann ja einiges mit ein bisschen Fantasie umsetzen ohne Kenntnisse zu haben. Ich würde mit Java Script nichts machen da ich davon 0% Ahnung habe.

  • phil-web sowas zb. (Screenshots) wie halt alle Shops das können, nur das die Shops so aufgebaut sind das man die Icons so hinschieben kann, habe das aber schon mal angefragt.

    Das sollte sich aber mit CSS auch möglich sein, oder?

    Freundliche Grüße
    Philipp

    ---------------------------------------------------------------
    Widgets für Zeta Producer: widget-zp.de

  • Ich bitte also immer gut zu überlegen, ob man nicht besser einfach mit den Bordmitteln des Baukastens lebt bevor man Anpassungen macht, die man selbst gar nicht versteht (und ja auch nicht verstehen muss, denn dafür gibt es ja den Baukasten).

    Das sehe ich genauso, weshalb ich mal über ein Widget für widget-zp nachgedacht hatte, wo man häufig nachgefragte CSS-Anpassungen einfach aktivieren und anpassen kann. Ist aber viel Aufwand, dass dann immer aktuell zu halten, wenn sich etwas in Layouts oder Widgets ändert...

    Freundliche Grüße
    Philipp

    ---------------------------------------------------------------
    Widgets für Zeta Producer: widget-zp.de

  • Das sollte sich aber mit CSS auch möglich sein, oder?

    Laut Zeta ist es nicht möglich im Menü das so einzubauen.

    2 Mal editiert, zuletzt von MKB (6. Dezember 2023 um 17:02)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!