Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Página em construção

Uma funcionalidade muito necessária para uma loja online, especialmente que ainda não esteja pronta, é a de mostrar uma página "em construção" ou "em manutenção".

Essa página permite ocultar produtos e páginas internas da loja em momentos que não se deseja receber visitantes, porque algo não foi lançado ou não está funcionando corretamente, ou simplesmente porque se deseja fazer alguma atualização, ou tirar férias merecidas.

Para solucionar esse problema, oferecemos uma página onde se possa mostrar a informação básica de contato da loja (redes sociais, telefone, email, etc.) e uma mensagem personalizada que pode ser modificada diretamente do administrador da loja. Basta acessar Layout > Página em construção.

Além disso, também se pode gerar uma senha que permita desbloquear a loja e navegar à vontade mesmo enquanto estiver bloqueada para os visitantes.

Se a loja na qual você está trabalhando quer implementar essa funcionalidade, abaixo seguem os passos para implementá-la:

1. Crie um tpl novo chamado password.tpl dentro do diretório templates. Dentro deste .tpl, adicione o seguinte 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>

Lembre que este exemplo se aplica para o tema Luxury, então é provável que algumas classes de CSS variem de acordo com o tema escolhido.

Por outro lado, é importante considerar este tpl como um novo layout.tpl. Deve-se incluir chamadas para os estilos necessárias, assim como tags <html>, <body> e <head>.

2. Adicione os estilos necessários. Neste exemplo de Luxury, precisaremos agregar tanto ao CSS como ao 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;
}

Pronto! A funcionalidade de Página em Construção já está disponível para ser utilizada em sua loja. Como último passo, é necessário que ative-a na sessão Layout > Página em Construção.

IMPORTANTE:

Se sua loja tem o FTP aberto, é possível que ao ativar a funcionalidade diretamente do Administrador Nuvem, uma mensagem de erro apareça ("Problemas com o servidor").

Isso se deve ao fato do sistema buscar o password.tpl no tpl e não encontrar no FTP, devolvendo o erro. Para solucionar o problema, basta seguir esse tutorial.