Produktbewertungen im Layer anzeigen

Seit Pluginversion 1.7.0 exportiert das Plugin nun für jeden Artikel Informationen zu den Produktbewertungen. 

Konkret wird hier pro Artikel die Anzahl der Bewertungen und das durchschnittliche Rating exportiert.

Mit Hilfe dieser Daten lässt sich der Layer nun so anpassen, dass die Bewertungen bei der Suche mitangezeigt werden können.

Hierfür muss das Product Card Template angepasst werden. Zudem muss Custom CSS hinterlegt werden.

Das kann in jedem Layer in den Layer Settings konfiguriert werden: 

Anpassung im Product Template (unter dem Title zb):

<div class="dfd-review">    
  <%= if has_value?(@item, "reviews") do %>
    <% review_data = @item["reviews"] %>
    <%= if has_value?(review_data, "average_rating") do %>
      <% avg_rating = Float.parse(review_data["average_rating"]) |> elem(0) %>
      <% width = (avg_rating / 5.0) * 100 %>
      <div class="dfd-card-rating" title={"#{avg_rating}"}>
        <div class="dfd-rating__value" style={"width: #{width}%"}>
          <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
        </div>    
        <div class="df-rating__placeholder">                          
          <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
        </div>            
      </div>   
      <%= if has_value?(review_data, "review_count") do %>
        <span class="dfd-rating__count" title={"#{review_data["review_count"]}"}>
          (<%= review_data["review_count"] %>)
        </span>          
      <% end %>                     
    <% end %>                    
  <% end %>                    
</div> 

.dfd-card-rating {
    position: relative;
    display: inline-flex;
}

.dfd-review {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.dfd-rating__count {
    margin-left: 5px;
}

.dfd-rating__value {
    position: absolute;
    overflow: hidden;
    color: #ff9d00;
    display: inline-flex;
    z-index: 1;
}

.dfd-rating__placeholder {
    color: grey;
    display: inline-flex;
}

Tags: