HomeBlogCome creare un custom widget per Woocommerce

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

custom widget per woocomerce prodotti in evidenza

 

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

custom widget per woocomerce admin

 

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