Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Página en Construcción

Una funcionalidad muy necesaria para una tienda es la de contar con la posibilidad de mostrar una página de "construcción" o "mantenimiento".

En particular, la funcionalidad de "Página en construcción" permite ocultar productos y páginas internas de la tienda en momentos en los que no se quieren recibir visitas, ya sea porque aún no fue lanzada, porque está bajo proceso de renovación o, por qué no, cuando sus dueños están disfrutando de unas merecidas vacaciones. 

Para solucionar este problema, ofrecemos una página donde se pueda mostrar información basica de contacto de la tienda (redes sociales, teléfono, email, etc) y un mensaje personalizado que puede ser modificado desde el administrador ingresando a Diseño > Página en Construcción.

Además de esto, también podés generar una constraseña que te permitirá desbloquear tu tienda para poder navegarla normalmente mientras permanece bloqueada para el resto de las visitas.

Si la tienda sobre la que estás trabajando aún no cuenta con esta funcionalidad, te invitamos a seguir los siguientes pasos para agregarla:

1. Creá un tpl nuevo llamado password.tpl dentro del directorio templates. Dentro de este .tpl agregá el siguiente código:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
    <title>{{ page_title }}</title>
    <meta name="description" content="{{ page_description }}" />
    {% if settings.fb_admins %}
        <meta property="fb:admins" content="{{ settings.fb_admins }}" />
    {% endif %}
    {% if store_fb_app_id %}
        <meta property="fb:app_id" content="{{ store_fb_app_id }}" />
    {% elseif not store.has_custom_domain %}
        <meta property="fb:app_id" content="{{ fb_app.id }}" />
    {% endif %}
    {{ store.name | og('site_name') }}
    {% if template == 'home' and store.logo %}
        {{ ('http:' ~ store.logo) | og('image') }}
        {{ ('https:' ~ store.logo) | og('image:secure_url') }}
    {% endif %}
   
    {# Watch out before upgrading bootstrap as these files have some custom changes #}
    {{ 'css/bootstrap.css' | static_url | css_tag }}
    {{ 'css/bootstrap-responsive.css' | static_url | css_tag }}
    {{ '//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css' | css_tag }}
    {{ 'css/style.css' | static_url | css_tag }}
    {{ 'css/main-color.scss.tpl' | static_url | css_tag }}
    {{ '//fonts.googleapis.com/css?family=Lato:700,900,400italic,700italic|Roboto+Condensed:400italic,700italic,300,400,700|Istok+Web:400,700,400italic,700italic|Arvo:400,700,400italic,700italic|Paytone+One|Raleway:700|Lato:700|Ubuntu:700|Roboto+Slab:700' | css_tag }}
    {% set nojquery = true %}
    {{ "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" | script_tag }}
    {{ 'js/jquery.cookie.js' | common_cdn | script_tag }}
    <!--[if lte IE 7]>
    {{ "css/ie.css" | static_url | css_tag }}
    <![endif]-->
    <!--[if lt IE 9]>
    {{ "js/html5shiv-printshiv.js" | static_url | script_tag }}
    <![endif]-->

    <style>
        {{ settings.css_code }}
    </style>
</head>
<body itemscope itemtype="http://schema.org/WebPage" itemid="body">
{{back_to_admin}}
 <div class="password-page">
    <div class="password-page-body">
        <div class="password-container">
            {# ***** Store Logo ***** #}
            {% if has_logo %}
                <h1 class="img logo">
                    {{ store.logo  | img_tag(store.name) | a_tag(store.url)}}
                </h1>
            {% else %}
                <h1>
                    <div class="logo text-only text-center">
                        <a href="{{ store.url }}" >{{ store.name }}</a>                      
                    </div>
                </h1>
            {% endif %}
        </div>
        {# ***** Wrench Icon SVG ***** #}
        <div class="password-container password-icon text-center">
            <svg version="1.1" id="Capa_1" class="password-svg wiggle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="-62 153.1 486.9 486.9" style="enable-background:new -62 153.1 486.9 486.9;" xml:space="preserve">
                    <g>
                    <path class="st0" d="M-48.6,562.1c-17.8,17.8-17.8,46.7,0,64.5c8.9,8.9,20.6,13.3,32.3,13.3s23.3-4.4,32.3-13.3l149.7-149.7
                        l-64.5-64.4L-48.6,562.1z"/>
                    <polygon class="st0" points="325.5,284.7 390.8,250.9 424.9,184.9 393.1,153.1 327.1,187.3 293.3,252.4 214,331.8 246.2,364.1 
                                        "/>
                    <path class="st0" d="M339.8,457.7l-6.1-0.6c-11.1,0-21.7,2.3-31.5,5.9L115,275.8c3.6-9.8,5.9-20.4,5.9-31.5l-0.6-6.1
                        c-3.2-47.5-42.3-85.1-90.6-85.1c-14,0-27.2,3.4-39.1,9.1l60.6,60.6c3.2,3.2,5.4,7,6.8,10.9c4,10.8,1.8,23.3-6.8,32
                        c-5.9,5.9-13.7,8.9-21.5,8.9c-3.6,0-7.1-0.8-10.5-2.1c-4-1.5-7.8-3.6-10.9-6.9l-60.6-60.6c-5.7,11.9-9.1,25-9.1,39.1
                        c0,48.3,37.6,87.4,85.1,90.6l6.1,0.6c11.1,0,21.7-2.3,31.5-5.9l187.1,187.2c-3.6,9.8-5.9,20.4-5.9,31.5l0.6,6.1
                        c3.2,47.5,42.3,85.1,90.6,85.1c14,0,27.2-3.4,39.1-9.1l-60.6-60.6c-3.2-3.2-5.4-7-6.9-10.9c-4-10.8-1.8-23.4,6.9-32.1
                        c5.9-5.9,13.7-8.9,21.5-8.9c3.6,0,7.1,0.8,10.6,2.1c4,1.5,7.8,3.6,10.9,6.8l60.6,60.6c5.7-11.9,9.1-25,9.1-39.1
                        C424.9,500,387.3,460.9,339.8,457.7z"/>
                    </g>
            </svg>
        </div>
        {# ***** Store Message ***** #}
        <div class="password-container password-message">
            <h2 class="text-center">{{ message }}</h2>
        </div>
    </div>
    <div class="password-footer">
        {# ***** Store Social Info ***** #}
         {% if store.facebook or store.twitter or store.google_plus or store.pinterest or store.instagram %}
        <div class="password-container">
            <div id="wrapper-social">
                <div class="row-fluid">
                    <div class="container">
                        {% for sn in ['facebook', 'twitter', 'google_plus', 'pinterest', 'instagram'] %}
                            {% set sn_url = attribute(store,sn) %}
                            {% if sn_url %}
                                <a class="soc-foot {{ sn }}" href="{{ sn_url }}" target="_blank" {% if sn == 'google_plus' %}rel="publisher"{% endif %}><i class="fa fa-{{ sn }} fa-4x"></i></a>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        {# ***** Store Contact Info ***** #}
        {% if store.phone or store.address or store.blog %}
            <div class="password-container">
                <div id="wrapper-foot">
                    <ul class="foot-nav">
                        {% if store.phone %}
                            <li>{{ store.phone }}</li>
                        {% endif %}
                        {% if store.address %}
                            <li>{{ store.address }}</li>
                        {% endif %}
                        {% if store.blog %}
                             <li class="blog"><a target="_blank" href="{{ store.blog }}">{{ store.blog }}</a></li>
                        {% endif %}
                        {% if store.email %}
                            <li class="email">{{ store.email | mailto }}</li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        {% endif %}
        {# ***** Store Legal Info ***** #}
        <div class="password-container">
            <div id="wrapper-legal">
                <div class="row-fluid">
                    <div class="container">
                        <div class="span4">
                            <div class="powered-by">
                                {#
                                La leyenda que aparece debajo de esta linea de código debe mantenerse
                                con las mismas palabras y con su apropiado link a Tienda Nube;
                                como especifican nuestros términos de uso: http://www.tiendanube.com/terminos-de-uso .
                                Si quieres puedes modificar el estilo y posición de la leyenda para que se adapte a
                                tu sitio. Pero debe mantenerse visible para los visitantes y con el link funcional.
                                Os créditos que aparece debaixo da linha de código deverá ser mantida com as mesmas
                                palavras e com seu link para Nuvem Shop; como especificam nossos Termos de Uso:
                                http://www.nuvemshop.com.br/termos-de-uso. Se você quiser poderá alterar o estilo
                                e a posição dos créditos para que ele se adque ao seu site. Porém você precisa
                                manter visivél e com um link funcionando.
                                #}
                                {{ powered_by_link }}
                            </div>
                        </div>
                        <div class="span4">
                            <div class="access-top">
                                <div class="searchbox">
                                    <form method="post">
                                        <input class="text-input" type="password" name="password" placeholder="{{ 'Contraseña de acceso' | translate }}"/>
                                        <i class="fa fa-unlock"></i>
                                        <input class="submit-button" type="submit" value=""/>
                                    </form>
                                </div>
                                {% if invalid_password == true %}
                                    <div class='alert alert-error' role='alert'>{{ 'La contraseña es incorrecta.' | translate }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="span4">
                            <div class="copyright">
                                {% if not show_help %}
                                    <div class="seals row" {% if not (store.afip or ebit or siteforte) %}style="display: none;"{% endif %}>
                                        {% if store.afip %}
                                            <div class="afip">
                                                {{ store.afip | raw }}
                                            </div>
                                        {% endif %}
                                        {% if ebit %}
                                            <div class="ebit">
                                                {{ ebit }}
                                            </div>
                                        {% endif %}
                                        {% if siteforte %}
                                            <div class="siteforte">
                                                {{ siteforte }}
                                            </div>
                                        {% endif %}
                                    </div>
                                {% else %}                     
                                  <div class="seals row" {% if store.country == 'BR' and not (store.afip or ebit or siteforte) %}data-tooltip="Esses são selos de exemplo"{% endif %}>
                                        {% if store.country == 'AR' %}
                                            <div class="afip">
                                                <img src="http://www.afip.gob.ar/images/f960/DATAWEB.jpg" border="0">
                                            </div>
                                        {% endif %}
                                        {% if store.country == 'BR' %}
                                            <div class="siteforte">
                                                {{ "images/siteforte-exemplo.png" | static_url | img_tag }}
                                            </div>
                                             <div class="ebit">
                                                {{ "images/ebit-exemplo.png" | static_url | img_tag }}
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endif %}
                                {{ "Copyright {1} - {2}. Todos los derechos reservados." | translate( (store.business_name ? store.business_name : store.name) ~ (store.business_id ? ' - ' ~ store.business_id : ''), "now" | date('Y') ) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{ '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js' | script_tag }}
{{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js' | script_tag }}
{{ "//maps.googleapis.com/maps/api/js?sensor=false&language=#{current_language.lang}" | script_tag }}
{{ 'js/luxury.js' | static_url | script_tag }}
</body>
</html>

Recordá que este ejemplo aplica para la plantilla Luxury, por lo que es probable que algunas clases de CSS varíen según la plantilla elegida.

Por otro lado, es importante considerar este tpl como un nuevo layout.tpl aparte. Debe incluir los llamados a las hojas de estilos necesarias, así como los tags <html> <body> <head>

2. Agregá los estilos necesarios. En este ejemplo de Luxury necesitaremos agregarlos tanto al CSS como al SASS.

style.css

/* --- password Page * ---- */
.password-page .password-container{
    width: 100%;
    clear: both;
    float: left;
}
.password-page .password-container .logo{
    margin: 12px auto 8px auto;
    text-align: center;
}
.password-page .password-container .logo.text-only{
    text-align: center;
}
.password-page .password-container.password-message h2{
    font-size: 22px;
    letter-spacing: 10px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 15px auto 60px auto;
    line-height: 48px;
    width: 70%;
    padding: 20px;
}
.password-page .password-container.password-icon .password-svg{
    width: 6%;
    margin-top: 20px;
}
@-webkit-keyframes wiggle {
    0% {
        -webkit-transform:rotate(0deg);
    }
    25% {
        -webkit-transform:rotate(-4deg);
    }
    50%{
         -webkit-transform:rotate(4deg);
    }
    75% {
        -webkit-transform:rotate(0deg);
    }
    100%{
         -webkit-transform:rotate(0deg);
    }
}
.wiggle {
    -webkit-animation: wiggle 1.5s infinite;
    animation-delay: 2s;
}
.password-container .access-top{
    text-align: center;
    margin-top: 10px;
}
.password-container .access-top .searchbox{
    width: 60%;
}
.password-container .access-top input.text-input{
    height: 35px;
    width: 100%;
}
.password-container .access-top i.fa.fa-unlock{
    margin-top: 6px;
    position: absolute;
    right: 10px;
    font-size: 20px;
}
.password-page .password-container #wrapper-foot{
     padding: 10px;
    text-align: center;   
}
.password-page .password-container #wrapper-foot ul.foot-nav li{
    display: inline;
    padding-right: 10px;
    padding-left: 10px;
}
.password-page .password-container #wrapper-foot ul.foot-nav li:last-child{
    border-right: 0px;
}
.password-page .password-container #wrapper-social{
    padding: 12px 0 15px 0;
}
.password-page .password-container #wrapper-social a.soc-foot{
    height: 27px;
    width: 59px;
    padding-top: 12px;
}
.password-page .password-container #wrapper-social a.soc-foot i{
    font-size: 36px;
}

@media (max-width: 769px) {
     .password-page .password-page-body{
        margin-bottom: 0px;
    }
}

@media (max-width: 400px) {
        /***password Page***/
     .password-page .password-container.password-message h2{
        font-size: 20px;
        letter-spacing: 6px;
        line-height: 40px;
     }
     .password-page .password-container #wrapper-foot ul.foot-nav li{
        display: block;
     }
     .password-container .access-top .searchbox input{
        width: 100%;
        height: 34px;
     }
     .password-container .access-top .alert{
        margin: 0px;
     } 
}

main-color.scss.tpl

/*** password Page ***/

.password-page .password-container.password-message h2{
    font-family: $fonthead; 
    border-color: $primary;
    color: $secondary;
    border:3px solid $primary;
}
.password-page .password-container.password-icon .password-svg{
    fill:$primary;
}
.password-page .password-container #wrapper-foot ul.foot-nav li{
    border-right:2px solid $primary;
}

Listo! La funcionalidad de "Página en Construcción" ya está disponible para ser utilizada en tu tienda. Como último paso, es necesario que la actives desde la sección Diseño > Página en Construcción.

IMPORTANTE:

Si tu tienda tiene el FTP abierto, es posible que al activar la funcionalidad desde el administrador nube tu "Página en construcción" muestre un error de "Problemas con el servidor". 

Esto se debe a que esta intentando acceder al tpl password.tpl y al no encontrarlo en tu FTP, devuelve un error. 

Para solucionar esto hay que seguir este tutorial para obtener la funcionalidad de "Página en Construcción".

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.