Neuer <div> Container

Thema wurde von Anonymous, 4. November 2023 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. August 2021
    Beiträge:
    627
    Danke erhalten:
    68
    Danke vergeben:
    265
    #1 Anonymous, 4. November 2023
    Zuletzt bearbeitet: 4. November 2023
    Hallo,

    ich möchte einen <div> Container an der Stelle wie in Bild 1 dargestellt einfügen.

    Verantwortlich wäre die Datei: "product_info_template_standard.html", in dieser Datei wimmelt es nur so von Smarty-Blöcken.

    Frage 1.)
    Ist es mit Gambios hauseigenen Mitteln via StyleEdit möglich, an diese Stelle eine Box einzufügen, ohne die Datei "product_info_template_standard.html" anfassen zu müssen?

    Frage 2.)
    Wenn es nur über die Datei "product_info_template_standard.html" machbar ist, wäre das zunächst für mich realisierbar.

    Aber wie geht's nach dem Einfügen des <div> Containers weiter?

    Ich habe in meinem Child-Theme/html/custom schon eine eigene xyz.html Datei. Da dieser Block, den ich selber einfügen möchte, ziemlich verschachtelt irdendwo zwischen den Blöcken in die Datei "product_info_template_standard.html" reingeschrieben wird, sehe ich keine andere Möglichkeit, als den gesamten Inhalt der Datei "product_info_template_standard.html" in meine eigene Child-Datei Datei xyz.html rein zu kopieren, was die Update-Sicherheit nicht gerade erhöht.

    Ich glaube, mit include/prepend/append komme ich an dieser Stelle nicht weiter, dafür sind die Smarty-Blöcke zu sehr ineinander verschachtelt.

    Es geht mir letztlich darum, wie lege ich meinen eingefügten Smarty-Blöck möglichst "schlank" ein, ohne den Inhalt der gesamten Datei in meinem Child-Theme reinzukopieren?

    Kann mir jemand an dieser Stelle weiterhelfen?

    Gruß

    Bernd
     

    Anhänge:

  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. August 2021
    Beiträge:
    627
    Danke erhalten:
    68
    Danke vergeben:
    265
    #2 Anonymous, 4. November 2023
    Zuletzt bearbeitet: 4. November 2023
    Nachtrag: Ich habe natürlich im Forum die Mitglied-Frage "html-Ergänzung mit smarty-Block prepend/append" gelesen.

    Hier sehe ich für mich letztlich nur die die Möglichkeit, entweder den gesamten (mit geänderten) Inhalt der Datei, aufgrund der Verschachtelungen der Smartyblöcke, in meine .../html/custom/xyz.html zu kopieren, oder die geänderte Datei in .../html/system/ einzusetzen.

    Beide Varianten sind nicht updatesicher, wobei man Updates nicht jeden Tag macht, und es letztlich auch auf die eigene Dokumentation ankommt, um nach Updates die Datei auf Änderungen zu prüfen - ganz klar.

    Wie schon gefragt, geht es nicht auch einfacher, als soviel Code mitzuschleppen?
     
  3. tannenhof_imshausen

    tannenhof_imshausen Erfahrener Benutzer

    Registriert seit:
    26. Oktober 2022
    Beiträge:
    75
    Danke erhalten:
    20
    Danke vergeben:
    37
    So müsste das funktionieren:

    PHP:
    {block name="product_info_template_standard_description" prepend}
    {
    block name="test_block"}
    <
    div id="xyz">
    <
    p id="abc">Das ist ein neuer Block</p>
    </
    div>
    {/
    block}
    {/
    block}
    in eine Datei /themes/DeinTheme/html/custom/product_info_template_standard.html einfügen.
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.827
    Danke erhalten:
    743
    Danke vergeben:
    283
    #4 Anonymous, 4. November 2023
    Zuletzt bearbeitet: 4. November 2023
    muss es darunter, oder würde es auch hier für dich ok sein?
    upload_2023-11-4_13-46-7.png

    Das wäre in der product_info_product_box_bottom.html

    --> html/custom/product_info_product_box_bottom.html

    Code:
    {block name="product_info_product_box_bottom" append}
        <div>
        <p>
            ich bin ein Testblock
        </p>
        </div>
    {/block}
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. August 2021
    Beiträge:
    627
    Danke erhalten:
    68
    Danke vergeben:
    265
    @michaela - Danke. Das hatte ich auch in ähnlicher Form schon so gemacht, aber ich habe das verworfen, ich wollte den Block separat darunter haben, aus Layout Gründen, sieht schöner aus.

    @tannenhof_imshausen - Danke. Ich werde das morgen ausprobieren, unter Zuhilfenahme der Smarty-Dokumentation, damit ich das auch verstehe/nachvollziehen kann.

    Beiden ein schönes Wochenende!
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. August 2021
    Beiträge:
    627
    Danke erhalten:
    68
    Danke vergeben:
    265
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.827
    Danke erhalten:
    743
    Danke vergeben:
    283
    @UuSK gerne. Ich versuche hier viel aufzusaugen und zu lernen. Deshalb habe ich die Variante von @tannenhof_imshausen auch getestet.
    Bei mir ist der Text dann aber nicht rechts unter der Preisbox, sondern links über der Beschreibung.
    Wie bekommst du deinen Textblock nun unter die Preisbox, wie in deinem Bild 1 im ersten Beitrag?

    upload_2023-11-4_20-26-7.png
     
  8. tannenhof_imshausen

    tannenhof_imshausen Erfahrener Benutzer

    Registriert seit:
    26. Oktober 2022
    Beiträge:
    75
    Danke erhalten:
    20
    Danke vergeben:
    37
    @Michaela Klaiber : Ich habe es jetzt auch mal getestet, da ich den Code oben nur nach der Vorlage von @UuSK geschrieben hatte, und bei mir wird der neue Block auch unten links mit grauem Hintergrund angezeigt.

    Was mich verwirrt, es gibt die standardmäßige Datei
    /themes/Malibu/html/system/product_info_template_standard.html
    und
    /themes/Malibu/variants/product-variant/classic/html/custom/product_info_template_standard.html

    Beide definieren den Block product_info_template_standard_description.

    Auf jeden Fall funktioniert es mit folgendem Code bei mir bestens:

    PHP:
    {block name="product_info_template_standard_sticky_box_form" append}
    {
    block name="test_block"}
    <
    div id="xyz">
    <
    p id="abc">Das ist ein neuer Block</p>
    </
    div>
    {/
    block}
    {/
    block}
    @UuSK : Bitte gib Rückmeldung, ob der Code aus meinem Beitrag weiter oben wirklich die Box rechts angezeigt hat oder auch links.
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.827
    Danke erhalten:
    743
    Danke vergeben:
    283
    es gibt 2 Produktansichten. "classic" und "links ausrichten".
    Eventuell hängt dies zusammen.

    Deine erste Lösung sehe ich nur wenn ich die Produktansichtvariante "classic" auswähle. Bei "links ausrichten", sehe ich den Block gar nicht.


    Deine zweite Lösung kommt zum selben Ergebnis wie meine. :)


    Ich merke aber gerade, dass @UuSK weder "classic" noch "links ausrichtet" verwendet. das ist eine Mischung. :)
     
  10. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. August 2021
    Beiträge:
    627
    Danke erhalten:
    68
    Danke vergeben:
    265
    #10 Anonymous, 5. November 2023
    Zuletzt bearbeitet: 5. November 2023
    rechts

    Bei meiner Frage handelte es sich um ein exemplarisches Beispiel, um bei einer Beantwortung der Frage die Logik zu verstehen, was mir aufgrund Eurer Antworten auch gelungen ist - ich meine, jetzt auch mit Smarty-Blöcken umgehen zu können.

    Unten mein richtiger Code.
    Code:
    {block name="product_info_template_standard_sticky_box" append}
        <div class="product-info-details col-xs-12 col-md-4">
            <p>Das ist ein neuer Block</p>
            <p>Das ist ein neuer Block</p>
        </div>
    {/block}
    
    <style>
    .product-info .product-info-details {
        min-height: 1px !important;
    }
    .product-info .product-info-details p:last-child {
        margin-bottom: 0px;
    }
    </style>
    
     

    Anhänge:

  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. August 2021
    Beiträge:
    627
    Danke erhalten:
    68
    Danke vergeben:
    265
    #11 Anonymous, 5. November 2023
    Zuletzt bearbeitet: 6. November 2023
    Es ist durchaus möglich, dass die neue eingefügte Box bei dem Einen links sitzt, bei einem Anderen an der rechten Seite anstößt.

    Das liegt daran, dass der neu hinzugefügte Container an den Container mit dem Bild stößt - dann bleibt er rechts.
    Ist die Artikeldetailbox höher, also länger, durch zusätzliche Funktionen wie PayPalbutton, oder woanders billiger zum Beispiel, stößt das neue Div nicht mehr an das Bild-Div, und rutscht dann nach links darunter.

    Lösung: float: right;
    und danach clear right nicht vergessen.

    Vielleicht gibt es ja eine Grid-Klasse, die das erledigt, weiß ich jetzt nicht.

    Zudem ist es sinnvoll, dem Container noch eine eigene ID mitzugeben, sonst läuft man Gefahr, dass auch die Artikel-Dateil-Box da drüber sich mit ändert, wenn man den neuen Container formatiert.

    Wenn's jemand interessiert, kann ich meinen angepassten Code ja posten - <div> Container ist immer an der rechten Seite, und schützt bei Formatierungen auch andere Container.
     
  12. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.827
    Danke erhalten:
    743
    Danke vergeben:
    283
    danke für deine Erklärung. Ja, bei mir ist die Artikeldetailbox deutlich höher, deshalb rutschte das bei mir nach links.
    Deinen Code benötige ich nicht. Ich wollte es nur verstehen. :)