JS Script

Story, scheda tecnica e testata nella vostra pagina prodotto con tre righe di JavaScript.

Il widget inserisce i contenuti nella vostra pagina prodotto. Si identifica con lo Shop, un nome pubblico che non è un segreto: la chiave API non va mai nel browser. Il server risponde solo alle pagine dei domini autorizzati per il vostro shop.

Installazione

<div id="cs-story"></div>
<div id="cs-specs"></div>
<script>
  window.addEventListener('csliveload', function () {
    ContentSyndicatorLive.render(
      { story: '#cs-story', fullspecs: '#cs-specs' },   // blocco: dove va
      { Shop: 'NOME-SHOP', GTIN: '8003437063541' },    // chi siete, quale prodotto
      ['IT', 'EN'],                                      // lingua + riserva
      { theme: 'white' }                                 // opzioni
    );
  });
</script>
<script src="https://api.rivastories.com/live/embed.js"></script>

Blocchi disponibili

Potete passare più blocchi nello stesso render, ognuno nel suo contenitore. "Da sapere" (i fatti chiave) compare una volta sola: nella story quando c'è, altrimenti in cima alla scheda.

Identificare il prodotto

{ Shop: 'NOME-SHOP', GTIN: '8003437063541' }          // per EAN/GTIN (consigliato)
{ Shop: 'NOME-SHOP', Brand: 'Whirlpool', MPN: '859991712210' }   // per brand + codice produttore

Alias accettati: ean, ProductCode, prod_id, vendor. Brand e MPN non distinguono maiuscole. Se brand + MPN corrisponde a più prodotti il widget non mostra nulla (meglio niente che il prodotto sbagliato): usate l'EAN.

Lingua

'IT' oppure ['IT','EN']: la prima è la lingua richiesta, le altre sono di riserva per la story. La scheda tecnica è servita nella lingua richiesta quando esiste, altrimenti nella prima disponibile.

Opzioni

Eventi

window.addEventListener('cs:rendered', function (e) {
  if (e.detail.kind === 'fullspecs' && e.detail.found) {
    document.querySelector('#scheda-del-negozio').hidden = true;   // nascondete la vostra, mostrate la nostra
  }
});

render(...) restituisce anche una Promise con [{kind, found, target}].

Se il prodotto non c'è

Il contenitore resta vuoto e cs:rendered arriva con found: false. Mai un errore visibile al visitatore. Progettate la pagina perché stia in piedi anche senza il blocco (ad esempio tenendo la vostra scheda finché la nostra non arriva).

Stile

I blocchi portano il proprio foglio di stile, con selettori limitati ai propri contenitori (.cs-specs, .story-root): non toccano il resto della pagina e il vostro CSS non li rompe. Il carattere è di sistema (San Francisco, Segoe, Helvetica), così si intona al sito ospite. La larghezza segue il contenitore; su schermi sotto i 640 px l'impaginazione passa in colonna singola.

Esempi per piattaforma

PrestaShop — templates/catalog/product.tpl

<div id="cs-story"></div>
<script>
  window.addEventListener('csliveload', function () {
    ContentSyndicatorLive.render({ story: '#cs-story' },
      { Shop: 'NOME-SHOP',
        GTIN:  '{$product.ean13|escape:'javascript'}',
        Brand: '{$product.manufacturer_name|escape:'javascript'}',
        MPN:   '{$product.mpn|escape:'javascript'}' },
      '{$language.iso_code|upper}');
  });
</script>
<script src="https://api.rivastories.com/live/embed.js"></script>

Shopify — sections/main-product.liquid o blocco "Custom Liquid"

{%- assign v = product.selected_or_first_available_variant -%}
<div id="cs-story"></div>
<script>
  window.addEventListener('csliveload', function () {
    ContentSyndicatorLive.render({ story: '#cs-story' },
      { Shop: 'NOME-SHOP', GTIN: {{ v.barcode | json }}, Brand: {{ product.vendor | json }},
        MPN: {{ product.metafields.custom.mpn | json }} },
      {{ request.locale.iso_code | upcase | json }});
  });
</script>
<script src="https://api.rivastories.com/live/embed.js"></script>

WooCommerce — functions.php del tema child

add_action('woocommerce_after_single_product_summary', function () {
    global $product;
    $gtin = method_exists($product, 'get_global_unique_id') ? $product->get_global_unique_id() : get_post_meta($product->get_id(), '_gtin', true);
    ?>
    <div id="cs-story"></div>
    <script>
      window.addEventListener('csliveload', function () {
        ContentSyndicatorLive.render({ story: '#cs-story' },
          { Shop: 'NOME-SHOP', GTIN: <?php echo json_encode($gtin); ?> }, 'IT');
      });
    </script>
    <script src="https://api.rivastories.com/live/embed.js"></script>
    <?php
}, 15);

Magento 2 — template .phtml della pagina prodotto

<?php $p = $block->getProduct(); ?>
<div id="cs-story"></div>
<script>
  window.addEventListener('csliveload', function () {
    ContentSyndicatorLive.render({ story: '#cs-story' },
      { Shop: 'NOME-SHOP', GTIN: <?= json_encode($p->getData('gtin')) ?>,
        Brand: <?= json_encode($p->getAttributeText('manufacturer')) ?>, MPN: <?= json_encode($p->getData('mpn')) ?> }, 'IT');
  });
</script>
<script src="https://api.rivastories.com/live/embed.js"></script>

Provare senza toccare il sito

Nell'area clienti, pagina Integrazione, il riquadro Prova dal vivo mostra il blocco full per un EAN con il vostro shop, esattamente come uscirebbe sul vostro sito.