KQS.store to potężne narzędzie do budowy sklepu internetowego. Niestety w podstawowym motywie graficznym ocena wyświetlana jest w postaci tekstu a nie gwiazdek.
Dodatkowo przy okazji dodawania gwiazdek do ocen produktów pokażę wam jak sprytnie otagować je znacznkami danych strukturalnych.
Do dzieła!
Po pierwsze musimy wybrać jak chcemy, żeby nasze gwiazdki wyglądały. jQuery to teraz standard, a ta paczka jest lekka i bardzo łatwa w zaimplementowaniu.
Przygotowania
Zaczynamy od wejścia w Ustawienia > Konfiguracja i szukamy sekcji Dodatkowa treść w sekcji sklepu.
Tam musimy wkleić kod, który załaduje nasze gwiazdki. Zakładamy, że dodany jest w temacie graficznym jQuery. Jeśli nie to dodajemy go gdzieś w polu w taki sposób:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>Następnie dodajemy nasze gwiazdki:
<link rel="stylesheet" href="https://dobtco.github.io/starrr/dist/starrr.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"><script type="text/javascript">
$(document).ready(function(){
var prepareRatingValue = function(v) {
return parseInt(v);
};
$('.starrr-rating').each(function() {
var rating = $(this).attr('data-rating');
if(rating == 'Brak ocen') {
$(this).html(rating);
} else {
$(this).starrr({
rating: prepareRatingValue(rating),
readOnly: true,
});
}
});
});
</script>Strona produktu
Teraz przechodzimy do Szab. graficzny > Strona produktu i szukamy sekcji Ocena (brak ocen) i zamieniamy tam kod na taki:
<div class="starrr starrr-rating structured-rating" data-rating="{JEZYK_BRAK_OCEN}"></div>W polu Ocena wpisujemy taki kod:
<div class="starrr starrr-rating structured-rating" data-rating="{OCENY_SREDNIA}"></div>Tutaj od razu możemy gdzieś w polu Strona Produktu dodać shortcode {OCENA}
Jeśli chodzi o dodanie danych strukturalnych to w zależności od tego czy mamy już je dodane do produktu lub nie.
Jeśli nie ma danych strukturalnych na produkcie (pole Strona produktu):
<div id="product" itemscope itemtype="http://schema.org/Product">
...TREŚĆ KTÓRA BYŁA TAM WCZEŚNIEJ... + UŻYCIE GDZIEŚ POLA {OCENA}
</div>Dodatkowo od razu musimy wprowadzić dane strukturalne odnośnie oceny więc w polu Ocena zmieniamy kod na taki:
<div class="starrr starrr-rating structured-rating" data-rating="{OCENY_SREDNIA}">
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue" content="{OCENY_SREDNIA}" class="ratingValue"></span>
<span itemprop="reviewCount" content="{OCENY_LICZNIK}"></span>
</div>
</div>Jeśli już są dane strukturalne produktu to wystarczy tylko zmienić kod na ten, który jest powyżej.
Lista produktów
Z listą produktu sprawa jest równie banalna co dodanie gwiazdek do produktu
W pierwszej kolejności musimy znaleźć ustawienie w Ustawienia > Konfiguracja:
I włączyć powyższe ustawienie.
Teraz przechodzimy do Szab. graficzny > Katalog produktów > – elementy globalne
Wystarczy, że dodamy taki kod w wybranym miejscu w wybranym trybie(Tryb 1, Tryb 2, Tryb 3):
<span class="starrr starrr-rating structured-rating" data-rating="{OCENA}"></span>I to wszystko! Prawda, że proste?
