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.676
    Danke erhalten:
    11.392
    Danke vergeben:
    1.619
    Ist das SVG nciht an der richtigen Stelle?
     
  2. Doch, unter themes/Honeygrid/images/svgs
     
  3. 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.676
    Danke erhalten:
    11.392
    Danke vergeben:
    1.619
    Mit welchem Tool hast Du das Bild denn umgewandelt?
     
  5. 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. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.676
    Danke erhalten:
    11.392
    Danke vergeben:
    1.619
    Nimm mal bitte das "svg--inject" weg,
     
  7. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.676
    Danke erhalten:
    11.392
    Danke vergeben:
    1.619
    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.
     
  8. @barbara ,

    bei mir wird kein icon angezeigt ;-(
     
  9. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.676
    Danke erhalten:
    11.392
    Danke vergeben:
    1.619
    Hast Du wirklich Unterstriche und keine Bindestriche in Deinem Bildnamen?
    Das ist mir passiert, als ich meine If-Abfrage eingefügt habe.
     
  10. @barbara ,

    so, gerade nochmal alles von vorne gemacht und nun wird es angezeigt. War gestern schon zu spät ;-)
     
  11. @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.
     
  12. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.676
    Danke erhalten:
    11.392
    Danke vergeben:
    1.619
    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
     
  13. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.676
    Danke erhalten:
    11.392
    Danke vergeben:
    1.619
    Schreibe mal bitte diese beiden Zeilen zu dem Code oben dazu:
    Code:
    right: 5px;
    margin-top: -14px;
     
  14. 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
     
  15. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.676
    Danke erhalten:
    11.392
    Danke vergeben:
    1.619
    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.)
     
  16. 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