kzapkzap MemberComments: 4 Received thanks: 0 Member since: January 12 edited August 3

Hallo zusammen,

ich suche mir jetzt seit 2 Tagen den Wolf... Ich hoffe ihr könnt mir den entscheidenen Tipp geben. 
Ich habe einen Vagrantserver aufgesetzt mache gerade die ersten Entwicklungsversuche eines neuen Themes.

Ich würde gerne neue/andere Icons (SVG-Dateien) einsetzen, als die bereits vorhandenen. 
Die icon.html.twig - Datei enthält einen Pfad auf die Icon-SVGs. Diese werden an direkt in den Quellcode geschrieben.
Sieht im Original so aus:
{{ source('@Storefront/../dist/assets/icon/'~ pack ~'/'~ name ~'.svg', ignore_missing = true) }}

Jetzt habe ich mir gedacht, so naiv wie ich bin, in den Pfad einfach meine neuen SVGs zu legen bzw. den Pfad in meinem Theme anzupassen und einen neuen Ordner machen.
Egal was ich mache, funktioniert nicht. Ich komme ehrlich gesagt nicht einmal darauf, wo die SVGs auf meinem Server liegen, die verwendet werden

Die Dateien liegen hier ab:

Sowohl in der kompilierten theme-Datei: 
/home/vagrant/shopware-dev/public/theme/484c0fee1058491d557aa683794b15bc/assets/icon

als auch im storefront-Ordner:
/home/vagrant/shopware-dev/public/bundles/storefront/assets/icon

als auch in meinem-theme-Ordner:
/home/vagrant/shopware-dev/public/bundles/MEINTHEMENAME/assets/icon

Egal wo ich die Icons überschreibe (habe es mit hartem Überschreiben auf dem Server versucht) werden die alten Icons angezeigt.

Hat jemand einen Tipp für mich, wo oder wie ich den Austausch hinbekomme?
Vielen Dank schonmal
Karina

 

 

 

 

Answers

  • thomthom MemberComments: 48 Received thanks: 8 Member since: April 2014

    Hi.

    Kann sein das es irgendwie mit der Vererbung noch nicht ganz hinhaut.
    Eine Themeanpassung, bzw. generell Anpassungen sollten mMn. als Plugin gelöst werden.
    Das findet alles unter /custom/plugins/DeinPlugin statt.

    Siehe hier:
    https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-themes?category=shopware-platform-dev-en/internals/plugins

    Was mich extrem verwirrt sind die Ordnerstrukturen.
    Es gibt ja das StorefrontAssets Plugin:
    https://docs.shopware.com/en/shopware-platform-dev-en/how-to/storefront-assets

    welches sich aber vom Theme (per console erstellt) unterscheidet.
    Javascripte werden zB. auch nur in der StorefrontAssets Struktur bei mir kompiliert.

    Was die Icons angeht hab ich auch mal getestet. das geht zZ. nur wenn unter:
    /platform/src/Storefront/Resources/dist/assets/icon

    ein "Set" ablegt und dieses in der icon.html.twig zugewiesen wird. Wenn ich das Set aber im Plugin ablege gehts nicht.
    Die ganze Ordner Strukturierung ist für mich grade auch sehr verwirrend. (Resources/dist,Resources/storefront/dist, public... usw.... blick da auch noch nicht wirklich durch)

     


     

     

  • kzapkzap MemberComments: 4 Received thanks: 0 Member since: January 12

    Hallo thom,

    habe es über mein theme leider nicht geschafft, die Vererbung der Icons so hinzubekommen, dass die Icons aus meinem Pluginordner gezogen werden.
    Ich habe auf meinem Vagrant-Server jetzt erstmal die Icons in diesem Pfad getauscht, das hat geklappt und mein Template nutzt jetzt die neuen Icons.

    image

    Wenn jemand herausfindet, wie ich die Icons in meinem eigenen Theme ablegen kann und diese dann genommen werden, würde ich mich freuen. 

    Viele Grüße
    Karina

  • ncnKGncnKG MemberComments: 6 Received thanks: 0 Member since: May 2016

    Hallo thom,

    habe es über mein theme leider nicht geschafft, die Vererbung der Icons so hinzubekommen, dass die Icons aus meinem Pluginordner gezogen werden.
    Ich habe auf meinem Vagrant-Server jetzt erstmal die Icons in diesem Pfad getauscht, das hat geklappt und mein Template nutzt jetzt die neuen Icons.

    image

    Wenn jemand herausfindet, wie ich die Icons in meinem eigenen Theme ablegen kann und diese dann genommen werden, würde ich mich freuen. 

    Viele Grüße
    Karina

     Hi Karina, 

    Versuche mal das-->  {% sw_icon 'SVG_NAME' %} 

    #Beispiel Code nicht getestet: 

     {% block layout_header_actions_account_widget_dropdown_button %}
                                    type="button"
                        id="accountWidget"
                        data-offcanvas-account-menu="true"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                        aria-label="{{ "account.myAccount"|trans }}">
                    {% sw_icon 'optionalSVG' %}
               
            {% endblock %}

    Mit freundlichen Grüßen
    Amin Nayerhabibi
    NCN KG

  • pclaissepclaisse MemberComments: 3 Received thanks: 3 Member since: October 24

    Falls Jemand auf das gleiche "Problem" stöst, hier einmal eine Lösung:

    1. "storefront/utilities/icon.html.twig" im eigenen Theme überladen:

    {% sw_extends '@Storefront/storefront/utilities/icon.html.twig' %}
    
    {% block utilities_icon %}
        {% set styles = [ size, color, rotation, flip, class ] %}
    
        {% if pack is not defined %}
            {% set pack = 'default' %}
        {% endif %}
    
        <span
            class="icon icon-{{ name }}{% for entry in styles %}{% if entry != "" %} icon-{{ entry }}{% endif %}{% endfor %}">
            {% if pack == 'meinpack' %}
                {{ source('@MeinTheme/../app/storefront/dist/assets/icon/meinpack/'~ name ~'.svg', ignore_missing = false) }}
            {% else %}
                {{ source('@Storefront/../app/storefront/dist/assets/icon/'~ pack ~'/'~ name ~'.svg', ignore_missing = true) }}
            {% endif %}
        </span>
    {% endblock %}
    

    2. Icons in dem entsprechenden Pfad anlegen:

    z.B.: MeinThemePlugin/src/Resources/app/storefront/dist/assets/icon/meinpack/custom_icon.svg

    3. Icon mit "Packet"-Angabe einbinden:

    {% sw_icon 'custom_icon' style { 'pack': 'meinpack' } %}

     

    Thanked by 1brettvormkopp
Sign In or Register to comment.