MODUL: Rezensionsaufgliederung nach vergebenen Sternen

[voodoopupp]

*NACHTRAG*
Ich frage mich gerade noch was das Folgende denn in den products_info_*.html Dateien im tlp_modified_responsive soll:

Code: [Auswählen]

{if $PRODUCTS_RATING_COUNT > 1}
...
{elseif $PRODUCTS_RATING_COUNT > 0 }
...
{/if}

Wozu dient diese Unterscheidung ?

Ich denke, damit man z.B. einfach bei mehr als 1 Bewertung einen anderen Text ausgeben kann, also z.B.

Code: [Auswählen]

{if $PRODUCTS_RATING_COUNT > 1}
5 Kundenbewertungen
{elseif $PRODUCTS_RATING_COUNT > 0 }
1 Kundenbewertung
{/if}
Grüße
Dominik

[hpzeller]

Okay. Woher hast du die Information ?

Gruß,
noRiddle

Wo das jetzt genau steht kann ich nicht sagen, mache es aber schon seit Jahren so.

Testen kannst du es z.B. in dem du in die index.php nach

Code: PHP  [Auswählen]

// create smarty elements
$smarty = new Smarty;

folgendes einfügst.

Code: PHP  [Auswählen]

$smarty->assign('TEST_VARIABLE', ' 10 ');
echo $smarty->get_template_vars('TEST_VARIABLE');

$smarty->assign('TEST_VARIABLE', ' 200 ');
echo $smarty->get_template_vars('TEST_VARIABLE');

$smarty->assign('TEST_VARIABLE', ' 3000 ');
echo $smarty->get_template_vars('TEST_VARIABLE');
exit;

Gruss
Hanspeter

[hpzeller]

Hier mal ein ganz utopisches Beispiel für halbe Sterne (Bewertungsschnitt: 3.67) mit dem Template tpl_modified_responsive und Font Awesome 5:

(Dateianhang Link)

Code: PHP  [Auswählen]

          <span class="pd_rating_icons">
            <i class="{if $PRODUCTS_AVERAGE_RATING > 1}fas fa-star{elseif ($PRODUCTS_AVERAGE_RATING > 0 && $PRODUCTS_AVERAGE_RATING < 1)}fas fa-star-half-alt{else}far fa-star{/if} full"></i>
            <i class="{if $PRODUCTS_AVERAGE_RATING > 2}fas fa-star{elseif ($PRODUCTS_AVERAGE_RATING > 1 && $PRODUCTS_AVERAGE_RATING < 2)}fas fa-star-half-alt{else}far fa-star{/if} full"></i>
            <i class="{if $PRODUCTS_AVERAGE_RATING > 3}fas fa-star{elseif ($PRODUCTS_AVERAGE_RATING > 2 && $PRODUCTS_AVERAGE_RATING < 3)}fas fa-star-half-alt{else}far fa-star{/if} full"></i>
            <i class="{if $PRODUCTS_AVERAGE_RATING > 4}fas fa-star{elseif ($PRODUCTS_AVERAGE_RATING > 3 && $PRODUCTS_AVERAGE_RATING < 4)}fas fa-star-half-alt{else}far fa-star{/if} full"></i>
            <i class="{if $PRODUCTS_AVERAGE_RATING > 5}fas fa-star{elseif ($PRODUCTS_AVERAGE_RATING > 4 && $PRODUCTS_AVERAGE_RATING < 5)}fas fa-star-half-alt{else}far fa-star{/if} full"></i>
          </span>

Lässt sich sicher noch vereinfachen. (War nur eine Spielerei.  )

Welchen Wertebereich hat $PRODUCTS_AVERAGE_RATING, 0-5? Und könnt die Variable auch genau den Wert 1, 2, 3, 4 oder 5 haben, wenn ja, müsste dann der Code nicht so aussehen?

