New maintience mode

unica e-shop · February 14, 2018

Hi,

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.

wakabayashi · February 14, 2018

This is basically I matter of the theme. I believe only the "timer" could be set up in the backoffic, so theme designer could use it by default. Are you often on maintenance mode? I only use this some few minutes a year. Just when going for an upgrade.

Tomik · February 14, 2018

its a good idea but the lowest of lowest priority

unica e-shop · February 14, 2018

@wakabayashi No our shop isn't often in maintenance mode, but i think it will be usefull when we want to go on vacation

unica e-shop · February 14, 2018

I also think an email subscribe field should also be present, it could look like this no. 7 on this link: https://www.elegantthemes.com/blog/tips-tricks/8-best-countdown-timer-plugins-for-wordpress

SLiCK_303 · February 14, 2018

As @wakabayashi said, you can edit maintenance.tpl, and make it look how you want, but I think you would want some sort of BO settings for the timer. I think this would have to be a module.

vzex · February 23, 2018

@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.

http://www.presta-apps.com/free-modules/133-prestashop-underconstructions-maintanance-module.html

Obi · October 2, 2022

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):

/themes/niara/maintenance.tpl

which should look like the following when modified:

<!DOCTYPE html>
<html lang="{$language_code|escape:'html':'UTF-8'}">
<head>
  <meta charset="utf-8">
  <title>{$meta_title|escape:'html':'UTF-8'}</title>
  {if isset($meta_description)}
    <meta name="description" content="{$meta_description|escape:'html':'UTF-8'}">
  {/if}
  {if isset($meta_keywords)}
    <meta name="keywords" content="{$meta_keywords|escape:'html':'UTF-8'}">
  {/if}
  <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">
  {/if}
</head>
<body>

<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_MAINTENANCE}
</div>
{* hook h='displayMaintenance' *}

<script>
// 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) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "OOPS! We missed our launch date, please check back again soon!";
  }
}, 1000);
</script>

</body>
</html>

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;}
#timer-text.ttop{font-size:2em;margin-top:0.5em;}
#timer-text.tbottom{font-size:1.2em;margin-top:0.5em;}
div.ttext{width:500px;max-width:500px;text-align:center;}
.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>
</div>
<table id="countdown" width="500" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="top left right tcell"><span id="days">0</span></td>
<td></td>
<td class="top left right tcell"><span id="hrs">0</span></td>
<td></td>
<td class="top left right tcell"><span id="mins">0</span></td>
<td></td>
<td class="top left right tcell"><span id="secs">0</span></td>
</tr>
<tr id="maint-timer-text">
<td class="bottom left right bcell">DAYS</td>
<td></td>
<td class="bottom left right bcell">HRS</td>
<td></td>
<td class="bottom left right bcell">MINS</td>
<td></td>
<td class="bottom left right bcell">SECS</td>
</tr>
</tbody>
</table>
<div class="ttext">
<p id="timer-text" class="tbottom">- - From Today - -</p>
</div>

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.

Edited October 2, 2022 by Obi
typo in code

Sign In

New maintience mode

Recommended Posts

unica e-shop

Link to comment

Share on other sites

wakabayashi

Link to comment

Share on other sites

Tomik

Link to comment

Share on other sites

unica e-shop

Link to comment

Share on other sites

unica e-shop

Link to comment

Share on other sites

SLiCK_303

Link to comment

Share on other sites

vzex

Link to comment

Share on other sites

Obi

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in