gelöst Button btn-add-to-cart mit Icon (Shopping-Cart) ergänzen

Thema wurde von Timo Stubenrauch, 22. August 2018 erstellt.

  1. Timo Stubenrauch

    Timo Stubenrauch Mitglied

    Registriert seit:
    22. August 2012
    Beiträge:
    13
    Danke erhalten:
    2
    Danke vergeben:
    3
    Ich versuche vergeblich dem Button btn-add-to-cart in der Produktinfo das Icon <i class="fa fa-shopping-cart"></i> vor den Buttontext zu implementieren. Leider sind bisher alle Versuche gescheitert.
    Wie kann ich updatesicher solch ein Icon hinzufügen?

    upload_2018-8-22_9-33-17.png
     
  2. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    30.948
    Danke erhalten:
    6.089
    Danke vergeben:
    1.078
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    in welcher datei hast es den wie versucht?
    updatesicher geht das wenn du den smartyblock des bereiches nimmst und nen eigenen machst. (Anleitung im Forum / Blog von gambio).
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    26. Oktober 2011
    Beiträge:
    967
    Danke erhalten:
    149
    Danke vergeben:
    130
    Guck mal in snippets/product_info/product_box_bottom.html

    Code:
    {block name="snippets_product_info_product_box_bottom_add_to_cart"}
                <div class="button-container">
                    <input name="btn-add-to-cart" type="submit" class="btn btn-lg btn-buy btn-block js-btn-add-to-cart{if $DEACTIVATE_BUTTON == true} btn-inactive{/if}" value="{$txt.add_to_cart}" title="{$txt.add_to_cart}" />
                </div>
            {/block}
        
     
  4. Timo Stubenrauch

    Timo Stubenrauch Mitglied

    Registriert seit:
    22. August 2012
    Beiträge:
    13
    Danke erhalten:
    2
    Danke vergeben:
    3
    Hey vielen Dank!
    Bin schlauer, aber meine Versuche sind trotzdem wieder gescheitert.
    Blöde Frage, wie binde ich dann den Code <i class="fa fa-shopping-cart"></i> direkt in den Button ein?

    Vermutlich mit CSS oder?

    Ich habe folgende Anweisung geschrieben:
    .add-to-cart-icon {
    content: "\f07a";
    font-family: FontAwesome;
    font-weight: 600;
    }

    und dann so eingefügt:
    <input name="btn-add-to-cart" type="submit" class="add-to-cart-icon btn btn-lg btn-buy btn-block js-btn-add-to-cart{if $DEACTIVATE_BUTTON == true} btn-inactive{/if}" value="{$txt.add_to_cart}" title="{$txt.add_to_cart}" />

    Da wird das Icon aber nicht angezeigt, der Text vom Button wird dann verändert.
    Worin liegt der Fehler?
     
  5. Timo Stubenrauch

    Timo Stubenrauch Mitglied

    Registriert seit:
    22. August 2012
    Beiträge:
    13
    Danke erhalten:
    2
    Danke vergeben:
    3
    Hast du evtl. noch ne Idee auf meinen letzten Post?
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    25. Oktober 2017
    Beiträge:
    406
    Danke erhalten:
    136
    Danke vergeben:
    81
    Schon einmal versucht, dass mit dem Tool "Texte ändern" zu ändern? Einfach das <i ...> Tag vor den Text setzen.
     
  7. Timo Stubenrauch

    Timo Stubenrauch Mitglied

    Registriert seit:
    22. August 2012
    Beiträge:
    13
    Danke erhalten:
    2
    Danke vergeben:
    3
    Hatte ich auch schon versucht, geht leider nicht.
     
  8. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Du hast da einen Fehler in deiner CSS-Anweisung. Die Regel "content:" funktioniert nur in Verbindung mit den Pseudo-Elementen :before und :after. Aber das wird dir in deinem Speziellen Fall leider auch nicht wirklich weiterhelfen, da input-Felder diese Pseudo-Elemente nicht besitzen und somit auch nicht per CSS gestaltet werden können. Was funktionieren könnte ist folgendes:

    Gib deinem Button ein Container-Element, zum Beispiel ein div oder span und Style das mit CSS:

    Code:
    .button-container:before {
        content: "\f07a";
        font-family: FontAwesome;
        font-weight: 600;
    }
    Möglicherweise muss dann die Position noch angepasst werden und der Inhalt des Buttons muss ein Stück nach rechts wandern, damit das richtig angezeigt wird.
     
  9. Timo Stubenrauch

    Timo Stubenrauch Mitglied

    Registriert seit:
    22. August 2012
    Beiträge:
    13
    Danke erhalten:
    2
    Danke vergeben:
    3
    Das habe ich eben getestet, er setzt dann vor den Button das Icon und nicht im Button.
     
  10. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Deswegen schrieb ich, dass die Position möglicherweise noch angepasst werden muss :D. Das kann ich allerdings nicht einfach mal eben aus dem Ärmel schütteln, dafür muss ich deinen Shop sehen und das CSS darauf anpassen
     
  11. Timo Stubenrauch

    Timo Stubenrauch Mitglied

    Registriert seit:
    22. August 2012
    Beiträge:
    13
    Danke erhalten:
    2
    Danke vergeben:
    3
    Kein Problem :):
    https://technibuy.de/fernsehtechnik...ss-stecker-18v-1200ma-fuer-multischalter.html

    Ich habe auch alle Zugangsdaten in eurem Kundencenter hinterlegt, theoretisch könntest du am offenen Herzen schauen.
     
  12. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Versuchs mal damit:

    Code:
    .button-container::before {
        content: "\f07a";
        font-family: FontAwesome;
        font-weight: 600;
        position: absolute;
        margin-left: 15px;
        font-size: 18px;
        color: #ffffff;
        margin-top: 10px;
        margin-bottom: 10px;
    }
     
  13. Timo Stubenrauch

    Timo Stubenrauch Mitglied

    Registriert seit:
    22. August 2012
    Beiträge:
    13
    Danke erhalten:
    2
    Danke vergeben:
    3
    :) geht, du bist der Beste...
    Vielen Dank!!!