Jump to content
MehmetZalah

Show welcome message for customers first day!

Recommended Posts

Hello,

 

Show popup message for new clients.

 

I think this algorithm will help:

 


if “customer registration date” is exactly equal to today's date {

view popup message

}

 

That’s mean, The condition will be true only IF the customer login into the clientarea the same day for registration.

 

Hope one help!

 

Thanks in Advance.

Share this post


Link to post
Share on other sites

you couldn't do it just by editing a template as the signup date isn't passed to it - so you'd need an action hook to pass it to the cart..

 

<?php

function client_signup_date_hook($vars) {

   $client = Menu::context('client');
   $signup = $client->dateCreated;

   return array("signup" => $signup);
}
add_hook("ClientAreaPage", 1, "client_signup_date_hook");
?>

and then in the template...

 

{if $smarty.now|date_format:"%Y-%m-%d" eq $signup|date_format:"%Y-%m-%d"}
welcome and thank you for signing up today! (popup message)
{/if}

the above is a basic way to do it, but if you wanted to do everything in the hook, including a bootstrap popup shown only once, you could do this...

 

<?php

//Show modal popup to clients a welcome message on their first day (only once!)
//provided by brian!

function client_custom_headoutput_hook($vars) {

   $head_return = '';
   $head_return = '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
   <script>
   $(document).ready(function() {
     if ($.cookie("dismiss") == null) {
       $(\'#myModal\').appendTo("body");
       function show_modal(){
         $(\'#myModal\').modal();
       }
       window.setTimeout(show_modal, 100);
     }
     $(".dismiss").click(function() {
       $.cookie(\'dismiss\', \'true\', { expires: 2, path: \'/\' });
     });
   });
   </script>';

   return $head_return;
}
add_hook("ClientAreaHeadOutput",1,"client_custom_headoutput_hook");

function client_custom_headeroutput_hook($vars) {

   $client = Menu::context('client');
   $today = date("Y-m-d");
   $templatefile = $vars['templatefile'];

   if (empty($client->id)) { return; }

   if ($client->dateCreated == $today and $templatefile == "clientareahome") {

       $header_return = '';
       $header_return = '<div class="container">
       <div class="modal fade" id="myModal" role="dialog">
           <div class="modal-dialog modal-sm">
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal">×</button>
                       <h4 class="modal-title"><i class="fa fa-thumbs-up fa-lg"></i>  '.Lang::trans('hello').', '.$client->firstname.'</h4>
                   </div>
                   <div class="modal-body">
                       <p>Thank you for signing up with us today!</p>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-primary dismiss" data-dismiss="modal">'.Lang::trans('orderForm.close').'</button>
                   </div>
                   </div>
               </div>
           </div>
       </div>';

       return $header_return;
   }
}
add_hook("ClientAreaHeaderOutput",1,"client_custom_headeroutput_hook");

PSsVHx0.png

 

ideally, if your site uses multiple languages, then you should use Language Overrides for all the text - i've done that on 2/3 of the above (top line and Close button).

 

* tested and working on a v7.2.1 dev using the default Six template... if using a custom template other than one based on Six, you may need to make changes! :idea:

Share this post


Link to post
Share on other sites

Dear Mr. brian,

 

Thank you very much for your help. You are awesome!

 

This help me so much and well done :)

 

Best Regards,

Share this post


Link to post
Share on other sites
What if a client signs up but doesn't login the same day, can this be implemented say if the client logs in 3 days from the signup date?

you could grab the login date using Carbon, calculate the difference between it and today and add it to the IF statement as another condition. :idea:

 

Doesn't seem to work on 7.2.2

i've just tested again on a v7.2.2 dev and it works fine - bear in mind what I said previously though... it's tested successfully on v7.2.2 using the six template.

 

once you get beyond Six and start using custom themes, e.g clouder, you run the risk of .js conflicts - e.g "Six" calls 1 .js file, your clouder theme calls at least 8 and it only needs one to clash with the hook for it to fail.

 

the only additional .js file the hook calls is the external cookie script - I bet if you try it on "six", the hook will work fine. :)

Share this post


Link to post
Share on other sites

to add a date range to the hook, e.g the popup will occur once anytime within x days/weeks/months etc of signing up...

 

<?php

//Show modal popup to clients (with a welcome message) for a specific period after client account creation (shown only once!)
//provided by brian!

function client_custom_headoutput_hook($vars) {

   $head_return = '';
   $head_return = '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
   <script>
   $(document).ready(function() {
     if ($.cookie("dismiss") == null) {
       $(\'#myModal\').appendTo("body");
       function show_modal(){
         $(\'#myModal\').modal();
       }
       window.setTimeout(show_modal, 100);
     }
     $(".dismiss").click(function() {
       $.cookie(\'dismiss\', \'true\', { expires: 2, path: \'/\' });
     });
   });
   </script>';

   return $head_return;
}
add_hook("ClientAreaHeadOutput",1,"client_custom_headoutput_hook");

use Carbon\Carbon;

function client_custom_headeroutput_hook($vars) {

   $client = Menu::context('client');
   $created = Carbon::parse($client->dateCreated);
   $enddate = Carbon::parse($client->dateCreated)->addDays(5);
   $today = Carbon::today();

   $templatefile = $vars['templatefile'];

   if (empty($client->id)) { return; }

   if ($today >= $created and $today <= $enddate and $templatefile == "clientareahome") {

       $header_return = '';
       $header_return = '<div class="container">
       <div class="modal fade" id="myModal" role="dialog">
           <div class="modal-dialog modal-sm">
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal">×</button>
                       <h4 class="modal-title"><i class="fa fa-thumbs-up fa-lg"></i>  '.Lang::trans('hello').', '.$client->firstname.'</h4>
                   </div>
                   <div class="modal-body">
                       <p>Thank you for signing up with us!</p>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-primary dismiss" data-dismiss="modal">'.Lang::trans('orderForm.close').'</button>
                   </div>
                   </div>
               </div>
           </div>
       </div>';

       return $header_return;
   }
}
add_hook("ClientAreaHeaderOutput",1,"client_custom_headeroutput_hook");

in the above example, it's set to within 5 days of the account creation date - but you could change that to any range more suitable for your needs. :idea:

Share this post


Link to post
Share on other sites

Hi Jason,

 

Is there a way to resize the popup window?

in the above version, i've used Bootstrap modal windows (I have posted code previously that does the same thing using jQuery windows, but Bootstrap is more visually pleasing) - Bootstrap modals come in 3 default widths: Small (modal-sm, 300px), Medium (600px) and Large (modal-lg, 900px)... these widths are defined in the css files (in the WHMCS clientarea, that would be /templates/six (or custom)/css/all.min.css).

 

therefore, there is nothing to stop you using a custom.css file to either change these default width values, or define new width classes for use in the hook.

 

alternatively, for specific cases, you could always define a modal width (and/or height etc) inline in the hook code..

<div class="modal-dialog" style="width: 255px;">

 

also, is there a way I can use this for guest?

yes - from the previous code, you'd just need to modify the line below... which basically checks if the client is logged in, and if not (e.g a guest), does nothing.

    if (empty($client->id)) { return; }

so if you modified the hook code to do something for guests (as well as the new clients), you could do this...

 

<?php

//Show modal popup to clients a welcome message on their first day (only once!) or to guests.
//provided by brian!

function client_custom_headoutput_hook($vars) {

   $client = Menu::context('client');
   $head_return = '';
   $head_return = '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>';
   if (!empty($client->id)) {
   $head_return .= '
   <script>
   $(document).ready(function() {
     if ($.cookie("dismiss") == null) {
       $(\'#myModal\').appendTo("body");
       function show_modal(){
         $(\'#myModal\').modal();
       }
       window.setTimeout(show_modal, 100);
     }
     $(".dismiss").click(function() {
       $.cookie(\'dismiss\', \'true\', { expires: 5, path: \'/\' });
     });
   });
   </script>'; }
   else {
   $head_return .= '
   <script>
   $(document).ready(function() {
     if ($.cookie("guest") == null) {
       $(\'#myModal\').appendTo("body");
       function show_modal(){
         $(\'#myModal\').modal();
       }
       window.setTimeout(show_modal, 100);
     }
     $(".guest").click(function() {
       $.cookie(\'guest\', \'true\', { expires: 365, path: \'/\' });
     });
   });
   </script>'; }        

   return $head_return;
}
add_hook("ClientAreaHeadOutput",1,"client_custom_headoutput_hook");

use Carbon\Carbon;

function client_custom_headeroutput_hook($vars) {

   $client = Menu::context('client');
   $created = Carbon::parse($client->dateCreated);
   $enddate = Carbon::parse($client->dateCreated)->addDays(5);
   $today = Carbon::today();

   $templatefile = $vars['templatefile'];

   if (empty($client->id) and $templatefile == "homepage") { 

       $header_return = '';
       $header_return = '<div class="container">
       <div class="modal fade" id="myModal" role="dialog">
           <div class="modal-dialog modal-sm">
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close guest" data-dismiss="modal">×</button>
                       <h4 class="modal-title"><img src="http://icons.veryicon.com/32/Flag/Not%20a%20Patriot/Canada%20Flag.png">  '.Lang::trans('hello').', Guest</h4>
                   </div>
                   <div class="modal-body">
                       <p>Welcome to AffordableDomains!</p>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-primary guest" data-dismiss="modal">'.Lang::trans('orderForm.close').'</button>
                   </div>
                   </div>
               </div>
           </div>
       </div>';
       return $header_return;    
   }
   elseif ($today >= $created and $today <= $enddate and $templatefile == "clientareahome") {

       $header_return = '';
       $header_return = '<div class="container">
       <div class="modal fade" id="myModal" role="dialog">
           <div class="modal-dialog modal-sm">
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close dismiss" data-dismiss="modal">×</button>
                       <h4 class="modal-title"><i class="fa fa-thumbs-up fa-lg"></i>  '.Lang::trans('hello').', '.$client->firstname.'</h4>
                   </div>
                   <div class="modal-body">
                       <p>Thank you for signing up with us today!</p>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-primary dismiss" data-dismiss="modal">'.Lang::trans('orderForm.close').'</button>
                   </div>
                   </div>
               </div>
           </div>
       </div>';
       return $header_return;
   }
}
add_hook("ClientAreaHeaderOutput",1,"client_custom_headeroutput_hook");

it's slightly longer, but that's because I don't know your intentions for this and so i've tried to cover both client and guest scenarios... if it's purely for guests, then you can cut the size down by dropping the else from the first half and the elseif from the second half... alternatively, just split it into two hook files, one for guests, another for clients and use them separately when required.

 

it now contains two cookies that are independent of each other (one for guests lasting a year, and one for clients lasting 5 days)... that avoids the issue of them using the same cookie, and if/when guests later become clients, the client popup not showing... in the above example, the client cookie only has to last until after the IF conditions are no longer satisfied... for guests, you could change the value to thousands to effectively dismiss it for decades!

 

aerTkDv.png

 

btw - cookie dismissal occurs when they press the Close or X buttons... if they press outside the modal window, it will return! :)

 

i've just spotted you're using a modal window for the dropdown menus - now I see why you may have asked about sizes... the following tweak make it more compact...

<div class="modal-dialog" style="width:400px;">

 

srx8kVA.png

Share this post


Link to post
Share on other sites

I am actually using this on a clients site.

 

After looking into bootstrap models a little further I actually made the change here:

 

<div class="modal-dialog modal-sm">

 

Changed to:

<div class="modal-dialog modal-md">

 

Here is how I used this popup! Very useful!

popup.jpg

clientpopup.jpg

Share this post


Link to post
Share on other sites
I am actually using this on a clients site.

After looking into bootstrap models a little further I actually made the change here:

Changed to:

Here is how I used this popup! Very useful!

thanks for the images - I always enjoy discovering that code i've posted is actually being used in the real world. :idea:

 

on a small technical note, I think these modal windows are medium by default, so you don't need to specify modal-md - unless that's a custom css that you've setup for this site.

Share this post


Link to post
Share on other sites

I love these small modifications that add that little bit more to my site(s).

 

The modal-sm code is in the hook you provided, I changed the sm to lg at first and it was waay to big, so i changed it to md and perfect!

Share this post


Link to post
Share on other sites
The modal-sm code is in the hook you provided, I changed the sm to lg at first and it was waay to big, so i changed it to md and perfect!

yeah, I get that but what I mean is that md isn't defined in the css by default... so for medium, you just call modal-dialog...

 

small = <div class="modal-dialog modal-sm">

medium = <div class="modal-dialog">

large = <div class="modal-dialog modal-lg">

 

it's a trivial point as it will work the way you've done it, but it's just trying to call a css class that doesn't exist, so it's falling back on the default width (600px or auto) of modal-dialog.

Share this post


Link to post
Share on other sites
yeah, I get that but what I mean is that md isn't defined in the css by default... so for medium, you just call modal-dialog...

 

it's a trivial point as it will work the way you've done it, but it's just trying to call a css class that doesn't exist, so it's falling back on the default width (600px or auto) of modal-dialog.

Ahhh, I see what you mean here! Its good to know, I like learning these little ins and outs of coding.

Share this post


Link to post
Share on other sites
yeah, I get that but what I mean is that md isn't defined in the css by default... so for medium, you just call modal-dialog...

 

So I removed the md

<div class="modal-dialog">

 

This would not load any model on the site! so md has to be added to the class

Share this post


Link to post
Share on other sites

how weird - when I do it on the dev, I get the medium modal window without any issues... i'm wondering if there are other modal windows at play on your client's site, e.g chat window etc ??

 

A9SPS5Z.png

 

lcG7Gqm.png

 

I bet it would work on your site if you used modal-jason too... but if it needs modal-md to work, don't fight against it - give in! :)

Share this post


Link to post
Share on other sites

Im sure I have something else that is conflicting with it! All I know is without the md it didnt want to show, and when I added it back it reappeared like it was supposed to :) Love this popup window idea!

Share this post


Link to post
Share on other sites
Love this popup window idea!

i've created a monster! :)

Share this post


Link to post
Share on other sites

This popup works amazing on the homepage, can it be implemented so it will show on ALL pages until a user clicks on the dismiss button? or in my example the 'I Agree' button?

 

Right now it will show everytime the homepage is visited but once navigated away from the homepage the popup goes away, I want the user to agree before being able to visit the site or be shown the popup everypage..

Share this post


Link to post
Share on other sites
This popup works amazing on the homepage, can it be implemented so it will show on ALL pages until a user clicks on the dismiss button? or in my example the 'I Agree' button?

you should just need to remove the $templatefile part of the IF statement and it will appear on every client area page - including the cart.

 

if (empty($client->id)) {

 

Right now it will show everytime the homepage is visited but once navigated away from the homepage the popup goes away, I want the user to agree before being able to visit the site or be shown the popup everypage..

it will be the if statement causing that... e.g it's specifically coded to only work on the homepage (or clientarehome in the case of logged in clients) - as that was the original question... remove that condition, and it will appear everywhere until dismissed.

 

one thought... if you wanted it to show everywhere, apart from the login page...

 

if (empty($client->id) and $templatefile != "login") { 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated