Vai al contenuto principale

Widget Integrazione Custom

Problemi Visualizzazione del Widget in Pagina Prodotto, Pagina Carrello, Check Out

Aggiornato oltre 2 settimane fa

Se si verificano problemi di visualizzazione con il widget sul proprio sito Custom, è possibile verificare quanto segue:

  • Assicurarsi di aver inserito correttamente gli script Scalapay nel tag `<head>` della pagina HTML del prodotto o del carrello. Lo script deve essere strutturato come segue:

    <script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js?version=V5"></script>.


  • Aggiungete il tag HTML di Scalapay nel modello di pagina della pagina del prodotto, del carrello e del check-out seguendo le nostre linee guida:

    Product Page Script

<!doctype html>
<html lang="en">
<head>
<title>Scalapay Suite Widget</title>
<script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js?version=V5"></script>
</head>
<body>
<div id="price-container">€ 100.00</div>
<scalapay-widget
type='product'
min='5'
max='1500'
amount-selectors='["#price-container"]'
currency-position='before'
currency-display='symbol'
locale='en'
environment='integration'
merchant-token='8KDS3SPEL' >
</scalapay-widget>
</body>
</html>


Cart Page Script

<!doctype html>
<html lang="en">
<head>
<title>Scalapay Suite Widget</title>
<script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js?version=V5"></script>
</head>
<body>
<div id="price-container">€ 100.00</div>
<scalapay-widget
type='cart'
min='5'
max='1500'
amount-selectors='["#price-container"]'
currency-position='before'
currency-display='symbol'
locale='en'
environment='integration'
merchant-token='8KDS3SPEL' >
</scalapay-widget>
</body>
</html>


Check Out Page Script

<!doctype html>
<html lang="en">
<head>
<title>Scalapay Suite Widget</title>
<script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js?version=V5"></script>
</head>
<body>
<div id="price-container">€ 100.00</div>
<scalapay-widget
type='checkout'
min='5'
max='1500'
amount-selectors='["#price-container"]'
currency-position='before'
currency-display='symbol'
locale='en'
environment='integration'
merchant-token='8KDS3SPEL' >
</scalapay-widget>
</body>
</html>

  • Verificare di aver impostato correttamente gli importi minimi e massimi nel body della configurazione del widget.

  • Durante il processo di test, il campo dell'environment deve essere valorizzato con 'integration' e il campo del merchant token deve essere valorizzato con '8KDS3SPEL'.

    In produzione, il valore dell'environment può essere lasciato vuoto e il merchant token deve essere quello nella sezione Developer del vostro Merchant Portal.

  • Verificare che il campo `amount-selectors` punti al selettore di prezzo corretto nella pagina del prodotto o del carrello. Ricordarsi di inserire il selettore nel formato corretto `[" , "]`.

Come identificare il selettore di prezzo corretto?

  1. Fare clic con il pulsante destro del mouse su un punto qualsiasi della pagina e fare clic su"Ispeziona".


  2. Ispezionare la pagina per identificare il punto in cui si desidera attivare un elemento.

3.Una volta trovato l'elemento, cercare il selettore nel codice HTML. Copiare il selettore e incollarlo nel campo amount-selectors.

Il codice potrebbe assomigliare a questo:

`div.summary.entry-summary > div > form > table > tbody > tr:nth-child(2) > td.value > div > div > div > div.woocommerce-variation-price > span > span > bdi.

Hai ricevuto la risposta alla tua domanda?