Woocommerce

FAQ

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

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 riuscire a inserire automaticamente i codici embed.

Segui questi passaggi per inserire manualmente i codici quando necessario.

Individua il modulo di ricerca #

Inizia individuando 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 webshop e trova public_html > wp-content > themes.

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

Questo ti permetterà 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 al passaggio precedente.

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

Correggi i link di ricerca #

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 webshop nel browser. Consigliamo di usare Chrome.

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

Cerca questo nel tuo editor per trovare l’elenco dei file che lo contengono:

Trova il file corrispondente su FTP.

Aggiorna le impostazioni del modulo #

Ora puoi modificare le impostazioni in modo che Clerk colleghi alla pagina corretta.

Devi modificare tre cose:

L’URL a cui vengono indirizzati i clienti, spesso trovato 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 potrebbe apparire così prima della modifica:

Dovrebbe apparire così dopo la modifica:

Ora dovresti essere reindirizzato alla pagina di ricerca durante la ricerca: www.mywebshop.com/soegeresultater?searchterm=test.

Uso dei formatter #

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

I formatter possono essere aggiunti in due modi:

Tramite my.clerk.io > Developers > Formatters, dove ogni formatter è creato come una voce separata.
Come parte della configurazione di Clerk.js, con il tracking-script aggiunto a tutte le pagine, consentendo di definire più formatter contemporaneamente.

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

Esempio di formatter #

Un esempio può essere visto qui sotto:

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

Più formatter #

Puoi scrivere qualsiasi numero di Formatter, separati da 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;
  }
}

Uso nei designs #

Dopo aver creato i tuoi Formatter, 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à desideri nei tuoi Designs.

Autenticazione HTTP #

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

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

Puoi correggere 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: Raccomandiamo 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 webshop è responsabile dell’invio di dati di prodotto, categoria e ordini a Clerk.

Tuttavia, in alcuni casi, la configurazione del server può bloccare l’import e causare un errore in Data Sync.

Qui sotto trovi un elenco degli errori più comuni e come risolverli.

401 Unauthorized #

Questo errore si verifica se il tuo webshop o ambiente di sviluppo richiede HTTP authentication per accedervi.

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

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

403 Forbidden #

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

Nella maggior parte dei casi, basta whitelistare l’indirizzo IP dell’importatore per concedere l’accesso.

L’indirizzo IP più recente si trova qui.

Inoltre, assicurati che Public Key, Private Key e Import URL siano corretti per lo store che stai usando su my.clerk.io.

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

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

