Imparate come inserire elementi di Clerk.io usando Visual Hooks in WooCommerce.
All'interno di WooCommerce, alcune pagine del sito web sono create utilizzando Visual Hooks invece di essere rese da un file HTML. Per aggiungere contenuti alle pagine create tramite Visual Hooks, è necessario inserire il contenuto di Clerk.io all'interno del file functions.php attivo del webshop.
Il file functions.php si trova solitamente nel seguente percorso:
/wp-content/themes/YOUR-THEME-NAME-child-theme/functions.php
Per esempio, per aggiungere un cursore delle raccomandazioni con il contenuto @product-page-alternatives alla tua pagina prodotto, dovresti includere il seguente codice all'interno del tag principale <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>";
}
E un altro esempio per aggiungere un cursore di raccomandazioni 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 cursori di raccomandazione alle pagine di cui sopra, ricordati di sostituire il codice all'interno dei tag <span> </span> con il codice embed fornito nel tuo Recommendations Content in my.clerk.io, come qui sotto:
Il valore impostato in add_action(), 5 in questo esempio, dice a WooCommerce la priorità del contenuto aggiunto, che a sua volta influenza quanto presto il contenuto sarà visualizzato in quel Visual Hook. Nota: quando si imposta la priorità, WooCommerce accetta solo multipli di 5.
Potete trovare maggiori informazioni sulle pagine del sito WooCommerce che utilizzano i Visual Hooks qui:
https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/
https://www.businessbloomer.com/woocommerce-visual-hook-guide-cart-page/