Jump to content
thirty bees forum

New maintience mode

unica e-shop

Recommended Posts


I was wondering if it could be possible to change the way visitor is presented a web shop that is in maintenance mode, to a more appealing one. I mean the way it is now, it looks very ugly, like you have a website from 90's or something like that, why not change it to a more beautiful full screen one, with a timer that tells the visitor when the webshop is up again, and that timer should be set from backoffice manually.

I think it is a minor change but has a huge impact on the first impression on a visitor, and a good indication of thirty bees want to distance themselves from prestashop, in a sense that thirty bees is an improved version. Therefor i think it should be a core future of thirty bees.

Link to comment
Share on other sites

  • 2 weeks later...

@unica-e-shop I used this free very basic module last year, served it's purpose with countdown timer until opening configured from back office.


Link to comment
Share on other sites

  • 4 years later...

It's pretty ugly, but this is what I came up with to create a countdown timer on the maintenance page. I used the custom HTML Block module to create the html for the page (the idea is when I launch I can change the content of this block module and it returns to a simple maintenance page).

The modification requires two files in the theme directory to be altered (in my case the Niara theme):


which should look like the following when modified:

<!DOCTYPE html>
<html lang="{$language_code|escape:'html':'UTF-8'}">
  <meta charset="utf-8">
  {if isset($meta_description)}
    <meta name="description" content="{$meta_description|escape:'html':'UTF-8'}">
  {if isset($meta_keywords)}
    <meta name="keywords" content="{$meta_keywords|escape:'html':'UTF-8'}">
  <meta name="robots" content="{if isset($nobots)}no{/if}index,follow">
  <link rel="shortcut icon" href="{$favicon_url}">
  <link href="{$css_dir}global.css" rel="stylesheet">
  <link href="{$css_dir}maintenance.css" rel="stylesheet">
  {if $isRtl}
    <link href="{$css_dir}rtl.css" rel="stylesheet">

<div id="maintenance" class="text-center">
  <img class="center-block img-responsive" src="{$logo_url}" alt="" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}"{/if}>
  <h1>{l s='Our Site is Currently Under Construction...'}</h1>
{* hook h='displayMaintenance' *}

// Set the date we're counting down to
var countDownDate = new Date("November 15, 2022 12:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  // Output the result in an element with the appropriate id
  document.getElementById("days").innerHTML = days;
  document.getElementById("hrs").innerHTML = hours;
  document.getElementById("mins").innerHTML = minutes;
  document.getElementById("secs").innerHTML = seconds;
  // If the count down is over, write some text 
  if (distance < 0) {
    document.getElementById("countdown").innerHTML = "OOPS! We missed our launch date, please check back again soon!";
}, 1000);


Then go to the /themes/niara/css/maintenance.css page and modify to look like the following:

#maintenance {
  padding: 30px 15px;
  font-size: 1.3em;

#maintenance h1 {
  font-size: 1.5em;

#countdown,.days,.hrs,.mins,.secs {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;margin-bottom:0px;
table{border-collapse: separate;}
#maint-timer-text {font-size:30px;}
#maint-timer-text td{text-align:center;padding:0.2em;margin-top: 0px;margin-bottom:0px;}
.ttext,#countdown {
  margin-left: auto;
  margin-right: auto;
.tcell{background-color: #efefef;
background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#fff));
background: -moz-linear-gradient(top, #efefef, #fff);
.bcell{background-color: #efefef;
background: -webkit-gradient(linear, left top, left bottom, from(#fff) to(#efefef));
background: -moz-linear-gradient(top, #fff, #efefef);
.top {
  border-top: thin solid;
  border-color: black;
  -webkit-border-radius: 7px 7px 0 0;
  border-radius: 7px 7px 0 0;
  -moz-border-radius: 7px 7px 0 0;

.bottom {
  border-bottom: thin solid;
  border-color: black;
  -webkit-border-radius: 0 0 7px 7px;
  border-radius: 0 0 7px 7px;
  -moz-border-radius: 0 0 7px 7px;

.left {
  border-left: thin solid;
  border-color: black;

.right {
  border-right: thin solid;
  border-color: black;

and finally the code for the custom HTML Block (hooked to the maintenance page) from the Back Office:

<div class="ttext">
<p id="timer-text" class="ttop">We Expect the Site to Launch</p>
<table id="countdown" width="500" cellspacing="0" cellpadding="0">
<td class="top left right tcell"><span id="days">0</span></td>
<td class="top left right tcell"><span id="hrs">0</span></td>
<td class="top left right tcell"><span id="mins">0</span></td>
<td class="top left right tcell"><span id="secs">0</span></td>
<tr id="maint-timer-text">
<td class="bottom left right bcell">DAYS</td>
<td class="bottom left right bcell">HRS</td>
<td class="bottom left right bcell">MINS</td>
<td class="bottom left right bcell">SECS</td>
<div class="ttext">
<p id="timer-text" class="tbottom">- - From Today - -</p>

It's not as "polished" as I would normally do, but it displays a countdown suitable for my needs at the moment... Feel free to modify, but please include an attribution to obewanz at yahoo (you know the rest) and let me know what you came up with - if substantially different.

countdown page.jpg

Edited by Obi
typo in code
Link to comment
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
  • Create New...