THELIA Forum

Bonjour,

ayant réussi à mettre en place sur ma page d'index le formulaire de souscription à la newsletter (avec un comportement où lorsque je valide ce formulaire, un popup apparaît avec un bloc de texte notifiant de la bonne prise en compte de l'inscription à la newsletter), en opérant de la manière suivante :

• déclaration dans index.html :

  {form name="thelia.front.newsletter"}
                      <form id="form-newsletter-mini" class="subscribe subscribe--empty subscribe--huge" action="{url path="/newsletter"}" method="post">
                          {form_hidden_fields}
                          {form_field field="email"}
                          <div class="submit-control">
                              <label for="{$label_attr.for}-mini" class="sr-only">{intl l="Adresse email" d="hooknewsletter.fo.muktinergy-new-coming-soon-template"}</label>
                              <input type="email"
                                     name="{$name}"
                                     id="{$label_attr.for}-mini"
                                     class="email subscribe__field"
                                     maxlength="255"
                                     placeholder="{intl l="Votre adresse email ici..." d="hooknewsletter.fo.muktinergy-new-coming-soon-template"}" aria-describedby="newsletter-describe" {if $required} aria-required="true" required{/if} autocomplete="off">
                              <div style="position: absolute; left: -5000px;">
                                  <input type="text" name="b_21c10d3734fc03bebe9a827ab_ea1d7bc533"
                                         tabindex="-1"
                                         value="">
                              </div>
                              <div class="clear subscribe__btn-holder">
                                  <button type="submit"
                                          name="subscribe"
                                          id="mc-embedded-subscribe"
                                          class="button subscribe__btn">
                                      {intl l="Souscrire"}
                                  </button>
                              </div>
                          </div>
                          {/form_field}
  
                      </form>
                  {/form}

• puis dans modules/Front/Config/front.xml, les routes :

  <route id="newsletter.process" path="/newsletter" methods="post">
          <default key="_controller">Front\Controller\NewsletterController::subscribeAction</default>
          <default key="_view">newsletter</default>
      </route>
  
      <route id="newsletter.unsubscribe" path="/newsletter-unsubscribe" methods="post">
          <default key="_controller">Front\Controller\NewsletterController::unsubscribeAction</default>
          <default key="_view">newsletter-unsubscribe</default>
      </route>

• et enfin le contrôleur dans modules/Front/Controller/NewsletterController.php, la méthode suscribeAction() :

  public function subscribeAction()
      {
          $errorMessage = false;
  
          $newsletterForm = $this->createForm(FrontForm::NEWSLETTER);
  
          try {
              $form = $this->validateForm($newsletterForm);
  
              $event = new NewsletterEvent(
                  $form->get('email')->getData(),
                  $this->getRequest()->getSession()->getLang()->getLocale()
              );
  
              /** @var Customer $customer */
              if (null !== $customer = $this->getSecurityContext()->getCustomerUser()) {
                  $event
                      ->setFirstname($customer->getFirstname())
                      ->setLastname($customer->getLastname())
                  ;
              } else {
                  $event
                      ->setFirstname($form->get('firstname')->getData())
                      ->setLastname($form->get('lastname')->getData())
                  ;
              }
  
              $this->dispatch(TheliaEvents::NEWSLETTER_SUBSCRIBE, $event);
  
              // If a success URL is defined in the form, redirect to it, otherwise use the defaut view
              if ($newsletterForm->hasSuccessUrl() && ! $this->getRequest()->isXmlHttpRequest()) {
                  return $this->generateSuccessRedirect($newsletterForm);
              }
          } catch (\Exception $e) {
              $errorMessage = $e->getMessage();
  
              Tlog::getInstance()->error(sprintf('Error during newsletter subscription : %s', $errorMessage));
  
              $newsletterForm->setErrorMessage($errorMessage);
          }
  
          // If Ajax Request
          if ($this->getRequest()->isXmlHttpRequest()) {
              return new JsonResponse([
                  "success" => ($errorMessage) ? false : true,
                  "message" => ($errorMessage) ? $errorMessage : $this->getTranslator()->trans(
                      "Thanks for signing up! We'll keep you posted whenever we have any new updates.",
                      [],
                      Front::MESSAGE_DOMAIN
                  )
              ], ($errorMessage) ? 500 : 200);
          }
  
          $this->getParserContext()
              ->setGeneralError($errorMessage)
              ->addForm($newsletterForm);
  
          // If an error URL is defined in the form, redirect to it, otherwise use the defaut view
          if ($errorMessage && $newsletterForm->hasErrorUrl()) {
              return $this->generateErrorRedirect($newsletterForm);
          }
      }

J'ai donc voulu reproduire ce comportement avec un popup de validation sur mon formulaire de contact, j'ai donc tenté d'opérer de la manière suivante :

• déclaration du formulaire dans index.html :

  {form name="thelia.front.contact"}
                              <form id="form-contact contact-form"
                                    class="contact"
                                    action="{url path="/contact"}" method="post">
                              {form_hidden_fields}
                              {hook name="contact.form-top"}
                              <h3 class="heading-helper heading-helper--large">
                                  {intl l="Laissez-nous un message !"}
                              </h3>
                              {form_field field="name"}
                                  <div class="form-group group-name {if $error} has-error{/if}">
                                      <div class="control-input">
                                          <input type="text"
                                                 name="{$name}"
                                                 id="{$label_attr.for}"
                                                 class="form-control contact__field"
                                                 maxlength="255"
                                                 placeholder="{intl l="Placeholder contact name"}"
                                                 value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                          {if $error }
                                          <span class="help-block">{$message}</span>
                                          {assign var="error_focus" value="true"}
                                          {elseif $value != "" && !$error}
                                          <span class="help-block"><i class="fa fa-check"></i></span>
                                          {/if}
                                      </div>
                                  </div><!--/.form-group-->
                              {/form_field}
                              {form_field field="email"}
                                  <div class="form-group group-email {if $error} has-error{/if}">
                                      <div class="control-input">
                                          <input type="email"
                                                 name="{$name}"
                                                 id="{$label_attr.for}"
                                                 class="form-control contact__field"
                                                 maxlength="255"
                                                 placeholder="{intl l="Placeholder contact email"}"
                                                 value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                          {if $error }
                                          <span class="help-block">{$message}</span>
                                          {assign var="error_focus" value="true"}
                                          {/if}
                                      </div>
                                  </div><!--/.form-group-->
                              {/form_field}
                              {form_field field="subject"}
                                  <div class="form-group group-firstname{if $error} has-error{/if}">
                                      <div class="control-input">
                                          <input type="text"
                                                 name="{$name}"
                                                 id="{$label_attr.for}"
                                                 class="form-control contact__field"
                                                 maxlength="255"
                                                 placeholder="{intl l="Placeholder contact subject"}"
                                                 value="{$value}" {if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                          {if $error }
                                          <span class="help-block">{$message}</span>
                                          {assign var="error_focus" value="true"}
                                          {/if}
                                      </div>
                                  </div><!--/.form-group-->
                              {/form_field}
                              {form_field field="message"}
                                  <div class="form-group group-message{if $error} has-error{/if}">
                                      <!-- <label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label> -->
                                      <div class="control-input">
                                          <textarea name="{$name}"
                                                    id="{$label_attr.for}"
                                                    class="form-control contact__field contact__area"
                                                    placeholder="{intl l="Placeholder contact message"}"
                                                    {if $required} aria-required="true" required{/if}>{$value}</textarea>
                                          {if $error }
                                          <span class="help-block">{$message}</span>
                                          {assign var="error_focus" value="true"}
                                          {/if}
                                      </div>
                                  </div><!--/.form-group-->
                              {/form_field}
                              {hook name="contact.form-bottom"}
                              <button class="btn btn--decorated btn-warning btn-submit"
                                      type="submit">
                                  {intl l="Poster le message"}
                              </button>
                              </form>
                          {/form}

• puis dans modules/Front/Config/front.xml, les routes :

  <route id="contact.send" path="/contact" methods="post">
          <default key="_controller">Front\Controller\ContactController::sendAction</default>
          <default key="_view">contact</default>
      </route>
  
      <route id="contact.success" path="/contact/success">
          <default key="_controller">Thelia\Controller\Front\DefaultController::noAction</default>
          <default key="_view">contact-success</default>
      </route>

• et en s'inspirant du NewsletterController.php, j'ai essayé de customiser la méthode sendAction() dans ContactController.php pour reproduire cet effet de popup lorsque les données du formulaire ont été validées :

  public function sendAction()
      {
          $error_message = false;
  
          $contactForm = $this->createForm(FrontForm::CONTACT);
  
          try {
              $form = $this->validateForm($contactForm);
  
              $message = \Swift_Message::newInstance($form->get('subject')->getData())
                  ->addFrom(ConfigQuery::getStoreEmail(), $form->get('name')->getData())
                  ->addReplyTo($form->get('email')->getData(), $form->get('name')->getData())
                  ->addTo(ConfigQuery::getStoreEmail(), ConfigQuery::getStoreName())
                  ->setBody($form->get('message')->getData())
              ;
  
              $this->getMailer()->send($message);
  
              if ($contactForm->hasSuccessUrl() && ! $this->getRequest()->isXmlHttpRequest()) {
                  return $this->generateSuccessRedirect($contactForm);
              }
  
          } catch (FormValidationException $e) {
              $error_message = $e->getMessage();
  
              Tlog::getInstance()->error(sprintf('Error during sending contact mail : %s', $error_message));
  
              $contactForm->setErrorMessage($error_message);
          }
  
          // If Ajax Request
          if ($this->getRequest()->isXmlHttpRequest()) {
              return new JsonResponse([
                  "success" => ($error_message) ? false : true,
                  "message" => ($error_message) ? $error_message : $this->getTranslator()->trans(
                      "Thanks for signing up! We'll keep you posted whenever we have any new updates.",
                      [],
                      Front::MESSAGE_DOMAIN
                  )
              ], ($error_message) ? 500 : 200);
          }
  
          $this->getParserContext()
              ->addForm($contactForm)
              ->setGeneralError($error_message);
  
          // Redirect to error URL if defined
          if ($error_message && $contactForm->hasErrorUrl()) {
              return $this->generateErrorRedirect($contactForm);
          }
      }

Or lorsque je valide le formulaire de contact, je suis redirigé vers l'url "/contact", à l'instar du formulaire de newsletter où j'ai bien le popup qui apparaît. Je sais qu'il s'agit d'un problème de routes, mais n'ayant pas tout saisi à ce sujet je ne vois pas ce qu'il faut que je modifie.

Quelqu'un pour m'apporter sa lumière ?

Merci d'avance,
Pierre

Bonjour,

merci à toi pour ce précieux retour. Cependant, actuellement, je stagne un peu et n'arrive pas réellement à comprendre ce que je suis en train de faire. J'ai importé les fichiers de ton module, l'ai activé dans le BO et vidé les caches. Mon souhait est d'afficher mon formulaire de contact sur ma page d'index. Donc, donc mon fichier index.html (qui étend le layout.tpl), j'ai pour mon formulaire la déclaration suivante :

{form name="bettercontact.form"}
                            <form id="form-contact"
                                  class="contact"
                                  action="{url path="/contact"}" method="post">
                            {form_hidden_fields}
                            {hook name="contact.form-top"}
                                <div class="panel-heading">
                                    {intl l="Send us a message"}
                                </div>
                                <div class="panel-body">
                                    {if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}
                                    <div class="row">
                                        {form_field field="firstname"}
                                        <div class="form-group group-name {if $error} has-error{/if}">
                                            <div class="control-input">
                                                <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control contact__field" maxlength="255" placeholder="{$label_attr.placeholder}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                                {if $error }
                                                <span class="help-block">{$message}</span>
                                                {assign var="error_focus" value="true"}
                                                {elseif $value != "" && !$error}
                                                <span class="help-block"><i class="fa fa-check"></i></span>
                                                {/if}
                                            </div>
                                        </div>
                                        {/form_field}
                                        {form_field field="lastname"}
                                        <div class="form-group group-name {if $error} has-error{/if}">
                                            <div class="control-input">
                                                <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control contact__field" maxlength="255" placeholder="{$label_attr.placeholder}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                                {if $error }
                                                <span class="help-block">{$message}</span>
                                                {assign var="error_focus" value="true"}
                                                {elseif $value != "" && !$error}
                                                <span class="help-block"><i class="fa fa-check"></i></span>
                                                {/if}
                                            </div>
                                        </div>
                                        {/form_field}
                                        {form_field field="email"}
                                        <div class="form-group group-email {if $error} has-error{/if}">
                                            <div class="control-input">
                                                <input type="email" name="{$name}" id="{$label_attr.for}" class="form-control contact__field" maxlength="255" placeholder="{$label_attr.placeholder}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                                {if $error }
                                                <span class="help-block">{$message}</span>
                                                {assign var="error_focus" value="true"}
                                                {elseif $value != "" && !$error}
                                                <span class="help-block"><i class="fa fa-check"></i></span>
                                                {/if}
                                            </div>
                                        </div>
                                        {/form_field}
                                        {form_field field="message"}
                                        <div class="form-group group-message {if $error} has-error{/if}">
                                            <div class="control-input">
                                                <textarea name="{$name}" id="{$label_attr.for}" placeholder="{$label_attr.placeholder}" rows="6" class="form-control contact__field"{if $required} aria-required="true" required{/if}>{$value}</textarea>
                                                {if $error }
                                                <span class="help-block">{$message}</span>
                                                {assign var="error_focus" value="true"}
                                                {elseif $value != "" && !$error}
                                                <span class="help-block"><i class="fa fa-check"></i></span>
                                                {/if}
                                            </div>
                                        </div>
                                        {/form_field}
                                    </div>
                                    <div class="group-btn pull-right">
                                        <div class="control-btn">
                                            <button type="submit" class="btn btn--decorated btn-warning btn-submit"><i class="fa fa-chevron-right"></i> {intl l="Send"}</button>
                                        </div>
                                    </div>
                                </div>
                            {hook name="contact.form-bottom"}

                            </form>
                        {/form}

J'ai ensuite modifié le ContactForm.php car dans mon cas je n'ai pas besoin de tous les champs :

<?php

namespace BetterContact\Form;

use BetterContact\BetterContact;
use Symfony\Component\Validator\Constraints\Email;
use Symfony\Component\Validator\Constraints\NotBlank;
use Thelia\Core\Translation\Translator;
use Thelia\Form\FirewallForm;

/**
 * Class ContactForm
 * @package Thelia\Form
 * @author Manuel Raynaud <manu@thelia.net>
 */
class ContactForm extends FirewallForm
{
    protected function buildForm()
    {
        $this->formBuilder
            ->add('lastname', 'text', array(
                'constraints' => array(
                    new NotBlank()
                ),
                'label' => $this->translator->trans('Last name', [], BetterContact::DOMAIN_NAME),
                'label_attr' => [
                    'placeholder' => $this->translator->trans('Your last Name', [], BetterContact::DOMAIN_NAME),
                ]
            ))
            ->add('firstname', 'text', array(
                'constraints' => array(
                    new NotBlank()
                ),
                'label' => $this->translator->trans('First Name', [], BetterContact::DOMAIN_NAME),
                'label_attr' => [
                    'placeholder' => $this->translator->trans('Your first Name', [], BetterContact::DOMAIN_NAME),
                ]
            ))
            ->add('email', 'email', array(
                'constraints' => array(
                    new NotBlank()
                ),
                'label' => $this->translator->trans('Email address', [], BetterContact::DOMAIN_NAME),
                'label_attr' => [
                    'placeholder' => $this->translator->trans('Your e-mail address', [], BetterContact::DOMAIN_NAME),
                ]
            ))
            ->add('message', 'textarea', array(
                'constraints' => array(
                    new NotBlank()
                ),
                'label' => $this->translator->trans('Your Message', [], BetterContact::DOMAIN_NAME),
                'label_attr' => [
                    'placeholder' => $this->translator->trans('Please enter your message here.', [], BetterContact::DOMAIN_NAME),
                ]
            ))
        ;
    }

    /**
     * @return string the name of you form. This name must be unique
     */
    public function getName()
    {
        return 'better_contact_form';
    }
}

Et le ContactController.php ressemble à ceci :

<?php


namespace BetterContact\Controller;

use BetterContact\BetterContact;
use Thelia\Controller\Front\BaseFrontController;
use Thelia\Form\Exception\FormValidationException;
use Thelia\Log\Tlog;
use Thelia\Model\ConfigQuery;

/**
 * Class ContactController
 * @package Thelia\Controller\Front
 * @author Manuel Raynaud <manu@thelia.net>
 */
class ContactController extends BaseFrontController
{
    /**
     * send contact message
     */
    public function sendAction()
    {
        $contactForm = $this->createForm(BetterContact::FORM_NAME);

        try {
            $form = $this->validateForm($contactForm);
            
            $data = $form->getData();
            
            $data['date'] = new \DateTime();
            
            $fullName = $data['firstname'] . ' ' . $data['lastname'];
            
            $message = $this->getMailer()->createEmailMessage(
                BetterContact::MESSAGE_NAME,
                [ConfigQuery::getStoreEmail() => $fullName],
                [ConfigQuery::getStoreEmail() => ConfigQuery::getStoreName()],
                $data
            );

            $message->addReplyTo($data['email'], $fullName);

            $this->getMailer()->send($message);

            // If a success URL is defined, redirect to it.
            if ($contactForm->hasSuccessUrl()) {
                return $this->generateRedirect($this->retrieveSuccessUrl($contactForm));
            }
    
            // Otherwise, use the Front module router to process success.
            return $this->generateRedirect(
                $this->getRouteFromRouter(
                    'router.front',
                    'contact.success'
                )
            );
        } catch (\Exception $e) {
            $error_message = $e->getMessage();
        }

        Tlog::getInstance()->error(sprintf('BetterContact: Error during sending contact mail : %s', $error_message));

        $contactForm->setErrorMessage($error_message);

        $this->getParserContext()
            ->addForm($contactForm)
            ->setGeneralError($error_message);
    
        // Redirect to error URL if defined, otherwise rely on the _view parameter in the current route.
        if ($contactForm->hasErrorUrl()) {
            return $this->generateErrorRedirect($contactForm);
        }
    }
}

Je laisse l'AJAX de côté pour l'instant, je reviendrais dessus lorsque mon formulaire de contact sera fonctionnel.
Or maintenant le formulaire, lorsqu'il est soumis via le bouton, me redirige vers la page /contact, et le mail de contact ne part jamais.

Pour comprendre ce qu'il se passe, quelle méthode de débug me conseillerais tu pour décortiquer tout ça ? Je précise que n'étant pas de base du métier,  je n'y connais pas grand chose et suis à la recherche d'une solution qui me permettrait de voir quelles sont les requêtes envoyées, routes appelées et par qui, et enfin voir où le contrôleur s'arrête.

D'autre part, quelle est la bonne méthode si je souhaite injecter le contenu de BetterContact/templates/monTemplate/better-contact.html dans mon fichier index.html au lieu d'écrire le code entier du formulaire dans ce dernier fichier index.html ? Je crois que j'ai vraiment pas tout saisi là-dessus...

Merci à toi de ton retour,
++,
Pierre

Pour mettre le formulaire sur l'index :

1) Copier coller le code du formulaire dans l'index.
2) définir le champ success_url du formulaire à {navigate to="index"} c'est à dire :

