Vorteile für den Kunden in Artikeldetailansicht anzeigen

Thema wurde von Gambionike, 11. Mai 2023 erstellt.

  1. Gambionike

    Gambionike Erfahrener Benutzer

    Registriert seit:
    17. Juni 2011
    Beiträge:
    240
    Danke erhalten:
    19
    Danke vergeben:
    67
    Hallo an alle,

    wir nutzen das Malibu-Theme und würden geren für unsere Kunden bei jedem Artikel in der Artikeldetailansicht auf die Vorteile hinweisen, die der Kunde hat, wenn er bei uns bestellt. In etwa so:

    upload_2023-5-11_14-24-32.png

    Genügend Platz ist im Theme ja für so etwas. Hat das schon einmal jemand von euch umgesetzt?

    Viele Grüße

    Gambionike
     
  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.544
    Danke erhalten:
    11.305
    Danke vergeben:
    1.612
    Mal ganz grob:
    Schau Dir die product_info_product_box_bottom.html im html/system, oder in variants/product_variants/.... an
    Suche Dir den passenden Smarty-Block
    Erstelle Deine eigene Datei mit gleichem Namen und Deinem Inhalt.
    z.B.
    {block name="xxx" prepend}
    <div class="Vorteile">
    {$txt.garantie}
    {$txt.rechnung}
    {$txt.versandfrei}
    </div>
    {/block}

    Dann legst Du die Sprachdatei an
    product_info_lang.inc.php

    <?php
    $t_language_text_section_content_array = array(
    'garantie' => 'hier Dein Symbol und Text',
    'rechnung' => 'hier Dein Symbol und Text',
    ...
    );
    Das ganze kommt dann in GXModules
    GXModules/Meins/Infotext/Shop/Themes/All -> hier die html-Datei
    GXModules/Meins/Infotext/TextPhrases/german/ -> hier die Sprachdatei

    Das Ganze erst im Testshop probieren.
    Das geht nciht in einem Cloudshop, weil man da keine Sprachdatei anlegen kann.
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    436
    Danke erhalten:
    195
    Danke vergeben:
    143
    #3 Anonymous, 11. Mai 2023
    Zuletzt bearbeitet: 11. Mai 2023
    Ich habe es in meinem Cloudshop über die Zusatzfelder gelöst.

    Sieht dann so aus:
    upload_2023-5-11_21-39-26.png

    So hab ichs gemacht:
    Code:
    .page-product-info .additional-fields-item > strong::after {
        font-size: 14px;
        font-family: 'Font Awesome 5 Free';
        content: "\f00c";
        font-weight: 900;
        color: #0067b8;
    }
    
    .page-product-info .additional-fields-item > strong {
      font-size: 0px;
    }

    Mann könnte stattdessen auch einfach in jedes Zusatzfeld folgendes in eingeben:
    Code:
    <i style="color: green" class="fa fa-check fa-2x"></i>
    Wäre vorteilhaft, weil man dann die Zusatzfelder dann noch gleichzeitig für die ursprünglich vorgesehene Funktion nutzen könnte.

    Problem: Ich hab bis heute die Doppelpunkte nicht ausgeblendet bekommen, deswegen ist die CSS Lösung bei mir im Einsatz.
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.877
    Danke erhalten:
    783
    Danke vergeben:
    296
    #4 Anonymous, 12. Mai 2023
    Zuletzt bearbeitet: 12. Mai 2023
    schau mal hier. Hiermit bekommst du den : weg. Ich habe es zwar nicht mehr, da ich jetzt die Variante "links ausrichten" im Shop verwende, aber es klappt auf jeden Fall. :)
    (Link nur für registrierte Nutzer sichtbar.)
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    436
    Danke erhalten:
    195
    Danke vergeben:
    143
    Danke, ist mir dann aber doch zu umständlich, dann lass ich es erstmal so.
     
  6. Gambionike

    Gambionike Erfahrener Benutzer

    Registriert seit:
    17. Juni 2011
    Beiträge:
    240
    Danke erhalten:
    19
    Danke vergeben:
    67
    Hallo an alle, leider habe ich jetzt erst gesehen, dass ihr auf meine Frage geantwortet habt. Ich bin irgendwie nicht benachrichtigt worden. Vielen Dank barbara, O.C. und Michaela, das schaue ich mir alles jetzt einmal genauer an und versuche es umzusetzen.
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.877
    Danke erhalten:
    783
    Danke vergeben:
    296
    #7 Anonymous, 16. Mai 2023
    Zuletzt bearbeitet: 16. Mai 2023
    ich habe ein bisschen getestet. Auch Cloudshops können es direkt in der HTML Datei umsetzen:

    in der Datei product_info_product_box_bottom.html
    dies eingefügt:

    Code:
    {block name="product_info_product_box_bottom_add_to_cart" append}
    <div>
        <div class="vorteile">
            <span style="color:#33cc66;">✓</span> 2 Jahre Garantie<br />
            <span style="color:#33cc66;">✓</span> Kauf auf Rechnung möglich<br />
            <span style="color:#33cc66;">✓</span> 31 Tage Rückgaberecht<br />
            <span style="color:#33cc66;">✓</span> versandkostenfrei ab 69€<br />
            <br />
        </div>
    </div>
    {/block}
    Im Ordner html/custom gespeichert.


    und dann per CSS ausgerichtet:

    Code:
    .vorteile {
        padding: 20px;
    }
    upload_2023-5-16_11-41-17.png
     
  8. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.544
    Danke erhalten:
    11.305
    Danke vergeben:
    1.612
    Ja, wenn der Shop einsprachig ist geht das so..
    Bei 2 oder mehr Sprachen, wird das schwerer. Da müsste zusätzlich eine Abfrage der Sprache eingefügt werden.
     
  9. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    1.171
    Danke erhalten:
    1.055
    Danke vergeben:
    366
    {if $smarty.session.languages_id==='2'}deutsch{elseif $smarty.session.languages_id==='1'}englisch{else}andere Sprache{/if}

    Es scheint auch mit Sprachdateien im Theme zu funktionieren:
    themes/Malibu/TextPhrases/german/product/product_info.lang.inc.php
    themes/Malibu/TextPhrases/english/product/product_info.lang.inc.php

    Also Theme herunterladen, in den Textphrases-Sprachverzeichnissen je ein product-Verzeichnis und eine product_info.lang.inc.php erstellen und darin die Texte platzieren wie in #2 beschrieben.
     
  10. Gambionike

    Gambionike Erfahrener Benutzer

    Registriert seit:
    17. Juni 2011
    Beiträge:
    240
    Danke erhalten:
    19
    Danke vergeben:
    67
    Hallo Michaela,

    deine Lösung schien mir die Simpelste zu sein, da ich keine andere Sprache nutze. Ich habe keinen Cloudshop, aber deine Lösung müsste ja dennoch funktionieren.

    Verstehe ich das richtig, ich nehme die Datei
    themes/Malibu/variants/product-variant/classic/html/custom/product_info_product_box_bottom.html
    öffne diese und füge einfach deinen Code
    {block name="product_info_product_box_bottom_add_to_cart" append}
    <div>
    <div class="vorteile">
    <span style="color:#33cc66;">✓</span> 2 Jahre Garantie<br />
    <span style="color:#33cc66;">✓</span> Kauf auf Rechnung möglich<br />
    <span style="color:#33cc66;">✓</span> 31 Tage Rückgaberecht<br />
    <span style="color:#33cc66;">✓</span> versandkostenfrei ab 69€<br />
    <br />
    </div>
    </div>
    {/block}

    ganz unten drunter?
    Das Einzige, was bei mir passiert ist dies:
    upload_2023-5-19_12-47-25.png

    Der Button wird 2x angezeigt, von dem Text keine Spur.
    Hast du eine Idee, warum das nicht funktioniert? Die Caches habe ich nach der Modifikation der Datei immer gelöscht.
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.877
    Danke erhalten:
    783
    Danke vergeben:
    296
    #11 Anonymous, 19. Mai 2023
    Zuletzt bearbeitet: 19. Mai 2023
    da ich einen Cloudshop habe, weiß ich nicht wie es bei dir funktioniert. Soweit ich weiß darfst du den Code nicht einfach unten einfügen. Gibts bei dir einen html / custom Ordner?
    Du erstellst eine neue eigene Datei mit dem Namen product_info_product_box_bottom.html. In diese Datei kopierst du den Code. Also hier ist jetzt nur dieser Code drin. Sonst nichts.
    Und diese Datei kommt dann in den html / custom Ordner. (zumindest im Cloudshop :))
     
  12. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.877
    Danke erhalten:
    783
    Danke vergeben:
    296
    @Gambionike hier muss die Datei rein.
     
  13. Gambionike

    Gambionike Erfahrener Benutzer

    Registriert seit:
    17. Juni 2011
    Beiträge:
    240
    Danke erhalten:
    19
    Danke vergeben:
    67
    @Michaela Klaiber @barbara
    Entschuldigt, dass ich noch einmal störe, aber irgendwie bin ich anscheinend zu blöd. Ich habe nun schon alles Mögliche ausprobiert, aber es klappt nicht.
    Hier noch zwei Versatändnisfragen:
    1. Ihr schreibt, die Datei muss in diesen Ordener: GXModules/Meins/Infotext/Shop/Themes/All. "Meins" kann ich so vom Namen her lassen oder muss da der Name von meinem Theme, also Malibu rein?

    2. Im html code schreibt barbara hier {block name="xxx" prepend}, Michaela dagegen append. Ich habe beides ausprobiert. Nichts geht.

    Verstehe ich das richtig, dass die erweiterte html-Datei. NUR den zusätzlichen Text enthält, also den Code für die Anzeige der Shopvorteile. Den Rest holt sich der Shop aus der ursprünglichen Datei? Die urspüngliche Datei wird auch nicht gelöscht, oder?

    Ich habe nun drein Stunden alles ausprobiert, nicht funktioniert. Da ich bei Smarty auch nicht bewandert bin, habe ich auch keine Vorstellung, was hier überhaupt passiert.

    Wenn ihr beide also noch einmal die Geduld aufbringt, wäre ich euch dankbar.
     
  14. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.544
    Danke erhalten:
    11.305
    Danke vergeben:
    1.612
    Da kannst Du Deinen Namen, ein Kürzel oder etwas anderes reinsetzen. Dabei geht es nur um die Zuordnung, damit es nciht z.B. im Ordner "Gambio" landet.
    So sind Deine Änderungen in Deinem eigenen Ordner.

    prepend fügt etwas vor dem Block, append nach dem Block ein.

    richtig

    Poste doch mal was Du genau in die Datei geschrieben hast und wie der Pfad bei Dir aussieht.
     
  15. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.877
    Danke erhalten:
    783
    Danke vergeben:
    296
    hast du deine selbst erstellte Datei so abgespeichert?:
    -öffne den Editor
    -kopiere den Code hinein:
    Code:
    {block name="product_info_product_box_bottom_add_to_cart" append}
    <div>
        <div class="vorteile">
            <span style="color:#33cc66;">✓</span> 2 Jahre Garantie<br />
            <span style="color:#33cc66;">✓</span> Kauf auf Rechnung möglich<br />
            <span style="color:#33cc66;">✓</span> 31 Tage Rückgaberecht<br />
            <span style="color:#33cc66;">✓</span> versandkostenfrei ab 69€<br />
            <br />
        </div>
    </div>
    {/block}
    in dieser Datei steht jetzt nur dieser Code.
    -klicke auf speichern unter
    -navigiere hierhin:
    -ändere den Dateityp auf "alle Dateien"
    -als Dateiname schreibst du folgendes : product_info_product_box_bottom.html (auch das .html am Ende)
    -speichern


    ich habe "append" verwendet, weil ich den Text unter dem Block
    product_info_product_box_bottom_add_to_cart (<-- in den Warenkorb) platzieren wollte.

    Wo genau möchtest du deinen Text platzieren?
    Nein, die ursprüngliche Datei löschst du nicht.
     
  16. Gambionike

    Gambionike Erfahrener Benutzer

    Registriert seit:
    17. Juni 2011
    Beiträge:
    240
    Danke erhalten:
    19
    Danke vergeben:
    67
    @Michaela Klaiber
    @barbara

    Ich danke euch beiden ganz herzlich für die Unterstützung. Es hat nun tatsächlich funktioniert. Ich hatte es genau so umgesetzt, wie ihr es auch noch einmal beschrieben habt, aber es tat sich erst nichts. Letztlich war es mal wieder das altbekannte Problem mit dem Cache bei Gambio. Und das, obwohl ich sowohl die Caches manuell gelöscht hatte, als auch per FTP direkt auf dem Server. Nach eurer jetzigen Anleitung war es mir klar, dass es nicht an meiner Vorgehensweise lag und so konnte ich den Fehler ausschließen.

    Ihr habt mir sehr geholfen. Vielen Dank!!!
     
  17. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    17. Juli 2022
    Beiträge:
    64
    Danke erhalten:
    5
    Danke vergeben:
    28
    @Michaela Klaiber wie komme ich denn in die product_info_product_box_bottom.html Datei :confused:?
     
  18. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.877
    Danke erhalten:
    783
    Danke vergeben:
    296
    hast du einen Cloudshop?
     
  19. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    17. Juli 2022
    Beiträge:
    64
    Danke erhalten:
    5
    Danke vergeben:
    28
    Hall Michaela, ja ich habe einen Cloudshop.
     
  20. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.877
    Danke erhalten:
    783
    Danke vergeben:
    296
    #20 Anonymous, 26. Mai 2023
    Zuletzt bearbeitet: 26. Mai 2023
    Für Cloudshops:

    1. Im StyleEdit gehst du in die "Meine Themes"-Übersicht. Dort wählst du beim aktiven Theme "Duplizieren" aus.
    ( Titel/ThemeID/Autor kannst du frei vergeben. Ist nur für dich. )
    2. Beim duplizierten Theme wählst du "Downloaden"
    3. Du entpackst die zip-Datei (rechte Maustaste, alle extrahieren)
    4. Du fügst im Ordner, in dem auch die theme.json liegt, einen Ordner "html" hinzu, der wiederum einen Unterordner "custom" bekommt.
    5. Du öffnest den Editor und fügst diesen Code ein:
    Code:
    {block name="product_info_product_box_bottom_add_to_cart" append}
    <div>
       <div class="vorteile">
           <span style="color:#33cc66;">✓</span> 2 Jahre Garantie<br />
           <span style="color:#33cc66;">✓</span> Kauf auf Rechnung möglich<br />
           <span style="color:#33cc66;">✓</span> 31 Tage Rückgaberecht<br />
           <span style="color:#33cc66;">✓</span> versandkostenfrei ab 69€<br />
           <br />
       </div>
    </div>
    {/block}
    6. Speichere die Datei in den vorhin angelegten "custom" Ordner:
    - Nenne sie "product_info_product_box_bottom.html"
    (Speichern unter, klicke zum Ordner "custom", gib den Dateinamen ein (mit .html am Ende), Dateityp: alle Dateien, speichern)

    7. Nun erstellst du wieder ein ZIP-Paket aus den entpackten Dateien. (Vergib keinen neuen Namen)
    8. Im StyleEdit wählst du in der Meine Themes Übersicht "hochladen". Es kommt eine Meldung, ob das Theme überschrieben werden soll, was du bejahst.
    9. Aktiviere das Theme.
    Falls was nicht gehen sollte, aktivierst du einfach dein voriges Theme.