Cookie

[vtimbuc 0]

Boas pessoal,

Estou a fazer um banner para um website em que tem um "close" button e quando é carregado o banner desaparece.

Eu queria que caso o utilizador fecha-se o banner na próxima visita estivesse escondido.

Aqui esta um live preview http://jsfiddle.net/yHDrX/14/.

So preciso que me ajudem a guardar a informação para que na próxima visita do utilizador o banner carregue com a class "hidden" caso tenham carregado no botão "close".

[softklin 11]

Se quiseres tudo em jQuery, podes usar o jQuery Cookie:

https://github.com/carhartl/jquery-cookie

Depois, basta verificares se o cookie pretendido existe e tem o valor que queres:

$(document).ready(function() {

    // verificar se o cookie ainda não existe
    if( 'yes' != $.cookie('banner_shown') ){
   
        $('.close').on('click', function() {
            $('.banner').addClass('hidden');
            $.cookie('banner_shown', 'yes');
        });

   } else {
       // esconder o banner
       $('.banner').addClass('hidden');
   }
});

Isto cria um cookie chamado 'banner_shown', com o valor 'yes', indicado que o banner já foi fechado. Se o cookie existir, então ele define a ação de fecho do banner, onde se inclui a criação do cookie. Tem em atenção que o cookie criado desta forma é apenas válido para a sessão (é eliminado quando se fecha o browser), mas podes consultar a página do jQuery cookie para saber como definires a quantidade de tempo para reter o cookie.

Ou visto que o código JS só executa depois da página ter sido carregada, pode ser do teu interesse assumir que o banner está oculto por omissão, e só é mostrado se o cookie não existir. Nesse caso, apenas precisas de adicionar um removeClasse('hidden') se o cookie não existir e não precisas do else no código.

[vtimbuc 0]

Obrigado softklin!

Fiz de uma maneira parecida:

function(cookieName, expireDays) {

var $banner = $('.header-banner'),
	cookie = $.cookie(cookieName);

if (cookie !== 'banner-hidden') {
	$banner
		.removeClass('banner-hidden')
		.find('.banner-close')
		.on('click', function(event) {
			event.preventDefault();
			$banner.slideUp('slow');
			$.cookie(cookieName, 'banner-hidden', { path: '/', expires: expireDays });
		});
}
};

O banner já tem a class "hidden" on load e se o cookie não existir apenas remove a class "hidden".

Se o utilizador carregar no botão "close" o banner desaparece e o cookie é criado.

[softklin 11]

Eu depois de fazer a mensagem, acabei por a editar, porque realmente é preferível assumir o banner como oculto e só depois mostrá-lo, se for caso disso. Dessa forma, o banner só é mostrado quando necessário.