Howto: Anzeige Artikelbewertungen auf Startseite (Artikel-Slider)

Shopware 5 Themes & Design
1

Hi zusammen,

habe den halben Tag dafür “verschwendet” um die Artikelbewertungen in Artikelslidern auf der Startseite anzeigen zu lassen.

Da ich glaube das es doch ein paar Leute gibt, welche daran vll. interesse haben, schreib ich das kleine Howto hier nieder :wink:
Sollte dies nicht gewünscht sein, oder es schon eins geben, kann dieses hier gelöscht werden:

  1. Die Artikelslider auf der Startseite werden durch folgende tpl Seite realisiert: box-emotion.tpl

Kopiert euch diese Datei lokal auf die Festplatte (zu finden im Themes Ordner unter: Frontend/Bare/frontend/listing/product-box/.

  1. Öffnet die Datei box-emotion.tpl lokal mit einem Editor (z.B. Bluefish oder Notepad++)

  2. Sucht nun folgenden Punkt in dieser Datei:

                                 {if $srcSetRetina}{/if}
                             {if $srcSet}{/if}
                             
                         
                     {/block}
                 
             {/block}
         
     {/block}

    {/block}

    {if !$imageOnly}

         {* Product name *}
     {block name='frontend_listing_box_article_name'}
         
             {$sArticle.articleName|truncate:50|escapeHtml}
         
     {/block}

     {block name='frontend_listing_box_article_price_info'}
         

             {* Product price - Unit price *}
             {block name='frontend_listing_box_article_unit'}
                 {include file="frontend/listing/product-box/product-price-unit.tpl"}
             {/block}

             {* Product price - Default and discount price *}
             {block name='frontend_listing_box_article_price'}
                 {include file="frontend/listing/product-box/product-price.tpl"}
             {/block}

    Folgender Code muß geändert werden:

    {if !$imageOnly}

         {* Product name *}
     {block name='frontend_listing_box_article_name'}
         
             {$sArticle.articleName|truncate:50|escapeHtml}
         
     {/block}
 
     {block name='frontend_listing_box_article_price_info'}
         
 
             {* Product price - Unit price *}
             {block name='frontend_listing_box_article_unit'}
                 {include file="frontend/listing/product-box/product-price-unit.tpl"}
             {/block}
 
             {* Product price - Default and discount price *}
             {block name='frontend_listing_box_article_price'}
                 {include file="frontend/listing/product-box/product-price.tpl"}
             {/block}

    Ändern durch:

    {if !$imageOnly}

     				{block name="frontend_listing_box_article_rating"}
 				
     {if $sArticle.sVoteAverage.average}
         {include file='frontend/_includes/rating.tpl' points=$sArticle.sVoteAverage.average type="aggregated" label=false microData=false}
     {/if}
      
 	{/block}
     {* Product name *}
     {block name='frontend_listing_box_article_name'}
         
             {$sArticle.articleName|truncate:50|escapeHtml}
         
     {/block}
 			                                {block name='frontend_listing_box_article_price_info'}
         

             {* Product price - Unit price *}
             {block name='frontend_listing_box_article_unit'}
                 {include file="frontend/listing/product-box/product-price-unit.tpl"}
             {/block}

             {* Product price - Default and discount price *}
             {block name='frontend_listing_box_article_price'}
                 {include file="frontend/listing/product-box/product-price.tpl"}
             {/block}

    Als nächstes müsst ihr in eurer Custom-CSS folgendes eintragen:

    .product–box .product–title {
    margin:0rem 0rem 0.125rem !important;
    }

    #containercustra1 {
    float:none;
    margin: 0 auto;
    height: 1.5625rem;
    display:block;
    }

    Dies sollte es schon gewesen sein. Recht schwierig war die Ausrichtung für Mobile Devices. Bei meinen Tests konnte ich bisher aber keine Fehler feststellen.

    1. Dateien hochladen in euer Custom-Template:

    box-emotion.tpl: Frontend/{euerTemplateName}/frontend/listing/product-box/
    custom-css.css: Frontend/{euerTemplateName}/frontend/custom

    Nicht direkt im produktiven Betrieb ausprobieren. Am besten erstmal in einem Testsystem einpflegen.

    Gestet auf Shopware 5.2 Responsive - Template.

    Wie immer: Bin nicht haftbar für Fehler. Änderungen alle auf eigene Gefahr :slight_smile:

    Anbei ein Beispiel, wie es dann später aussieht:

2

Hallo @7lives‍,

vielen Dank für dein HowTo  Thumb-Up Ich habe gerade noch einmal die Code-Blöcke angepasst, damit die Einrückung passt.

Viele Grüße,
Stephan Pohl  Shopware

3

Gerne :wink: Hoffe hilft auch ein bissel :slight_smile: