3

estou precisando que meu site troque o tema de maneira randômica a cada 30 min. Então a lógica seria:

Usuário entra no site agora e o visualiza na cor azul (que á a padrão), mas se este mesmo usuário voltar daqui a 30 min ele deveria visualizar o site em uma das outras duas cores Laranja ou Verde.

Não sou programador mas com muito esforço e enchendo o saco de alguns amigos consegui chegar no código abaixo que está funcionando parcialmente.

Ele troca a cor do site a cada X tempo até ai OK, mas o problema é que sempre que o usuário retorna ao site ele o visualiza na cor azul padrão.

Alguém sabe como resolver está ultima e importante parte? Desde já agradeço a ajuda.

<link rel="stylesheet" id="bones-stylesheet-css" href="http://www.mople.com.br/wp-content/themes/mople/library/css/mople-theme-1.css" type="text/css" media="all">

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/js/jquery.cookie.js" ></script>

<script>
            setInterval(function (onload) {
                if ($.cookie("css") !== null) {
                    console.log('cookie existe');
                    $("#bones-stylesheet-css").attr("href", $.cookie("css"));
                }
                else {
                    console.log('cookie expirou');
                    var random = Math.floor((Math.random() * 3) + 1) - 1;

                    var styleSheet = $(".bt-theme button").eq(random).attr("rel");

                    $.cookie("css", styleSheet, { expires: 1 / 100, path: '/' });
                    $("#bones-stylesheet-css").attr("href", $.cookie("css"));
                }

                console.log($("#bones-stylesheet-css").attr("href"));
            }, 10000);
        </script>
8
  • Um problema é que a sua função está sendo executada a cada 10 segundos, mas não quando o site é carregado. Então por até 10 segundos o site pode ficar no tema default. Será que esse cookie não está sendo escrito em outro lugar?
    – epx
    Commented 31/08/2015 às 18:07
  • Coloquei 10 seg para poder visualizar a troca do CSS sem ter de esperar 30 min. Mas mesmo aumentando para qualquer outro tempo o problema continua. Commented 31/08/2015 às 18:19
  • Sim, justamente porque a primeira vez vai demorar o tempo que você colocou para executar. O setInterval() não executa a primeira vez imediatamente. O tema azul deve ser o default que vem do servidor, correto? Num servidor com Javascript desligado, o default seria azul?
    – epx
    Commented 31/08/2015 às 18:21
  • Sim o azul é o default. O certo seria colocar uma variável no lugar do caminho do CSS? Pois, pensei em ir por este caminho mas não sei como chegar lá. Commented 31/08/2015 às 20:38
  • Tente o segunte: mova todo o código function (onload) { ... } para uma função, chame a função dentro do setInterval(), e também chame a função em seguida, para que ela seja executada imediatamente ao carregar. Talvez resolav.
    – epx
    Commented 31/08/2015 às 20:40

1 Resposta 1

1

Bom, pelo que eu entendi do código que você postou, você tem 3 arquivos .css diferentes, e você está tentando randomizar qual deles vai ser carregado e usado pela página. Como eu sugeri nos comentários, talvez seja mais inteligente fazer essa randomização toda vez que o usuário entra na página, e não necessariamente a cada 30 minutos. Guardar esse tempo pode ser feito com cookies ou localStorage (isso falando exclusivamente do lado do cliente) mas uma sessão anônima já pode quebrar a lógica, fora que, pelo que percebi, a sua randomização não leva em conta o css que estava aplicado antes do cookie expirar será excluído da próxima randomização. Ou seja, você pode acabar trocando, após 30 minutos, o arquivo1.css pelo arquivo1.css!

Portanto, vou basear a minha resposta em uma randomização instantânea, e não a cada 30 minutos, conforme você pediu nos comentários. Caso você a aceite, talvez seja interessante editar a pergunta. A minha resposta também não levará em conta a verificação do css anterior.

