Newsletter subscription with ajax

core/lib/Thelia/Config/Resources/config.xml

@@ -63,6 +63,7 @@
         <form name="thelia.front.address.create" class="Thelia\Form\AddressCreateForm"/>
         <form name="thelia.front.address.update" class="Thelia\Form\AddressUpdateForm"/>
         <form name="thelia.front.contact" class="Thelia\Form\ContactForm"/>
+        <form name="thelia.front.newsletter" class="Thelia\Form\NewsletterForm"/>
 
         <!--  Forms for Admin -->
         <form name="thelia.install.step3" class="Thelia\Form\InstallStep3Form"/>
@@ -153,8 +154,6 @@
 
         <form name="thelia.shopping_zone_area" class="Thelia\Form\ShippingZone\ShippingZoneAddArea"/>
         <form name="thelia.shopping_zone_remove_area" class="Thelia\Form\ShippingZone\ShippingZoneRemoveArea"/>
-
-        <form name="thelia.newsletter" class="Thelia\Form\NewsletterForm"/>
     </forms>
 
 

core/lib/Thelia/Config/Resources/routing/front.xml

@@ -207,10 +207,5 @@
         <default key="_view">newsletter</default>
     </route>
 
-    <route id="newsletter.success" path="/newsletter/success">
-        <default key="_controller">Thelia\Controller\Front\DefaultController::noAction</default>
-        <default key="_view">newsletter-success</default>
-    </route>
-
     <!-- end newsletter management -->
 </routes>

core/lib/Thelia/Controller/Front/NewsletterController.php

@@ -62,17 +62,32 @@ class NewsletterController extends BaseFrontController
             $error_message = $e->getMessage();
         }
 
-        if($error_message !== false) {
-            \Thelia\Log\Tlog::getInstance()->error(sprintf('Error during newsletter subscription : %s', $error_message));
+        \Thelia\Log\Tlog::getInstance()->error(sprintf('Error during newsletter subscription : %s', $error_message));
 
+        // If Ajax Request
+        if ($this->getRequest()->isXmlHttpRequest()) {
+            if ($error_message) {
+                $response = $this->jsonResponse(json_encode(array(
+                            "success" => false,
+                            "message" => $error_message
+                        )));
+            } else {
+                $response = $this->jsonResponse(json_encode(array(
+                            "success" => true,
+                            "message" => "Thanks for signing up! We'll keep you posted whenever we have any new updates."
+                        )));;
+            }
+
+            return $response;
+
+        } else {
             $newsletterForm->setErrorMessage($error_message);
 
             $this->getParserContext()
                 ->addForm($newsletterForm)
                 ->setGeneralError($error_message)
             ;
-        } else {
-            $this->redirectToRoute('newsletter.success');
         }
+
     }
 }

core/lib/Thelia/Form/NewsletterForm.php

@@ -73,7 +73,7 @@ class NewsletterForm extends BaseForm
                         )
                     ))
                 ),
-                'label' => Translator::getInstance()->trans('email'),
+                'label' => Translator::getInstance()->trans('Email address'),
                 'label_attr' => array(
                     'for' => 'email_newsletter'
                 )
@@ -84,7 +84,7 @@ class NewsletterForm extends BaseForm
     {
         $customer = NewsletterQuery::create()->findOneByEmail($value);
         if ($customer) {
-            $context->addViolation("This email already exists");
+            $context->addViolation("You are already subscribed!");
         }
     }
 

templates/default/assets/js/script.js

@@ -89,6 +89,32 @@
             }).find(':radio:checked').trigger('change.account');
         }
 
