Woocommerce

FAQ

Soluzioni a domande e problemi comuni durante l'utilizzo di Clerk con WooCommerce

Risolvi dei problemi con la tua integrazione WooCommerce? Questa FAQ copre i problemi più comuni e le loro soluzioni, dagli errori di sincronizzazione dei dati all’installazione manuale degli elementi.

Installazione manuale degli elementi #

I temi WooCommerce spesso posizionano gli hook in posizioni non standard.

Questo significa che il plugin Clerk potrebbe non essere in grado di inserire automaticamente i codici embed.

Segui questi passaggi per inserire manualmente i codici quando necessario.

Trova il modulo di ricerca #

Inizia individuando il modulo di ricerca.

Ispeziona il tuo sito web e trova un testo unico relativo al campo di ricerca.

Accedi ai file del tema #

Apri i file FTP del tuo shop online e individua public_html > wp-content > themes.

Trascina la cartella themes sul desktop per copiarla sul tuo computer.

In questo modo puoi cercare nei file.

Apri in un editor #

Nel tuo editor di codice preferito, apri la cartella.

Ad esempio, in Sublime: Project > Add Folder to Project.

Scegli la cartella themes che hai salvato nel passaggio precedente.

Ricerca nei file #

Ora puoi effettuare ricerche nei file.

Puoi scegliere di cercare solo nei file .php, che sono il tipo standard per i file dei temi WooCommerce.

Correggi i collegamenti della ricerca #

Se hai già configurato la ricerca e creato una pagina in WooCommerce per i Risultati di Ricerca, ma il tuo campo di ricerca non si collega correttamente, segui questi passaggi.

Inizia visualizzando il tuo shop online nel browser. Consigliamo di usare Chrome.

Trova qualsiasi HTML che sembra unico per il campo di ricerca, per esempio searchform:

Cerca questo nel tuo editor per trovare un elenco di file che lo contengono:

Trova il file corrispondente su FTP.

Aggiorna le impostazioni del modulo #

Ora puoi modificare le impostazioni affinché Clerk colleghi alla pagina corretta.

Dovrai cambiare tre cose:

L’URL a cui sono collegati i clienti, spesso trovato nell’elemento <form>, deve corrispondere al nome della pagina che hai creato in WooCommerce. Questo spesso sarà "soegeresultater" oppure "search-results".
L’attributo "name" del campo input deve essere searchterm.
Il campo input nascosto con name="post_type" deve essere commentato.

Un modulo di ricerca potrebbe apparire così prima della modifica:

E dovrebbe apparire così dopo la modifica:

Ora dovresti essere collegato alla pagina di ricerca effettuando una ricerca: www.mywebshop.com/soegeresultater?searchterm=test.

Utilizzo dei formattatori #

Clerk.js ti consente di scrivere funzioni personalizzate JavaScript che aggiungono nuove funzionalità ai tuoi Designs.

I formattatori possono essere aggiunti in due modi:

Tramite my.clerk.io > Developers > Formatters, dove ogni formattatore viene creato come voce separata.
Come parte della configurazione di Clerk.js, con lo script di tracking aggiunto a tutte le pagine, consentendo di definire più formattatori contemporaneamente.

In WooCommerce, lo script di tracking si trova in: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php.

Esempio di formattatore #

Un esempio può essere visto di seguito:

Clerk('config', {
  key: 'O7UITkJIXqXibeQF9ONobiGGKYYKtbvh',
  formatters: {
    log_price: function(price) {
      console.log(price);
    }
  }
});

Più formattatori #

Puoi scrivere qualsiasi numero di Formatters, separandoli con la virgola:

formatters: {
  log_price: function(price) {
    console.log(price);
  },
  calculate_discount: function(price, special_price) {
    return price - special_price;
  },
  substring: function(text) {
    var short_string = text.substring(0, 20);
    return short_string;
  }
}

Utilizzo nei design #

Dopo aver creato i tuoi Formatters, puoi usarli nei tuoi Designs con questa sintassi:

{%raw%}{{ price | log_price }} {{ price | calculate_discount | special_price }}{%endraw%}

Questo ti permette di creare qualsiasi funzionalità tu richieda nei tuoi Designs.

Autenticazione HTTP #

L’autenticazione HTTP viene spesso utilizzata su siti di staging per evitare visitatori indesiderati.

Questo bloccherà l’importatore Clerk e mostrerà un errore 401 Unauthorized nel registro delle sincronizzazioni.

Puoi risolvere inserendo le informazioni di autenticazione nell’URL di importazione.

In my.clerk.io > Data > Configuration, aggiorna il tuo URL di importazione in questo modo:

https://USER:PASS@www.ewoksRus.com

Errori comuni di sincronizzazione #

Nota: Si consiglia di aggiornare sempre il plugin all’ultima versione per ottenere tutte le funzionalità aggiornate da Clerk.

Quando importi dati con il Plugin WooCommerce di Clerk, è il server del tuo shop online che invia i dati di prodotti, categorie e ordini a Clerk.

Tuttavia, in alcuni casi, la configurazione del server potrebbe bloccare l’importazione causando un errore in Data Sync.

Di seguito è riportato un elenco degli errori più comuni e come risolverli.

401 Unauthorized #

Questo errore si verifica se il tuo shop online o ambiente di sviluppo richiede autenticazione HTTP per accedervi.

Si risolve inserendo Username e Password come parte dell’URL di importazione:

http://username:password@woocommerce.clerk.io

403 Forbidden #

Questo errore si verifica se il tuo server blocca l’accesso all’importatore.

Nella maggior parte dei casi, è sufficiente whitelistare l’indirizzo IP dell’importatore per garantirgli l’accesso.

L’ultimo indirizzo IP può essere trovato qui.

Verifica inoltre che Public Key, Private Key e Import URL siano corretti per lo store che stai gestendo da my.clerk.io.

Cosa fare se ho già whitelistato ma si verifica ancora l’errore?

Se hai già whitelistato l’indirizzo IP dell’importatore, ma l’errore persiste, verifica quanto segue:

La parte di autenticazione del body può essere rimossa dalla richiesta dal server dello shop.
Limite di rate per il server rispetto a Cloudflare.

404 Not Found #

Questo errore si verifica se l’importatore non ha potuto accedere al link che invia i dati dal webshop.

Nella maggior parte dei casi, si verifica perché il plugin:

Non è installato
È stato disattivato dopo un aggiornamento
Una cache soggiacente impedisce l’inizializzazione del link
I permalink WooCommerce sono impostati su Nome articolo invece di Mese e nome

Segui questi passaggi di debug per correggere l’errore:

Assicurati di aver installato correttamente il Plugin e che sia attivato. Se hai aggiornato di recente il plugin in automatico, WooCommerce a volte lo disattiva. Se è successo, vai su Plugins > Clerk e clicca Attiva.
Svuota la cache del tuo shop online prima di provare una nuova importazione.
Se ancora non si sincronizza correttamente, vai nel backend WooCommerce, poi su Settings > Permalinks e cambia le Impostazioni comuni in Mese e nome e premi Salva le modifiche:

429 Too Many Requests #

Questo errore si verifica se il server nega l’accesso all’importatore per troppe richieste in ingresso.

Puoi risolverlo in due modi:

Imposta un limite di richieste più alto sul tuo server.
Imposta Page Size su un valore più alto in my.clerk.io > Data > Configuration, così l’importatore farà meno richieste ma più grandi.

Se utilizzi il provider Byte.nl, questo errore si verifica spesso a causa del rate limiter. In questo caso, contatta l’assistenza Byte.nl e chiedi loro di whitelistare lo User-Agent dell’importatore “clerk”.

500 Internal Server Error #

Questo errore significa che il tuo server ha riscontrato un errore interno senza specificare quale.

In questi casi verifica il Server Log per identificare quale processo si è arrestato e perché.

Nella maggior parte dei casi, la causa è un prodotto con un attributo invalido, oppure una funzione chiamata in modo scorretto nel shop online.

Un esempio può verificarsi aggiornando sia WooCommerce che Klarna. In questo caso, il problema è creato dal plugin ‘woocommerce-gateway-klarna’ che non viene aggiornato.

Se dovesse accadere, vai su woocommerce-gateway-klarna > includes > variables-checkout.php.

Cerca:

if ( ! is_admin() && ! empty( $klarna_country )) {

e cambialo in:

if ( ! is_admin() && ! empty( $klarna_country ) && WC()->session ) {

503 Service Unavailable #

Questo errore è tipicamente temporaneo e si verifica quando il server è troppo occupato per processare la richiesta.

Riprova più tardi.

Se il problema persiste, il server potrebbe essere sovraccarico e vicino al limite massimo della capacità.

Per confermare, controlla il carico del server e valuta l’uso attuale.

520 Unknown Error #

Di solito questo errore viene restituito da Cloudflare, e accade spesso a causa di un collo di bottiglia in WooCommerce che causa problemi con pagine di dimensioni maggiori.

Per risolvere, imposta Page Size a 50 in my.clerk.io > Data > Configuration e avvia una nuova sincronizzazione dei dati.

522 Connection Timed Out #

Questo errore di solito si verifica se il server è troppo occupato per rispondere, o se il nostro importatore non ha accesso al server.

Attendi alcuni minuti e riprova a sincronizzare, per vedere se il server era impegnato.
Se ancora non funziona, assicurati di whitelistare l’indirizzo IP dell’importatore nella configurazione del server. L’ultimo indirizzo IP può essere trovato qui.

Risposta API non valida #

Questo errore si verifica solitamente se la Modalità Debug di WooCommerce è stata attivata.

Non è raccomandato averlo attivato su un sistema live perché rallenta le pagine e può mostrare messaggi di errore nel frontend.

Il problema di sincronizzazione si verifica se WooCommerce incontra un errore durante la generazione dei dati prodotto per l’importazione.

Puoi risolvere disattivando il Debug in wp-config.php impostando define('WP_DEBUG', false).

Questa guida spiega il processo in dettaglio:

https://docs.woocommerce.com/document/woocommerce-product-search/api/debugging/

E questa guida spiega una soluzione alternativa:

https://aristath.github.io/blog/wp-hide-php-errors

Gli errori verranno comunque registrati anche quando Debug Mode non è attivo, ma verranno scritti in un file.

Aggiornamento a Clerk.js 2 #

Clerk.js 2 è una versione più veloce e flessibile della nostra libreria JavaScript.

Rende più semplice l’installazione di Clerk su qualsiasi shop online.

Tuttavia, poiché le due versioni funzionano in modo leggermente diverso, dovrai seguire questi passaggi per aggiornare con successo.

Le due principali differenze in Clerk.js 2 sono:

I Designs in my.clerk.io usano il linguaggio template Liquid, ma possono anche essere creati facilmente tramite il Design Editor.
Lo script deve essere inserito appena prima del tag </head> nel template del tuo shop online.

Crea design #

Poiché Clerk.js 2 ha un approccio diverso ai Designs, dovrai crearne di nuovi.

Puoi creare i tuoi Designs per Clerk.js 2 ridisegnandoli nel Design Editor o convertendo i tuoi vecchi code Designs in Liquid.

Di seguito vengono descritte entrambe le opzioni.

Opzione Design Editor #

Vai su my.clerk.io > Recommendations/Search > Designs > New Design.
Seleziona un tipo di design diverso da Blank e dagli un nome. Consigliamo di aggiungere “V2” per indicare che usi Clerk.js 2.
Nel Design Editor, clicca su uno degli elementi presenti (nome, immagine, bottone, ecc.) per modificarlo o aggiungi nuovi elementi al Design.
Clicca Pubblica Design quando hai terminato e vai al Passo 2 della guida.
Vai su Recommendations/Search > Elements e cambia il tuo Clerk Element scegliendo il nuovo Design, quindi clicca Update Element.
Questo farà sì che temporaneamente non compaiano sul tuo shop online finché non avrai inserito Clerk.js 2 come descritto più avanti nella guida.

Conversione dei design #

Poiché Clerk.js 2 utilizza il flessibile linguaggio template Liquid, dovrai convertire i Designs in tale linguaggio.

Vai su my.clerk.io > Recommendations/Search > Designs > New Design.
Seleziona Blank > Code e dagli un nome. Consigliamo di aggiungere “V2” per indicare che usi i design di Clerk.js 2.
Clicca Crea Design.
Otterrai un design vuoto con HTML prodotto e CSS utilizzabile.
Torna alla panoramica dei design e clicca su Modifica Design per il tuo Design Clerk.js 1. Consigliamo di farlo in una nuova scheda per copiare facilmente il codice.
Copia il vecchio Design Clerk.js 1 nel nuovo Design Clerk.js 2.
- Noterai che il nuovo design NON contiene Container Code.
- Questo perché Liquid utilizza i for loop per mostrare tutti i prodotti.
- Copia il vecchio Product HTML dentro il for-loop, il vecchio Container Code attorno, e il CSS.
Converti il Design nella sintassi di Liquid. La principale differenza è che i vecchi Designs usavano la sintassi {{ formatter attribute }}, mentre nel v2 si usa {{ product.attribute | formatter }}.
Passa in rassegna tutti gli attributi e modificali nel nuovo formato.
Se utilizzi istruzioni {{#if}} o {{#is}}, convertili con la sintassi {% if product.attribute %} {% else %} {% endif %}.
Elimina id="{{ $id }}" e la classe :target dal codice container nella versione Clerk.js 2 poiché non più supportate.
Di seguito un esempio di design Clerk.js 1 e la versione completamente convertita:

Design Clerk.js 1 #

// Product HTML
<li class="clerk-product">
    <a href="{{ url }}">
        <img src="{{ image }}" />
        <div class="clerk-product-name">{{ name }}</div>
        <div class="clerk-price-wrapper">
            {{#if list_price}}
                <div class="clerk-old-price">
                    <s>Price {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Price {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Price {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Buy Now</div>
</li>

// Container Code
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>

<!-- Questo codice crea lo slider tramite il suo ID. -->
<script type="text/javascript">
    Clerk.ui.slider("{{ id }}").init();
</script>

Design Clerk.js 2 #

<h2>{{ headline }}</h2>

<ul class="clerk-slider">
    {% for product in products %}
    <li class="clerk-product">
        <a href="{{ product.url }}">
            <img src="{{ product.image }}" />
            <div class="clerk-product-name">{{ product.name }}</div>
            <div class="clerk-price-wrapper">
                {% if product.list_price %}
                    <span class="clerk-old-price"><s>Price {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Price {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Price {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Buy Now</div>
        </a>
    </li>
    {% endfor %}
</ul>

Clicca su Aggiorna Design per salvare le modifiche.
Vai su Recommendations/Search > Elements e cambia il blocco Element scegliendo il nuovo Design.
Clicca Aggiorna Elemento. Questo farà sì che temporaneamente non compaiano sul tuo shop online finché non avrai terminato il Passo 2. Scegli il nuovo Design per tutti gli Elements che devono essere aggiornati.
Infine, aggiorna il plugin seguendo questa guida.

Configurazione multi-lingua #

Quando utilizzi WPML in WooCommerce, dovresti essere in grado di differenziare le lingue tramite URL, come qui:

Se possiedi URL distinti come questi, puoi estendere il plugin WooCommerce per supportare WPML.

Va bene anche definire la lingua tramite il parametro lang. Ad esempio:

https://awesomestore.com/?lang=en

Copia store #

Il modo più semplice per implementare Clerk su più domini in configurazioni standard è creare uno Store separato per ogni dominio in my.clerk.io.

Così puoi tenere separati prodotti, vendite, valute ecc. e monitorare ciascun dominio.

Dopo aver completato la configurazione iniziale, clicca sull’angolo in alto a sinistra del menu laterale e poi su "+ Add new store", ultima voce dell’elenco a tendina (di solito sotto gli store esistenti e il nome della tua azienda).

Nella pagina Add New Store, compila i dettagli del tuo shop online e scegli il tuo store principale dal menù Copy Elements From Existing Store, quindi clicca Add Store:

Questo copierà gli Elements e i Designs dallo store principale. Ricorda di tradurre anche le Headlines nella lingua corretta.

Installa e configura #

Il supporto ufficiale per WPML è stato aggiunto all’ estensione WooCommerce di Clerk, quindi se usi questa versione o una successiva WPML sarà supportato.

Nel pannello delle impostazioni WooCommerce visualizzerai le impostazioni come al solito.

Se WPML è attivo e configurato su WordPress, vedrai Multi Language Scope con la lingua corrente nella parte superiore della pagina delle impostazioni.

Per cambiare lingua, usa il selettore in alto. Seleziona la lingua che vuoi configurare per Clerk e inserisci le impostazioni desiderate. Ripeti per ciascuna lingua.

Nota che selezionare Tutte le Lingue da questo menu a tendina non è consigliato quando salvi la configurazione, poiché verrà usata solo come fallback.

Sincronizza i domini #

Dopo aver esteso il plugin, puoi sincronizzare ciascuno Store con il proprio dominio linguistico.

Dato che hai già installato l’estensione, puoi saltare il primo passaggio e passare direttamente alla configurazione e sincronizzazione dei dati.

Quando la Sincronizzazione è conclusa, il tuo dominio è pronto e utilizza la stessa configurazione dello Store principale.

Integrazione shortcode #

Se utilizzi un editor Shortcode come Elementor, il nostro snippet di codice raccomandato potrebbe non essere visualizzato a causa della sintassi diversa dell’ID prodotto in Elementor rispetto a un normale blocco HTML.

Se usi Hook, puoi andare su Appearance -> Custom Layouts -> Insert e inserire lo shortcode sull’Hook relativo a Clerk (un developer può creare questi Hook se desidera).

Sostituisci codice #

Per inserire il codice, sostituisci:

<span class="clerk" 
   data-template="@product-page-alternatives" 
   data-products="[<?php echo $product->get_id(); ?>]">
</span>

Con:

<span class="clerk" 
   data-template="@product-page-alternatives"
   data-products="[ [clerk_product_id] ]">
</span>

Prova prima con una sola parentesi quadra e poi, se non funziona, con doppia parentesi quadra:

<span class="clerk" 
   data-template="@category-page-popular" 
   data-category="[ [clerk_category_id] ]">
</span>

Se comunque non funziona, puoi provare con questi:

<span class="clerk" 
   data-template="@product-page-alternatives" 
   data-products="[<?php the_ID(); ?>]">
</span>

<span class="clerk" 
   data-template="@product-page-others-also-bought" 
   data-products="[<?php the_ID(); ?>]">
</span>

Inserimento manuale #

Se non puoi inserire lo shortcode o non usi alcun tipo di Editor, vai su Appearance > Personalization poi clicca sulla pagina prodotto e segui questi passaggi Widget > Shopsidebar 1 > add widget > Clerk Content.

WP Bakery Builder #

Integrazione file tema: aggiungere uno slider pagina prodotto a tutte le pagine

Vai su Appearance > Theme File Editor > WooCommerce > content-single-product.php (o un file simile dove è definito il layout della pagina prodotto).
Inserisci il codice span nella posizione desiderata del file per visualizzare lo slider. Questo processo è simile a una modifica via FTP.

<span class="clerk" 
   data-template="@product-page-alternatives" 
   data-products="[<?php the_ID(); ?>]">
</span>

<span class="clerk" 
   data-template="@product-page-others-also-bought" 
   data-products="[<?php the_ID(); ?>]">
</span>

Visual hooks #

All’interno di WooCommerce, alcune pagine vengono create tramite Visual Hooks invece di essere generate da file HTML.

Per aggiungere contenuti alle pagine create tramite Visual Hooks, dovrai inserire il contenuto Clerk all’interno del file functions.php del tema attivo.

Il file functions.php si trova solitamente al percorso:

/wp-content/themes/NOME-TEMA-TUO-child-theme/functions.php

Esempio pagina prodotto #

Ad esempio, per aggiungere un elemento Recommendations con l’Element @product-page-alternatives alla pagina prodotto, inserisci il seguente codice tra i tag principali <?php ?> del file functions.php:

// CLERK ADD PRODUCT PAGE SLIDER

add_action('woocommerce_after_single_product', 'clerk_alternatives', 5);

function clerk_alternatives() {
    $clerk_id = wc_get_product()->get_id();
    echo "<span class='clerk'
    data-template='@product-page-alternatives'
    data-products='[$clerk_id]'>
    </span>";
}

Esempio pagina carrello #

Inoltre, un altro esempio per aggiungere un elemento Recommendations alla pagina Aggiungi al Carrello:

// CLERK ADD CART SLIDER
add_action('woocommerce_after_cart_contents', 'clerk_cart_slider', 5);

function clerk_cart_slider() {
    $clerk_id = get_queried_object()->term_id;
    echo "<span class='clerk'
    data-template='@cart-others-also-bought'
    data-products='[<?php $items = WC()->cart->get_cart(); foreach( $items as $cart_item ){ $product_id = $cart_item['product_id']; echo $product_id; if ($cart_item != end($items)) {echo ',';} } ?>]'></span>";
}

Per aggiungere i tuoi elementi Recommendation sulle pagine sopra, ricorda di sostituire il codice all’interno dei tag con il codice embed fornito nei tuoi Recommendations Elements in my.clerk.io, come sotto:

Il valore impostato in add_action(), 5 in questo esempio, dice a WooCommerce la priorità dell’Element inserito, che si traduce in quanto precocemente viene mostrato quell’Element in quell’Hook Visuale.

Nota: Solo multipli di 5 sono accettati come priorità da WooCommerce.

Maggiori info sulle pagine WooCommerce che usano Visual Hooks:

https://www.businessbloomer.com/category/woocommerce-tips/visual-hook-series/

Problemi con Powerstep #

Doppia visualizzazione #

Se incontri un problema in cui il Powerstep viene visualizzato due volte, dovrai dividere la pagina per risolverlo.

Nel backend WooCommerce, vai alla pagina Powerstep creata in Pages.
Scegli Shortcodes in alto a destra e poi clicca su Row / Columns.
Clicca su “OK” nel pop-up che appare.
Sposta [clerk-powerstep] all’interno dei tag [row] [col] e [/row] [/col], quindi clicca su Save.

Non viene visualizzato #

Se il Powerstep ancora non appare, potrebbe essere necessario disattivare l’impostazione Cart Redirect di WooCommerce.

Per farlo, segui questi passaggi:

Vai su WooCommerce > Settings > Products e trova Add to cart behaviour.
Assicurati che entrambe le caselle siano deselezionate.
Clicca su Save changes in fondo alla pagina.

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.