Mise en maintenance - index.html

Jean.M · November 27, 2014

Bonjour,

J'ai un belle page HTML de maintenance avec compte à rebours etc...

et je souhaite l'utiliser quand j'active la maintenance sous prestashop (PS 1.6.0.9)

Ne sachant pas modifier maintenance.tpl, comment dois-je faire?

Merci

Baba deCode · November 27, 2014

Bonjour, en mettant ton code dans maintenance.tpl et en nous disant qu'est ce que tu ne comprend pas pour qu'on puisse t'aider.

Broceliande · November 27, 2014

Bonjour,

J'ai un belle page HTML de maintenance avec compte à rebours etc...

et je souhaite l'utiliser quand j'active la maintenance sous prestashop (PS 1.6.0.9)

Ne sachant pas modifier maintenance.tpl, comment dois-je faire?

Merci

Bonsoir,

Un tpl est une extension par un language de programmation du format html à la base.

Qui peut le plus peut le moins : un .tpl peu ne contenir que du pur code html .

Donc la solution est de prendre un éditeur de texte comme notepad++ (de préférence pas notepad pour conserver l'encodage) , d'éditer les deux et de faire un copier coller tout bête en remplaçant bien sur l'intégralité de maintenance.tpl.

Par contre attention au code javascript (puisqu'on parle de compteur il y en a forcément) : si le code javascript est dans le html directement, il faut repérer tous les { et } et s'assurer qu'on a un espace avant et après chacun de ces caractères , faute de quoi du code javascipt peut être considéré comme une instruction smarty et forcément pour le coup , une instruction qui plante.

Broceliande · November 27, 2014

Bonjour, en mettant ton code dans maintenance.tpl et en nous disant qu'est ce que tu ne comprend pas pour qu'on puisse t'aider.

Ah ben navré nos posts se sont croisés...

Baba deCode · November 27, 2014

Ah ben navré nos posts se sont croisés...

héhé, après si c'est du prestashop 1.6 mieux vaut garder la structure des div et les class pour que ce soit responsive...

Broceliande · November 27, 2014

héhé, après si c'est du prestashop 1.6 mieux vaut garder la structure des div et les class pour que ce soit responsive...

+1 oui c'est une très juste remarque,

mais si Jean.M veut utiliser une page html , et veut du responsive, alors la page elle même peut l'être sans nécessairement utiliser bootstrap. C'est à lui de s'en assurer .

De toute évidence ma réponse est dans le cadre ou il souhaite le faire lui même et comme il semble le faire, mais pas "si on voulait le faire correctement..." , là c'est une autre affaire.

En même temps j'ai le sentiment qu'un template de page de maintenance avec chrono , c'est plus pour annoncer l'ouverture d'un site que pour un usage régulier. Parce que dans le cas contraire ça n'a rien de pratique , dès lors qu'il faut remettre le compteur à jour à la mano à chaque mise en maintenance. Pour ça faudrait encore que ce soit paramétrable

Jean.M · December 1, 2014

Merci à tous pour vos commentaires et astuces.

Si j'ai bien compris, je peux ajouter directement du HTML dans mon .tpl Mais à quel endroit?

Voici mon code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site under construction</title>


<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript" src="js/jcarousellite1.0.1_min.js"></script>


<!-- jquery countdown-->
<script type="text/javascript">
$(function () {
var austDay = new Date("August 14, 2014 02:15:00");
    $('#defaultCountdown').countdown({until: austDay, layout: '{dn} {dl}, {hn} {hl}, {mn} {ml}, and {sn} {sl}'});
    $('#year').text(austDay.getFullYear());
    });
</script>


<!-- jquery slider -->
<script type="text/javascript">

$(function() {
    $("#slidertext").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});

</script>

<!--script for IE6-image transparency recover-->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.7a-min.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('#logo img,#main,.counter,.twitter,.flickr,.facebook,.youtube,#submit_button,.prev img,.next img,#email_input');
  
</script>
<![endif]--> 



</head>

<body>


<div class="container">
	
    <div id="header">
    
    	<div id="logo">
        	<a href="index.html"><img src="images/logo.png" alt="logo"/></a>
        </div><!--end logo-->
            
        <div id="contact_details">
        	<p><a href="#">[email protected]</a></p>
			<p><a href="#">phone : 06 23 23 54 76</a></p>
		</div><!--end contact details-->     
                
	</div><!--end header-->
              <div style="clear:both"></div> 
              
	<div id="main">

		 <div id="content">
                    
              <div class="text">
              <h2>This website is under construction</h2>
              </div><!--end text-->
                  
              <div class="counter">
              <h3>Estimated Time Remaining Before Launch:</h3>
              <div id="defaultCountdown"></div>

         </div><!--end counter-->
                 
         <div class="details">
              <!--slider prev button-->    
            <a class="prev" href="#"><img src="images/prev.png" alt="" /> 
            </a>

                  <div id="sliderwrap">
                  		<div id="slidertext"><!-- The slider -->
                            
                                <ul>
                                     <li>
                                         <h3>You may find us below:</h3>
                                         <div class="social">
                                         <a href="#" class="twitter"></a>
                                         <a href="#" class="flickr"></a>
                                         <a href="#" class="facebook"></a>
                                         <a href="#" class="youtube"></a>
                                         </div>
                                     </li><!-- Slider item -->
                            
                                	 <li>
                                        <h3>Type your email id to get the updates!</h3>
                                       
                                       
                                       <!-- <form action="emailhandler.php" method="post" id="email">
                                        <div id="submitwrapper">
                                        <div ><input type="text" name="email" size="30" value="Enter Your E-mail" onfocus="if(this.value=='Enter Your E-mail'){this.value=''};" 	onblur="if(this.value==''){this.value='Enter Your E-mail'};" id="email_input" /> 
                                        </div> 
                                        <div ><input type="submit" name="Submit" value="Submit" border="none" id="submit_button"/>
                                        </div>
                                        </div>
                                        </form> -->


                                       
                                       
                                       
                                     <form method="post" id="subscribeform" action="emailform.php">
                                        <p>
                                        <div id="email_input"><input name="email" type="text" size="30" value="Enter Your E-mail" onfocus="if(this.value=='Enter Your E-mail'){this.value=''};" 	onblur="if(this.value==''){this.value='Enter Your E-mail'};" id="email" /> 
                                        <input type="submit" id="submit_button" value="Submit" size="80" />
                                        </div>
                                        <br />
                                        
                                        </p>
                                        
                                        </form>


                                 
                                 	</li><!-- Slider item -->
                                 
                                 	<li>
                                         <h3>Some words about us</h3>
                                         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.</p>
                                        
                                 
                                	 </li><!-- Slider item -->
                            
                                </ul>
                            
             	 </div><!-- End of slidertext -->
    
              </div><!-- End of sliderwrap -->

					<!--slider next button-->
             	<a class="next" href="#"><img src="images/next.png" alt=""/></a>

                  
                  </div><!--end details-->  
                </div><!--end content-->
            
</div><!--end main-->

</div><!--end class container-->

</body>

</html>

et voici mon fichier .tpl


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}" lang="{$lang_iso}">

	<head>

		<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>	

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

{if isset($meta_description)}

		<meta name="description" content="{$meta_description|escape:'htmlall':'UTF-8'}" />

{/if}

{if isset($meta_keywords)}

		<meta name="keywords" content="{$meta_keywords|escape:'htmlall':'UTF-8'}" />

{/if}

		<meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />

		<link rel="shortcut icon" href="{if isset($favicon_url)}{$favicon_url}{else}{$img_ps_dir}favicon.ico{/if}" />

		<link href="{$css_dir}maintenance.css" rel="stylesheet" type="text/css" />

	</head>

	<body>

		<div id="maintenance">

			 <p><img src="{if isset($logo_url)}{$logo_url}{else}{$img_ps_dir}logo.jpg{/if}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /><br /><br /></p>

			 <p id="message">

				{l s='In order to perform site maintenance, our online shop has shut down temporarily.'}<br /><br />

				{l s='We apologize for the inconvenience and ask that you please try again later.'}

			 </p>

		</div>

	</body>

</html>

Sign In

Mise en maintenance - index.html

Recommended Posts

Jean.M

Link to comment

Share on other sites

Baba deCode

Link to comment

Share on other sites

Broceliande

Link to comment

Share on other sites

Broceliande

Link to comment

Share on other sites

Baba deCode

Link to comment

Share on other sites

Broceliande

Link to comment

Share on other sites

Jean.M

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com