Hoy queremos mostrarte una manera rápida y sencilla de incluir las entradas de tu blog en tu tienda Magento a través del RSS de Wordpress. Además, haremos uso de Zend_cache para evitar que se realice una nueva petición cada vez que se carga la página y, así, no comprometer el rendimiento de tu tienda online.
Como puedes ver en la imagen superior, cada entrada del blog contiene una imagen, título, fecha, categorías a las que pertenece, un breve resumen y un botón que enlaza con la página del blog donde se encuentra la misma. ¡Manos a la obra!
Crea el fichero posts-wordpress.phtml
Lo primero que tenemos que hacer es crear el archivo posts-wordpress.phtml (puedes sustituir 'posts-wordpress' por el nombre que tú prefieras) y añadir el siguiente código:
<?php $frontendOptions = array(
'lifetime' => 7200,
'automatic_serialization' => true
);
$backendOptions = array(
'cache_dir' => Mage::getBaseDir('cache')
);
$cache = Zend_Cache::factory('Core', 'File', $frontendOptions, $backendOptions);
$id = 'channelFeed';
if (!($data = $cache->load($id))) {
try {
$data = new Zend_Feed_Rss('http://url-de-tu-web.com/feed/', array(
'timeout' => 3
));
} catch (Exception $e) {
return;
}
$cache->save($data);
}Si eres de aquellos a los que no les gusta copiar y pegar sin entender el código, este fragmento se encarga de generar la caché con una duración de 7200 segundos (2 horas) y de guardar en esta la información en formato XML recibida de la URL del feed de tu blog. Un timeout o tiempo de espera de 3 segundos debería ser más que suficiente para cargar los datos necesarios. A continuación, introduce el siguiente código:
if ($data):
?>
<div class="dgrey fslider">
<h3 class="section-title padding-right"><?php echo $this->__('Entradas del blog'); ?></h3>
<div class="itemslider-wrapper slider-arrows1 slider-arrows1-pos-top-right slider-pagination1">
<div id="itemslider-featured-noticias"
class="itemslider itemslider-responsive noticias centered equal-height">
<?php $i = 0;
foreach ($data as $post): ?>
<?php
if ($i > 8)
continue;
?>
<div class="item <?php echo $i == 0 ? "first" : "last"; ?>">
<?php
$dom = new Zend_Dom_Query($post->getDOM()->nodeValue);
$elements = $dom->query('img');
$src = array();
foreach ($elements as $result) {
// $result es un DOMElement
$src[] = $result->getAttribute('src');
}
print isset($src[0]) ? '<div class="news-image-wrapper f-left"><img class="lazyOwl" alt="' .
$post->title . '" data-src="' . $src[0] . '" width="300" /></div>' : '';
?>
<h3><a href="<?php echo $post->link; ?>"><?php echo $post->title; ?></a></h3>
<div class="date-categories">
<span class="date">
<?php echo $this->formatDate($post->pubDate, 'long'); ?>
</span>
<span class="categories">
<?php
$c = 0;
$cats = array();
foreach ($post->category as $cat): ?>
<?php if ($c > 2) continue; ?>
<?php $cats[] = $cat->getDOM()->nodeValue ?>
<?php $c++;
endforeach;
echo implode(', ', $cats); ?>
</span>
</div>
<p><?php echo trim($this->helper('core/string')
->truncate(strip_tags(str_replace(' ', '', $post->description)), 200)); ?></p>
<a class="a-center"
href="<?php echo $post->link; ?>"><?php echo $this->__('Leer más'); ?></a>
</div>
<?php $i++; endforeach; ?>
</div>
</div>Mediante este fragmento, lo que hacemos es crear los divs o contenedores e introducimos los datos de cada entrada (título, categorías, etc) en nuestro widget. Puedes controlar el número de entradas a mostrar con el código de las líneas 11-13: if ($i > Nª de entradas) continue; ?> O bien ajustando el apartado "Número máximo de entradas a mostrar en el feed" de tu Wordpress dentro de Ajustes -> Lectura. Para acabar con el código de este archivo, incluimos el javaScript del plugin Owl Carousel y cerramos el if que teníamos abierto. Si el tema de tu tienda no incluye el Owl Carousel, puedes incluirlo tú mismo/a o bien obviar el script y adaptar el código a tus propias necesidades.
<script type="text/javascript">// <![CDATA[
jQuery(function ($) {
var owl = $('#itemslider-featured-noticias');
owl.owlCarousel({
lazyLoad: true,
itemsCustom: [[0, 1], [320, 1], [480, 1], [768, 1], [960, 1], [1280, 1]],
responsiveRefreshRate: 50,
slideSpeed: 200,
paginationSpeed: 500,
scrollPerPage: true,
stopOnHover: true,
rewindNav: true,
rewindSpeed: 600,
pagination: false,
navigation: true,
navigationText: false
}); //end: owl
});
// ]]></script>
</div>
<?php endif; ?>Guarda el fichero
Guarda el fichero recién creado en la siguiente ubicación: \app\design\frontend\default\[tu-tema]\template\page\html
Inclúyelo en tu página de inicio
Por último, en la admin de Magento, ve a la página CMS de tu homepage y en el apartado contenido incluye la siguiente llamada al bloque recién creado:
{{block type="core/template" template="page/html/posts-wordpress.phtml"}}Con estos sencillos pasos ya tienes las entradas de tu blog Worpress en tu tienda Magento. Puedes adaptar el código a tu gusto y/o explorar el XML para incluir, por ejemplo, al autor de cada entrada.
