Отзывы о товаре в MODx Revo

Приветствую всех в новой статье, в данном уроке мы с вами реализуем отзывы о наших товарах. Вот как они выглядят сейчас на шаблоне нашего интернет-магизина:

В общем, я думаю, понятно, какого типа отзывы у нас будут реализованы. Реализовать их можно разными компонентами (FormIt, Tickets, свой сниппет и т.д.), но реализовать с наименьшими трудовыми затратами нам поможет компонент из репозитория modStore.pro – EasyComm. Данный компонент платный, но скажу вам, что он стоит своих денег.

После того как мы скачали и установили компонент, давайте посмотрим, что с ним идет в комплекте, а именно 4 сниппета:

• ecForm – форма отправки отзыва
• ecMessages – сниппет вывода сообщений определенной цепочки
• ecMessagesCount – сниппет вывода количества сообщений определенной цепочки или цепочек
• ecThreadRating – сниппет вывода рейтинга определенной цепочки.

Также вы увидете новый раздел в админке (Приложения->easyComm), где вы сможете отвечать на отзыввы пользователей и управлять публикациями отзывов.

Итак, начнем мы с самой формы. Создадим чанк, на основе дефолтного (tpl.ecForm), у меня он получился такой (ecFormCustomTpl):

<form id="contact-form" class="ec-form contact-form" method="post" role="form" id="ec-form-[[+fid]]" data-fid="[[+fid]]" action="">
  <input type="hidden" name="thread" value="[[+thread]]">
  <div class="form-group ec-antispam">
	<label for="ec-[[+antispam_field]]-[[+fid]]" class="control-label">[[%ec_fe_message_antismap]]</label>
	<input type="text" name="[[+antispam_field]]" class="form-control" id="ec-[[+antispam_field]]-[[+fid]]" value="" />
  </div>
  <div class="row field-row">
	<div class="col-xs-12 col-sm-6">
	  <label>Ваше имя*</label>
	  <input type="text" name="user_name" class="le-input" id="ec-user_name-[[+fid]]" value="[[+user_name]]" />
	  <span class="ec-error help-block" id="ec-user_name-error-[[+fid]]"></span>
	</div>
	<div class="col-xs-12 col-sm-6">
	  <label>Email*</label>
	  <input type="text" name="user_email" class="le-input" id="ec-user_email-[[+fid]]" value="[[+user_email]]" />
	  <span class="ec-error help-block" id="ec-user_email-error-[[+fid]]"></span>
	</div>
  </div><!-- /.field-row -->
  
  <div class="field-row star-row">
	<label for="ec-rating-[[+fid]]" class="control-label">[[%ec_fe_message_rating]]</label>
	<input type="hidden" name="rating" id="ec-rating-[[+fid]]" value="[[+rating]]" />
	<div class="ec-rating ec-clearfix" data-storage-id="ec-rating-[[+fid]]">
	  <div class="ec-rating-stars">
		<span data-rating="1" data-description="[[%ec_fe_message_rating_1]]"></span>
		<span data-rating="2" data-description="[[%ec_fe_message_rating_2]]"></span>
		<span data-rating="3" data-description="[[%ec_fe_message_rating_3]]"></span>
		<span data-rating="4" data-description="[[%ec_fe_message_rating_4]]"></span>
		<span data-rating="5" data-description="[[%ec_fe_message_rating_5]]"></span>
	  </div>
	  <div class="ec-rating-description">[[%ec_fe_message_rating_0]]</div>
	</div>
	<span class="ec-error help-block" id="ec-rating-error-[[+fid]]"></span>
  </div>
  
  <div class="field-row">
	<label>Ваш отзыв</label>
	<textarea type="text" name="text" class="le-input" rows="5" id="ec-text-[[+fid]]">[[+text]]</textarea>
	<span class="ec-error help-block" id="ec-text-error-[[+fid]]"></span>
  </div><!-- /.field-row -->
  
  <div class="buttons-holder">
	<button type="submit" class="le-button huge">Отправить</button>
  </div><!-- /.buttons-holder -->
</form><!-- /.contact-form -->
<div id="ec-form-success-[[+fid]]"></div>

По чаку выше я попрошу вас уделить внимание скрытым полям, name’ам, классам и идентификаторам, так как это довольно распространенная ошибка. Теперь давайте выведем нашу форму в шаблоне, следующим вызовом:

[[!ecForm?
	&tplForm=`ecFormCustomTpl`
]]

Форма, должна после этого вывестись. Пока мы не будем ее тестировать, а сразу создадим чанк вывода наших отзывов (ecMessageTpl):

<div class="comment-item" id="ec-[[+thread_name]]-message-[[+id]]">
  <div class="row no-margin">
	<div class="col-lg-1 col-xs-12 col-sm-2 no-margin">
	  <div class="avatar">
		<img alt="avatar" src="assets/images/default-avatar.jpg">
	  </div>
	</div>	
	<div class="col-xs-12 col-lg-11 col-sm-10 no-margin">
	  <div class="comment-body">
		<div class="meta-info">
		  <div class="author inline">
			<span class="bold">[[+user_name]]</span>
		  </div>
		  <div class="star-holder inline">
			<div class="star" data-score="[[+rating]]"></div>
		  </div>
		  <div class="date inline pull-right">
			[[+date:dateAgo]]
		  </div>
		</div>
		<p class="comment-text">[[+text]]</p>
	  </div>
	  [[+reply_text]]
	</div>	
  </div>
</div>
<!--ec_reply_text <div class="ec-message__reply">[[+reply_author]]<p>[[+reply_text]]</p></div>-->
<!--ec_reply_author <p><strong>[[+reply_author]]</strong></p>-->

Я создал этот чанк также на основе дефолтного (tpl.ecMessages.Row), и попрошу вас делать все внимательно. Осталось вывести наши сообщения вызовом сниппета:

[[!ecMessages?
	tpl=`ecMessageTpl`
]]

Отлично! Если рассматривать код вкладки “Отзывы” в целом, то она получилась у меня такая:

<div class="tab-pane" id="reviews">
	<div class="comments">
		[[!ecMessages?
		&tpl=`ecMessageTpl`
		]]
	</div>				
	<div class="add-review row">
		<div class="col-sm-8 col-xs-12">
			<div class="new-review-form">
				<h2>Написать отзыв</h2>
				[[!ecForm?
				&tplForm=`ecFormCustomTpl`
				]]
			</div>
		</div>
	</div>		
 </div>

Попробовали оставить отзыв? Я думаю, что вы догадались, что нам не хватает вывода нашего общего рейтинга вверху страницы:

Для того, чтобы это сделать, я создал простенький чанк (ecBlankTpl):

[[+rating_simple]]

И вызвал в нужном месте сниппет ecThreadRating:

<div class="star-holder inline"><div class="star" data-score="[[!ecThreadRating? &tpl=`ecBlankTpl`]]"></div></div>

Вот и все! Более подробно про компонент вы можете почитать в документации к easyComm. До следующих уроков!

Автор Петропавловский Артем

Основатель и ведущий разработчик DART Agency. Пишу о разработке, продажах и процессах в IT.