+        // Mini Newsletter Subscription
+        var $form_newsletter = $('#form-newsletter-mini');
+        if($form_newsletter.size() > 0) {
+            $form_newsletter.on('submit.newsletter', function(){
+
+                $.ajax({
+                    url: $(this).attr('action'),
+                    type: $(this).attr('method'),
+                    data: $(this).serialize(),
+                    dataType: 'json',
+                    success: function(json) {
+                        var $msg = '';
+                        if(json.success){
+                            $msg = json.message;
+                        }else{
+                            $msg = json.message;
+                        }
+                        bootbox.alert($msg);
+                    }
+                });
+
+                return false;
+            });
+        }
+
+
         // Forgot Password
         /*
          var $forgot_password = $('.forgot-password', $form_login);

templates/default/layout.tpl

@@ -297,12 +297,13 @@ URL: http://www.thelia.net
                         <div class="block-heading"><h3 class="block-title">{intl l="Newsletter"}</h3></div>
                         <div class="block-content">
                             <p id="newletter-describe">{intl l="Sign up to receive our latest news."}</p>
-                            {form name="thelia.newsletter"}
-                            <form id="form-newsletter" action="{url path="/newsletter"}" method="post" role="form">
+                            {form name="thelia.front.newsletter"}
+                            <form id="form-newsletter-mini" action="{url path="/newsletter"}" method="post" role="form">
+                                {form_hidden_fields form=$form}
                                 {form_field form=$form field="email"}
                                 <div class="form-group">
-                                    <label for="{$label_attr.for}">{intl l="Email address"}</label>
-                                    <input type="email" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="{intl l="Your email address"}" aria-describedby="newletter-describe" {if $required} aria-required="true" required{/if} autocomplete="off">
+                                    <label for="{$label_attr.for}-mini">{intl l="Email address"}</label>
+                                    <input type="email" name="{$name}" id="{$label_attr.for}-mini" class="form-control" placeholder="{intl l="Your email address"}" aria-describedby="newletter-describe" {if $required} aria-required="true" required{/if} autocomplete="off">
                                 </div>
                                 {/form_field}
                                 <button type="submit" class="btn btn-subscribe">{intl l="Subscribe"}</button>

templates/default/newsletter-success.html

@@ -1,15 +0,0 @@
-{extends file="layout.tpl"}
-
-{* Breadcrumb *}
-{block name='no-return-functions' append}
-    {$breadcrumbs = [['title' => {intl l="Thanks !"}, 'url'=>{url path="/contact/success"}]]}
-{/block}
-
-{block name="main-content"}
-    <div class="main">
-        <article class="col-main" role="main" aria-labelledby="main-label">
-            <h1 id="main-label" class="page-header">{intl l="Thanks for signing up!"}</h1>
-            <p>{intl l="We'll keep you posted whenever we have any new updates. If you ever wish to unsubscribe, you can easily do so via the link that will be in every email."}</p>
-        </article>
-    </div>
-{/block}

templates/default/newsletter.html

@@ -8,37 +8,31 @@
 {block name="main-content"}
     <div class="main">
         <article class="col-main" role="main" aria-labelledby="main-label">
-            <h1 id="main-label" class="page-header">{intl l="Newsletter"}</h1>
+            <h1 id="main-label" class="page-header">{intl l="Newsletter Subscription"}</h1>
 
-            {form name="thelia.newsletter"}
-                <form id="form-contact" class="form-horizontal" action="{url path="/newsletter"}" method="post" role="form">
+            {form name="thelia.front.newsletter"}
+                <form id="form-newsletter" action="{url path="/newsletter"}" method="post" role="form">
                     {form_hidden_fields form=$form}
-                    <fieldset id="contact-info" class="panel panel">
-                        <div class="panel-heading">
-                            1. {intl l="Personal Informations"}
+                    <p>{intl l="You want to subscribe to the newsletter? Please enter your email address below."}</p>
+                    {form_field form=$form field="email"}
+                        <div class="form-group group-email {if $error}has-error{elseif !$error && $value != ""}has-success{/if}">
+                            <label for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
+                            <div class="control-input">
+                                <input type="email" name="{$name}" id="{$label_attr.for}" value="{$value}" class="form-control" {if $required} aria-required="true" required{/if} autofocus>
+                                {if $error}
+                                    <span class="help-block"><span class="icon-remove"></span> {$message}</span>
+                                {elseif !$error && $value != ""}
+                                    <span class="help-block"><span class="icon-ok"></span> {intl l="Thanks for signing up! We'll keep you posted whenever we have any new updates."}</span>
+                                {/if}
+                            </div>
                         </div>
-                        <div class="panel-body">
-                            {form_field form=$form field="email"}
-                                <div class="form-group group-firstname {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
-                                    <label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
-                                    <div class="control-input">
-                                        <input type="email" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="johndoe@domain.com" value="{$value}" {if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
-                                        {if $error }
-                                            <span class="help-block"><i class="icon-remove"></i> {$message}</span>
-                                            {assign var="error_focus" value="true"}
-                                        {elseif $value != "" && !$error}
-                                            <span class="help-block"><i class="icon-ok"></i></span>
-                                        {/if}
-                                    </div>
-                                </div><!--/.form-group-->
-                            {/form_field}
-                            <div class="form-group group-btn">
-                                <div class="control-btn">
-                                    <button type="submit" class="btn btn-register">{intl l="Subscribe"}</button>
-                                </div>
-                            </div><!--/.form-group-->
+                    {/form_field}
+
+                    <div class="form-group group-btn">
+                        <div class="control-btn">
+                            <button type="submit" class="btn btn-submit">{intl l="Subscribe"}</button>
                         </div>
-                    </fieldset>
+                    </div><!--/.form-group-->
                 </form>
             {/form}
         </article>