Unlocking Product Reviews in Doofinder Layer: A Step‐by‐Step Guide
Did you know that you can seamlessly integrate product reviews directly into your Doofinder layer, providing your customers with valuable insights before making a purchase decision? While this modification requires some coding expertise, it can significantly enhance your user experience.
Follow these steps to make your product reviews shine:
1. Get the Index Ready:
Before diving in, ensure the following information is indexed in Doofinder: - An attribute indexing reviews (e.g., df_rating). - Optionally, another attribute for the number of reviews (e.g., 'df_count').
Example:
df_rating: 5 (for a 5-star rating)
review: 10 (indicating 10 reviews)
Note: If you use our plugin, consider using a custom data feed or API to export these attributes.
With this information in hand, we can now move forward with configuring the Doofinder layer and script.
2. Modify the Card Template:
Access the product card template in your Doofinder admin and insert the following block where you want to display the reviews:
<div class="dfd-review">
<%= if has_value?(@item, "df_rating") do %>
<div class="dfd-card-rating" title={@item["df_rating"]}>
<% width = ((Float.parse(@item["df_rating"]) |> elem(0)) / 5) * 100 %>
<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 @item["review"] do %>
<span class="dfd-rating__count" title={@item["review"]}>
(<%= @item["review"] %>)
</span>
<% end %>
<% end %>
</div>
3. Modify the CSS:
Enter the CSS configuration in your Doofinder admin and add the following rules:
.dfd-card-rating {
position: relative;
display: inline-flex;
}
.dfd-review {
display: flex;
align-self: center;
margin-top: 8px;
}
.dfd-rating__count {
margin-left: 5px;
}
.dfd-rating__value {
position: absolute;
overflow: hidden;
color: #000000;
display: inline-flex;
z-index: 9;
}
.df-rating__placeholder {
color: grey;
position: relative;
}
Have any doubts or questions? To contact our Support Team, simply log in to your Doofinder admin panel. Click on 'Help' in the top blue bar, then select 'Contact our Support Team’.
If you're already logged in, you can reach support by clicking here.
We're here to help!