{form_field field="success_url"}<input type="hidden" name="{$name}" value="{navigate to="index"}"<{/form_field}

3) definir le champ error_url à {navigate to="index"} de la même façon que ci-dessus

C'est tout.

Ce n'est ni propre, ni sale, ti n'a pas le choix. Si le module BetterContact prenait en charge les Hooks, tu pourrais accrocher le module au hook (= crochet) "home.body", mais ce n'est pas le cas: ce module a été conçu pour prendre la place sans modification du formulaire de contact de base.

Depuis Thelia 2.3, on peut accrocher un template à un hook sans coder (cf. http://doc.thelia.net/en/documentation/ … -thelia-23 ). Tu peux donc essayer quelque chose comme ça dans le config.xml du module BetterContact

        <hooks>
            <hook id="bettercontact.hooks">
                 <tag name="hook.event_listener" event="home.body" templates="render:better-contact.html" />
            </hook>
        </hooks>

Comme tu insères un fragment de code (better-contact.html) dans un template (index.html), tu dois supprimer de better-contact.html le {extends file="contact.html"}. Tu peux aussi enlever la déclaration du block {block name="contact-form"} et le {/block] final, parce qu'elle ne sert à rien, mais ce n'est pas indispensable.

Je ne sais pas

Je garde dans la console de ton navigateur la réponse à ta requête Ajax.