[Resolvido] Como criar um widget para WordPress para exibir ofert

RSS iMasters · Maio 17, 2012

Dando continuidade ao nosso artigo da semana passada sobre como criar um widget para WordPress para exibir ofertas da Lomadee, hoje incluiremos o wrapper para PHP desenvolvido pela comunidade e exibiremos as ofertas de acordo com os filtros aplicados pelo usuário na configuração do widget.

Precisamos inicialmente efetuar o download do wrapper PHP hospedado no github e incluí-lo em nosso widget. Vamos incluir na pasta includes/wrapper-php o nosso wrapper e vamos instaciá-lo dentro da função de exibição do nosso widget.

Criaremos, agora, os principais métodos que serão utilizados pelo widget, dentre eles a aplicação do estilo CSS dos elementos, a busca pelas ofertas e sua exibição. Tudo isso dentro do nosso arquivo principal do plugin.

showcase-offers-lomadee.php

<?php

/**

* Plugin Name: Vitrine de ofertas da Lomadee

* Plugin URI: http://developer.buscape.com

* Description: Cria um widget para exibição de uma vitrine de ofertas Lomadee.

* Version: 1.0

* Author: BuscaPé Developer

* Author URI: http://developer.buscape.com

*/

class Showcase_Offers_Lomadee {

/**

* Application ID

*

* @since 1.0

* @var string Application ID

*/

public $application_id = '564771466d477a4458664d3d';

/**

* Define a busca de oferta na Lomadee

*

* @since 1.0

* @var bool

*/

public $lomadee = true;

public function __construct()

{

// Registra o novo widget na inicialização do widgets do WP

add_action( 'widgets_init', array( &$this, 'register_widget' ) );

// Exibe o CSS aplicado para este widget

add_action( 'wp_print_styles', array( &$this, 'stylesheet' ) );

}

/**

* Registra o style do widget

*

* @since 1.0

* @return void

*/

public function stylesheet()

{

wp_enqueue_style( 'showcase-offers-lomadee-style', WP_PLUGIN_URL . '/showcase-offers-lomadee/assets/css/style.css' );

}

/**

* Registra o widget de vitrine de ofertas da Lomadee

*

* @return void

*/

public function register_widget()

{

require_once WP_PLUGIN_DIR . '/showcase-offers-lomadee/showcase-offers-lomadee-widget.php';

register_widget( 'Showcase_Offers_Lomadee_Widget' );

}

/**

* Exibe as ofertas

*

* @since 1.0

* @param array $offers Ofertas

*/

public function display_offers( $offers )

{

?>

<?php foreach( (array)$offers as $offer ) : ?>

<image src="<?php echo $offer['image']; ?>" width="120" height="120" alt="<?php echo $offer['name']; ?>" />

</a>

</div>

</p>

</p>

</div>

<?php endforeach; ?>

</div>

<?php

}

/**

* Obtem as ofertas de acordo com as especificações definidas no widget

*

* @since 1.0

* @param array $instance Instancia dos dados do widget

* @return array Ofertas

*/

public function get_offers( $instance )

{

require_once 'includes/wrapper-php/Apiki_Buscape_API.php';

// Instancia o wrapper para PHP da API do BuscaPé

$obj_wrapper_php = new Apiki_Buscape_API( $this->application_id, $instance['source_id'] );

// Habilita o ambiente de testes e desenvolvimento da API do BuscaPé.

// Quando o plugin estiver em produção, esta linha deve ser removida.

$obj_wrapper_php->setSandbox();

// Define JSON como formato de retorno

$obj_wrapper_php->setFormat( 'json' );

// Busca as ofertas de acordo com as palavras-chave

$offers = $obj_wrapper_php->findOfferList( array( 'keyword' => $instance['keywords'] ), $this->lomadee );

// Trata o retorno das ofertas em JSON

$offers = json_decode( $offers );

// Trata e prepara um array com os dados das ofertas

$prepared_offers = $this->prepare_offers( $offers );

$prepared_offers = array_slice( $prepared_offers, 0, $instance['limit'] );

return $prepared_offers;

}

/**

* Trata e prepara os dados das ofertas para uma melhor leitura na exibição

* do widget

*

* @since 1.0

* @param array $offers

* @return boolean

*/

public function prepare_offers( $offers )

{

if( !isset( $offers->offer ) )

return false;

if( empty( $offers->offer ) )

return false;

$prepared_offers = array();

foreach( $offers->offer as $offer ) :

// Obtém somente ofertas com imagens

if( !isset( $offer->offer->thumbnail->url ) )

continue;

$prepared_offers[] = array(

'id' => $offer->offer->id,

'name' => $offer->offer->offername,

'image' => $offer->offer->thumbnail->url,

'link' => $offer->offer->outlink,

'price' => $offer->offer->price->value

);

endforeach;

return $prepared_offers;

}

// Cria uma instancia do plugin e o executa

$showcase_offers_lomadee = new Showcase_Offers_Lomadee();

Agora a versão final de configuração do nosso widget.

showcase-offers-lomadee-widget.php

<?php

class Showcase_Offers_Lomadee_Widget extends WP_Widget {

/**

* Inicializa o widget de acordo com as opções definidas

*

* @since 1.0

*/

public function __construct()

{

$widget_ops = array(

'classname' => 'widget_showcase_offers_lomadee',

'description' => 'Exibe uma vitrine de ofertas da Lomadee.'

);

parent::__construct( 'showcase-offers-lomadee-widget', 'Vitrine de ofertas Lomadee', $widget_ops );

}

/**

* Exibe o widget

*

* @since 1.0

* @global object $showcase_offers_lomadee

* @param array $args

* @param array $instance

*/

public function widget( $args, $instance )

{

global $showcase_offers_lomadee;

$offers = $showcase_offers_lomadee->get_offers( $instance );

$showcase_offers_lomadee->display_offers( $offers );

}

/**

* Cria o formulário de configurações do widget

*

* @since 1.0

* @param array $instance Configurações salvas atualmente

* @return void

*/

public function form( $instance )

{

$source_id = ( $instance['source_id'] ) ? esc_html( $instance['source_id'] ) : '';

$keywords = ( $instance['keywords'] ) ? esc_html( $instance['keywords'] ) : '';

$limit = ( $instance['limit'] ) ? intval( $instance['limit'] ) : 3;

?>

<p>

<label for="<?php echo $this->get_field_id( 'source_id' ); ?>">Source ID:</label>

<input type="text" value="<?php echo esc_attr( $source_id ); ?>" name="<?php echo $this->get_field_name( 'source_id' ); ?>" id="<?php echo $this->get_field_id( 'source_id' ); ?>" class="widefat" />

</p>

<p>

<label for="<?php echo $this->get_field_id( 'keywords' ); ?>">Palavras-chave:</label>

<input type="text" value="<?php echo esc_attr( $keywords ); ?>" name="<?php echo $this->get_field_name( 'keywords' ); ?>" id="<?php echo $this->get_field_id( 'keywords' ); ?>" class="widefat" />

</p>

<p>

<label for="<?php echo $this->get_field_id( 'limit' ); ?>">Número de ofertas a exibir:</label>

<input type="text" value="<?php echo esc_attr( $limit ); ?>" name="<?php echo $this->get_field_name( 'limit' ); ?>" id="<?php echo $this->get_field_id( 'limit' ); ?>" style="width: 73px" />

</p>

<?php

}

/**

* Atualiza os dados informados nas configurações do widget

*

* @since 1.0

* @param array $instance Novos dados a serem gravados

* @param array $old_instance Dados antigos gravados

* @return array Instance Nova instância com os dados gravados

*/

public function update( $new_instance, $old_instance )

{

$instance['source_id'] = esc_html( $new_instance['source_id'] );

$instance['keywords'] = esc_html( $new_instance['keywords'] );

$instance['limit'] = intval( $new_instance['limit'] );

return $instance;

}

Também aplicamos um estilo CSS para nossa vitrine de ofertas.

style.css

.showcase-offers-widget {

border: 1px solid #CCCCCC;

border-radius: 10px 10px 10px 10px;

}

.showcase-offers-list {

margin: auto;

padding: 5px;

}

.showcase-offers-item-image {

margin: 0 0 10px;

text-align: center;

}

.showcase-offers-item-data a{

color: #666666;

}

.showcase-offers-item-data-price a{

color: #B22222;

font-size: 20px;

font-weight: bold;

text-align: center;

display: block;

}

Então, configurando o nosso widget assim?

Teremos o seguinte resultado:

Bom, é isso developers! Segue abaixo o link para download do código-fonte e, é claro, façam as devidas adaptações ao widget de vocês, uma vez que esse é apenas um exemplo de como se criar um widget para WordPress com as ofertas obtidas através da API do Buscapé.

Vitrine de ofertas Lomadee (46,9 KiB, 44 hits)

http://imasters.com.br/artigo/24436/apis-buscape/como-criar-um-widget-para-wordpress-para-exibir-ofertas-da-lomadee-parte-ii