La parte di autenticazione del body può essere rimossa dalla richiesta dal server del negozio.
Limite di frequenza per il server in relazione a Cloudflare.
Un redirect da www a non-www (o viceversa) nel webshop. Se il registro Data Sync mostra un errore 403 per un URL senza www, ma il sito lo usa, prova ad aggiungere www. alla Store URL nella configurazione di Clerk.io (es. usa https://www.yourdomain.com invece di https://yourdomain.com).

404 Not Found #

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

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

Non installato
Disattivato a causa di un aggiornamento
Una cache impedisce la corretta inizializzazione del link
I permalink di WooCommerce sono impostati su Post name invece di Month and name

Segui questi passaggi di debug per risolvere l’errore:

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

429 Too Many Requests #

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

Puoi risolverlo:

Impostando un valore più alto per il request limit sul tuo server.
Impostando un valore più alto per Page Size in my.clerk.io > Data > Configuration, facendo sì che l’importer faccia meno richieste ma più grandi.

Se usi Byte.nl come provider, solitamente l’errore viene restituito per via del rate limiter. In questo caso, contatta il supporto di Byte.nl e chiedi che venga whitelistato il valore User-Agent “clerk”.

500 Internal Server Error #

Questo errore indica che il server ha riscontrato un errore interno e non è stato in grado di specificare quale.

In questi casi, controlla il Server Log per identificare il processo andato in crash e il motivo.

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

Un esempio può verificarsi aggiornando sia WooCommerce che Klarna. In tal caso, il problema è dovuto al plugin ‘woocommerce-gateway-klarna’ che non si aggiorna.

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 è tipicamente temporaneo e si verifica quando il server è troppo occupato per processare la richiesta.

Riprovare più tardi.

Se il problema persiste, potrebbe indicare che il server è sovraccarico e vicino al limite massimo di capacità.

Per confermare, verifica il carico del server e valutane l’utilizzo attuale.

520 Unknown Error #

Solitamente questo errore viene restituito da Cloudflare, e spesso si verifica per un collo di bottiglia in WooCommerce causato da valori alti per Page Size.

Per risolverlo, imposta Page Size a 50 in my.clerk.io > Data > Configuration e avvia una nuova Data Sync.

522 Connection Timed Out #

Questo errore si verifica se il server è troppo occupato per rispondere, oppure 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, assicurati di whitelistare l’IP dell’importatore nella configurazione del server. L’indirizzo IP più recente si trova qui.

Invalid API response #

Questo errore di solito si verifica se il Debugging di WooCommerce è stato attivato.

Non è mai una buona idea tenerlo attivo su un ambiente live perché rallenta le pagine e può mostrare messaggi di errore nel frontend.

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

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

Questa guida lo spiega più in dettaglio:

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

Un’altra soluzione alternativa è qui:

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

Gli errori continueranno ad essere registrati anche quando Debug Mode è disattivato, ma verranno loggati su un file invece che a schermo.

Aggiorna 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 webshop.

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

Le due principali differenze di Clerk.js 2 sono:

I Designs in my.clerk.io utilizzano il linguaggio template Liquid, ma possono essere creati facilmente usando il Design Editor.
Lo script deve essere inserito immediatamente prima del tag </head> nel template del tuo webshop.

Crea i designs #

Clerk.js 2 usa un approccio diverso per i Designs, quindi devi crearne di nuovi.

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

Di seguito trovi una descrizione su come convertire i tuoi vecchi Designs in Liquid.

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 renderlo immediatamente riconoscibile come design Clerk.js 2.
Nel Design Editor, clicca qualsiasi elemento tra nome, immagine, pulsante, ecc. per modificarlo o aggiungere nuovi elementi al Design.
Clicca su Publish Design quando hai finito, poi vai a Step 2 nella guida.
Vai su Recommendations/Search > Elements e imposta il tuo Element su utilizzare il nuovo Design, poi clicca su Update Element.
Questo causerà temporaneamente la mancata visualizzazione dei Designs nel webshop finché non hai inserito Clerk.js 2 come descritto successivamente.

Conversione dei designs #

Clerk.js 2 usa il più flessibile linguaggio template Liquid, quindi è necessario convertire i Designs in tale linguaggio.

Vai su my.clerk.io > Recommendations/Search > Designs > New Design.
Seleziona Blank > Code e dai un nome. Consigliamo di aggiungere “V2” per renderlo riconoscibile.
Clicca su Create Design.
Questo ti darà un design vuoto con HTML di prodotto e CSS da utilizzare.
Torna alla panoramica dei designs e clicca su Edit Design per il tuo Design Clerk.js 1 (meglio in una nuova tab, per copiare facilmente il codice).
Copia il vecchio Design Clerk.js 1 nel nuovo Design Clerk.js 2.
- Noterai che nel nuovo non c’è il Container Code.
- È perché Liquid usa i for loop per visualizzare tutti i prodotti.
- Copia il vecchio Product HTML all’interno del for-loop, il vecchio Container Code attorno ad esso e copia anche il CSS.
Converti il Design nella sintassi di Liquid. La principale differenza è che i vecchi Designs usavano la sintassi {{ formatter attribute }} mentre in v2 è {{ product.attribute | formatter }}.
Passa tutti gli attributi al nuovo formato.
Se usi {{#if}} o {{#is}}, convertili usando {% if product.attribute %} {% else %} {% endif %}.
Elimina id="{{ $id }}" e la classe :target dal container code nella versione Clerk.js 2 poiché non sono più supportati.
Esempio di design Clerk.js 1 e la versione 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>

Clicca su Update Design per salvare le modifiche.
Vai su Recommendations/Search > Elements e cambia il blocco Element in modo che utilizzi il nuovo Design.
Clicca su Update Element. Questo causerà temporaneamente la mancata visualizzazione dei Designs nel webshop, finché non avrai completato Step 2. Scegli il nuovo Design per tutti gli Elements da aggiornare.
Infine, aggiorna il plugin seguendo questa guida.

Configurazione multilingua #

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

Se hai URL unici 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 nelle configurazioni standard è creare uno Store separato per ogni dominio su my.clerk.io.

In questo modo puoi separare prodotti, vendite, valute ecc., per tenere traccia di ciascun dominio.

Dopo aver effettuato la configurazione iniziale, clicca nell’angolo in alto a sinistra del menu laterale e poi su "+ Add new store" (ultima voce della lista a discesa, sotto gli store esistenti e il nome dell’azienda).

Nella pagina Add New Store, inserisci i dati del tuo webshop e scegli il tuo store principale dal menu Copy Elements From Existing Store, poi clicca Add Store:

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

Installa e configura #

Il supporto ufficiale a WPML è stato aggiunto all’ estensione WooCommerce Clerk, quindi se usi quella versione o una successiva, WPML dovrebbe essere supportato.

Nel pannello delle impostazioni di WooCommerce vedrai le impostazioni normalmente.

Se WPML è attivo e configurato sul tuo sito WordPress, vedrai Multi Language Scope con la lingua corrente in alto nella pagina delle impostazioni.

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

Nota che selezionare All Languages da questo menu a tendina non è consigliato quando salvi la configurazione: sarà usata solo come fallback.

Sincronizza domini #

Dopo aver esteso il plugin, puoi sincronizzare ciascuno dei tuoi Store con il loro dominio linguistico.

Avendo già installato l’estensione, puoi saltare il primo passaggio e iniziare direttamente a configurare e sincronizzare i dati.

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

Integrazione tramite shortcode #

Se usi un editor Shortcode come Elementor, il nostro classico snippet di raccomandazione potrebbe non essere visualizzato perché il product ID ha una sintassi diversa in Elementor rispetto a un normale blocco HTML.

Se usi Hook, puoi andare su Appearance -> Custom Layouts -> Insert e inserire lo shortcode sull’Hook che appartiene a Clerk (in caso, uno sviluppatore può crearli se desidera che Clerk sia un 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 le sole parentesi semplici, poi, se non funziona, con le doppie:

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

Se nemmeno questo 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 Editor, vai su Appearance > Personalization, clicca sulla pagina prodotto e poi segui questi passaggi Widget > Shopsidebar 1 > add widget > Clerk Content.

WP Bakery Builder #

Integrazione nel file Theme: aggiungere uno slider alla pagina prodotto su tutte le pagine

Vai su Appearance > Theme File Editor > WooCommerce > content-single-product.php (o in un file simile dove è definito il layout della pagina prodotto).
Inserisci il codice span nel punto desiderato del file per mostrare lo slider. Il 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 #

In WooCommerce, alcune pagine vengono create usando Visual Hooks invece di essere renderizzate da un file HTML.

Per aggiungere contenuti alle pagine create con Visual Hooks, dovrai inserire il contenuto Clerk nel file functions.php attivo del tema del webshop.

Il file functions.php si trova solitamente in:

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

Esempio pagina prodotto #

Ad esempio, per aggiungere un elemento Recommendations con l’Element @product-page-alternatives alla pagina prodotto, inserisci questo 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 aggiungere i tuoi Recommendation elements alle pagine sopra, ricordati di sostituire il codice all’interno dei tag con il codice embed fornito dagli Element Recommendations su my.clerk.io, come qui:

Il valore impostato in add_action(), cioè 5 in questo esempio, indica a WooCommerce la priorità dell’Element, il che influenza la tempistica di visualizzazione sull’Hook visivo.

Nota: Quando imposti la priorità, WooCommerce accetta solo multipli di 5.

Maggiori info sulle pagine WooCommerce che usano Visual Hooks:

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

Problemi con Powerstep #

Doppio rendering #

Se riscontri che Powerstep viene mostrato due volte, dovrai suddividere la pagina.

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

Non si visualizza #

Se Powerstep ancora non appare, potrebbe essere necessario disattivare la funzione di Cart Redirect di WooCommerce.

Per farlo, segui questi passi:

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

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