Один из наилучших вариантов продажи товара — прочитать отзывы от людей, которые уже его купили. Добавьте всплывающие отзывы от людей, которые оставили свое мнение возле товара, и увидите, как увеличиться убьем продаж.
HTML
Первым шагом является установление HTML разметки страницы. Создим простой одностраничный сайт, чтобы лучше почувствовать отзывы посетителей в действии.
index.php
</p> <p class="MsoNormal" style="text-align: justify;"> <!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></p> <p class="MsoNormal" style="text-align: justify;">
В верхней части документа стоит элемент styles.css, таблицы стилей для страницы и в самом конце кода библиотека jQuery и файл script.js.
Отзывы клиентов будут показаны в виде элементов LI. Только первый отзыв отображается на странице загрузки, а остальное будут появляться последовательно.
PHP
взглянем на XML-файл, который «питает» отзывы:
testimonials.xml
</p> <p class="MsoNormal" style="text-align: justify;"> <?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></p> <p class="MsoNormal" style="text-align: justify;">
Схема этого файла проста — корневой элемент проводит ряд пунктов. Каждый элемент имеет содержание. Вы можете включать произвольное число свидетельств.
Преобразоваем файл xml в HTML
</p>
<p class="MsoNormal" style="text-align: justify;"> <?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></p>
<p class="MsoNormal" style="text-align: justify;">
Здесь поддерживаются все стандартные конструкции программирования.
Существует два подхода, когда дело доходит до применения таблицы стилей XSL. Вы можете просто включить его в XML-файл и оставить его в веб-браузере для генерации HTML разметки (все современные браузеры поддерживают XSL преобразования), или сделать это на сервере.
index.php
</p> <p class="MsoNormal" style="text-align: justify;"> $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);</p> <p class="MsoNormal" style="text-align: justify;">
CSS
Теперь, когда наша разметка генерируется, напишем код CSS.
styles.css
</p>
<p class="MsoNormal" style="text-align: justify;"> #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;
}</p>
<p class="MsoNormal" style="text-align: justify;">
Код скрывает все отзывы (LI элементы внутри основного UL).
jQuery
В JQuery части создадим простой скрипт, который будет показывать отзывы последовательно по одному.
script.js
</p>
<p class="MsoNormal" style="text-align: justify;"> $(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();
});
});
})();
});</p>
<p class="MsoNormal" style="text-align: justify;">
Увеличивая значение, можно добиться более длительно нахождения отзыва на странице. Также можно вернуть предыдущий отзыв и быстрее показать следующий.
Источник: tutorialzine.com