Code: PHP  [Auswählen]

          <span class="pd_rating_icons">
            <i class="{if $PRODUCTS_AVERAGE_RATING >= 1}fas fa-star{elseif ($PRODUCTS_AVERAGE_RATING > 0 && $PRODUCTS_AVERAGE_RATING < 1)}fas fa-star-half-alt{else}far fa-star{/if} full"></i>
            <i class="{if $PRODUCTS_AVERAGE_RATING >= 2}fas fa-star{elseif ($PRODUCTS_AVERAGE_RATING > 1 && $PRODUCTS_AVERAGE_RATING < 2)}fas fa-star-half-alt{else}far fa-star{/if} full"></i>
            <i class="{if $PRODUCTS_AVERAGE_RATING >= 3}fas fa-star{elseif ($PRODUCTS_AVERAGE_RATING > 2 && $PRODUCTS_AVERAGE_RATING < 3)}fas fa-star-half-alt{else}far fa-star{/if} full"></i>
            <i class="{if $PRODUCTS_AVERAGE_RATING >= 4}fas fa-star{elseif ($PRODUCTS_AVERAGE_RATING > 3 && $PRODUCTS_AVERAGE_RATING < 4)}fas fa-star-half-alt{else}far fa-star{/if} full"></i>
            <i class="{if $PRODUCTS_AVERAGE_RATING == 5}fas fa-star{elseif ($PRODUCTS_AVERAGE_RATING > 4 && $PRODUCTS_AVERAGE_RATING < 5)}fas fa-star-half-alt{else}far fa-star{/if} full"></i>
          </span>

Gruss
Hanspeter

[awids]

Mittlerweile wird der Wert sowohl auf Ganze als auch auf Halbe gerundet. Vorher war es einfach nur der Durchschnitt mit einem zweistelligen Dezimalwert.

Das der spielerisch zusammengewürfelte Code einen Fehler hatte, habe ich letztlich auch gemerkt. Dein Code (mit größer und gleich) ist der Richtige. 

[Tante Uschi]

@ Hanspeter

fa-star-half-alt steht wohl nur in der Fontawesome Pro zur Verfügung, die normale Version nutzt den light-star und dieser wird mit fa-star-half aufgerufen, allerdings sieht das ziemlich dämlich aus, da dieser Stern keinen Rand hat, ich hab mal das Ganze umgebaut mit png's:

Code: PHP  [Auswählen]

{*<!-- Produkt Bewertungen Sterne -->*}
{if $PRODUCTS_RATING_COUNT}
<div>
        {if $PRODUCTS_RATING_COUNT > 1}
                                                        <div class="pd_inforow small" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
                                                                <strong>{#info_reviews#}&nbsp;({$PRODUCTS_RATING_COUNT})</strong>&nbsp;
                                                                <span class="rating_stars">
{if $PRODUCTS_AVERAGE_RATING >= 1}<img src="{$tpl_path}img/new_stars_1.png" alt="Bewertung" />{elseif ($PRODUCTS_AVERAGE_RATING > 0 && $PRODUCTS_AVERAGE_RATING < 1)}<img src="{$tpl_path}img/new_stars_0_5.png" alt="Bewertung" />{else}<img src="{$tpl_path}img/new_stars_0.png" alt="Bewertung" />{/if}
{if $PRODUCTS_AVERAGE_RATING >= 2}<img src="{$tpl_path}img/new_stars_1.png" alt="Bewertung" />{elseif ($PRODUCTS_AVERAGE_RATING > 1 && $PRODUCTS_AVERAGE_RATING < 2)}<img src="{$tpl_path}img/new_stars_0_5.png" alt="Bewertung" />{else}<img src="{$tpl_path}img/new_stars_0.png" alt="Bewertung" />{/if}
{if $PRODUCTS_AVERAGE_RATING >= 3}<img src="{$tpl_path}img/new_stars_1.png" alt="Bewertung" />{elseif ($PRODUCTS_AVERAGE_RATING > 2 && $PRODUCTS_AVERAGE_RATING < 3)}<img src="{$tpl_path}img/new_stars_0_5.png" alt="Bewertung" />{else}<img src="{$tpl_path}img/new_stars_0.png" alt="Bewertung" />{/if}
{if $PRODUCTS_AVERAGE_RATING >= 4}<img src="{$tpl_path}img/new_stars_1.png" alt="Bewertung" />{elseif ($PRODUCTS_AVERAGE_RATING > 3 && $PRODUCTS_AVERAGE_RATING < 4)}<img src="{$tpl_path}img/new_stars_0_5.png" alt="Bewertung" />{else}<img src="{$tpl_path}img/new_stars_0.png" alt="Bewertung" />{/if}
{if $PRODUCTS_AVERAGE_RATING == 5}<img src="{$tpl_path}img/new_stars_1.png" alt="Bewertung" />{elseif ($PRODUCTS_AVERAGE_RATING > 4 && $PRODUCTS_AVERAGE_RATING < 5)}<img src="{$tpl_path}img/new_stars_0_5.png" alt="Bewertung" />{else}<img src="{$tpl_path}img/new_stars_0.png" alt="Bewertung" />{/if}
</span>                                                 {* Beginn: Bewertungssterne awids *}  
                                                                {$PRODUCTS_AVERAGE_RATING}
                                                                {if $BREAKDOWN != ''}{$BREAKDOWN}{/if}
                                                                {* Ende: Bewertungssterne awids *}
                                                                <meta itemprop="ratingValue" content="{$PRODUCTS_AVERAGE_RATING}" />
                                                                <meta itemprop="bestRating" content="5" />
                                                                <meta itemprop="ratingCount" content="{$PRODUCTS_RATING_COUNT}" />
                                                        </div>
                {elseif $PRODUCTS_RATING_COUNT > 0 }
                                                        <div class="pd_inforow small" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
                                                                <strong>{#info_review#}&nbsp;({$PRODUCTS_RATING_COUNT})</strong>&nbsp;
                                                                <span class="rating_stars">
{if $PRODUCTS_AVERAGE_RATING >= 1}<img src="{$tpl_path}img/new_stars_1.png" alt="Bewertung" />{elseif ($PRODUCTS_AVERAGE_RATING > 0 && $PRODUCTS_AVERAGE_RATING < 1)}<img src="{$tpl_path}img/new_stars_0_5.png" alt="Bewertung" />{else}<img src="{$tpl_path}img/new_stars_0.png" alt="Bewertung" />{/if}
{if $PRODUCTS_AVERAGE_RATING >= 2}<img src="{$tpl_path}img/new_stars_1.png" alt="Bewertung" />{elseif ($PRODUCTS_AVERAGE_RATING > 1 && $PRODUCTS_AVERAGE_RATING < 2)}<img src="{$tpl_path}img/new_stars_0_5.png" alt="Bewertung" />{else}<img src="{$tpl_path}img/new_stars_0.png" alt="Bewertung" />{/if}
{if $PRODUCTS_AVERAGE_RATING >= 3}<img src="{$tpl_path}img/new_stars_1.png" alt="Bewertung" />{elseif ($PRODUCTS_AVERAGE_RATING > 2 && $PRODUCTS_AVERAGE_RATING < 3)}<img src="{$tpl_path}img/new_stars_0_5.png" alt="Bewertung" />{else}<img src="{$tpl_path}img/new_stars_0.png" alt="Bewertung" />{/if}
{if $PRODUCTS_AVERAGE_RATING >= 4}<img src="{$tpl_path}img/new_stars_1.png" alt="Bewertung" />{elseif ($PRODUCTS_AVERAGE_RATING > 3 && $PRODUCTS_AVERAGE_RATING < 4)}<img src="{$tpl_path}img/new_stars_0_5.png" alt="Bewertung" />{else}<img src="{$tpl_path}img/new_stars_0.png" alt="Bewertung" />{/if}
{if $PRODUCTS_AVERAGE_RATING == 5}<img src="{$tpl_path}img/new_stars_1.png" alt="Bewertung" />{elseif ($PRODUCTS_AVERAGE_RATING > 4 && $PRODUCTS_AVERAGE_RATING < 5)}<img src="{$tpl_path}img/new_stars_0_5.png" alt="Bewertung" />{else}<img src="{$tpl_path}img/new_stars_0.png" alt="Bewertung" />{/if}
</span>                                                 {* Beginn: Bewertungssterne awids *}  
                                                                {$PRODUCTS_AVERAGE_RATING}
                                                                {if $BREAKDOWN != ''}{$BREAKDOWN}{/if}
                                                                {* Ende: Bewertungssterne awids *}
                                                                <meta itemprop="ratingValue" content="{$PRODUCTS_AVERAGE_RATING}" />
                                                                <meta itemprop="bestRating" content="5" />
                                                                <meta itemprop="ratingCount" content="{$PRODUCTS_RATING_COUNT}" />
                                                        </div>
                           {/if}
</div>
{/if}
{*<!-- Produkt Bewertungen Sterne -->*}

dann sieht das etwas schöner aus, zwar sind es dann mehr Bildchen die geladen werden, aber das ist ok für mich.

Gruß

[noRiddle (revilonetz)]

Im aktuellen im Download-Paket enthaltenen tpl_modified_responsive steht .fa-star-half-alt zur Verfügung.

Da wir lediglich halbe Sterne haben würde ich die Logik im Template übrigens folgendermaßen machen (für das genannte tpl_modified_responsive) :
(nach den Rundungsregeln ab .5 aufrunden, sonst ab)

Code: PHP  [Auswählen]

          <span class="pd_rating_icons">
            <i class="fas fa-star{if $PRODUCTS_AVERAGE_RATING >= 0.5} full{elseif $PRODUCTS_AVERAGE_RATING <= 0.5}-half-alt full{/if}"></i>
            <i class="fas fa-star{if $PRODUCTS_AVERAGE_RATING >= 1.5} full{elseif $PRODUCTS_AVERAGE_RATING > 1 && $PRODUCTS_AVERAGE_RATING <= 1.5}-half-alt full{/if}"></i>
            <i class="fas fa-star{if $PRODUCTS_AVERAGE_RATING >= 2.5} full{elseif $PRODUCTS_AVERAGE_RATING > 2 && $PRODUCTS_AVERAGE_RATING <= 2.5}-half-alt full{/if}"></i>
            <i class="fas fa-star{if $PRODUCTS_AVERAGE_RATING >= 3.5} full{elseif $PRODUCTS_AVERAGE_RATING > 3 && $PRODUCTS_AVERAGE_RATING <= 3.5}-half-alt full{/if}"></i>
            <i class="fas fa-star{if $PRODUCTS_AVERAGE_RATING >= 4.5} full{elseif $PRODUCTS_AVERAGE_RATING > 4 && $PRODUCTS_AVERAGE_RATING <= 4.5}-half-alt full{/if}"></i>
          </span>
          ({$PRODUCTS_RATING_COUNT}) &#216; {$PRODUCTS_AVERAGE_RATING}

*EDIT* Die blöden Code tags machen aus &#216; das &#38;#216;. Soll aber &#216; bzw. &Oslash; für das Durchschnittzeichen sein. *END_EDIT*

Dabei wird dann der Durchschnitt noch als Dezimalzahl angezeigt.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Gruß,
noRiddle

[Tante Uschi]

@noRiddle

ahh deswegen, ich hab das Bootstrap3 von Karl und da gibt es .fa-star-half-alt leider nicht.

Mein Fehler

[noRiddle (revilonetz)]

Doch gibt es, zumindest in Version bootstrap4_mit_ajax_menue-modified_2.0.5.x-20200107, aber auch in älteren Versionen.

Gruß,
noRiddle

[hpzeller]

@ Tante Uschi

Hier mal ein alternatives Beispiel zu Fontawesome oder einem  anderen Webfont bzw. zu diskreten Bildern,
mit Icons von hier -> https://material.io/resources/icons/ .

Code: XML  [Auswählen]

<style>
  #avg-stars {ldelim}
    width: 75px;
    height: 18px;
    margin: 0;
    padding: 0;
    /* border: 1px dotted black; */
  {rdelim}
</style>
<div id="avg-stars">
<svg viewBox="0 0 105 105" enable-background="new 0 0 105 105" xml:space="preserve">
  <defs>
    <style>
    .d1 {ldelim}
      fill: orange;
    {rdelim}  
    .d2 {ldelim}
      fill: rgba(247, 202, 24, 1);
    {rdelim}
    </style>
    <symbol id="icon-1">
      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>    
    </symbol>
    <symbol id="icon-2">
      <path d="M22,9.24l-7.19-0.62L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27L18.18,21l-1.63-7.03L22,9.24z M12,15.4V6.1 l1.71,4.04l4.38,0.38l-3.32,2.88l1,4.28L12,15.4z"/>  
    </symbol>
    <symbol id="icon-3">
      <path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
    </symbol>
  </defs>
  <use xlink:href="#icon-{if $PRODUCTS_AVERAGE_RATING <= 0}3{elseif $PRODUCTS_AVERAGE_RATING < 1}2{else}1{/if}" class="d2" transform="translate(0 0) scale(1)"/>
  <use xlink:href="#icon-{if $PRODUCTS_AVERAGE_RATING <= 1}3{elseif $PRODUCTS_AVERAGE_RATING < 2}2{else}1{/if}" class="d2" transform="translate(20 0) scale(1)"/>
  <use xlink:href="#icon-{if $PRODUCTS_AVERAGE_RATING <= 2}3{elseif $PRODUCTS_AVERAGE_RATING < 3}2{else}1{/if}" class="d2" transform="translate(40 0) scale(1)"/>
  <use xlink:href="#icon-{if $PRODUCTS_AVERAGE_RATING <= 3}3{elseif $PRODUCTS_AVERAGE_RATING < 4}2{else}1{/if}" class="d2" transform="translate(60 0) scale(1)"/>
  <use xlink:href="#icon-{if $PRODUCTS_AVERAGE_RATING <= 4}3{elseif $PRODUCTS_AVERAGE_RATING < 5}2{else}1{/if}" class="d2" transform="translate(80 0) scale(1)"/>  
</svg>
</div>

[ Für Gäste sind keine Dateianhänge sichtbar ]

Gruss
Hanspeter

[Tante Uschi]

@ Hanspeter,

vielen Dank!, das ist natürlich sehr viel besser, auf die Idee bin ich gar nicht gekommen.
Gruß

[Karl1]

Hallo awids,
Respekt, da hast du dir viel Arbeit gemacht.

Ich hab mal versucht, eine CSS-Lösung für die Sterne zu finden, die für alle Templates brauchbar ist und prozentual arbeitet.
Das Ganze sieht dann so aus.
[ Für Gäste sind keine Dateianhänge sichtbar ]

Du hast dein komplettes Dropdown ohne größere If-Abfragen in der Produkt-Klassenerweiterung eingebaut.
Bedeutet, dass dein kompletter Code bei jedem Produktaufruf durchlaufen wird.
Dies passiert auch in der Listingansicht, was zu Performanceeinbußen führt.
Ich würde empfehlen die Berechnungsdaten beim Produktaufruf abzugreifen (Sterne können mit nur einer Codezeile in das Listing eingebaut werden) und das Dropdown erst in Produkt-Info-Ansicht zusammenzusetzen.

Alle Dateien die zu ändern wären bzw. eine Neue habe ich beigefügt.

Gruß Karl

P.S.: Solltest du das Dropdown auch in der Listingansicht haben wollen würde ich eine Ajax-Lösung vorschlagen.

[awids]

Hallo Karl,

danke für deine Vorschläge.

Was hier irgendwie (allgemein, besonders auf den letzten Seiten dieses Threads) übersehen wurde, ist die Tatsache, dass mein DropDown bzw. das Breakdown allgemein nur die bereits vorhandenen (von modified gestellten) Sterne ergänzt und mein Modul mit diesen nichts zu schaffen hat. Ich hätte mir daher gewünscht, dass hierfür ein eigenes Thema eröffnet wird, auch wenn es interessant ist, dass ein neues Modul gleich eine komplette Reformation des Review-Ratings auslöst.

Ich habe mir offen gelassen, ob ich über das Modul auch Sterne ins Listing streuen will (dafür habe ich nämlich eigentlich ein weiteres Modul, welches mich erst zu dem hier vorliegenden Werk inspiriert hat), darum habe ich den Code (bisher) nicht auf FILENAME_PRODUCT_INFO begrenzt.

Auch, wenn deine Vorschläge alle sehr sinnig und schlüssig erscheinen, ist es am Ende dann nicht mehr mein Modul, weswegen ich meinen Support hier dann auch einstelle, wenn 2 verschiedene Versionen am Start sind.

LG awids

[Karl1]

Hallo awids,
meine Überlegungen zu den Sternen bringe ich hier nur ein, weil du selbst ein Beispiel mit den Halbsternen aufgezeigt hast .
Die Sterne waren auch der Grund den Code genauer anzusehen.
Ebenso liegt es mir fern, hier eine zweite Version an den Start zu bringen, deshalb habe ich auch nur Änderungsvorschläge (die du nutzen kannst oder auch nicht) und nicht ein komplettes Modul gepostet.

Sollte ich dich verärgert haben, dann war das auf keinen Fall meine Absicht!

Gruß Karl

[awids]

Hallo Karl,

nein, ich bin nicht verärgert. Für Vorschläge bin ich immer offen, ebenso für Kritik, wenn sie angebracht ist.

Als ich mein - offensichtlich nicht durchdachtes und daher fehlerhaftes - Beispiel gepostet habe, wusste ich auch noch nicht, dass es letztlich in diesem Thema nur noch darum geht und nicht mehr um das vorliegende Modul (welches wie gesagt lediglich eine Ergänzung zum allgemeinen Standard darstellt).

Hättest du nun aber wirklich ein vollständiges alternatives Paket hier hochgeladen, hätte ich meinen Support einstellen müssen. Das ist ein Stress, den ich mir wirklich nicht antun möchte. (Du kennst doch den Spagat zwischen 2 Bootstrap-Templates und hast selbst schon mitgeteilt, dass du in Sachen bootstrap3 nachvollziehbarerweise nur noch das Nötigste supporten willst. Und daher hab ich lieber gleich mitgeteilt, wo ich meine Grenze ziehe. ^^)

Ich werde mir deine Vorschläge auf jeden Fall nochmal in Ruhe anschauen und vielleicht auch etwas in eine neue Version einfließen lassen. Vielen Dank dafür.

LG awids

[noRiddle (revilonetz)]

Naja, daß es in modified lediglich ganze Sterne als Durchschnitt gibt ergab sich doch ganz natürlich in diesem Thread. Genauso wie die Bewertungen im Popup.
Ich finde das jetzt nicht so schlimm, daß das hier zur Sprache kam und dann natürlich auch von mehreren Seiten ergänzt und kommentiert wurde.
Ich denke ich werde dazu ein Ticket aufmachen und dort kann ja jeder noch seine Ergänzungen machen.
Ein Ticket deshalb, weil mit meiner kleinen geposteten Erweiterung die nötige Query zweimal gemacht wird.
Here you go: Ticket #1764

@all
Meine Erweiterung von hier im Thread, die dann von awids korrigiert wurde, ist übrigens so aufwändig unnötig.
Es geht viel einfacher, nämlich schlicht so:

Code: PHP  [Auswählen]

<?php
/**************************************************
* file: recalc_avg_rating.php
* path /includes/extra/modules/product_info_end/
* use: recalculate average rating for product
*
* (c) 02-2020 noRiddle
**************************************************/

$info_smarty->assign('PRODUCTS_AVERAGE_RATING', $product->getReviewsAverage('', 2));
?>
 

So, awids, jetzt habe ich deinen Thread völlig zugespamt  .

Gruß,
noRiddle