Je développe des sites WooCommerce avec GeneratePress et GenerateBlocks. GeneratePress permet un entre-deux très intéressant entre les thèmes basés sur les blocs et les thèmes classiques (en anglais). La solution est stable et robuste, embarque un ensemble complet de hooks et permet de construire des thèmes WordPress très légers.
Afficher des données dynamiques avec le bloc « Query »
Pour afficher des produits sur une page directement avec l’éditeur Gutenberg, j’utilise le bloc GB (Generateblocks) Query.
Ce bloc fonctionne basiquement comme le bloc de boucle de requête natif, mais sous stéroïdes : il a beaucoup plus de possibilités de personnalisation pour aller chercher et afficher des données plus finement.
Je personnalise le bloc pour aller chercher les types de publication « produits ».
Afficher la donnée avec un « Dynamic Tag »
Configurer le dynamic tag sur un bloc « Texte »
Dans le modèle de publication affiché, je pose un bloc GB Texte et je sélectionne une donnée dynamique sous la forme d’un Dynamic Tag comme contenu de ce bloc : je vais récupérer et afficher l’ID du produit.
La partie du Dynamic Tag products-query-attributes:true défini une option qui va me permettre de filtrer l’affichage de cette donnée, je me sers de l’ID récupéré pour afficher les informations que je souhaite.
Filtrer l’affiche de la donnée pour afficher le prix du produit
En récupérant l’ID du produit, on peut ensuite aller chercher et afficher le prix de celui-ci. Dans cet exemple, j’y applique directement les taxes associées. Je formate également l’affichage en HTML et je renvoie le résultat.
/* -----------------------------------------------------------------------------------------------
DISPLAY PRODUCT PRICE & TAXES WITH GENERATEBLOCKS DYNAMIC TAG
--------------------------------------------------------------------------------------------------- */
add_filter('generateblocks_dynamic_tag_output', function($output, $options) {
if (!isset($options['products-query-attributes']) || !is_numeric($output)) {
return $output;
}
$product_id = esc_html($output);
$product = wc_get_product($product_id);
if (!$product) {
return $output;
}
$price_html = wc_price(wc_get_price_including_tax($product));
$html_output = '<span class="price">';
$html_output .= $price_html . ' ';
$html_output .= '<small class="woocommerce-price-suffix">TTC</small>';
$html_output .= '</span>';
return $html_output;
}, 10, 2);Langage du code : PHP (php)On peut adapter le code pour afficher d’autres données produit comme le statut du stock ou un attribut personnalisé comme les tailles lorsque la boutique vend des pièces de vêtements.
/* -----------------------------------------------------------------------------------------------
DISPLAY PRODUCT PRICE WITH TAXES, STOCK AND CUSTOM ATTRIBUTE WITH GENERATEBLOCKS DYNAMIC TAG
--------------------------------------------------------------------------------------------------- */
add_filter('generateblocks_dynamic_tag_output', function($output, $options) {
if (!isset($options['products-query-attributes']) || !is_numeric($output)) {
return $output;
}
$product_id = esc_html($output);
$product = wc_get_product($product_id);
if (!$product) {
return $output;
}
$price_html = wc_price(wc_get_price_including_tax($product));
$html_output = '<span class="price">';
$html_output .= $price_html . ' ';
//$html_output .= '<small class="woocommerce-price-suffix">TTC</small>';
$html_output .= '</span>';
// Get the size attribute
$taille = $product->get_attribute('pa_taille');
if (!empty($taille)) {
$sizes = array_map('trim', explode(',', $taille));
$size_count = count($sizes);
$html_output .= '<div class="product-size">';
if ($size_count === 1) {
$html_output .= '<span class="size-value">' . esc_html($sizes[0]) . '</span>';
} elseif ($size_count === 2) {
$html_output .= '<span class="size-value">' . esc_html($sizes[0]) . ' ' . __('à') . ' ' . esc_html($sizes[1]) . '</span>';
} else {
$html_output .= '<span class="size-value">' . esc_html($sizes[0]) . ' ' . __('à') . ' ' . esc_html($sizes[$size_count - 1]) . '</span>';
}
$html_output .= '</div>';
}
if ($product->is_in_stock()) {
$html_output .= '<div class="stock-status"><span class="in-stock">' . __('En stock') . '</span></div>';
} else {
$html_output .= '<div class="stock-status"><span class="out-of-stock">' . __('Rupture de stock') . '</span></div>';
}
return $html_output;
}, 10, 2);Langage du code : PHP (php)Ces informations seront directement affichées dans l’éditeur Gutenberg et sur le site. Le bloc Query permet ainsi d’afficher à peu près toutes les données qu’on souhaite.
Plus stable, plus robuste
C’est une bonne alternative aux blocs natifs de WooCommerce qui changent au cours des développements et que je trouve plus stable et plus légère.
Laisser un commentaire