Відгуки клієнтів засобами php, xml і jquery

Один з найефективніших методів підвищення продажів товару є позитивні відгуки ваших клієнтів. Для цього вам не треба ставити собі CMS або морочитися з базою даних. У цьому уроці ми створимо XML файл з відгуками клієнтів, які будуть плавно змінюватися за допомогою jQuery.

В першу чергу створимо структури HTML сторінки:

У верхній частині документа, ми вставляємо styles.css, а перед закриттям тега body, підключаємо бібліотеку jQuery і наш script.js, який буде описаний в кінці цього уроку.

Блок #testimonials призначений для виведення відгуків. Відгуки будуть міститися в тегах LI. При завантаженні сторінки буде показуватися тільки 1 відгук, а всі інші будуть виводитися засобами jQuery.

Всі відгуки будуть міститися в XML файлі.

Структура цього файлу дуже проста - testimonials це кореневий елемент, який містить елементи items. Кожен item містить content, author-name і author-url, серед яких остання опція є необов'язковою. Для того щоб додати відгук, необхідно просто створити ще елемент item і заповнити його.

Але як ми зможемо трансформувати це в валідний HTML? Ми можемо використовувати PHP для того, щоб пройтися по елементах і вивести їх на сторінку в циклі, але я хочу вам показати один альтернативний спосіб із застосуванням XSLT. Це спеціальний різновид XML, яка дозволяє нам перетворити XML файл в HTML.

transformations.xml

Дана техніка підтримує всі стандарти сучасного програмування. Ви можете використовувати цикл for-each, умова if, а так само викликати вбудовані функції (докладну інформацію ви можете знайти тут). Тут ми написали сценарій трансформації xml файлу в html.

Існує кілька підходів для застосування стилів XSL. Ви можете помістити їх безпосередньо в XML файлі і дозволити браузеру згенерувати HTML розмітку (всі сучасні браузери підтримують XSL трансформації), або розмістити їх на стороні сервера. На щастя, в PHP надає широкі можливості для роботи з XSL.

Даний скрипт заповнює div #testimonial в index.php. Він виводить ряд елементів LI до яких застосовуються XSL стилі, витягуючи їх з XML документа з усіма відгуками. Для браузера і пошукових систем все буде виглядати як HTML сторінка.

Тепер, коли наш скелет готовий, приступимо до стилю:

styles.css

Це стиль дня нашої сторінки. Він приховує всі відгуки, які по суті є елементами списку. Після цього за допомогою селектора first-child, ми показуємо перший відгук. Прокрутка між відгуками буде здійснюватися в нашому jQuery скрипті, який ось-ось напишемо.

У цій частині уроку ми напишемо jQuery скрипт, який буде відповідати за циклічне відображення всіх відгуків користувачів.

Для того щоб контролювати проміжок часу межу зміною відгуків, ви можете вставити якесь значення в метод delay. Помістивши активний відгук у кінець (замість індексування), ми отримуємо можливість пересуватися за даними рекурсивно.

висновок

Ви можете з легкістю скористатися даним скриптом для того щоб розташувати відгуки ваших клієнтів безпосередньо на сайті. Як доповнення можете розташувати там рейтинг, зірки та інші фішки. Зрештою все зведеться до редагування файлу XML.

5 останніх уроків рубрики "jQuery"

Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.

jQuery плагін для створення тимчасової шкали.

jQuery плагін для створення діаграми Ганта.

Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.

Constantine

Можна було обійтися без xml в принципі Але так теж не погано

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!