1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Produkt Bild ausgrauen - Produkt - Single Page

Dieses Thema im Forum "WooCommerce" wurde erstellt von talkuvit, 26. Oktober 2019.

  1. talkuvit

    talkuvit Well-Known Member

    Registriert seit:
    23. August 2011
    Beiträge:
    53
    Zustimmungen:
    0
    Hallo alle zusammen!,

    ich suche eine Idee oder Lösung wie ich folgendes realisieren könnte.

    Ich möchte direkt auf der Produktseite das Produktbild komplett der Größe lang „ausgrauen“ mit Schrift „Ausverkauft“ wenn eben der Produktbestand / Lagervestand null ist.

    „Also ein sozusagendes Overlay integrieren“?!

    Hat dazu einer einen Tipp!?

    Gruß, talkuvit
     
    #1 talkuvit, 26. Oktober 2019
  2. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.346
    Zustimmungen:
    587
    grayscale(wert) – Graustufe
    Mit dem grayscale()-Filter kann ein Bild in Graustufen dargestellt werden. Ein Wert von 1 entspricht 100%.

    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wenn man mit PHP und der gd.lib ein Bild in schwarzweisß konvertieren möchte (zum beispiel, weil man für einen Overlay)

    Soll ein Bild in Schwarz/Weiß angezeigt werden, setzte man den Befehl imagefilter($image, IMG_FILTER_GRAYSCALE) ein.
    https://www.php.net/manual/de/function.imagefilter.php

    Der Rest deiner Frage ist typische Lagerverwaltung für die es vermutlich für Woocommerce passende Plugins gibt.
     
    #2 r23, 26. Oktober 2019
  3. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    Die von @r23 vorgeschlagene CSS Klasse könnte man in Abhängigkeit vom Lagerbestand über den Filter 'woocommerce_single_product_image_gallery_classes' hinzufügen.
     
    #3 mensmaximus, 27. Oktober 2019
  4. talkuvit

    talkuvit Well-Known Member

    Registriert seit:
    23. August 2011
    Beiträge:
    53
    Zustimmungen:
    0
    hey ich habe jetzt folgendes zusammen gebaut:


    ist in der function.php:

    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    css in der style.css:

    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    leider erscheint nur eine Weiße Fläche nun und das Bild wird nicht ausgegraut.
     
    #4 talkuvit, 27. Oktober 2019
  5. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    Ohne Link zur Seite kann man das nicht beurteilen.
     
    #5 mensmaximus, 27. Oktober 2019
  6. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    Und 'woocommerce_single_product_image_gallery_classes' ist ein Filter Hook, kein Action Hook.
     
    #6 mensmaximus, 27. Oktober 2019
  7. talkuvit

    talkuvit Well-Known Member

    Registriert seit:
    23. August 2011
    Beiträge:
    53
    Zustimmungen:
    0
    ich habe mich jetzt nochmal erkundigt und ein script gefunden was in der Pruduct-Single Seite ein OVERLAY erzeugt
    und funktioniert bei einzelnen Produkten.

    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Habe ich aber Produktvarianten, wird der OVERLAY nicht mehr dargestellt.

    Weis jemand wie ich das Script abändern muss per Code ?

    gruß, talkuvit
     
    #7 talkuvit, 27. Oktober 2019
  8. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    self_hook_woocommerce_single_product_images ist kein offizieller WooCommerce Hook. Wahrscheinlich hast Du dafür einen Template Overload durchgeführt. Helfen kann man dabei nur wenn man alle Informationen hat. Bleibe so weit möglich bei den offiziellen Hooks.

    Bilder von Variationen werden per jQuery ausgetauscht. Wird eine Variation ausgewählt, wird der jQuery Trigger 'woocommerce_variation_has_changed' abgefeuert. Hier könntest Du eingreifen.

    Das wäre aber nicht notwendig, wenn Du den von mir empfohlenen Hook richtig verwendet und die CSS Regeln von @r23 angepasst hättest:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Bei Variationen funktioniert das aber nur wenn die Lagerverwaltung auf Produktebene stattfindet. Ansonsten muss man einen anderen Ansatz wählen.
     
    #8 mensmaximus, 27. Oktober 2019
  9. talkuvit

    talkuvit Well-Known Member

    Registriert seit:
    23. August 2011
    Beiträge:
    53
    Zustimmungen:
    0
    Danke für deine umfassende Hilfe und Tips.

    Dein Script funktioniert !!!

    Nur sehr Schade das es nicht in der Lagerverwaltung der entsprechenden Varianten funktioniert.
    Somit ist es für eine Vorhaben nicht zu gebrauchen :(

    Was für einen anderen Ansatz muss ich denn wählen um das Script für Lagerbestand der Varianten nutzen zu können?

    ich habe einen Ansatz gefunden mit Varianten - AUSBLENDEN
    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    können wir das
    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    hört sich doch schon mal zum gebrauchen an oder?
     
    #9 talkuvit, 27. Oktober 2019
    Zuletzt bearbeitet: 27. Oktober 2019
  10. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.346
    Zustimmungen:
    587
    #10 r23, 27. Oktober 2019
  11. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    Den Ansatz hatte ich genannt: der jQuery Trigger. Man braucht also eine weitere Funktion:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Der Ansatz mit einer anonymen Funktion im WordPress Footer soll die Funktionsweise verdeutlichen. In einer Produktivumgebung sollte man das natürlich so nicht machen! (Hint: Caching Plugins)
     
    #11 mensmaximus, 27. Oktober 2019
  12. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    Bis jetzt haben wir Deinen Wunsch mit dem Schriftzug 'Ausverkauft' noch nicht berücksichtigt. Das könntest Du mit folgender CSS Regel umsetzen:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #12 mensmaximus, 27. Oktober 2019
  13. talkuvit

    talkuvit Well-Known Member

    Registriert seit:
    23. August 2011
    Beiträge:
    53
    Zustimmungen:
    0
    Danke das du einen CSS Code als Beispiel mit in den Beitrag hinzugefügt hast.
    Dann kann ich mir individuell nach meinen Bedürfnissen ja anpassen.

    Schön das wir hier so das Problem (Anfrage) lösen konnten.
    Ich hoffe das Leute die mal das gleich oder ein ähnliches Problem haben diesen Thread nutzen können um zu einer Lösung zu finden.
     
    #13 talkuvit, 28. Oktober 2019
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden