LojaExemplo: Como ampliar imagem do produto com efeito em sua loja

  • Olá,

    Sabemos que o sistema original da LojaExemplo Locaweb não possibilita ampliação de imagem, por isso estou disponibilizando uma forma de fazer isso:

    Entre no arquivo “produtos_descricao.asp” e adicione as linhas em vermelho:

    OBS: NÃO COPIE E COLE OS CÓDIGOS DO POST. ESTES SÃO SÓ PARA REFERÊNCIA. NO ANEXO DOS ARQUIVOS ESTÃO OS CÓDIGOS CERTOS E COMPLETOS. UM DOS PROBLEMAS QUE VAI DAR SE TENTAR COPIAR O CÓDIGO DO POST É COM RELAÇÃO AS ASPAS, QUE NO POST ESTÃO ASSIM ” POR PADRÃO. PARA EVITAR ERROS DIGITE AS ASPAS OU COPIE A PARTE EM VERMELHO DO ARQUIVO EM ANEXO.

    <%
    ‘-#-#-#-#-#-#-#-#-#-#
    ‘ Loja Exemplo Locaweb
    ‘ Versão: 6.5
    ‘ Data: 12/09/06
    ‘ Arquivo: produtos_descricao.asp
    ‘ Versão do arquivo: 0.0
    ‘ Data da ultima atualização: 16/10/08
    ‘
    ‘—————————————————————————–
    ‘ Licença Código Livre: http://comercio.Locaweb.com.br/gpl/gpl.txt
    ‘-#-#-#-#-#-#-#-
    %>
    <!–#INCLUDE FILE=”funcoes/funcoes_valida.asp” –>
    <%
    rodape = “no”
    page = “produtos_descricao”
    %>
    (..)

    (..)
    function view_prod(view_img) {
    document.IMGVisProd.src = view_img;
    document.getElementById(‘visualizaimg’).href=view_img;
    }

    </script>

    <table border=”0″ width=”100%” height=”100%” align=”center” cellpadding=”0″ cellspacing=”0″ valign=”top”>
    <tr>

    (…)

    Agora mais abaixo do arquivo adicione o conteudo em vermelho:

    (…)

    </td>
    <td valign=”top” align=”center” width=”60%”>
    <table width=”100%” height=”300″>
    <tr>
    <td height=”300″ valign=”middle” align=”center” width=”100%”><a href=”<%= RS_Produto(“img_produtoGRD”) %>” id=”visualizaimg” rel=”lightbox” title=”Imagem Ilustrativa”><img src=”<%= RS_Produto(“img_produtoGRD”) %>” border=”0″ id=”IMGVisProd” name=”IMGVisProd” width=”220″></a> </td>
    </tr>
    <%
    If RS_Produto(“img_produto_adic01PQN”) <> “” Or RS_Produto(“img_produto_adic02PQN”) <> “” Or RS_Produto(“img_produto_adic03PQN”) <> “” Then
    %>
    <tr>

    (…)

    Agora entre no arquivo “cabecalho.asp” e adicione as linhas em vermelho:

    sURLloja = Application(“URLloja”) & “/carrinho_vazio.asp?redirect=default”
    Else ‘Para as demais páginas
    sURLloja = Application(“URLloja”) & “?lang=” & varLang
    End If
    %>
    <title><%=Application(“nomeloja”)%></title>
    <script language=”Javascript” src=”config/templates/<%=varLang%>/textos_JS.js”></script>
    <script language=”Javascript” src=”funcoes/funcoes_js.js”></script>
    <% if page=”produtos_descricao” Then %>
    <link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
    <script src=”js/prototype.js” type=”text/javascript”></script>
    <script src=”js/scriptaculous.js?load=effects,builder” type=”text/javascript”></script>
    <script src=”js/lightbox.js” type=”text/javascript”></script>
    <%End if %>

    <BODY leftmargin=”0″ topmargin=”0″>
    <link rel=”stylesheet” href=”config/css.css” type=”text/css”>
    <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
    <tr>

    Agora basta subir os arquivos do efeito da forma como esta anexado para o diretório onde esta instalada sua loja :

    Download dos arquivos.

    Essa ampliação estão aplicada no endereço http://www.barrocarte.com/produtos_descricao.asp?lang=pt_BR&codigo_produto=20

    Confira tambem uma variação dessa modificação feita pelo Marcio no link http://www.dlojavirtual.com/servicos/ampliar-imagens-de-produtos-na-loja-exemplo-locaweb

    Qualquer dúvida, comentem.

    Abraço.



    Related Posts Plugin for WordPress, Blogger...




    Jeann | 16 Comentários | Tags:,

16 Comentarios

  • Leandro Novaes

    Parabéns pelos posts!

    Tudo com muita qualidade, são ótimo scripts prontos!
    Eu só não joguei os arquivos prontos para não substituir os meus em que já há algumas modificações.

    O site está muito bom, aguardo por mais posts.

    //leandro novaes

  • Vinicius

    Parabens pelos posts !

    Muito bom os scripts, todos ajudam muito.
    Como o amigo acima disse, otima qualidade. ótimos scripts melhorando em muito as funcionalidades.

    Muito Obrigado.

    Vinicius

  • Vinicius

    uma dúvida que eu estou é a seguinte, como voce conseguiu deixar separado todos os produtos com contorno ná pagina inicial ? voce usou o css pra colocar a borda pontilhada ?? eu fiz no meu mas nao conseguir fechar um quadrado bunitinho igual ao seu, vc usou o cellspace pra deixar eles com esses tamanhos padronizados ? fica muito melhor para inserir informações quando eles estão separadinhos assim.

    Muito Obrigado

  • Programador

    Olá Vinicius,

    Coloquei uma class chamada “caixa_produto” em uma td do arquivo funcoes.asp dentro da função exibe_produtos.asp no trecho abaixo:

    (...)


    <td valign="top" align="center" class="caixa_produto">


    <div id="go">


    <ul id="gop">


    <li>


    (...)

    O CSS (no arquivo config/css.css) da classe “caixa_produto” ficará assim:

    .caixa_produto {
    border:1px dashed #00074F;
    height:380px;
    padding-right:3px;
    width:196px;
    }

    Na classe acima poderá definir largura, altura, cor da borda grossura e se tem ou não padding. A formatação fica a seu critério mas a linha que é correspondente a borda é a “border:1px dashed #00074F;”

    Forte Abraço.

  • Vinicius

    Muito Obrigado,

    eu tava tentando configurar o tamanho pela própria tabela mas não tava conseguindo.
    Não tinha pensado em colocar a classe, o que é muito mais interessante.

    Muito Obrigado pela dica, valew mesmo.
    Pra colocar o valor parcelado na página inicial voce pegou a variável lá na descrição do produto certo ? ou você criou uma outra função que pega o preço do produto e calcula ?

    Muito Obrigado

  • Programador

    Olá Vinicius,

    O informativo do parcelamento ainda não esta dinâmico com relação ao numero de parcelas, mas existe uma função que faz o calculo e considera tbm promoções na divisão.

    Abraço.

  • Humberto

    Olá amigos, eu tentei fazer o tutorial mas não deu certo. Troquei o arquivo original pelo postado aqui e subi as pastas para o FTP. Mas não funcionou no site, continuou igual. Ajudas são bem-vindas.
    Obrigado!

  • Humberto

    Amigos, funcionou sim!! Desculpem!!
    Muito legal!! E fácil para leigos…

  • Carf

    Parabéns pelo blog. Bacana esses tutoriais da loja exemplo, muito uteis. Abraço

  • Su

    Olá,

    muito bom os tutoriais.
    Consegui fazer as alterações no produtos_descricao.asp, mas fiquei em dúvida com os outros arquivos da pasta.
    Por exemplo existem três pastas JS na loja exemplo e várias images. Quais seriam as corretas em que devo jogar estes arquivos?
    Desculpe, é que não entendo nada de programação…

    obrigada.

  • feio

    Oi, configurei esse exemplo em meu site, porém na barra de status aparece um erro:
    Detalhes dos erros da página da Web

    Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB5; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    Carimbo de data/hora: Thu, 15 Oct 2009 19:19:20 UTC

    Mensagem: Objeto esperado
    Linha: 276
    Caractere: 1
    Código: 0
    URI:

    Mensagem: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
    Linha: 0
    Caractere: 0
    Código: 0
    URI:

    sabe me dizer o que pode ser??
    Obrigado e parabéns pelo trabalho

  • admin

    Oi feio,

    Esse erro é relacionado ao javascript e ele aparece só em uma determinada situação. atualizei o post acima não deverá acontecer mais isso.

    Qualquer novidade eu postarei aqui.

    Abraço.

  • admin

    Oi Su,

    Desculpe a demora para responder.

    Sobre as pastas seria necessário envia-las com todos os arquivos logo na raiz. ou seja a pasta js, css e images ficaria no mesmo nivel da “config”, “painelctrl” …

    Qualquer dúvida deixe outro comentario.

    Abraço.

  • Ampliar imagens de produtos na loja exemplo Locaweb | D Loja Virtual.

    [...] algum tempo o Jeann do site Surgimento publicou esse script para mostra a imagem grande dos produtos da pagina produtos_descricao.asp em [...]

  • Su

    Legal, consegui fazer! Muito obrigada ;-)

  • Gleison

    Olá Pessoal,

    Acabei de implementar as modificações, entretanto o resultado foi um pouco diferente do apresentado como exemplo no site barrocarte. Para começar o usuario precisa clicar na foto para carregar a imagem e aparecer o efeito ao passo que no barrocarte basta apenas passar o mouse por cima da foto. E alguma coisa que estou fazendo de errado?

    Abracos!

Comente aqui

* Nome, Email e comentário são obrigatórios