Vitrine Virtual

Publicado por Diogo_Romano em 07/05/2006

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 —>

<cfset destaque = RandRange(1,5)>

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

<cfif #destaque# EQ 1>

<cfquery datasource=”#DSN#” name=”mproduto”>

Select * from categoria

where categoria = ‘Contabilidade’

order by nome

</cfquery>

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

<cfelseif #destaque# EQ 2>

<cfquery datasource=”#DSN#” name=”mproduto”>

Select * from categoria

where categoria = ‘Apostila’

order by nome

</cfquery>

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

<cfelseif #destaque# EQ 3>

<cfquery datasource=”#DSN#” name=”mproduto”>

Select * from categoria

where categoria = ‘Matematica’

order by nome

</cfquery>

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

<cfelseif #destaque# EQ 4>

<cfquery datasource=”#DSN#” name=”mproduto”>

Select * from categoria

where categoria = ‘LOGICA’

order by nome

</cfquery>

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

<cfelseif #destaque# EQ 5>

<cfquery datasource=”#DSN#” name=”mproduto”>

Select * from categoria

where categoria = ‘Portugues’

order by nome

</cfquery>

</cfif>

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

<cfset bgcolor=”F1F1F1″>

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

<META HTTP-EQUIV=”REFRESH” CONTENT=”30; URL=red_prods.cfm”>

<table class=”style1″> <tr>

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

<cfif mproduto.recordcount LT 6>

<!— VAI PARA O SITE DE REFRESH —>

<cflocation url=”red_prods.cfm”>

<cfelse>

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

<cfoutput query=”Mproduto” maxrows=”10″>

<td>

<br>

<!— AQUI EXECUTAMOS O EFEITO ONMOUSEOVER – à

<table width=”303″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”##F1F1F1″ onMouseOut=”this.bgColor=’###bgcolor#’” onMouseOver=”this.bgColor=’##BBBBBB’”>

<tr>

<td width=”113″ rowspan=”3″ ><div align=”center”><img src=”Administrador/adm_cat_padrao/# fotos#” width=”90″ height=”80″></div></td>

<td width=”180″><font size=”1″ face=”Verdana, Arial, Helvetica, sans-serif”># nome#</font></td>

</tr>

<tr>

<td></td>

</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 —>

<cfif Mproduto.CurrentRow MOD 2 IS 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.

<html xmlns=”http://www.w3.org/1999/xhtml “>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title> red_prods </title>

<style type=”text/css”>

<!–

body {

background-color: #CAEEFF;

}

–>

</style>

</head>

<body>

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

<p align=”center” class=”style26″><img src=”loading.gif ” width=”78″ height=”7″ /></p>

<META HTTP-EQUIV=”REFRESH” CONTENT=”3; URL= vitrine.cfm”>

</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”.

<iframe width=”640″ height=”550″ src=”vitrine.cfm ” scrolling=”auto” frameborder=”0″></iframe>

Para ver o exemplo funcionando:

www.casadosconcursos-rj.com.br

Grande abraço!


Diogo Romano Souza


Assine o nosso Feed
1.339 assinantes,
assine você também!
Publique esse artigo no Twitter Salve este artigo no Delicious Cadastre esse artigo no Dihitt Cadastre esse artigo no UEBA Cadastre esse artigo no Rec6

Diogo_Romano

Nenhum usuário comentou em " Vitrine Virtual "

Assine o Feed de Comtentários ou URL de Trackback

Deixe o seu comentário abaixo...

 Username (*required)

 Email Address (*private)

 Website (*optional)

 

MXStudio © 2003-2010. Todos os direitos reservados.
É expressamente proibido a cópia, reprodução e difusão dos textos, fotos e outros elementos contidos neste site sem autorização expressa do MXStudio.