One of the easiest ways to boost up the sales of your products is to show the honest recommendations of people that have already purchased them. This is content that rarely changes, and you do not need a dedicated CMS system just to manage it.

In this tutorial we are going to build a XML backed testimonial viewer, which, along with jQuery, can display the set on your product pages.

HTML

The first step is to lay down the HTML markup of the page. We are setting up a simple one-page site so we can get a better feel of the testimonial viewer in action.

index.php

Client Testimonials Powered by PHP and XML



Our new awesome iPhone App is available on the appstore.






At the top of the document, we are including styles.css, the stylesheet for the page, and just before the closing body tag, we are including the jQuery library and our script.js file, which is discussed in the last step of the tutorial.

The #testimonials div is where the magic happens. It is going to hold the client testimonials in the form of LI elements. Only the first testimonial is going to be shown on page load, and the rest will be displayed consecutively with a jQuery fade animation.

Client Testimonials with PHP, XML and jQuery


PHP

Before inspecting the generation of the testimonials, lets take a look at the XML file that powers it.

testimonials.xml

This has to be the most awesome app I've ever used! John Doe jdoe.com Simply amazing! It solved my problem. I highly recommend it. John Smith smith.com A tremendous success. It is like walking on sunshine compared to its competitors. John Smith The schema of this file is simple – the root testimonials element holds a number of items. Each item has content, author-name and author-url items, where the last one is optional, as you can see from the last testimonial. You can include an arbitrary number of testimonials by just adding more items to this xml file.

But how are we going to transform this into valid HTML? We could parse it with PHP and loop through the items, stitching together the markup, but there is an alternative approach with applying a XSLT stylesheet. This is a special XML based language, which allows us to transform a regular XML file into HTML.

transformations.xml





All the standard programming constructs are supported. You can use for-each loops, if statements and you can even call built in functions (you can learn more at this XSLT documentation site). What we did here, in effect, is to extract the transformation logic from PHP and put it in a separate, presentation file.

There are two approaches when it comes to applying this XSL stylesheet. You can just include it in the XML file itself and leave it to the web browser to generate the HTML markup (all modern browsers support XSL transformations), or do it on the server side. Luckily, PHP has great support for XSL and it is really easy to use.

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); The snippet above resides in the #testimonial div of index.php. It prints a set of LI elements after applying the XSL stylesheet to the XML document with all the testimonials. To the browser (and search spiders) everything looks like a regular HTML page.

jQuery Powered Client Testimonials Viewer


CSS

Now that our markup is generated, lets style it. As the subject of the tutorial is primarily the back-end, we will only take a brief look at the CSS code.

styles.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; } The code above styles the page, and hides all the testimonials (which are simply LI elements inside of the main UL). After this, by using the first-child selector, we show the first one by default. It will be down to our jQuery code to cycle through the rest and show them consecutively.

jQuery

In the jQuery part of the tutorial, we will create a simple script that will loop through the testimonials and show them one by one with a fade-in animation.

script.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(); }); }); })(); }); By increasing the value passed to the delay method, you can control the screen time for each testimonial. Moving the active one to the back (instead of keeping an index) simplifies the function implementation and allows us to call showNextTestimonial recursively.

With this our Client Testimonials viewer is complete!

Conclusion

You can use this script as a quick solution to displaying testimonials on your product pages. You can even modify it to include ratings, stars, reviews, and other kinds of custom data. At the end, it is all down to editing an XML file.




Read more (locally) ...


Partner : Tutorialzine


--------------------------------------------------

LOGECT Publisher Network™ (beta) is a Service that allows others to publish their syndicated content by RSS Feeds.

موضوعات مشابه: