RumX Widget für deine Website

Füge das RumX-Widget zu den WooCommerce-Produktseiten hinzu. Du kannst den Code für jedes Produkt einzeln einfügen oder ein PHP-Snippet für die automatische Integration verwenden.

• 1.
  Pro Produkt: In einen benutzerdefinierten HTML-Block einfügen
  Bearbeite ein Produkt, wechsle im Beschreibungseditor zur Registerkarte „Text“ und füge deinen Widget-HTML-Code ein.
• 2.
  Automatisch: Füge deinem Theme einen PHP-Schnipsel hinzu
  Füge den folgenden Code in die Datei „functions.php“ deines Themes oder in ein Code-Snippets-Plugin ein. Er liest automatisch das GTIN/EAN-Feld aus (verfügbar ab WooCommerce 9.2+) und zeigt das Widget auf jeder Produktseite an.

// Add to functions.php or a code snippets plugin
add_action('woocommerce_single_product_summary', function() {
    global $product;
    $ean = $product->get_global_unique_id(); // WooCommerce 9.2+
    if (!$ean) return;
    echo '<div class="rumx-widget" data-ean="' . esc_attr($ean) . '" data-lang="en">';
    echo '<a href="https://rumx.com/en/rums/">RumX Rum Rating</a>';
    echo '</div>';
    echo '<script src="https://rumx.com/api/widget/v1/embed.js"></script>';
}, 35);

Tip: WooCommerce 9.2+ verfügt über ein integriertes GTIN-Feld unter „Produktdaten“ → „Lagerbestand“. Bei älteren Versionen kannst du ein Plugin wie „EAN for WooCommerce“ verwenden, um EAN-Felder hinzuzufügen.

Füge das RumX-Widget mithilfe des Block-Editors zu jedem beliebigen WordPress-Beitrag oder jeder beliebigen WordPress-Seite hinzu.

• 1.
  Füge einen benutzerdefinierten HTML-Block hinzu
  Füge im WordPress-Block-Editor einen „Benutzerdefiniertes HTML“-Block hinzu und füge deinen Widget-Code ein.
• 2.
  Optional: Erstelle einen wiederverwendbaren Shortcode
  Füge diesen PHP-Schnipsel in die Datei „functions.php“ deines Themes ein, um einen [rumx_widget]-Shortcode zu erstellen, den du überall verwenden kannst.

// Add to functions.php
function rumx_widget_shortcode($atts) {
    $atts = shortcode_atts(['rxid' => '', 'ean' => '', 'lang' => 'en'], $atts);
    $id_attr = $atts['ean'] ? 'data-ean="' . esc_attr($atts['ean']) . '"'
                            : 'data-rxid="' . esc_attr($atts['rxid']) . '"';
    return '<div class="rumx-widget" ' . $id_attr . ' data-lang="' . esc_attr($atts['lang']) . '">'
         . '<a href="https://rumx.com/en/rums/">RumX Rum Rating</a></div>'
         . '<script src="https://rumx.com/api/widget/v1/embed.js"></script>';
}
add_shortcode('rumx_widget', 'rumx_widget_shortcode');

Tip: Verwende den Shortcode wie [rumx_widget rxid="313"] oder [rumx_widget ean="8024564013387"] in jedem Beitrag oder auf jeder Seite.

Das Widget funktioniert auf jeder Website – füge den HTML-Code einfach dort ein, wo es erscheinen soll.

• 1.
  Füge den Codeausschnitt in deinen HTML-Code ein
  Kopiere den oben generierten Code und füge ihn an der Stelle in den HTML-Code deiner Seite ein, an der das Widget erscheinen soll.
• 2.
  Das war's
  Das Skript wird asynchron geladen und rendert das Widget automatisch. Es ist kein Build-Schritt und keine Framework-Integration erforderlich.

SPA: Verwendest du eine Single-Page-Anwendung (React, Vue, Angular)? Das Einbettungsskript enthält einen MutationObserver, der dynamisch hinzugefügte Widget-Elemente erkennt. Füge das div einfach in das DOM ein, und es wird automatisch gerendert.