Introdução

Meu nome é Diogo Romano Souza, essa minha primeira coluna no MXstudio, certa vez entrei em uma loja virtual, notando que cada vez que atualizava a página, os produtos mudavam, bom até ai não é mistério para ninguém.

Ai pensei, por que não fazer uma vitrine dinâmica de exibição onde de forma aleatória os produtos fossem escolhidos e exibidos.

Pré-requisito

Macromedia ColdFusion MX 7

Objetivo

Mostrar 10 produtos de forma simples, auto-suficiente e versátil.

Conceitos

- Muda de 30 em 30 segundos.
- Também muda quando é atualizado.
- Nunca mostra uma categoria com menos de 6 itens.
- Pode randomizar quantos itens você quiser.
- Facilmente customizavel.

Arquivos do exemplo:

Vitrine.cfm
red_prods.cfm

Conteúdo

Vamos ao trabalho:

Vamos construir o vitrine.cfm.

Esse sistema é muito simples e podem ser usadas várias formas para fazê-lo.

Escolhi o <CFIF> , mas pode ser usado o <CFCASE> também.

<!— INICIANDO COM UM EFEITO BLEND, SÓ PARA EFEITO ESTÉTICO, ESSE EFEITO SÓ FUNCIONA NO IE 5.1+ —>
<meta http-equiv=”Page-Enter” content=”blendTrans(Duration=0.5)”>

<!— VAMOS INICIAR RANDOMIZANDO E ESCOLHENDO 1 ITEM ENTRE 5 —>

<!— SE O DESTAQUE FOR 1 EXECUTA A QUERY —>

Select * from categoria

where categoria = ‘Contabilidade’

order by nome

</cfquery>

<!— MAS SE O A VARIAVEL #DESTAQUE# IGUAL A 2 EXECUTE A QUERY 2 —>

Select * from categoria

where categoria = ‘Apostila’

order by nome

</cfquery>

<!— MAS SE O A VARIAVEL #DESTAQUE# IGUAL A 3 EXECUTE A QUERY 3 —>

Select * from categoria

where categoria = ‘Matematica’

order by nome

</cfquery>

<!— MAS SE O A VARIAVEL #DESTAQUE# IGUAL A 4 EXECUTE A QUERY 4 —>

Select * from categoria

where categoria = ‘LOGICA’

order by nome

</cfquery>

<!— MAS SE O A VARIAVEL #DESTAQUE# IGUAL A 5 EXECUTE A QUERY 5 —>

Select * from categoria

where categoria = ‘Portugues’

order by nome

</cfquery>

</cfif>

<!— PARA DAR UM EFEITO ONMOUSEOVER VAMOS ESCOLHER UMA COR —>

<!— VAMOS CRIAR UM REFRESH DE 30 EM 30 SEGUNDOS —>

<!— SE A QUERY MPRODUTO RESULTAR EM MENOS DE 6 ITENS —>

<!— VAI PARA O SITE DE REFRESH —>

<!— SENÃO EXIBE OS 10 PRIMEIROS RESULTADOS ORDENADOS POR NOME LADO A LADO—>

<td>

<br>

<!— AQUI EXECUTAMOS O EFEITO ONMOUSEOVER – à

<tr>

</tr>

<tr>

</tr>

<tr>

<td><strong><font color=”red” size=”1″ face=”Verdana, Arial, Helvetica, sans-serif”>#Dollarformat(preco)#</font></strong></td>

</tr>

</table>

</td>

<!— SE O RESTO DA DIVISÃO POR 2 FOR 0 —>

</tr>

<tr>

</tr></cfif>

</cfoutput>

</cfif>

</table>

Agora vamos dar início ao red_prods.cfm .

Tudo que ele faz é montar um caminho que recarrega automaticamente a pag vitrine.cfm, mesmo que o visitante não clique em nada.

<head>

<title> red_prods </title>

<!–

body {

background-color: #CAEEFF;

}

–>

</style>

</head>

<body>

<p align=”center” class=”style26″>Escolhendo mais produtos, arguarde 3 segundos, por favor.</p>

</body>

</html>

Lembro que recebi muitos e-mails perguntando como eu fazia esse efeito, perguntavam se era AJAX, quando eu falei que era um truque com IFRAME e Random ficaram surpresos.

Pode-se utilizar o próprio vitrine.cfm ou como eu recomendo o iframe desta forma:

Crie um arquivo HTM ou CFM e cole esse iframe, pode ser executado remotamente de um servidor para outro também, basta mudar o “src”.

Para ver o exemplo funcionando:

www.casadosconcursos-rj.com.br

Grande abraço!

–
Diogo Romano Souza