(Solved) Eigenschaften - Bilder - Produktdetailseite

Hi Leute,

ich hoffe es kann mir jemand helfen.
Ich versuche auf der Produktdetailseite die OptionValue in Bilder zu ändern.
Ich habe mittlerweile geschafft die MediaID im Option Array auszugeben, aber wenn ich nun folgendes in die Datei schreibe:

{% for option in group.options %}      
 {% set i = ( i | default(0) ) + 1 %}
<span>{% if i > 1 %}, {% endif %}
														
{# simplify ID access #}        
{% set badgeMediaId = option.mediaId %} 

{# get access to media of product #}       
{% set badgeMedia = mediaCollection.get(badgeMediaId) %}
													 												 {{ badgeMediaId }} {{ badgeMedia }}													

{{ option.translated.name|e }} </span>
{% endfor %}

Dann gibt er mir zwar die badgeMediaId aus, aber nicht die Variable badgeMedia,

Ergo muss irgendetwas bei mediaCollection.get falsch sein.
Weiss jemand vll wo hier der Fehler sein könnte?

Danke!

Lg
Manuel

/Edit

Wenn ich das Ganze wiefolgt versuche:

{% block page_product_detail_properties_item_value %}
										
										{# initial ID array #}   
										 {% set badgeMediaIds = [] %}
										
										
										{% for option in group.options %}       
										
										{# simplify ID access #}        
										{% set badgeMediaId = option.mediaId %}        
										
										{# merge IDs to a single array #}        
										{% set badgeMediaIds = badgeMediaIds|merge([badgeMediaId]) %}    
										{% endfor %}
								
									
										
								        
										{% set mediaCollection = searchMedia(badgeMediaIds, context.context) %}
										
                                            <td class="properties-value">
                                                {% apply spaceless %}
                                                    {% for option in group.options %}      
										
													 
                                                        {% set i = ( i | default(0) ) + 1 %}
                                                        <span>{% if i > 1 %}, {% endif %}
														
													{# simplify ID access #}        
													{% set badgeMediaId = option.mediaId %} 
													
													   
													   {# get access to media of product #}       
													    {% set badgeMedia = mediaCollection.get(badgeMediaId) %}    
													
													 
													 {{ badgeMediaId }} {{ badgeMedia }}
														
														
								
								                       
										
														
														
														{{ option.translated.name|e }} </span>
                                                    {% endfor %}
                                                {% endapply %}
                                            </td>
                                        {% endblock %}

erhalte ich folgende Fehlermeldung:

Object of class Shopware\Core\Content\Media\MediaEntity could not be converted to string

// edit 2
Gelöst:

{% block page_product_detail_properties_item_value %}

									 {% set media = searchMedia([option.mediaId], context.context) %}
									
                                        <td class="properties-value">
                                            {% apply spaceless %}
                                                {% for option in group.options %}      
									
							      
									
									{% set optionMedia = media.get(option.mediaId) %}
									<img src="{{ (optionMedia.url) }}" />	
												
                                                    {% set i = ( i | default(0) ) + 1 %}
                                                    <span>{% if i > 1 %}, {% endif %}
													
										
										
													
													
							
							                       
									
													
													
													{{ option.translated.name|e }} </span>
                                                {% endfor %}
                                            {% endapply %}
                                        </td>
                                    {% endblock %}

tippe oder füge den Code hier ein

2 „Gefällt mir“

hi, ich hab gerade genau das selbe vor und habe deinen code gerade ausprobiert. er funktioniert (danke dafür)! nur leider habe ich bemerkt, dass die performance doch sehr unter der entstehenden ladezeit leidet. bei mir führt der code zu einer TTFB von ca 5(!) Sekunden. Gibts da einen Weg, wie ich das umgehen kann?

Mein adaptierter Code:

                            {% set media = searchMedia([group.mediaId], context.context) %}
                                {% for groupOption in group.getOptions %}
                                        {% apply spaceless %}
                                            
                                            {% set optionMedia = media.get(groupOption.mediaId) %}
                                            <img style="width: 35px; height: auto; "src="{{ (optionMedia.url) }}" />
                                            {{ groupOption.translated.name|e }}
                             
                                        {% endapply %}
                                    
                                {% endfor %}

Vielleicht hilft dir das ja weiter:

Please note that this function performs a query against the database and should therefore not be used within a loop.

Danke, ich hab das auch gesehen… nur wie kann ich die eigenschaften durchgehen, ohne einen loop? :face_with_raised_eyebrow:

Könntest du mal den kompletten Code aus der Template-Datei teilen?

Ich mache hier einen Check, ob die Eigenschaften mit speziellem Namen hinterlegt sind, und wenn ja, werden sie in den Tabs ausgegeben. Ziel ist es, eine Liste zu haben mit den Eigenschaftsbildern und daneben die Eigenschaftsbezeichnungen. Es funktioniert, nur haben wir dann eine TTFB von ca 5 Sekunden.

{% sw_extends '@Storefront/storefront/page/product-detail/tabs.html.twig'%}
{% block page_product_detail_tabs_inner %}
    {% block page_product_detail_tabs_navigation %}
        {% block page_product_detail_tabs_navigation_container %}

            {% for group in page.product.sortedProperties %}
                {% if group.getName == 'Wäsche und Pflege' || group.getName  == 'Zertifikat' || group.getName == 'Illustration' %}
                
                    <div class="card card-collapse">
                        <div class="card-header collapsed">
                            <a class="" data-toggle="collapse" data-target="#product-detail-{{ group.id }}" href="#prodcut-detail-{{ group.id }}" role="tab" aria-controls="description-tab-pane" aria-selected="true" aria-expanded="false">
                                <span class="card-action-icon">
                                    <span class="icon icon-arrow-head-up icon-sm">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path id="icons-default-arrow-head-up" d="m12 7.4142 10.2929 10.293c.3905.3904 1.0237.3904 1.4142 0 .3905-.3906.3905-1.0238 0-1.4143l-11-11c-.3905-.3905-1.0237-.3905-1.4142 0l-11 11c-.3905.3905-.3905 1.0237 0 1.4142.3905.3905 1.0237.3905 1.4142 0L12 7.4142z"></path></defs><use xlink:href="#icons-default-arrow-head-up" fill="#758CA3" fill-rule="evenodd"></use></svg>
                                    </span>
                                </span>
                                <span>{{ group.getName }}</span>
                            </a>
                        </div>
                        <div class="collapse" id="product-detail-{{ group.id }}" style="">
                            <div class="product-detail-description card-body">  
                                {% set media = searchMedia([group.mediaId], context.context) %}
                                {% for groupOption in group.getOptions %}
                                        {% apply spaceless %}
                                            {% set optionMedia = media.get(groupOption.mediaId) %}
                                            <img style="width: 35px; height: auto; "src="{{ (optionMedia.url) }}" />
                                            {{ groupOption.translated.name|e }}
                                        {% endapply %}
                                {% endfor %}                            
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}   
        {% endblock %}
    {% endblock %}
{% endblock %}

Moin,
du könntest mal probieren ob du die searchMedia function vor der for-Schleife in Zeile 6 ausführen kannst so wie hier: https://developer.shopware.com/docs/guides/plugins/plugins/storefront/use-media-Thumbnails

{% set sportsMediaIds = [] %}

    {% for product in searchResult %}
        {# simplify ID access #}
        {% set sportsMediaId = product.translated.customFields.custom_sports_media_id %}

        {# merge IDs to a single array #}
        {% set sportsMediaIds = sportsMediaIds|merge([sportsMediaId]) %}
    {% endfor %}

    {# do a single fetch from database #}
    {% set mediaCollection = searchMedia(sportsMediaIds, context.context) %}

Viele Grüße

danke für den tipp! ich hab das eingebaut und getestet, aber die database query scheint noch immer um die 5 sekunden zu dauern. meinen code habe ich nun so gestaltet:

{% for group in page.product.sortedProperties %}
                {% if group.getName == 'Wäsche und Pflege' || group.getName  == 'Zertifikat' || group.getName == 'Illustration' %}
                
                    <div class="card card-collapse">
                        <div class="card-header collapsed">
                            <a class="" data-toggle="collapse" data-target="#product-detail-{{ group.id }}" href="#prodcut-detail-{{ group.id }}" role="tab" aria-controls="description-tab-pane" aria-selected="true" aria-expanded="false">
                                <span class="card-action-icon">
                                    <span class="icon icon-arrow-head-up icon-sm">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path id="icons-default-arrow-head-up" d="m12 7.4142 10.2929 10.293c.3905.3904 1.0237.3904 1.4142 0 .3905-.3906.3905-1.0238 0-1.4143l-11-11c-.3905-.3905-1.0237-.3905-1.4142 0l-11 11c-.3905.3905-.3905 1.0237 0 1.4142.3905.3905 1.0237.3905 1.4142 0L12 7.4142z"></path></defs><use xlink:href="#icons-default-arrow-head-up" fill="#758CA3" fill-rule="evenodd"></use></svg>
                                    </span>
                                </span>
                                <span>{{ group.getName }}</span>
                            </a>
                        </div>
                        <div class="collapse" id="product-detail-{{ group.id }}" style="">
                            <div class="product-detail-description card-body">

                                {% set myMediaIds = [] %}
                                {% for groupOption in group.getOptions %}
                                       {# simplify ID access #}
                                        {% set myMediaId = group.mediaId %}

                                        {# merge IDs to a single array #}
                                        {% set myMediaIds = myMediaIds|merge([myMediaId]) %}
                                        
                                    
                                {% endfor %}

                                {# do a single fetch from database #}
                                {% set mediaCollection = searchMedia(myMediaIds, context.context) %}

                                {% for groupOption in group.getOptions %}
                                        {% apply spaceless %}

                                            {% set optionMedia = mediaCollection.get(groupOption.mediaId) %}
                                            <img style="width: 35px; height: auto; "src="{{ (optionMedia.url) }}" />
                                            {{ groupOption.translated.name|e }}
                             
                                        {% endapply %}
                                    
                                {% endfor %}
                            
                            </div>
                        </div>

                    </div>
                {% endif %}
            {% endfor %}

Moin!

So ganz ohne Loop geht es nicht, der Hinweis zielt nur darauf ab, das die Funktion „searchMedia“ nicht im Loop ausgeführt werden soll, da somit jedes Mal ein DB-Query ausgeführt wird. Ihr müsst die MediaIDs via Loop in ein Array schreiben und dieses Array dann an „searchMedia“ geben.

Ich hatte das in einem anderen Thread mal beispielhaft gepostet, vielleicht hilft es euch weiter:

Da Ihr anscheinend eh die Geschwindigkeit testet, wäre es cool, wenn Ihr Rückmeldung geben könntet, wie sich diese Lösung auf die Ladezeit auswirkt :slight_smile:

LG;LA

Danke! Wir haben grad deinen Code aus diesem Thread ausprobiert - Eigenschaften / Properties im Template ausgeben - #6 von littleAmused - und diese Lösung wirkt sich nciht negativ auf die Ladezeit aus! :slight_smile: Danke für die Hilfe!

1 „Gefällt mir“

hey leute. seit dem update auf shopware 6.5 geht folgender code nicht mehr: „{% for group in page.product.sortedProperties %}“
hat jemand eine ahnung wie man das nun schrieben muss, damit die daten ausgelesen werden können?