Termékértékelés készítése weboldalba

Csentes Zoltán    2019-03-11

A termékértékelés widget segítségével lehetőséget biztosíthatunk a felhasználónak, hogy kifejezze tetszését / nem tetszését az adott termékkel vagy kontenttel kapcsolatban. A használatával visszajelzést kaphatunk a munkánkkal kapcsolatban és nem utolsó sorban a Google keresőben is extra megjelenést kaphatunk rich snippet formájában. Termékértékelést nem csak termék oldalba, hanem kontent oldalba is elhelyezhetünk. Ebben a posztban bemutatom, hogyan építs be az oldaladba egy egyszerű értékelő rendszert JS/PHP/AJAX segítségével.

A termékértékelés lényege

Mielőtt belevágunk, egy kis kedvcsinálóként essen néhány szó arról, miért jó a termékértékelés használata és milyen előnyeid lehetnek belőle.

Termékértékelés rich snippet megjelenése Google SERP-ben

(Így jelenik meg ez a cikk a SERP-ben ha használsz termékértékelést)

A termékértékelés, mint funkció valahol a nagy webáruházaknál kezdődött. Bevezetésével az áruház és a leendő vásárló kapott egy általános képet az adott termékről. Ebből mindketten látták, hogy a termékkel mennyire elégedettek a vásárlók.

Termékértékelés az Amazonon

(termékértékelés az Amazonon)

A funkciót később elkezdték használni az aukciós portálok, ár-összehasonlító oldalak is. De ők már nem terméket, hanem az eladókat értékelték.

Felhasználó értékelés a Vaterán

(felhasználó értékelés a Vaterán)

És végül kontent oldalon is megjelent az értékelés funkció. A wordpress motorhoz már egy rakás rating plugint lehet találni.Ezek jól használható designos pluginek, de mivel Wordpress-ről beszélünk a méretük relatív nagy, lassíthatják az oldalbetöltést és meg merem kockáztatni, hogy némelyik még biztonsági kockázatot is hordoz. Mivel a Google keresőben a betöltési idő nagyon nagy hangsúllyal szerepel a rangsorolási tényezők között, én úgy döntöttem, hogy egy faék egyszerű, de nagyon gyors egyedi fejlesztésű megoldást választok.


Mi kell a termékértékeléshez

Az egész widget összesen négy fájlból áll:

  • az oldalba beépítendő JS/PHP/AJAX kódrészlet
  • a CSS fájl a designhoz
  • egy PHP fájl, ami a háttérben működik
  • egy PHP fájl, ami az adatbázis kapcsolatot definiálja

A termékértékelés úgy fog működni, hogy a tartalom betöltésekor először ellenőrizzük, hogy volt-e már értékelve az oldal. Lekérjük a termékértékelések számát és átlagát. Ezt megjelenítjük a widgetben.

Ha a felhasználó még nem értékelt, akkor új értékelést tud leadni. Ha már értékelt, akkor módosítani tudja korábbi szavazatát. (természetesen itt session-ben gondolkozunk, szóval ha valaki másik böngészőt nyit, akkor simán új értékelést tud leadni.)

Az AJAX funkció abban segít, hogy értékelés leadáskor/módosításkor automatikusan frissüljenek az adatok az oldalon. A szavazatokat SQL adatbázisban fogjuk gyűjteni. Ha pedig egy oldalban már volt legalább egy értékelés, akkor elhelyezünk az oldalban egy strukturált adat kódrészletet. (erről bővebben kicsit később)


A termékértékelés beépítésének lépései

  1. SQL tábla létrehozása
  2. SQL kapcsolat beállítása
  3. Alap PHP elkészítése
  4. Design CSS
  5. Háttér PHP elkészítése
  6. AJAX kód megírása
  7. Strukturált adat beszúrása
  8. További tippek

1. SQL tábla létrehozása

Minden leadott értékelés egy post_rating nevű táblába fogunk gyűjteni.
A tábla négy oszlopból fog állni:

  • id
  • userid
  • postid
  • rating
  • timestamp

Ezzel az SQL paranccsal létre tudod hozni a táblaszerkezetet:


