Widget RumX pour ton site

Ajoute le widget RumX aux pages de produits WooCommerce. Tu peux coller le code pour chaque produit ou utiliser un extrait de code PHP pour une intégration automatique.

• 1.
  Par produit : colle-le dans un bloc HTML personnalisé
  Modifie un produit, passe à l'onglet « Texte » dans l'éditeur de description, puis colle le code HTML de ton widget.
• 2.
  Automatique : ajoute un extrait de code PHP à ton thème
  Ajoute le code suivant dans le fichier functions.php de ton thème ou dans un plugin de snippets de code. Il lit automatiquement le champ GTIN/EAN (disponible dans WooCommerce 9.2+) et affiche le widget sur chaque page produit.

// 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: À partir de la version 9.2 de WooCommerce, un champ GTIN est intégré dans la section « Données du produit » → « Stock ». Pour les versions antérieures, tu peux utiliser un plugin comme « EAN for WooCommerce » pour ajouter des champs EAN.

Ajoute le widget RumX à n'importe quel article ou page WordPress à l'aide de l'éditeur de blocs.

• 1.
  Ajouter un bloc HTML personnalisé
  Dans l'éditeur de blocs WordPress, ajoute un bloc « HTML personnalisé » et colle ton extrait de code pour le widget.
• 2.
  Facultatif : créer un shortcode réutilisable
  Ajoute ce bout de code PHP au fichier functions.php de ton thème pour créer un shortcode [rumx_widget] que tu pourras utiliser n'importe où.

// 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: Utilise le shortcode comme [rumx_widget rxid="313"] ou [rumx_widget ean="8024564013387"] dans n'importe quel article ou page.

Le widget fonctionne sur n'importe quel site web : il suffit de coller le bout de code HTML là où tu veux qu'il s'affiche.

• 1.
  Colle le bout de code dans ton HTML
  Copie le code généré ci-dessus et colle-le dans le code HTML de ta page, à l'endroit où tu souhaites que le widget apparaisse.
• 2.
  C'est tout
  Le script se charge de manière asynchrone et affiche automatiquement le widget. Aucune étape de compilation ni intégration à un framework n'est nécessaire.

SPA: Tu utilises une application monopage (React, Vue, Angular) ? Le script d'intégration inclut un MutationObserver qui détecte les éléments de widget ajoutés dynamiquement. Il suffit d'insérer la balise div dans le DOM pour qu'elle s'affiche automatiquement.