Testimonios de clientes Desarrollado por PHP, XML y jQuery

Una de las formas más fáciles de aumentar las ventas de tus productos es mostrar las recomendaciones honestas de las personas que ya los han comprado. Este es contenido que rara vez cambia, y no necesita un sistema CMS dedicado solo para administrarlo.

En este tutorial, vamos a crear un visor de testimonios respaldado por XML que, junto con jQuery, puede mostrar el conjunto en las páginas de sus productos.

HTML

El primer paso es establecer el marcado HTML de la página. Estamos configurando un sitio simple de una página para que podamos tener una mejor idea del visor de testimonios en acción.

index.php

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Client Testimonials Powered by PHP and XML</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />

</head>
<body>

<div id="page">

    <div id="topBar">
        <div id="logo">
        </div>

        <ul id="navigation">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Buy Now!</a></li>
        </ul>
    </div>

    <div id="iPhone">
        <p>Our new awesome iPhone App is available on the appstore.</p>
    </div>

    <div id="testimonials">
        <ul>
        <!-- Generation of the testimonials takes place here -->
        </ul>
    </div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/script.js"></script>

</body>
</html>

En la parte superior del documento, estamos incluyendo styles.css , la hoja de estilo de la página, y justo antes de la etiqueta del cuerpo de cierre, incluimos la biblioteca jQuery y nuestro script.js archivo, que se analiza en el último paso del tutorial.

Los #testimonios div es donde sucede la magia. Va a contener los testimonios de los clientes en forma de elementos LI. Solo el primer testimonio se mostrará en la carga de la página, y el resto se mostrará de forma consecutiva con una animación de desvanecimiento de jQuery.

PHP

Antes de inspeccionar la generación de los testimonios, echemos un vistazo al archivo XML que lo alimenta.

testimonios.xml

<?xml version="1.0" encoding="utf-8"?>

<testimonials>
    <item>
        <content>This has to be the most awesome app I've ever used!</content>
        <author-name>John Doe</author-name>
        <author-url>jdoe.com</author-url>
    </item>
    <item>
        <content>Simply amazing! It solved my problem. I highly recommend it.</content>
        <author-name>John Smith</author-name>
        <author-url>smith.com</author-url>
    </item>
    <item>
        <content>A tremendous success. It is like walking on sunshine compared to its competitors.</content>
        <author-name>John Smith</author-name>
    </item>
</testimonials>

El esquema de este archivo es simple:la raíz testimonios elemento contiene una serie de elementos. Cada elemento tiene contenido , nombre del autor y autor-url artículos, donde el último es opcional, como se puede ver en el último testimonio. Puede incluir una cantidad arbitraria de testimonios simplemente agregando más elementos a este archivo xml.

Pero, ¿cómo vamos a transformar esto en HTML válido? Podríamos analizarlo con PHP y recorrer los elementos, uniendo el marcado, pero existe un enfoque alternativo al aplicar una hoja de estilo XSLT. Este es un lenguaje especial basado en XML, que nos permite transformar un archivo XML normal en HTML.

transformaciones.xml

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" indent="no"/>

<!-- Matching the testimonials (root) element -->
<xsl:template match="/testimonials">
    <!-- Using a for-each to loop through all the "item" elements -->
    <xsl:for-each select="item">

    <!-- This markup is going to be printed -->
    <li>
        <p class="text">
            <!-- Value-of prints the value of the select attribute -->
            <xsl:value-of select="content"/>
        </p>

        <p class="author">
            <xsl:value-of select="author-name"/>

            <!-- Using an "if" statement to check whether the URL field exists -->
            <xsl:if test="author-url != '' ">
                <xsl:value-of select="', '"/>
                <a>
                    <!-- Creating an href attribute in the hyperlink -->
                    <xsl:attribute name="href">
                        <!-- Using the concat function -->
                        <xsl:value-of select="concat('http://',author-url)"/>
                    </xsl:attribute>

                    <xsl:value-of select="author-url"/>
                </a>
            </xsl:if>
        </p>
    </li>

    </xsl:for-each>
</xsl:template>

</xsl:stylesheet>

Todas las construcciones de programación estándar son compatibles. Puede usar bucles for-each, declaraciones if e incluso puede llamar a funciones integradas (puede obtener más información en este sitio de documentación de XSLT). Lo que hicimos aquí, en efecto, fue extraer la lógica de transformación de PHP y colocarla en un archivo de presentación separado.