CREATE TABLE IF NOT EXISTS `post_rating` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `userid` int(11) NOT NULL,
  `postid` int(11) NOT NULL,
  `rating` int(2) NOT NULL,
  `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

2. SQL kapcsolat beállítása

Hozzunk létre egy config.php fájlt, amiben az adatbázis kapcsolatot fogjuk definiálni:


<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}
?>

3. Alap PHP elkészítése

A alap php kód fogja megjeleníteni nekünk a termékértékelést. Ez hívja be a szükséges CSS fájlokat és az értékelést végző JS fájlt. A kód így néz ki:


<?php include "config.php"; ?>

<!-- CSS -->
<link href="style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link href='jquery-bar-rating-master/dist/themes/fontawesome-stars.css' rel='stylesheet' type='text/css'>
 
<!-- Script -->
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-bar-rating-master/dist/jquery.barrating.min.js" type="text/javascript"></script>

<div class="content">

 <?php
 $userid = 1;
// Cross Site Script  & Code Injection Sanitization
function escape_str($input_str) {
    $return_str = str_replace( array('<',';','|','&','>',"'",'"',')','('), array('<',':','|','&','>',''','"',')','('), $input_str );
    $return_str = str_ireplace( '%3Cscript', '', $return_str );
    return $return_str;
}
 $userid=escape_str($userid);
 $postid=escape_str($_GET['postid']);
 

  // User rating
  $query = "SELECT * FROM post_rating WHERE postid=".$postid." and userid=".$userid;
  $userresult = mysqli_query($con,$query) or die(mysqli_error());
  $fetchRating = mysqli_fetch_array($userresult);
  $rating = $fetchRating['rating'];

  // get average
  $query = "SELECT ROUND(AVG(rating),1) as averageRating FROM post_rating WHERE postid=".$postid;
  $avgresult = mysqli_query($con,$query) or die(mysqli_error());
  $fetchAverage = mysqli_fetch_array($avgresult);
  $averageRating = $fetchAverage['averageRating'];

  if($averageRating <= 0){
   $averageRating = "No rating yet.";
  }
 ?>
  <div class="post">
   <h1><a href='<?php echo $link; ?>' class='link' target='_blank'><?php echo $title; ?></a></h1>
   <div class="post-text">
    <?php echo $content; ?>
   </div>
   <div class="post-action">
   <!-- Rating -->
   <select class='rating' id='rating_<?php echo $postid; ?>' data-id='rating_<?php echo $postid; ?>'>
    <option value="1" >1</option>
    <option value="2" >2</option>
    <option value="3" >3</option>
    <option value="4" >4</option>
    <option value="5" >5</option>
   </select>
   <div style='clear: both;'></div>
   Average Rating : <span id='avgrating_<?php echo $postid; ?>'><?php echo $averageRating; ?></span>

   <!-- Set rating -->
   <script type='text/javascript'>
   $(document).ready(function(){
    $('#rating_<?php echo $postid; ?>').barrating('set',<?php echo $rating; ?>);
   });
   </script>
   </div>
  </div>
 <?php
 }
 ?>

</div>

Magyarázat:

 $userid = 1;
Mindenki, aki az oldalunkra látogat, egyedi user ID-val azonosítható. A mintában az egyszerűség kedvéért a userid fixen 1-re lett beállítva, de erre te használhatsz pl $_SESSION változót.

A pluginhez szükséges összes fájlt, beleértve a jquery.barrating.min.js innen tudod letölteni.

4. Design CSS

A design-t természetesen olyanra alakítjuk amilyenre szeretnénk. A mintában ezt a CSS-t használjuk:


.content{
 border: 0px solid black;
 border-radius: 3px;
 padding: 5px;
 margin: 0 auto;
 width: 50%;
}

.post{
 border-bottom: 1px solid black;
 padding: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
}

.post:last-child{
 border: 0;
}

.post h1{
 font-weight: normal;
 font-size: 30px;
}

.post a.link{
 text-decoration: none;
 color: black;
}

.post-text{
 letter-spacing: 1px;
 font-size: 15px;
 font-family: serif;
 color: gray;
 text-align: justify;
}
.post-action{
 margin-top: 15px;
 margin-bottom: 15px;
}

.like,.unlike{
 border: 0;
 background: none;
 letter-spacing: 1px;
 color: lightseagreen;
}

.like,.unlike:hover{
 cursor: pointer;
}

5. Háttér PHP elkészítése

Készítsünk egy rating_ajax.php fájlt. Ez fogja a háttérben végezni a termékértékelést. Ellenőrzi, hogy a user adott-e már le értékelést. Ha nem, akkor beszúrja új sorba a táblába, ha pedig már adott le értékelést, akkor felülírja a korábbit. Végül lekérjük az átlagos értékelést és az eredményt JSON-ben továbbítjuk.



<?php

include "config.php";

$userid = 1; // User id

// Cross Site Script  & Code Injection Sanitization
function escape_str($input_str) {
    $return_str = str_replace( array('<',';','|','&','>',"'",'"',')','('), array('<',':','|','&','>',''','"',')','('), $input_str );
    $return_str = str_ireplace( '%3Cscript', '', $return_str );
    return $return_str;
}
 $userid=escape_str($userid);
 $postid=escape_str($_POST['postid']);
 $rating=escape_str($_POST['rating']);

 // Check entry within table
$query = "SELECT COUNT(*) AS cntpost FROM post_rating WHERE postid=".$postid." and userid=".$userid;

$result = mysqli_query($con,$query);
$fetchdata = mysqli_fetch_array($result);
$count = $fetchdata['cntpost'];

if($count == 0){
 $insertquery = "INSERT INTO post_rating(userid,postid,rating) values(".$userid.",".$postid.",".$rating.")";
 mysqli_query($con,$insertquery);
}else {
 $updatequery = "UPDATE post_rating SET rating=" . $rating . " where userid=" . $userid . " and postid=" . $postid;
 mysqli_query($con,$updatequery);
}

// get average
$query = "SELECT ROUND(AVG(rating),1) as averageRating FROM post_rating WHERE postid=".$postid;
$result = mysqli_query($con,$query) or die(mysqli_error());
$fetchAverage = mysqli_fetch_array($result);
$averageRating = $fetchAverage['averageRating'];

$return_arr = array("averageRating"=>$averageRating);

echo json_encode($return_arr);
?>

6. AJAX kód megírása

Ez a kód végzi a widget real-time frissítését. Ha leadjuk az értékelést, az átlag és a szavazatszám is frissül a háttérben.


$(function() {
 $('.rating').barrating({
  theme: 'fontawesome-stars',
  onSelect: function(value, text, event) {

   // Get element id by data-id attribute
   var el = this;
   var el_id = el.$elem.data('id');

   // rating was selected by a user
   if (typeof(event) !== 'undefined') {
 
     var split_id = el_id.split("_");
     var postid = split_id[1]; // postid

     // AJAX Request
     $.ajax({
       url: 'rating_ajax.php',
       type: 'post',
       data: {postid:postid,rating:value},
       dataType: 'json',
       success: function(data){
         // Update average
         var average = data['averageRating'];
         $('#avgrating_'+postid).text(average);
       }
     });
   }
  }
 });
});

7. Strukturált adat beszúrása

Ahogy a bevezetőben írtam, az egész termékértékelés legnagyobb előnye, hogy a Google is értelmezni, sőt a SERP-ben megjeleníteni is tudja az értékeket.

Termékértékelés rich snippet a SERP-ben

(termékértékelés a SERP-ben)

Ehhez az oldalunkban el kell helyezni egy JSON-LD kódrészletet, amiben átadhatjuk a termékértékelések átlagát, hogy mennyien értékeltek és egy maximális értékelés számot, hogy tudja a Google milyen skálán lehetett értékelni. Bővebben itt.

Egy termék értékelése például így nézhet ki:


<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Executive Anvil",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
   ],
  "brand": {
    "@type": "Thing",
    "name": "ACME"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.4",
    "ratingCount": "89"
  },
  "offers": {
    "@type": "AggregateOffer",
    "lowPrice": "119.99",
    "highPrice": "199.99",
    "priceCurrency": "USD"
  }
}
</script>

8. További tippek

Az oldal alján láthatod, hogyan működik a termékértékelés widget nálam. Bár én egy kicsit változtattam itt-ott a kódon, a lényeg ugyanaz. Van viszont néhány praktikus tanácsom a termékértékelés bevezetéséhez:

  1. Szeretném felhívni a figyelmet, hogy ez a widget nem használ cookie-t, tehát ha SESSION_ID-val azonosítod a usert, akkor simán több szavazatot is leadhat munkamenetenként. A kód persze könnyen átalakítható cookie kezelésre, de esetemben ezzel nem foglalkoztam.
  2. A biztonság kedvéért tanácsos a szavazatot leadók IP címét is rögzíteni. Ha esetleg valamelyik rossz akaród tömegesen kezdene el negatív értékeléseket leadni, akkor könnyen azonosítani tudd, majd ezeket egy kattintással törölheted is az adatbázisból, végül tilthatod az IP-t.
  3. Ha cookie-t vagy IP címet rögzítesz, akkor viszont arra figyelj, hogy csak akkor teheted, ha a felhasználó elfogadta a cookie szabályzatot. Ajánlott tehát az egész értékelés funkciót csak akkor megjeleníteni, ha van cookie jóváhagyás.
  4. Ha az eredményt szeretnéd strukturált adatokban megjeleníteni, akkor arra figyelj, hogy az aggregateRating objektumot csak akkor jelenítsd meg a JSON-LD-ben, ha van rá értékelés. Ha nem volt még értékelés, akkor nullát ne adj át, mert hibát fog jelezni a Google Strukturált adat ellenőrző eszköze.


Megosztani ér:


Mennyire volt hasznos számodra a cikk?

Értékelések száma: 5
Átlagos értékelés : 4.8

Kíváncsi vagyok a véleményedre is: