Woocommerce

FAQ

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

Hai problemi con l’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 di incorporamento.

Segui questi passaggi per inserire manualmente i codici quando necessario.

Individuare il modulo di ricerca #

Inizia individuando il modulo di ricerca.

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

Accedere ai file del tema #

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

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

Questo ti permette di cercare tra i file.

Aprire 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.

Cercare nei file #

Ora puoi cercare tra i file.

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

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

Inizia visualizzando il tuo negozio nel browser. Si consiglia di utilizzare Chrome.

Individua l’HTML che identifica il campo di ricerca, come searchform.

Cerca quell’identificatore nel tuo editor per trovare i file che lo contengono.

Trova il file corrispondente tramite FTP.

Aggiornare le impostazioni del modulo #

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

Devi cambiare tre cose:

  • L’URL a cui vengono indirizzati i clienti, spesso presente 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 input deve essere searchterm.

  • Il campo input nascosto con name="post_type" deve essere commentato.

Aggiorna il modulo di ricerca usando le tre modifiche indicate sopra.

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

Utilizzare i formattatori #

Clerk.js ti consente 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 ciascun formattatore viene creato come una voce separata.

  • Come parte della configurazione di Clerk.js, con lo script di tracciamento aggiunto a tutte le pagine, permettendo di definire più 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 è visibile 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 designs #

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 consente di creare qualsiasi funzionalità tu richieda nei tuoi Designs.

Autenticazione HTTP #

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

Questo bloccherà l’importatore Clerk e mostrerà un errore 401 Unauthorized nel log di sincronizzazione.

Puoi risolvere questo problema inserendo le informazioni 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 da 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 può bloccare l’importazione dall’accesso ai dati, causando un errore nella Data Sync.

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

401 Unauthorized #

Questo errore si verifica se il tuo negozio 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 server blocca l’importatore dall’accedere.

Nella maggior parte dei casi è sufficiente autorizzare l’indirizzo IP dell’importatore per dargli accesso.

L’ultimo IP può essere trovato qui.

Inoltre, assicurati che Public Key, Private Key, e Import URL siano corrette per il negozio con cui lavori su my.clerk.io.

Cosa fare se ho già autorizzato l’IP ma l’errore persiste?

Se hai già autorizzato 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.

  • Limite di richiesta per il server in relazione a Cloudflare.

  • Un redirect da www a non-www (o viceversa) sul negozio. Se il registro Data Sync mostra un errore 403 per un URL senza www, ma il sito lo utilizza, prova ad aggiungere www. nell’Store URL della tua configurazione Clerk.io. Ad esempio, usa https://www.yourdomain.com invece di https://yourdomain.com.

404 Not Found #

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

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

  • Non installato affatto

  • Disattivato a causa di un aggiornamento

  • Una cache impedisce l’inizializzazione del link

  • Permalink WooCommerce impostati su Post name invece che su Month and name

Segui questi passaggi di debug per risolvere l’errore:

  1. Assicurati di aver installato correttamente il Plugin e che sia attivato. Se hai aggiornato automaticamente il plugin di recente, WooCommerce a volte disattiva il plugin. Se è successo, vai su Plugins > Clerk e clicca su Attiva.

  2. Svuota la cache del tuo negozio prima di effettuare una nuova importazione.

  3. Se ancora non si sincronizza correttamente, apri Settings > Permalinks in WooCommerce, imposta Common Settings su Month and name, quindi clicca su Salva Modifiche.

429 Too Many Requests #

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

Puoi risolverlo in uno dei seguenti modi:

  • Impostando un limite di richieste più alto sul tuo server.

  • Impostando un Page Size più alto in my.clerk.io > Data > Configuration, facendo sì che l’importatore effettui meno richieste, ma più grandi.

Se utilizzi il provider Byte.nl, l’importatore solitamente restituisce questo errore a causa del loro rate limiter. In tal caso, contatta l’assistenza Byte.nl e chiedi di autorizzare 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 è andato in crash e perché.

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

Un esempio di tale errore 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 modificalo in:

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

503 Service Unavailable #

Questo errore di solito è temporaneo e si verifica quando il server è troppo occupato per elaborare la richiesta.

Riprova più tardi.

Se il problema persiste, potrebbe significare 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 si verifica a causa di un collo di bottiglia in WooCommerce che causa problemi con Page Size elevate.

Per risolverlo, imposta il Page Size a 50 in my.clerk.io > Data > Configuration ed esegui una nuova sincronizzazione 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.

  1. Attendi qualche minuto e prova nuovamente a sincronizzare, per vedere se il server era occupato.

  2. Se ancora non funziona, assicurati di autorizzare l’IP dell’importatore nella configurazione del server. L’ultimo IP può essere trovato qui.

Risposta API non valida #

Questo errore di solito si verifica se la modalità Debug di WooCommerce è attiva.

Non è mai una buona idea tenerla attiva su un ambiente live perché rallenta le pagine e, potenzialmente, mostra messaggi di errore nel frontend.

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

Può essere risolto disattivando il Debug in wp-config.php impostando define('WP_DEBUG', false).

Questa guida lo spiega 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 la modalità Debug non è attiva, ma saranno scritti in un file invece che visibili nel frontend.

Aggiornamento a Clerk.js 2 #

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

Rende più semplice installare Clerk su qualsiasi negozio online.

Tuttavia, poiché le due versioni funzionano in modo leggermente diverso, è necessario 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 Liquid per i template, ma possono anche essere facilmente creati con il Design Editor.

  • Lo script deve essere inserito subito prima del tag </head> nel template del negozio.

Creare i designs #

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

Puoi creare i tuoi Designs per Clerk.js 2 rifacendoli con il Design Editor, oppure convertendo i tuoi vecchi code Designs in Liquid.

Di seguito una descrizione di come convertire i vecchi code Designs in Liquid.

Opzione Design Editor #

  1. Vai su my.clerk.io > Recommendations/Search > Designs > New Design.

  2. Seleziona un tipo di design diverso da Blank e dagli un nome. Si consiglia di aggiungere “V2” per distinguere chiaramente i designs Clerk.js 2.

  3. Nel Design Editor, clicca su qualsiasi elemento esistente come nome, immagine, pulsante, ecc. per modificarlo, o aggiungi nuovi elementi al Design.

  4. Clicca su Pubblica Design quando hai terminato, e vai allo Step 2 della guida.

  5. Vai su Recommendations/Search > Elements e modifica il tuo Clerk Element per usare il nuovo Design, poi clicca su Update Element.

  6. Questo causerà temporaneamente la loro scomparsa dal negozio online, finché Clerk.js 2 non sarà inserito come descritto più avanti in questa guida.

Convertire designs #

Poiché Clerk.js 2 utilizza il linguaggio Liquid, occorre convertire i Designs in questo linguaggio.

  1. Vai su my.clerk.io > Recommendations/Search > Designs > New Design.

  2. Seleziona Blank > Code e dagli un nome. Si consiglia di aggiungere “V2” per renderlo riconoscibile come design Clerk.js 2.

  3. Clicca su Crea Design.

  4. Questo ti darà un design vuoto, con HTML prodotto e CSS che puoi usare.

  5. Torna alla panoramica dei design e clicca su Modifica Design per il Design Clerk.js 1. Consigliamo di farlo in una nuova scheda per copiare facilmente il codice.

  6. Copia il vecchio Design Clerk.js 1 nel nuovo Design Clerk.js 2.

    • Noterai che non c’è Container Code nel nuovo design.

    • Questo perché Liquid utilizza i for loop per visualizzare tutti i prodotti.

    • Copia il tuo vecchio Product HTML all’interno del for-loop, il tuo vecchio Container Code attorno e anche il CSS.

  7. Converti il Design nella sintassi Liquid. La principale differenza è che i vecchi Designs usano la sintassi {{ formatter attribute }} mentre la sintassi v2 è {{ product.attribute | formatter }}.

  8. Passa tutti i tuoi attributi al nuovo formato.

  9. Se usi istruzioni {{#if}} o {{#is}}, queste devono essere convertite. Utilizza la sintassi {% if product.attribute %} {% else %} {% endif %}.

  10. Elimina id="{{ $id }}" e la classe :target dal container code nella versione Clerk.js 2 poiché non sono più supportati.

  11. Di seguito un esempio di design Clerk.js 1 e la versione completamente convertita:

Clerk.js 1 Design #
// 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>
Clerk.js 2 Design #
<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>

  1. Clicca su Update Design per salvare le modifiche.

  2. Vai su Recommendations/Search > Elements e modifica il blocco Element per utilizzare il nuovo Design.

  3. Clicca su Update Element. Questo causerà temporaneamente la scomparsa dal tuo negozio, finché non completi lo Step 2. Scegli il nuovo Design per tutti gli Element da aggiornare.

  4. Infine, aggiorna il plugin seguendo questa guida.

Configurazione multilingua #

Quando usi WPML in WooCommerce, dovresti poter differenziare le lingue tramite URL, ad esempio:

Se disponi di URL univoci così, puoi estendere il plugin WooCommerce per supportare WPML.

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

Copiare il negozio #

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

Così separi prodotti, vendite, valute ecc. e tieni traccia di ogni dominio.

Dopo aver completato la configurazione iniziale, clicca sul lato in alto a sinistra del menu laterale e poi su "+ Add new store", l’ultima opzione della lista a discesa (di solito sotto i negozi esistenti e il nome della tua azienda).

Nella pagina Add New Store, inserisci i dettagli del negozio, seleziona il negozio principale sotto Copy Elements From Existing Store, poi clicca su Add Store.

Questo copierà Elements e Designs dal tuo Store principale. Ricorda di tradurre anche le Headlines nella lingua appropriata.

Installare e configurare #

Il supporto ufficiale per WPML è stato aggiunto all’ estensione WooCommerce Clerk, quindi usando quella versione o una più recente, WPML dovrebbe essere supportato.

Nel pannello delle impostazioni WooCommerce visualizzerai le impostazioni normalmente.

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

Per cambiare lingua, basta usare il selettore nel pannello superiore. Seleziona la lingua per la quale desideri configurare Clerk e imposta le preferenze. Ripeti questa operazione per ogni lingua.

Nota: Non è consigliato selezionare All Languages da questo menu a tendina quando salvi la configurazione, poiché servirà solo come fallback.

Sincronizzare i domini #

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

Avendo già installato l’estensione, puoi saltare il primo step e iniziare direttamente la configurazione e la sincronizzazione dei dati.

Quando la Sync è terminata, il tuo dominio è pronto e utilizzerà la stessa configurazione dello Store principale.

Integrazione tramite Shortcode #

Se utilizzi un editor di shortcode come Elementor, il nostro snippet di codice consigliato potrebbe non essere visualizzato poiché l’ID prodotto in Elementor viene sintetizzato diversamente da un blocco HTML normale.

Se utilizzi gli Hook, puoi andare su Appearance -> Custom Layouts -> Insert e inserire lo shortcode sull’Hook relativo a Clerk (uno sviluppatore può crearli per usare Clerk come Hook).

Sostituire 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 le parentesi semplici, poi, se non funziona, con le doppie parentesi:

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

Se non funziona ancora, puoi provare questi codici:

<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 quindi clicca sulla pagina prodotto e segui questi step Widget > Shopsidebar 1 > add widget > Clerk Content.

WP Bakery Builder #

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

  1. Naviga in Appearance > Theme File Editor > WooCommerce > content-single-product.php (o file simile dove è definito il layout della pagina prodotto).

  2. Inserisci lo span code nella posizione desiderata all’interno del file per mostrare lo slider. Questo 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 vengono create usando Visual Hooks invece che renderizzate da un file HTML.

Per aggiungere contenuti su pagine create tramite Visual Hooks, serve inserire il contenuto Clerk nel file functions.php del tema attivo del negozio.

Il file functions.php si trova di solito in:

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

Esempio pagina prodotto #

Per esempio, per aggiungere un elemento Recommendations con l’elemento @product-page-alternatives nella Product Page, basta inserire 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 Add-to-Cart:

// 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 utilizzare i tuoi elementi Recommendation in queste pagine, sostituisci i blocchi <span> di esempio con i codici embed dei tuoi Elements su my.clerk.io.

Il valore impostato in add_action(), 5 in questo esempio, indica WooCommerce la priorità dell’Elemento aggiunto, influenzando quindi quanto presto sarà mostrato l’Elemento in quel Visual Hook.

Nota: La priorità deve essere un multiplo di 5 per WooCommerce.

Maggiori informazioni sulle pagine WooCommerce che usano i Visual Hooks:

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

Problemi con Powerstep #

Visualizzazione doppia #

Se hai problemi dove Powerstep si mostra due volte, dovrai dividere la pagina per risolvere.

  1. Nel backend WooCommerce, vai alla pagina Powerstep che hai creato in Pagine.

  2. Scegli Shortcodes in alto a destra, poi clicca su Row / Columns.

  3. Quindi clicca “OK” nel pop-up che appare.

  4. Infine, sposta [clerk-powerstep] dentro i tag [row] [col] e [/row] [/col], quindi clicca su Save.

Non viene visualizzato #

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

Per farlo, segui questi step:

  1. Vai su WooCommerce > Settings > Products e trova Add to cart behaviour.

  2. Assicurati che entrambe le caselle siano deselezionate.

  3. 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.