Google Review Plugin

Anleitung zur Integration des Google Review Plugins in das Vision CMS.

1. CSS Dateien einfügen

Speichere die Datei unter /template/css/_system/.

.badge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: auto;
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 12px 0px;
  margin: 30px;
  box-shadow: 0px 7px 39px -7px rgba(0,0,0,0.61);
-webkit-box-shadow: 0px 7px 39px -7px rgba(0,0,0,0.61);
-moz-box-shadow: 0px 7px 39px -7px rgba(0,0,0,0.61);
}
.badge-container:hover {
 cursor: pointer;
}
.badge-google-logo {
  width: 44px;
  height: 44px;
  background-image: url('/template/images/google-logo-g.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.badge-row {
  justify-content: center;align-items: center;
}
.badge-name {
  font-size: 24px;
  margin-top: 5px;
  margin-bottom: 10px;
}
.badge-rating {
  font-weight: 700;
  line-height: normal;
  font-size: 22px;
  color: rgb(17, 17, 17);
  margin-right: 8px;
}
.badge-stars {
  font-size: 20px;
  color: #FFC107;
}
.badge-reviews-link {
  color: gray;
  text-decoration: underline;
  margin-top: 10px;
}
.badge-reviews-link:hover {
  color: rgb(0, 0, 0);
  text-decoration: none;
}

2. PHP Plugin einfügen

Speichere die Datei unter /template/plugins/.

Inhalt:

<?php
require_once __DIR__ .  '/../custom_php/functions.php';
$result = cube_query('SELECT * FROM texte_elemente WHERE id_text="' . $this->pageOptions['pageId'] . '" and typ="x" and showing="1" and lan="' . $this->pageOptions['language']['lan'] . '" ORDER BY reihenfolge');
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $name = $row['value1'];
        $text = $row['value2'];
        $apiKey = $row['value3'];
        $placeId = $row['value4'];
        $CacheTime = $row['value5'];
        $url = "https://maps.googleapis.com/maps/api/place/details/json?placeid={$placeId}&fields=name,rating,url&key={$apiKey}";
        // Pfad zur Cache-Datei
        if (!is_dir('cache/google/')) {
            mkdir('cache/google/');
        }
        $cacheFilePath = 'cache/google/' . $placeId . '.json';
        if (file_exists($cacheFilePath)) {
            $response = file_get_contents($cacheFilePath);
            $data = json_decode($response, true);

            if (isset($data['timestamp']) && $data['timestamp'] > (time() - $CacheTime)) {
                // Die Cache-Daten sind noch gültig
                // Verwenden Sie die Daten aus $data
            } else {
                // Die Cache-Daten sind abgelaufen und müssen aktualisiert werden
                $response = file_get_contents($url);
                $data = json_decode($response, true);

                if ($data['status'] == 'OK') {
                    // Hinzufügen des Zeitstempels zur Datenstruktur
                    $data['timestamp'] = time();
                    $response = json_encode($data);

                    file_put_contents($cacheFilePath, $response);
                } else {
                    handleApiError();
                    continue; // Skip to the next iteration of the loop
                }
            }
        } else {
            // Cache-Datei existiert nicht, API-Aufruf durchführen und Daten in Cache-Datei speichern
            $response = file_get_contents($url);
            $data = json_decode($response, true);

            if ($data['status'] == 'OK') {
                // Hinzufügen des Zeitstempels zur Datenstruktur
                $data['timestamp'] = time();
                $response = json_encode($data);

                file_put_contents($cacheFilePath, $response);
            } else {
                handleApiError();
                continue; // Skip to the next iteration of the loop
            }
        }
        if ($data['status'] == 'OK') {
            $place = $data['result'];
            // Verarbeiten der Platzinformationen
            $placeName = $place['name'];
            $placeRating = $place['rating'];
            $placeUrl = $place['url'];
            // Generierung der Sterne
            $ratingStars = generateStars($placeRating);
            // Ausgabe der Bewertungen im Slider
            echo "
            <a href='{$placeUrl}' target='_blank' id='place-info' class='badge-container'>
                <div class='badge-google-logo'></div>
                <h2 class='badge-name'>{$name}</h2>
                <div class='row badge-row'>
                <div class='badge-rating'><span id='place-rating'>{$placeRating}</span></div>
                <div class='badge-stars'><div id='place-stars'>{$ratingStars}</div></div>
                </div>
                <div class='badge-reviews-link'>{$text}</div>
            </a>
            ";
        } else {
            handleApiError();
        }
    }
}
?>

3. PHP functions einfügen

Füge den Inhalt dieser Datei in /template/custom_php/functions.php ein, am Ende der Datei.

/* GOOGLE REVIEW API FUNCTIONS */
function generateStars($rating)
{
    $ratingStars = '';
    $rating = round($rating);

    for ($i = 1; $i <= 5; $i++) {
        if ($i <= $rating) {
            $ratingStars .= '<i class="fas fa-star"></i>';
        } else if ($i === $rating + 0.5) {
            $ratingStars .= '<i class="fas fa-star-half-alt"></i>';
        } else {
            $ratingStars .= '<i class="far fa-star"></i>';
        }
    }

    return $ratingStars;
}

function handleApiError()
{
    // Fallback-Verhalten, wenn die API nicht antwortet
    $placeName = "Ortsname nicht verfügbar";
    $placeRating = "Bewertung nicht verfügbar";
    $placeUrl = "#";
    $ratingStars = "";

    echo "
      <a href='{$placeUrl}' target='_blank' id='place-info' class='badge-container'>
        <div class='badge-google-logo'></div>
        <h2 class='badge-name'>{$name}</h2>
        <div class='row badge-row'>
          <div class='badge-rating'><span id='place-rating'>{$placeRating}</span></div>
          <div class='badge-stars'><div id='place-stars'>{$ratingStars}</div></div>
        </div>
        <div class='badge-reviews-link'>{$text}</div>
      </a>
    ";
}

4. Elementvorlage erstellen

• Place ID: (Place ID Finder)
• API Key (Agentur77 API key im Passwort Manager)
• Gehe im Vision CMS zu Einstellungen → Konfiguration → Element Vorlagen und erstelle eine neue Vorlage mit folgenden Werten:

Element einbinden

Füge das erstellte Element an die gewünschte Stelle in einem Template ein.

5. Test und Anpassungen

1. Teste das Badge im Frontend deiner Webseite.
2. Vergiss nicht ein Google Logo in den Images Ordner zu legen und den Pfad in der CSS anzupassen.
3. Passe ggf. Design oder Funktionen an deine Anforderungen an.