Hay dos enfoques cuando se trata de aplicar esta hoja de estilo XSL. Simplemente puede incluirlo en el archivo XML y dejar que el navegador web genere el marcado HTML (todos los navegadores modernos admiten transformaciones XSL), o hacerlo en el lado del servidor. Afortunadamente, PHP tiene un gran soporte para XSL y es muy fácil de usar.

index.php

$xmlFile = 'xml/testimonials.xml';
$xslFile = 'xml/transform.xml';

$doc = new DOMDocument();
$xsl = new XSLTProcessor();

$doc->load($xslFile);
$xsl->importStyleSheet($doc);

$doc->load($xmlFile);
echo $xsl->transformToXML($doc);

El fragmento anterior reside en el div #testimonial de index.php. Imprime un conjunto de elementos LI después de aplicar la hoja de estilo XSL al documento XML con todos los testimonios. Para el navegador (y las arañas de búsqueda), todo parece una página HTML normal.

CSS

Ahora que nuestro marcado está generado, diseñémoslo. Como el tema del tutorial es principalmente el back-end, solo veremos brevemente el código CSS.

estilos.css

#page{
    width:800px;
    margin: 0 auto 120px;
}

#topBar{
    height:62px;
    position:relative;
}

#logo{
    width:194px;
    height:62px;
    position:absolute;
    top:0;
    left:0;
    background:url('../img/logo.jpg') no-repeat;
}

#navigation{
    position:absolute;
    list-style:none;
    right:0;
    top:15px;
}

#navigation li{ display:inline;}

#navigation li a{
    text-decoration:none;
    font-weight:bold;
    float:left;
    padding:10px;
    margin-right:10px;
    font-size: 17px;
}

#iPhone{
    height:400px;
    margin:60px auto 0;
    background:url('../img/iPhone.png') no-repeat;
}

#iPhone p{ display:none;}

#testimonials{
    width: 375px;
    padding: 45px 45px 35px 90px;
    background:url('../img/quotes.png') no-repeat 20px 20px rgba(178,178,169,0.2);
    min-height:90px;

    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

#testimonials li{ display:none;}
#testimonials li:first-child{ display:block;}

#testimonials ul{ list-style:none;}
#testimonials p.text{ font-size:24px;}

#testimonials p.author{
    color: #878787;
    font-size: 16px;
    font-style: italic;
    text-align: right;
    margin-top:10px;
}

#testimonials p.author a,
#testimonials p.author a:visited{
    color:#6aa42a;
}

El código anterior le da estilo a la página y oculta todos los testimonios (que son simplemente elementos LI dentro de la UL principal). Después de esto, usando el primer hijo selector, mostramos el primero por defecto. Dependerá de nuestro código jQuery recorrer el resto y mostrarlos consecutivamente.

jQuery

En la parte de jQuery del tutorial, crearemos un script simple que recorrerá los testimonios y los mostrará uno por uno con una animación gradual.

secuencia de comandos.js

$(document).ready(function(){

    // Hiding all the testimonials, except for the first one.
    $('#testimonials li').hide().eq(0).show();

    // A self executing named function that loops through the testimonials:
    (function showNextTestimonial(){

        // Wait for 7.5 seconds and hide the currently visible testimonial:
        $('#testimonials li:visible').delay(7500).fadeOut('slow',function(){

            // Move it to the back:
            $(this).appendTo('#testimonials ul');

            // Show the next testimonial:
            $('#testimonials li:first').fadeIn('slow',function(){

                // Call the function again:
                showNextTestimonial();
            });
        });
    })();

});

Al aumentar el valor pasado al retraso método, puede controlar el tiempo de pantalla para cada testimonio. Mover el activo hacia atrás (en lugar de mantener un índice) simplifica la implementación de la función y nos permite llamar a showNextTestimoniol recursivamente.

¡Con esto nuestro visor de testimonios de clientes está completo!

Conclusión

Puede usar este script como una solución rápida para mostrar testimonios en las páginas de sus productos. Incluso puede modificarlo para incluir calificaciones, estrellas, reseñas y otros tipos de datos personalizados. Al final, todo se reduce a editar un archivo XML.