Vou dar duas soluções: Uma mudando o href da tag <link>, conforme o seu código, e outro alterando a classe da tag <body>, o que acho mais interessante, pois você pode concentrar todo o seu css em um arquivo só.

  1. Alterando o <href>

    De acordo com esta linha

    <link rel="stylesheet" id="bones-stylesheet-css" href="http://www.mople.com.br/wp-content/themes/mople/library/css/mople-theme-1.css" type="text/css" media="all">
    

    Tirei a conclusão (e assumo como verdade a partir de agora) que seus arquivos .css tem os nomes

    mople-theme-1.css
    mople-theme-2.css
    mople-theme-3.css
    

    Com javascript puro, você pode criar o arquivo .css dessa maneira:

    var _random = Math.floor((Math.random() * 3) + 1);
    var _href = 'http://www.mople.com.br/wp-content/themes/mople/library/css/mople-theme-' + _random + '.css';
    
    
    var _link = document.createElement('link');
    _link.setAttribute('rel', 'stylesheet');
    _link.setAttribute('type', 'text/css');
    _link.setAttribute('href', _href);
    var _head = document.getElementsByTagName('head')[0];
    _head.appendChild(_link); 
    

    Isso faz com que, a cada vez que a página for carregada, um dos 3 arquivos seja carregado juntamente. Vale lembrar que isso não garante que toda vez será um arquivo diferente, apenas garante que será um dos 3.

  2. Alterando a classe da tag <body>

    Eu acho essa opção um pouco mais válida, uma vez que você teria apenas um arquivo .css para manter. Supondo que você tenha classes do tipo

    .tema-1{}
    .tema-2{}
    .tema-3{}
    

    Que controlem a sua cor de fundo, por exemplo, e que todo o resto do seu tema cascateie a partir delas (i.e., o seletor h1 para o .tema-1 seria .tema-1 h1{}, e assim por diante, você pode adicionar a classe à tag <body> randomicamente, de uma maneira similar ao exemplo anterior. Usando puro javascript

    var _random = Math.floor((Math.random() * 3) + 1);
    var _body = document.getElementsByTagName('html')[0];
    _body.className = 'tema-' + _random;
    

    Você pode ver um exemplo básico desse funcionamento nessa pen. A cor de fundo muda cada vez que você faz um reload, e a cor do texto do <h1> muda também, de acordo com o tema.

EDIT

Consegui chegar em uma solução onde a cada 30 minutos, o arquivo .css que será carregado é diferente, garantindo que não será igual ao anterior (ou seja, trocar o arquivo1.css por arquivo1.css.

Basicamente, crio dois cookies: o primeiro, chamado last, guarda uma referência a qual foi o último arquivo que foi criado. O segundo, denominado css, recebe o valor true e tem uma validade de 30 minutos. Quando ele deixa de existir, eu uso o valor guardado em last para garantir que ele não seja o próximo a ser criado. Fiz alguns poucos testes, e parece-me que está tudo correto. Veja se o código lhe atende e me avisa. Solução em puro JavaScript

EDIT 2

Faltava recriar o cookie que controlava a expiração do tempo. Criei um método que faz exatamente isso. Veja o código alterado

function getCookie(cname) { //método retirado do site da W3C
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return null;
}

function createStylesheet(_file){
    var _href = 'http://www.mople.com.br/wp-content/themes/mople/library/css/' + _file + '.css';
    var _link = document.createElement('link');
    _link.setAttribute('rel', 'stylesheet');
    _link.setAttribute('type', 'text/css');
    _link.setAttribute('href', _href);
    var _head = document.getElementsByTagName('head')[0];
    _head.appendChild(_link);

    document.cookie = "last=" + _file; //cria um cookie dizendo qual foi o ultimo css
}

function createExpireCookie(){
    var _date = new Date();
    _date.setTime(_date.getTime()+(30*60*1000));

    var _expires = ";expires=" + _date.toUTCString();
    document.cookie = "css=true"+ _expires; //cria cookie com validade de 30 minutos 
}

if(null == getCookie('last')){ //nao existe cookie do ultimo arquivo
    createStylesheet('mople-theme-1');
    createExpireCookie();
} 
else if (null == getCookie('css')){ //existe cookie referente ao ultimo css, mas já se passaram 30 minutos
    var _sheets = ['mople-theme-1', 'mople-theme-2', 'mople-theme-3']; //possíveis arquivos
    var _index = _sheets.indexOf(getCookie('last'));

    _sheets.splice(_index, 1);  //remove o ultimo do array de possibilidades

    createStylesheet(_sheets[Math.floor(Math.random()*_sheets.length)]); //cria um css randomizando as possibilidades do array
    createExpireCookie();

};
11
  • Oi Caio, para mim a melhor opção é a primeira pois como estou trabalhando com o less ficou bem mais fácil separa o CSS em 3 folhas. Commented 3/09/2015 às 3:09
  • Oi Caio, para mim a melhor opção é a primeira pois como estou trabalhando com o less ficou bem mais fácil separa o CSS em 3 folhas. Pois só precisei separar o arquivo variable.scss e chamo todas a cores por ali. Muito obrigado mesmo pela ajuda e seu código funcionou 90% o único problema que ainda tenho é que a cada mudança de página o site esta trocando de cor. Tentei resolver isto com window.sessionStorage, pois depois do que você comentou sobre o cookie achei que fosse a melhor maneira, mas não tive sorte. Você tem alguma sugestão para resolver este último ponto? Commented 3/09/2015 às 3:19
  • Obrigado Caio vou testar hoje e noite e te dou um feedback Commented 3/09/2015 às 14:49
  • Oi Caio, infelizmente não funcionou a cor do site muda a cada refresh ou entrar na sala. Alguma sugestão Commented 4/09/2015 às 2:18
  • @PetersonRamos ta lá Commented 4/09/2015 às 12:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .