Woocommerce

FAQ

Soluzioni a domande e problemi comuni quando si utilizza Clerk con WooCommerce

Stai riscontrando 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 riuscire a inserire automaticamente i codici di incorporamento.

Segui questi passaggi per inserire manualmente i codici quando necessario.

Localizza il modulo di ricerca #

Inizia localizzando il tuo modulo di ricerca.

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

Accedi ai file del tema #

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

Trascina la cartella themes sul desktop per copiarla sul computer.

Questo ti permette di cercare tra i file.

Apri nell’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 nello step precedente.

Cerca tra i file #

Ora puoi cercare tra i file.

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

Correggi i link di ricerca #

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

Inizia visualizzando il tuo negozio nel browser. Consigliamo Chrome.

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

Cerca questo termine 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 cambiare le impostazioni così che Clerk colleghi alla pagina corretta.

Ci sono tre cose da modificare:

L’URL a cui vengono indirizzati i clienti, spesso si trova nell’elemento <form>, deve corrispondere al nome della pagina che hai creato in WooCommerce. Spesso sarà "soegeresultater" o "search-results".
L’attributo "name" del campo di input deve essere searchterm.
Il campo input nascosto con name="post_type" deve essere commentato.

Un modulo di ricerca può apparire così prima della modifica:

E dovrebbe apparire così dopo la modifica:

Ora dovresti essere indirizzato alla pagina di ricerca quando effettui una ricerca: www.mywebshop.com/soegeresultater?searchterm=test.

Utilizzo dei formattatori #

Clerk.js ti permette di scrivere funzioni JavaScript personalizzate 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 tracciamento inserito su tutte le pagine, permettendo di definire molteplici formattatori contemporaneamente.

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

Esempio di formattatore #

Un esempio è riportato qui sotto:

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

Più formattatori #

Puoi scrivere qualsiasi numero di Formatters, separati da una 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 utilizzarli nei tuoi Designs con questa sintassi:

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

Questo ti permette di creare qualsiasi funzionalità nei tuoi Designs secondo le tue esigenze.

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 log di sincronizzazione.

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

In my.clerk.io > Data > Configuration, aggiorna il tuo URL di importazione così:

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 di Clerk.

Quando importi dati con il Plugin WooCommerce di Clerk, il server del tuo negozio è responsabile dell’invio dei dati di prodotti, categorie e ordini a Clerk.

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

Qui sotto trovi una lista degli errori più comuni e come risolverli.

401 Unauthorized #

Questo errore si verifica se il tuo negozio o l’ambiente di sviluppo richiede autenticazione HTTP per accedere.

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’importatore impedendogli l’accesso.

Nella maggior parte dei casi, è sufficiente inserire in whitelist l’indirizzo IP dell’importatore per consentirgli l’accesso.

L’ultimo indirizzo IP lo trovi qui.

Assicurati inoltre che la Public Key, la Private Key e la Import URL siano corrette per il negozio che stai gestendo su my.clerk.io.

Cosa fare se ho già inserito in whitelist ma si presenta ancora l’errore?

Se hai inserito in whitelist l’indirizzo IP dell’importatore ma l’errore persiste, controlla quanto segue:

La parte di autenticazione del body potrebbe essere rimossa dalla richiesta dal server del negozio.
Limiti di richiesta per il server relativi a Cloudflare.

404 Not Found #

Questo errore si verifica se l’importatore non è riuscito ad accedere al link che invia i dati dal negozio.

Nella maggior parte dei casi accade perché il plugin è:

Non installato affatto
Disattivato a seguito di un aggiornamento
Una cache impedisce l’inizializzazione corretta del link
I permalink WooCommerce sono impostati su Nome articolo invece di Mese e nome

Segui questi passaggi di debugging per correggere l’errore:

Assicurati di aver installato correttamente il Plugin e che sia attivato. Se hai aggiornato il plugin di recente, WooCommerce a volte disattiva il plugin. Se è successo, vai su Plugins > Clerk e clicca su Activate.
Svuota la cache del tuo negozio prima di tentare una nuova importazione.
Se ancora non si sincronizza correttamente, vai nel backend di WooCommerce, poi su Settings > Permalinks e imposta le Common Settings su Month and name e premi Save Changes:

429 Too Many Requests #

Questo errore si verifica se il server nega l’accesso all’importatore a causa di troppe richieste in arrivo.

Puoi risolvere sia:

Impostando un limite di richieste più alto per il tuo server.
Impostando Page Size a un valore più alto in my.clerk.io > Data > Configuration, riducendo il numero di richieste effettuate dall’importatore.

Se usi il provider Byte.nl, l’importatore solitamente restituisce questo errore a causa del rate limiter. In questo caso, contatta l’assistenza Byte.nl e chiedi di inserire in whitelist lo User-Agent dell’importatore “clerk”.

500 Internal Server Error #

Questo errore significa che il tuo server ha riscontrato un errore interno e non è stato in grado di specificare quale errore si sia verificato.

In questi casi, controlla il Server Log per identificare quale processo si è bloccato e perché.

Nella maggior parte dei casi, è semplicemente dovuto a un prodotto con un attributo non valido o a una funzione chiamata in modo errato nel negozio.

Un esempio di tale errore potrebbe verificarsi dopo aver aggiornato sia WooCommerce sia Klarna. In questo caso, il problema è causato dal plugin ‘woocommerce-gateway-klarna’ che non viene aggiornato.

Se succede, 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 è solitamente temporaneo e si verifica quando il server è troppo occupato per elaborare la richiesta.

Riprova più tardi.

Se il problema persiste, potrebbe indicare che il server è sovraccarico e vicino alla capacità massima.

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

520 Unknown Error #

Solitamente questo errore è restituito da Cloudflare, e spesso è causato da un collo di bottiglia in WooCommerce che causa problemi con Page Size elevati.

Per risolvere, imposta la Page Size a 50 in my.clerk.io > Data > Configuration ed esegui una nuova sincronizzazione.

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 qualche minuto e prova a sincronizzare di nuovo, per vedere se il server era occupato.
Se non funziona ancora, inserisci l’indirizzo IP dell’importatore in whitelist nella configurazione del server. L’ultimo IP lo trovi qui.

Risposta API non valida #

Questo errore di solito si verifica se è stata attivata la Debugging di WooCommerce.

Non è mai una buona idea tenerla attiva in produzione perché rallenta le pagine ed eventualmente mostra messaggi di errore in frontend.

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

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

Questa guida lo spiega nel dettaglio:

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

E questa guida suggerisce un’alternativa:

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

Gli errori continueranno a essere registrati anche quando Debug Mode non è attivo, ma saranno loggati in un file.

Aggiorna a Clerk.js 2 #

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

Facilita l’installazione di Clerk su qualsiasi negozio.

Tuttavia, poiché le due versioni hanno funzionamenti leggermente diversi, devi seguire questi passaggi per aggiornare correttamente.

Le due differenze principali di Clerk.js 2 sono:

I Designs in my.clerk.io utilizzano il linguaggio template Liquid, ma possono anche essere creati facilmente tramite l’editor.
Lo script deve essere inserito appena prima del tag </head> nel template del negozio.

Crea i design #

Poiché Clerk.js 2 gestisce diversamente i Designs, devi crearne di nuovi.

Puoi creare i tuoi Designs Clerk.js 2 rifacendoli nel Design Editor, oppure convertendo i tuoi vecchi Design in Liquid.

Di seguito una descrizione su come convertire i vecchi Design in Liquid.

Opzione Design Editor #

Vai su my.clerk.io > Recommendations/Search > Designs > New Design.
Seleziona un tipo di design diverso da Blank e assegna un nome. Si consiglia di aggiungere “V2” per renderlo evidente come design Clerk.js 2.
Nell’Editor del Design, clicca qualsiasi elemento esistente (nome, immagine, pulsante, ecc.) per modificarlo o aggiungine di nuovi.
Clicca su Publish Design quando hai terminato e vai a Step 2 della guida.
Vai su Recommendations/Search > Elements e imposta la Clerk Content sul tuo nuovo Design, poi clicca su Update Content.
Questo farà sì che temporaneamente i contenuti non vengano visualizzati sul tuo negozio fino all’inserimento di Clerk.js 2 come descritto più avanti.

Conversione dei design #

Dal momento che Clerk.js 2 utilizza il più flessibile linguaggio template Liquid, devi convertire i Designs in questo linguaggio.

Vai su my.clerk.io > Recommendations/Search > Designs > New Design.
Seleziona Blank > Code e scegli un nome. Si consiglia di aggiungere “V2” per renderlo evidente come design Clerk.js 2.
Clicca su Create Design.
Otterrai così un design vuoto con HTML e CSS di esempio.
Torna alla panoramica dei design e clicca su Edit 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 tuo nuovo Design Clerk.js 2.
- Noterai che nel nuovo design non c’è il Container Code.
- Questo perché Liquid usa i cicli for per mostrare tutti i prodotti.
- Copia il vecchio Product HTML dentro il for-loop, il vecchio Container Code attorno ad esso e copia anche il CSS.
Converti il design nella sintassi di Liquid. La differenza principale è che i vecchi design usavano la sintassi {{ formatter attribute }} mentre la sintassi di v2 è {{ product.attribute | formatter }}.
Controlla tutti i tuoi attributi e cambiali al nuovo formato.
Se utilizzi {{#if}} o {{#is}}, vanno convertiti anche questi. Usa la sintassi {% if product.attribute %} {% else %} {% endif %}.
Elimina id="{{ $id }}" e la classe :target dal container code nella versione Clerk.js 2 in quanto non più supportati.
Esempio di Design Clerk.js 1 e della versione 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>

<!-- This code creates the slider by its 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 Update Design per salvare le modifiche.
Vai su Recommendations/Search > Elements e cambia il blocco di contenuto con il tuo nuovo Design.
Clicca su Update Content. Questo farà sì che temporaneamente i contenuti non vengano visualizzati sul tuo negozio fino a quando non avrai completato Step 2. Scegli il nuovo Design per tutti i contenuti da aggiornare.
Infine, aggiorna il plugin seguendo questa guida.

Configurazione multilingua #

Quando usi WPML su WooCommerce, dovresti poter suddividere le lingue tramite URL, così:

Se hai URL unici come questi, puoi estendere il plugin WooCommerce per supportare WPML.

È anche accettato definire la lingua tramite il parametro lang. Per esempio:

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

Copia negozio #

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

In questo modo, puoi separare prodotti, vendite, valute ecc. tenendo traccia di ogni dominio.

Dopo aver completato la configurazione iniziale, clicca nell’angolo in alto a sinistra del menu laterale e poi clicca su "+ Add new store", ultima opzione della lista a discesa (generalmente sotto il negozio/i esistenti e il nome della tua azienda).

Nella pagina Add New Store, inserisci i dati del tuo negozio e scegli il negozio principale dal menu Copy Content From Existing Store a discesa, poi clicca su Add Store:

Questo copierà sia i Content che i Designs dal tuo negozio principale. Ricorda di tradurre anche le Headlines nella lingua appropriata.

Installa e configura #

Il supporto ufficiale per WPML è stato aggiunto all’ WooCommerce Extension di Clerk, il che significa che se usi questa versione o più recente, WPML dovrebbe essere supportato.

Nel pannello delle impostazioni WooCommerce vedrai le impostazioni come di consueto.

Se WPML è attivo e configurato sul tuo sito WordPress, vedrai Multi Language Scope con la lingua attuale nella parte superiore della pagina delle impostazioni.

Per cambiare lingua, usa semplicemente il selettore sulla barra superiore. Seleziona la lingua da configurare per Clerk e fornisci le impostazioni desiderate. Ripeti per ogni lingua.

Nota che selezionare All Languages da questo menu a tendina non è consigliato quando si salva la configurazione, poiché verranno salvate solo come fallback.

Sincronizza domini #

Dopo aver esteso il plugin, puoi sincronizzare ciascuno Store con il suo dominio di lingua.

Poiché hai già installato l’estensione, puoi saltare il primo step e iniziare direttamente a configurarla e sincronizzare i dati.

Quando la Sync è terminata, il tuo dominio è pronto e utilizza la stessa configurazione del negozio principale.

Integrazione Shortcode #

Se utilizzi un editor di shortcode come Elementor, il nostro normale snippet raccomandazione potrebbe non essere visualizzato perché l’ID del prodotto viene inserito diversamente in Elementor rispetto a un normale blocco HTML.

Se utilizzi gli Hook, puoi andare su Appearance -> Custom Layouts -> Insert lo shortcode sull’Hook che appartiene a Clerk (eventualmente uno sviluppatore può crearli per utilizzare Clerk tramite Hook).

Sostituisci il 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, poi, se non funziona, con la doppia parentesi:

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

Se questo non funziona, puoi provare 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 riesci a inserire lo shortcode o non usi alcun tipo di Editor, vai su Appearance > Personalization, quindi clicca sulla pagina prodotto, quindi segui questi step Widget > Shopsidebar 1 > add widget > Clerk Content.

WP Bakery Builder #

Integrazione File Tema: aggiungi uno slider alla pagina prodotto su tutte le pagine

Naviga su Appearance > Theme File Editor > WooCommerce > content-single-product.php (o un file simile in cui è definito il layout della pagina prodotto).
Inserisci il codice span nella posizione desiderata nel file per mostrare lo slider. Il processo è simile alle modifiche tramite accesso 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 del sito sono create utilizzando Visual Hooks invece che renderizzate da un file HTML.

Per aggiungere contenuto a pagine create tramite Visual Hook, hai bisogno di inserire i contenuti Clerk nel file functions.php del tema attivo del negozio.

Il file functions.php si trova di solito al seguente percorso:

/wp-content/themes/NOME-TEMA-CHILD/functions.php

Esempio pagina prodotto #

Per esempio, per aggiungere un elemento Recommendations con l’Element @product-page-alternatives alla pagina prodotto, inserisci il seguente codice all’interno dei tag principali <?php ?> in 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 #

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 alle pagine indicate, ricordati di sostituire il codice all’interno dei tag con il codice di incorporamento fornito nei tuoi Recommendations Elements su my.clerk.io, come qui sotto:

Il valore impostato in add_action(), 5 in questo esempio, indica a WooCommerce la priorità di visualizzazione del contenuto, determinando quindi quanto in alto verrà mostrato il contenuto tramite il Visual Hook.

Nota: la priorità accettata da WooCommerce deve essere multipla di 5.

Maggiori informazioni sulle pagine WooCommerce che usano Visual Hooks:

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

Problemi Powerstep #

Rendering doppio #

Se riscontri un problema in cui la Powerstep viene visualizzata due volte, dovrai suddividere la pagina per risolverlo.

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

Non si visualizza #

Se la Powerstep continua a non comparire, potresti dover disattivare l’opzione di reindirizzamento al carrello 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.