Warenkorbsymbol ändern

Thema wurde von kevin_weidlich, 10. April 2019 erstellt.

  1. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Ist das SVG nciht an der richtigen Stelle?
     
  2. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    18. Dezember 2014
    Beiträge:
    2.521
    Danke erhalten:
    806
    Danke vergeben:
    906
    Doch, unter themes/Honeygrid/images/svgs
     
  3. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    18. Dezember 2014
    Beiträge:
    2.521
    Danke erhalten:
    806
    Danke vergeben:
    906
    Das scheint mit meinem umgewandelten png nicht zu klappen. Wie muss ich den Code ändern um ein png einzufügen?
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Mit welchem Tool hast Du das Bild denn umgewandelt?
     
  5. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    18. Dezember 2014
    Beiträge:
    2.521
    Danke erhalten:
    806
    Danke vergeben:
    906
    Folgender Code funktioniert auch nicht ;-(

    Code:
    {block name="layout_header_cart_basket"}
                                    <img src="{$theme_path}images/icons/diver_shopping_cart.png" alt="" class="gx-cart-basket svg--inject">
                                    <span class="cart">
                                        {$txt.heading_cart}<br />
                                        <span class="products">
                                            {block name="layout_header_cart_basket_total"}{$TOTAL}{/block}
                                        </span>
                                    </span>
    {/block}
     
  6. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    18. Dezember 2014
    Beiträge:
    2.521
    Danke erhalten:
    806
    Danke vergeben:
    906
    @barbara ,

    mit dem vom Beutelbinder.
     
  7. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Nimm mal bitte das "svg--inject" weg,
     
  8. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    18. Dezember 2014
    Beiträge:
    2.521
    Danke erhalten:
    806
    Danke vergeben:
    906
    @barbara,

    brachte auch keinen Erfolg
     
  9. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Lade das Bild in den Ordner "custom", nicht in "Icons"

    dann versuche es mit dem Code:
    HTML:
    {block name="layout_header_cart_basket"}
         <img src="{$theme_path}images/custom/Dein_Bild_Name.png" alt="" class="gx-cart-basket">
        <span class="cart">
                                        {$txt.heading_cart}<br />
                                        <span class="products">
                                            {block name="layout_header_cart_basket_total"}{$TOTAL}{/block}
                                        </span>
                                    </span>
    {/block}
    Bei mir geht es so, nur die Größe muss ich noch anpassen, die ist etwas winzig.
     
  10. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    18. Dezember 2014
    Beiträge:
    2.521
    Danke erhalten:
    806
    Danke vergeben:
    906
    @barbara ,

    bei mir wird kein icon angezeigt ;-(
     
  11. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Hast Du wirklich Unterstriche und keine Bindestriche in Deinem Bildnamen?
    Das ist mir passiert, als ich meine If-Abfrage eingefügt habe.
     
  12. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    18. Dezember 2014
    Beiträge:
    2.521
    Danke erhalten:
    806
    Danke vergeben:
    906
    @barbara ,

    so, gerade nochmal alles von vorne gemacht und nun wird es angezeigt. War gestern schon zu spät ;-)
     
  13. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    18. Dezember 2014
    Beiträge:
    2.521
    Danke erhalten:
    806
    Danke vergeben:
    906
    @All,

    jetzt ist das Icon total klein. Ein größeres Bild nehmen hat keine Wirkung. Wie bekomme ich es nun größer?

    Vielen Dank im Voraus.
     
  14. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    einfach per css:
    Code:
    #cart-container.navbar-cart > ul > li > a.dropdown-toggle .gx-cart-basket {
        height: 30px;
        width: 30px;
    }
    Das sind die Standard-Werte, die musst Du ändern
     
  15. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    18. Dezember 2014
    Beiträge:
    2.521
    Danke erhalten:
    806
    Danke vergeben:
    906
    @barbara,

    schau mal unter (Link nur für registrierte Nutzer sichtbar.) und (Link nur für registrierte Nutzer sichtbar.). Im Testshop ist es jetzt größer, aber total verschoben. Hast du eine Idee, wie ich es so hinbekomme, wie in meinem Liveshop?

    Vielen Dank im Voraus.
     
  16. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Schreibe mal bitte diese beiden Zeilen zu dem Code oben dazu:
    Code:
    right: 5px;
    margin-top: -14px;
     
  17. ivan_k

    ivan_k Mitglied

    Registriert seit:
    17. April 2020
    Beiträge:
    13
    Danke erhalten:
    0
    #57 ivan_k, 7. August 2020
    Zuletzt bearbeitet: 7. August 2020
    Also falls es noch jemand in ferner Zukunft braucht: (Eventuell noch updatesicher machen)

    1) https://anyconv.com/svg-to-html-converter/
    Wichtig ist das man die Datei in Path/Html umwandelt, kann man auch manuell machen. Je nach Anspruch.

    Hier eine Testumwandlung:
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 450.391 450.391" style="enable-background:new 0 0 450.391 450.391;" xml:space="preserve">
    <g>
        <g>
            <g>
                <path d="M143.673,350.322c-25.969,0-47.02,21.052-47.02,47.02c0,25.969,21.052,47.02,47.02,47.02
                    c25.969,0,47.02-21.052,47.02-47.02C190.694,371.374,169.642,350.322,143.673,350.322z M143.673,423.465
                    c-14.427,0-26.122-11.695-26.122-26.122c0-14.427,11.695-26.122,26.122-26.122c14.427,0,26.122,11.695,26.122,26.122
                    C169.796,411.77,158.1,423.465,143.673,423.465z"/>
                <path d="M342.204,350.322c-25.969,0-47.02,21.052-47.02,47.02c0,25.969,21.052,47.02,47.02,47.02s47.02-21.052,47.02-47.02
                    C389.224,371.374,368.173,350.322,342.204,350.322z M342.204,423.465c-14.427,0-26.122-11.695-26.122-26.122
                    c0-14.427,11.695-26.122,26.122-26.122s26.122,11.695,26.122,26.122C368.327,411.77,356.631,423.465,342.204,423.465z"/>
                <path d="M448.261,76.037c-2.176-2.377-5.153-3.865-8.359-4.18L99.788,67.155L90.384,38.42
                    C83.759,19.211,65.771,6.243,45.453,6.028H10.449C4.678,6.028,0,10.706,0,16.477s4.678,10.449,10.449,10.449h35.004
                    c11.361,0.251,21.365,7.546,25.078,18.286l66.351,200.098l-5.224,12.016c-5.827,15.026-4.077,31.938,4.702,45.453
                    c8.695,13.274,23.323,21.466,39.184,21.943h203.233c5.771,0,10.449-4.678,10.449-10.449c0-5.771-4.678-10.449-10.449-10.449
                    H175.543c-8.957-0.224-17.202-4.936-21.943-12.539c-4.688-7.51-5.651-16.762-2.612-25.078l4.18-9.404l219.951-22.988
                    c24.16-2.661,44.034-20.233,49.633-43.886l25.078-105.012C450.96,81.893,450.36,78.492,448.261,76.037z M404.376,185.228
                    c-3.392,15.226-16.319,26.457-31.869,27.69l-217.339,22.465L106.58,88.053l320.261,4.702L404.376,185.228z"/>
            </g>
        </g>
    </g>
    </svg>
    2) layout_header_cart.html öffnen. Sollte im html Verzeichnis vom Theme sein.

    Aktueller Ausgangscode:
    Code:
    {load_language_text section="box_cart"}
    
    {block name="layout_header_cart"}
        <nav id="cart-container" class="navbar-cart" data-gambio-widget="menu cart_dropdown" data-menu-switch-element-position="false">
            {block name="layout_header_cart_list"}
                <ul class="cart-container-inner">
                    {block name="layout_header_cart_list_item"}
                        <li>
                            <a href="{'shopping_cart.php'|xtc_href_link}" class="dropdown-toggle">
                                {block name="layout_header_cart_basket"}
                                    <img src="{$theme_path}images/svgs/basket.svg" alt="" class="gx-cart-basket svg--inject">
                                    <span class="cart">
                                        {$txt.heading_cart}<br />
                                        <span class="products">
                                            {block name="layout_header_cart_basket_total"}{$TOTAL}{/block}
                                        </span>
                                    </span>
                                {/block}
                                {block name="layout_header_cart_products_count"}
                                    {if $showProductsCount == 'true'}
                                        <span class="cart-products-count{if $PRODUCTS == 0} hidden{/if}">
                                            {$PRODUCTS}
                                        </span>
                                    {else}
                                        <span class="cart-products-count{if $productsCount == 0} hidden{/if}">
                                            {$productsCount}
                                        </span>
                                    {/if}
                                {/block}
                            </a>
    
                            {block name="layout_header_cart_dropdown"}
                                {include file="get_usermod:{$tpl_path}layout_header_cart_dropdown.html"}
                            {/block}
                        </li>
                    {/block}
                </ul>
            {/block}
        </nav>
    {/block}
    Dann mit dem Path/HTML Code erweitern:
    Code:
    {load_language_text section="box_cart"}
    
    {block name="layout_header_cart"}
        <nav id="cart-container" class="navbar-cart" data-gambio-widget="menu cart_dropdown" data-menu-switch-element-position="false">
            {block name="layout_header_cart_list"}
                <ul class="cart-container-inner">
                    {block name="layout_header_cart_list_item"}
                        <li>
                            <a href="{'shopping_cart.php'|xtc_href_link}" class="dropdown-toggle">
                                {block name="layout_header_cart_basket"}
                             
                                 
                                 
                                 
                                 
                                    <?xml version="1.0" encoding="iso-8859-1"?>
    <svg class="gx-cart-basket svg--inject" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 450.391 450.391" style="enable-background:new 0 0 450.391 450.391;" xml:space="preserve">
    <g>
        <g>
            <g>
                <path d="M143.673,350.322c-25.969,0-47.02,21.052-47.02,47.02c0,25.969,21.052,47.02,47.02,47.02
                    c25.969,0,47.02-21.052,47.02-47.02C190.694,371.374,169.642,350.322,143.673,350.322z M143.673,423.465
                    c-14.427,0-26.122-11.695-26.122-26.122c0-14.427,11.695-26.122,26.122-26.122c14.427,0,26.122,11.695,26.122,26.122
                    C169.796,411.77,158.1,423.465,143.673,423.465z"/>
                <path d="M342.204,350.322c-25.969,0-47.02,21.052-47.02,47.02c0,25.969,21.052,47.02,47.02,47.02s47.02-21.052,47.02-47.02
                    C389.224,371.374,368.173,350.322,342.204,350.322z M342.204,423.465c-14.427,0-26.122-11.695-26.122-26.122
                    c0-14.427,11.695-26.122,26.122-26.122s26.122,11.695,26.122,26.122C368.327,411.77,356.631,423.465,342.204,423.465z"/>
                <path d="M448.261,76.037c-2.176-2.377-5.153-3.865-8.359-4.18L99.788,67.155L90.384,38.42
                    C83.759,19.211,65.771,6.243,45.453,6.028H10.449C4.678,6.028,0,10.706,0,16.477s4.678,10.449,10.449,10.449h35.004
                    c11.361,0.251,21.365,7.546,25.078,18.286l66.351,200.098l-5.224,12.016c-5.827,15.026-4.077,31.938,4.702,45.453
                    c8.695,13.274,23.323,21.466,39.184,21.943h203.233c5.771,0,10.449-4.678,10.449-10.449c0-5.771-4.678-10.449-10.449-10.449
                    H175.543c-8.957-0.224-17.202-4.936-21.943-12.539c-4.688-7.51-5.651-16.762-2.612-25.078l4.18-9.404l219.951-22.988
                    c24.16-2.661,44.034-20.233,49.633-43.886l25.078-105.012C450.96,81.893,450.36,78.492,448.261,76.037z M404.376,185.228
                    c-3.392,15.226-16.319,26.457-31.869,27.69l-217.339,22.465L106.58,88.053l320.261,4.702L404.376,185.228z"/>
            </g>
        </g>
    </g>
    </svg>
                                 
                                 
                                 
                                 
                                 
                                 
                                    <span class="cart">
                                        {$txt.heading_cart}<br />
                                        <span class="products">
                                            {block name="layout_header_cart_basket_total"}{$TOTAL}{/block}
                                        </span>
                                    </span>
                                {/block}
                                {block name="layout_header_cart_products_count"}
                                    {if $showProductsCount == 'true'}
                                        <span class="cart-products-count{if $PRODUCTS == 0} hidden{/if}">
                                            {$PRODUCTS}
                                        </span>
                                    {else}
                                        <span class="cart-products-count{if $productsCount == 0} hidden{/if}">
                                            {$productsCount}
                                        </span>
                                    {/if}
                                {/block}
                            </a>
    
                            {block name="layout_header_cart_dropdown"}
                                {include file="get_usermod:{$tpl_path}layout_header_cart_dropdown.html"}
                            {/block}
                        </li>
                    {/block}
                </ul>
            {/block}
        </nav>
    {/block}
    Die class="gx-cart-basket svg--inject" in das SVG Tag einbinden!


    Das Thema hat mich jetzt so sehr aufgeregt, musste ich nun hier posten. :-D
    Hab das ganze ins Child Theme gepackt.

    edit: das ganze auch noch für die mobile Ansicht im layout_header_navbar_buttons.html
     
  18. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Das ist gut, aber:
    Wenn Du die ganze Datei übernimmst, musst Du die bei einem Update immer mit überprüfen, damit andere Änderungen einfließen können.
    Besser ist es eine eigene Datei im Child-Theme anzulegen und dort nur den Block einzutragen, dien man ändert.
    Dann wird der ganze Rest vom Original geholt.

    Hier sind Anleitungen für die Smarty-Blöcke und das Theme

    (Link nur für registrierte Nutzer sichtbar.)
    (Link nur für registrierte Nutzer sichtbar.)
     
  19. ivan_k

    ivan_k Mitglied

    Registriert seit:
    17. April 2020
    Beiträge:
    13
    Danke erhalten:
    0
    Hatte ich darauf hingewiesen.
    Wenn ich mal etwas mehr Zeit habe werde ich das ganze Updaten. :)
    Dann schreibe ich dazu ein Tutorial. Weil mich haben die Icons gefressen. :-D