Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/24436/47095.jpg&key=488f4813f5d0acc020e45cb2279f8f1b369c6be9d74fe9a031d6b120cd3da3b4" />
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 )
{
?>
<div class="showcase-offers-widget">
<div class="showcase-offers-list">
<?php foreach( (array)$offers as $offer ) : ?>
<div class="showcase-offers-item">
<div class="showcase-offers-item-image">
<a href="<?php echo $offer['link']; ?>">
<image src="<?php echo $offer['image']; ?>" width="120" height="120" alt="<?php echo $offer['name']; ?>" />
</a>
</div>
<div class="showcase-offers-item-data">
<p class="showcase-offers-item-data-name">
<a href="<?php echo $offer['link']; ?>"><?php echo $offer['name']; ?></a>
</p>
<p class="showcase-offers-item-data-price">
<a href="<?php echo $offer['link']; ?>">R$ <?php echo number_format( $offer['price'], 2, ',', '.' ); ?></a>
</p>
</div>
</div>
<?php endforeach; ?>
</div>
</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?
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/24436/47096.png&key=f4e3a86f32a8d15807ef5c5f157b91d6c5e28c4a4e310efef151399e10bcb18e" />
Teremos o seguinte resultado:
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/24436/47097.png&key=a9e08af0ee8d897930855c6ab326b1cba5bc8c3357f3eebf1bdc88862f55d9ad" />
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)
Carregando comentários...