Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Carrinho de compras editável

O Carrinho de compras editável permite que o cliente possa modificar a quantidade de itens de cada produto (assim como excuir) sem que a página carregue novamente. Ele simplismente atualiza as quantidades.

Basicamente o que acontece é o que a imagem a seguir mostra:

Carrito de compras asincrónico en Tienda Nube

Esse exemplo foi feito no template Luxury.

1. No arquivo layouts/layout.tpl você deve substituir o seguinte código javascript por outro.


1.1 Código que será substituído:

{% if template == 'cart' %}
<script type="text/javascript">
    $(document).ready(function(){
         $(".col-quantity input").keypress(function(){
            $('#change-quantities').show();
            $("#go-to-checkout").hide();
        });
    });
</script>
{% endif %}

1.2 Código que deverá substituir:

{% if template == 'cart' %}
{{ 'js/jquery.livequery.min.js' | static_url | script_tag }}
<script type="text/javascript">
    $(document).ready(function(){
        // Key pressed in quantity input
        $(".col-quantity input").keypress(function(e){
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                return false;
            }
        });
        ...
    });
</script>
{% endif %}

2. Personalize os arquivo templates/cart.tpl de acordo com o layout que você está utilizando.

(caso você não tenha os arquivos faça download do código dos temas Nuvem Shop).

3. Adicione os estilos CSS correspondentes a essa mudança em static/css/style.css. Se estivermos trabalhando com um layout baseado no LinkedMan, adicionaremos um código como esse:

/* --- Shopping Cart --- */
button.item-plus {
    margin-top: -5px;
}
button.item-plus, button.item-minus {
    display: block;
    font-size: 11pt !important;
    background: transparent;
    border: 0;
}
button.item-delete {
    display: block;
    font-size: 22pt !important;
    background: transparent;
    border: 0;
}
button.item-plus i.fa, button.item-minus i.fa {
    color: rgba(0, 0, 0, 0.1);
}
button.item-plus i.fa:hover, button.item-minus i.fa:hover {
    color: #434343;
}
…

4. Adicione o arquivo jquery.livequery.min.js dentro de /static/js.

(caso você não tenha os arquivos faça download do código dos temas Nuvem Shop).

5. Certifique-se de que há uma chamada das fontes ”Font Awesome” no arquivo layouts/layout.tpl, dentro da tag <head>

{{ '//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css' | css_tag }}