Come creare un custom widget per Woocommerce
Per Wordpress, e il suo componente più utilizzato per la realizzazione di un e-commerce Woocommerce, troviamo in rete moltissimi Widgets sia a pagamento che gratuiti.
I widgets di wordpress sono usati normalmente per la visualizzazione di "blocchi" nel front-end. Per chi conosce Joomla, i widgets sono gli omologhi dei moduli. In Drupal, invece sono conosciuti come Blocchi.
Al di la della tecnologia scelta per la realizzazione del sito web, è sicuramente consigliabile poter intervenire con estrema flessibilità su questi elementi.
In questo primo articolo vediamo come realizzare un semplice widgets per visualizzare i prodotti in evidenza.
Creare un widget per woocommerce per visualizzare i prodotti in evidenza
Un classico widget utilizzato in molti siti di e-commerce, è il classico modulo dei prodotti in evidenza.
Come possiamo vedere, nell'immagine sotto, nel frontend abbiamo:
1) un testo introduttivo che viene scritto per due motivi: un aspetto comunicativo e uno in ottica SEO per il posizionamento
2) lista dei prodotti
Per ogni prodotto vengono visualizzate:
- l'immagine
- il nome del prodotto
- il prezzo
- il prezzo scontato nel caso sia stato valorizzato
Lato backend, il widget si consente di impostare i seguenti parametri.
1) Titolo del modulo
2) Testo introduttivo
3) Numero di prodotti visualizzati per riga
4) In base al tipo di opzione: per lista o per categoria verranno estratti i prodotti o dalla lista degli id del campo specifico o dalla categoria specificata.
5) Campo della categoria e numero di prodotti totali da visualizzare per la categoria specificata
Struttura e codice del Widget di esempio
La struttura di un widget si base sui seguenti metodi:
1) funzione di registrazione del widget
2) costruttore
3) funzione di rendreing del frontend
4) funzione di rendering lato backend
5) funzione di update dei parametri invocata da backend quando salviamo i valori del widget
Infine, riportiamo il codice base per la realizzazione del widget di esempio.
<?php
/*
Plugin Name: Web2e - Show products by Category Evidenza
Description: Show products by category evidenza
Author: Web2e
Version: 1.0
Author URI: https://www.web2e.it
*/
// Register and load the widget
function web2e_load_show_product_evidenza_widget() {
register_widget('web2e_show_product_evidenza_widget');
}
add_action('widgets_init', 'web2e_load_show_product_evidenza_widget');
// Creating the widget
class web2e_show_product_evidenza_widget extends WP_Widget {
function __construct() {
parent::__construct(
// Base ID of your widget
'web2e_show_product_evidenza_widget',
// Widget name will appear in UI
__('Web2e Show products by category evidenza', 'web2e_widget_domain'),
// Widget description
array('description' => __('Web2e - Show products by category evidenza', 'web2e_widget_domain'),)
);
}
// Creating widget front-end
public function widget($args, $instance) {
$title = apply_filters('widget_title', $instance['title']);
$testointro = empty($instance['testointro']) ? '' : $instance['testointro'];
// tipo di visuliazzazione: byCat o byList
$typeshow = empty($instance['typeshow']) ? '' : $instance['typeshow'];
// prodotti da visualizzare per riga - parametro valido per entrambe le viste
$numprodrow = empty($instance['numprodrow']) ? '' : $instance['numprodrow'];
// byList: lista prodotti da visualzizare
$ids = empty($instance['ids']) ? '' : $instance['ids'];
// byCat: se valorizziamo la categoria
$catid = empty($instance['catid']) ? '' : $instance['catid'];
$numproductcat = empty($instance['numproductcat']) ? '' : $instance['numproductcat'];
if($typeshow == "byCat"){
if($catid > 0){ // Show products by category
echo "<div>";
$this->show_products_by_category($catid, $numproductcat, $testointro);
echo "</div>";
}
}else if($typeshow == "byList"){ // Show products by ids
echo "<div>";
$this->show_products_by_ids($ids,$testointro);
echo "</div>";
}
}
// Widget Backend
public function form($instance) {
if (isset($instance['title'])) {
$title = $instance['title'];
} else {
$title = __('New title', 'web2e_widget_domain');
}
if (isset($instance['testointro'])) {
$testointro = $instance['testointro'];
} else {
$testointro = __('', 'web2e_widget_domain');
}
if (isset($instance['typeshow'])) {
$typeshow = $instance['typeshow'];
} else {
$typeshow = __('', 'web2e_widget_domain');
}
if (isset($instance['numprodrow'])) {
$numprodrow = $instance['numprodrow'];
} else {
$numprodrow = __('', 'web2e_widget_domain');
}
if (isset($instance['ids'])) {
$ids = $instance['ids'];
} else {
$ids = __('', 'web2e_widget_domain');
}
if (isset($instance['catid'])) {
$catid = $instance['catid'];
} else {
$catid = __('', 'web2e_widget_domain');
}
if (isset($instance['numproductcat'])) {
$numproductcat = $instance['numproductcat'];
} else {
$numproductcat = __('', 'web2e_widget_domain');
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('testointro'); ?>"><?php _e('Testo intro:'); ?></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('testointro') ?>" name="<?php echo $this->get_field_name('testointro') ?>"><?php echo esc_attr($testointro); ?></textarea>
</p>
<p>
<label for="<?php echo $this->get_field_id('numprodrow'); ?>"><?php _e('Prodotti per riga:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('numprodrow'); ?>" name="<?php echo $this->get_field_name('numprodrow'); ?>" type="text" value="<?php echo esc_attr($numprodrow); ?>" />
</p>
<hr>
<p>
<label>
<input type="radio" value="byList" name="<?php echo $this->get_field_name( 'typeshow' ); ?>" <?php checked( $typeshow, 'byList' ); ?> id="<?php echo $this->get_field_id( 'typeshow' ); ?>" />
<?php esc_attr_e( 'Visualizzazione lista prodotti', 'text_domain' ); ?>
</label>
</p>
<p>
<label for="<?php echo $this->get_field_id('ids'); ?>"><?php _e('ids:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('ids'); ?>" name="<?php echo $this->get_field_name('ids'); ?>" type="text" value="<?php echo esc_attr($ids); ?>" />
</p>
<hr>
<p>
<label>
<input type="radio" value="byCat" name="<?php echo $this->get_field_name( 'typeshow' ); ?>" <?php checked( $typeshow, 'byCat' ); ?> id="<?php echo $this->get_field_id( 'typeshow' ); ?>" />
<?php esc_attr_e( 'Visualizzazione per categoria', 'text_domain' ); ?>
</label>
</p>
<p>
<label for="<?php echo $this->get_field_id('catid'); ?>"><?php _e('catid:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('catid'); ?>" name="<?php echo $this->get_field_name('catid'); ?>" type="text" value="<?php echo esc_attr($catid); ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('numproductcat'); ?>"><?php _e('Numero prodotti totali da visalizzare:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('numproductcat'); ?>" name="<?php echo $this->get_field_name('numproductcat'); ?>" type="text" value="<?php echo esc_attr($numproductcat); ?>" />
</p>
<?php
}
// Updating widget replacing old instances with new
public function update($new_instance, $old_instance) {
$instance = array();
$instance['title'] = (!empty($new_instance['title']) ) ? strip_tags($new_instance['title']) : '';
$instance['testointro'] = (!empty($new_instance['testointro']) ) ? strip_tags($new_instance['testointro']) : '';
// tipo di visualizzazione - Lista prodotti, Prodotti in categoria
$instance['typeshow'] = ( !empty( $new_instance['typeshow'] ) ) ? sanitize_text_field( $new_instance['typeshow'] ) : null;
// prodotti per riga
$instance['numprodrow'] = (!empty($new_instance['numprodrow']) ) ? strip_tags($new_instance['numprodrow']) : '0';
// lista ids prodotti
$instance['ids'] = (!empty($new_instance['ids']) ) ? strip_tags($new_instance['ids']) : '';
// lista prodotti in categoria
$instance['catid'] = (!empty($new_instance['catid']) ) ? strip_tags($new_instance['catid']) : '';
$instance['numproductcat'] = (!empty($new_instance['numproductcat']) ) ? strip_tags($new_instance['numproductcat']) : '0';
return $instance;
}
public function show_products_by_category($catid, $numproduct) {
/* TODO */
}
public function show_products_by_ids($ids) {
$id_array = explode(',', $ids);
$query_args = array(
'posts_per_page' => -1,
'post_status' => 'publish',
'post_type' => 'product',
'no_found_rows' => 1,
'meta_query' => array(),
'tax_query' => array(
'relation' => 'AND',
),
'post__in' => $id_array,
'orderby' => 'post__in',
);
$products = new WP_Query(apply_filters('woocommerce_products_widget_query_args', $query_args));
if ($products && $products->have_posts()) {
echo ('<div class="prod-showcase-container">');
while ($products->have_posts()) {
$products->the_post();
global $product;
?>
<div class="prod-item-h">
<div class="prod-item-h-holder">
<a class="link-image-princ-product" href="/<?php echo esc_url($product->get_permalink()); ?>">
<?php echo $product->get_image(); ?></a>
<div class="prod-item-title"><h2><?php echo wp_kses_post($product->get_name()); ?></h2></div>
<?php if ($product->get_price()!="") { ?>
<div class="showcase-price">€ <?php echo $product->get_price(); ?></div>
<?php } else { ?>
<div class="showcase-price"><a href="#">Richiedi prezzo</a></div>
<?php } ?>
<div class="product-details-group">
<a class="add-to-cart-icon" href="/<?php echo esc_url($product->add_to_cart_url()); ?>"><span class="lnr lnr-cart"></span></a>
<a class="show-product-icon" href="/<?php echo esc_url($product->get_permalink()); ?>"><span class="lnr lnr-magnifier"></span></a>
</div>
</div>
</div>
<?php
/* ------------------------------ */
}
echo ('</div>');
}
}
}
// Class web2e_widget ends here