Bem vindo ao brockdev.com, não seja tímido compartilhe suas duvidas e conhecimento. :D

Alterar página do produto

brunowdbrunowd Usuário
editado January 2014 em Tutoriais Temas / Templates
Olá teria como, aumentar a disposição das amostras da página do produto? A imagem principal maior e as miniaturas tbm. Teria que alterar o css, e o view.phtml?
Obrigado. :)

Comentários

  • Alessandra Moderador Global
    Você pode alterar o tamanho das imagens no media.phtml (app/design/frontend/default/car_store/template/catalog/product/view) e alinhar do jeito que quiser no css.
  • disse:

    Você pode alterar o tamanho das imagens no media.phtml (app/design/frontend/default/car_store/template/catalog/product/view) e alinhar do jeito que quiser no css.


    Já tentei pelo media.phtml mas não rolou...

    <div class=\"more-views\">
    <h2><?php echo $this->__('More Views') ?></h2>
    <?php $i = 0; foreach ($this->getGalleryImages() as $_image):?>
    <?php if ($i++%$_columnCount==0): ?>
    <ul>
    <?php endif ?>

    <li class=\"item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>\">
    <a href=\"#\" onclick=\"popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;\" title=\"<?php echo $this->htmlEscape($_image->getLabel()) ?>\"><img src=\"<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(78,79); ?>\" width=\"78\" height=\"79\" alt=\"<?php echo $this->htmlEscape($_image->getLabel()) ?>\" /></a>
    </li>
    <?php if ($i%$_columnCount==0 || $i==count($this->getGalleryImages())): ?>
    </ul>
    <?php endif ?>
    <?php endforeach; ?>
    </div>

    <?php endif; ?>
  • Jonatan Machado Moderador Global, Administrador
    Ola Bruno
    Esta parde seria responsável pelo tamanho das imagens
    resize(78,79); ?>\" width=\"78\" height=\"79\"
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Ola Bruno
    Esta parde seria responsável pelo tamanho das imagens

    resize(78,79); ?>\" width=\"78\" height=\"79\"

    É como havia dito, não funcionou alterando esses códigos, a imagem miniatura tem 60x60px

    tentei pelo css tbm não deu resultado.

    /* Product Images */
    .product-view .product-img-box { float:left; width:500px; }
    .col3-layout .product-view .product-img-box { float:none; margin:0 auto; }
    .product-view .product-img-box .product-image { margin:0 0 13px; }
    .product-view .product-img-box .product-image-view { background: url(../images/bkg_img-product-view.png) no-repeat left top;width:500px; height:211px;padding: 10px; margin: 0 0 10px;}
    .product-view .product-img-box .product-image-zoom { position:relative; width:243px; height:211px; overflow:hidden; z-index:9; }
    .product-view .product-img-box .product-image-zoom img { position:absolute; left:0; top:0; cursor:move;}
    .product-view .product-img-box .zoom-notice { font-size:12px; margin:0 0 5px; text-align:center; color: #636363;}
    .product-view .product-img-box .zoom { position:relative; z-index:9; height:18px; margin:0 auto 13px; padding:0 28px; background:url(../images/slider_bg.gif) 50% 50% no-repeat; cursor:pointer; }
    .product-view .product-img-box .zoom.disabled { -moz-opacity:.3; -webkit-opacity:.3; -ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)\";/*IE8*/ opacity:.3; }
    .product-view .product-img-box .zoom #track { position:relative; height:18px; }
    .product-view .product-img-box .zoom #handle { position:absolute; left:0; top:6px; width:31px; height:7px; background:url(../images/magnifier_handle.gif) 0 0 no-repeat; }
    .product-view .product-img-box .zoom .btn-zoom-out { position:absolute; left:2px; top:0; }
    .product-view .product-img-box .zoom .btn-zoom-in { position:absolute; right:2px; top:0; }

    /* cor da fonte \"MAIS IMAGENS\" */
    .product-view .product-img-box .more-views h2 { padding: 0 0 5px;color: #555555;font-size:18px; border-bottom:1px solid #d5d5d5; margin:0 0 8px; text-transform:capitalize; font-weight: normal; }
    /* cor da fonte \"MAIS IMAGENS\" */

    .product-view .product-img-box .more-views ul { }
    .product-view .product-img-box .more-views li { float:left; padding: 0 11px 7px 0;}
    .product-view .product-img-box .more-views li.last { padding: 0;}
    .product-view .product-img-box .more-views li a { float:left; width:178px; height:179px; border:1px solid #d5d5d5; overflow:hidden; }
    .product-view .product-img-box .more-views li a:hover {border:1px solid #fd9000;}

    .product-image-popup { margin:0 auto; }
    .product-image-popup .nav { font-weight:bold; text-align:center; }
    .product-image-popup .image { display:block; margin:10px 0; }
    .product-image-popup .image-label { font-size:13px; font-weight:bold; margin:0 0 10px; color:#2f2f2f; }
  • Jonatan Machado Moderador Global, Administrador
    Utilize o debug e verifique se você esta alterando o arquivo do caminho correto. pois você tem que alterar somente isso e para mudar o tamanho da imagen.
    reindexa e limpe o cache
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Jonatan Machado Moderador Global, Administrador
    Ola bruno achou o problema?
    O arquivo carregado pelo seu projeto nao esta nesse caminho
    (app/design/frontend/default/car_store/template/catalog/product/view)
    Presta atenção no debug
    Abraço.
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Ola bruno achou o problema?
    O arquivo carregado pelo seu projeto nao esta nesse caminho
    (app/design/frontend/default/car_store/template/catalog/product/view)
    Presta atenção no debug
    Abraço.

    Não consegui ainda Jonatan,sim eu sei que não é no view , na real era pra ser no media.phtml como tu tinha dito antes,mas nenhuma alteração no frontend foi feita. ;)
  • Jonatan Machado Moderador Global, Administrador
    Ativa o debug que eu mostro o caminho
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Jonatan Machado Moderador Global, Administrador
    O caminho que voce esta achando que e seria esse
    app/design/frontend/default/car_store/template/catalog/product/view/media.phtml

    O que o seu tema esta carregando e esse
    frontend/default/default/template/etlytebox/media.phtml

    Abraço
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Jonatan Machado Moderador Global, Administrador
    Esse caminho seria correto caso não tivesse feito alteraçoes no xml pra mudar o caminho algun modulo deve ter alterado
    app/design/frontend/default/car_store/template/catalog/product/view/media.phtml
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • tentei alterar essas linhas de cód. e nada.

     <?php else: ?>
    <p class=\"product-image\">
    <?php
    $_img = '<img src=\"' . $this->helper('catalog/image')->init($_product, 'image')->resize(265) . '\" alt=\"' . $this->htmlEscape($this->getImageLabel()) . '\" title=\"' . $this->htmlEscape($this->getImageLabel()) . '\" />';
    echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
    </p>
    <?php endif; ?>
    <?php endif; ?>



    <?php if (count($this->getGalleryImages()) > 0): ?>
    <div class=\"more-views\">
    <h2><?php echo $this->__('More Views') ?></h2>
    <ul>
    <?php foreach ($this->getGalleryImages() as $_image): ?>
    <?php
    $subtitle = $this->htmlEscape($_image->getLabel());
    if (($_lyghtboxConfig['productName'] != 0) && empty($subtitle)):
    $subtitle = $_product->getName();
    endif;

    $imageUrl = $popupImageSize
    ? (count($popupImageSize) == 2
    ? ((string)Mage::helper('catalog/image')->init($_product, 'image', $_image->file)->resize($popupImageSize[0], $popupImageSize[1]))
    : ((string)Mage::helper('catalog/image')->init($_product, 'image', $_image->file)->resize($popupImageSize[0]))
    )
    : ((string)Mage::helper('catalog/image')->init($_product, 'image', $_image->file));
    ?>
    <li>
    <a href=\"<?php echo $imageUrl; ?>\" rel=\"lytebox[rotation]\" title=\"<?php echo $subtitle; ?>\"
    onclick=\"return false;\"><img
    src=\"<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($additionalImageSize[0], $additionalImageSize[1]); ?>\"
    width=\"<?php echo $additionalImageSize[0];?>\" height=\"<?php echo $additionalImageSize[1];?>\"
    alt=\"<?php echo $subtitle; ?>\"/></a>
    </li>
    <?php endforeach; ?>
    </ul>
    </div>
    <?php endif; ?>
  • Jonatan Machado Moderador Global, Administrador
    Eu acho que deve ter em algum modulo que voce instalou pra alterar o tamanho da imagem direto no admin, mais voce pode mudar $additionalImageSize[0], $additionalImageSize[1] pelo tamanho desejado

    o seu esta assim
    <?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($additionalImageSize[0], $additionalImageSize[1]); ?>


    Fia mais ou menos assim
    <?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(100); ?>
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • disse:

    Eu acho que deve ter em algum modulo que voce instalou pra alterar o tamanho da imagem direto no admin, mais voce pode mudar $additionalImageSize[0], $additionalImageSize[1] pelo tamanho desejado

    o seu esta assim

    <?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($additionalImageSize[0], $additionalImageSize[1]); ?>


    Fia mais ou menos assim
    <?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(100); ?>

    As imagens ficaram um pouco distorcidas,mas achamos onde alterar, na verdade.. abaixo dessa linha que tu me mandou.:
    <li>
    <a href=\"<?php echo $imageUrl; ?>\" rel=\"lytebox[rotation]\" title=\"<?php echo $subtitle; ?>\"
    onclick=\"return false;\"><img
    src=\"<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($additionalImageSize[0], $additionalImageSize[1]); ?>\"
    width=\"<?php echo $additionalImageSize[0];?>\" height=\"<?php echo $additionalImageSize[1];?>\"
    alt=\"<?php echo $subtitle; ?>\"/></a>
    </li>


    só alterar o width e o height:

    <?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($additionalImageSize[0], $additionalImageSize[1]); ?>\"
    width=\"100\" height=\"<100>;?>\"\"/></a>
    </li>
  • Só a imagem principal que não to achando.
  • Jonatan Machado Moderador Global, Administrador
    Desse jeito que você fez que fica tremida tem que fazer do jeito que eu falei que da resize na imagem não estica ela
    Tem que alterar os dois
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Sim sim, CONSEGUIMOS smile_handshake :D

    Eu consegui tem alterar o tamanho da imagem principal!! smile_rofl


    Obrigado pela ajuda!

    E pra alterar a ordem das imagens , tipo tem duas colunas queria colocar em 4 colunas pra aproveitar melhor o espaço ,sabe como? No css?
  • Jonatan Machado Moderador Global, Administrador
    Como assim duas coluna?
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Está assim:



    Quero que a disposição fique assim:



    :)
  • Jonatan Machado Moderador Global, Administrador
    Isso voce pode alterar no css :)
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • Oi Jonatan coloquei um display:inline; no codigo das imagens ali... mas não rolou segui essa dica http://www.codigosnaweb.com/forum/Alinhar-ul-li-horizontalmente-com-CSS_4_6575.html com ela o cara alinhou o texto um do lado do outro...


    /* Product Images */
    .product-view .product-img-box { float:left; width:500px; }
    .col3-layout .product-view .product-img-box { float:none; margin:0 auto; }
    .product-view .product-img-box .product-image { margin:0 0 13px; }
    .product-view .product-img-box .product-image-view { background: url(../images/bkg_img-product-view.png) no-repeat left top;width:500px; height:211px;padding: 10px; margin: 0 0 10px;}
    .product-view .product-img-box .product-image-zoom { position:relative; width:243px; height:211px; overflow:hidden; z-index:9; }
    .product-view .product-img-box .product-image-zoom img { position:absolute; left:0; top:0; cursor:move;}
    .product-view .product-img-box .zoom-notice { font-size:12px; margin:0 0 5px; text-align:center; color: #636363;}
    .product-view .product-img-box .zoom { position:relative; z-index:9; height:18px; margin:0 auto 13px; padding:0 28px; background:url(../images/slider_bg.gif) 50% 50% no-repeat; cursor:pointer; }
    .product-view .product-img-box .zoom.disabled { -moz-opacity:.3; -webkit-opacity:.3; -ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)\";/*IE8*/ opacity:.3; }
    .product-view .product-img-box .zoom #track { position:relative; height:18px; }
    .product-view .product-img-box .zoom #handle { position:absolute; left:0; top:6px; width:31px; height:7px; background:url(../images/magnifier_handle.gif) 0 0 no-repeat; }
    .product-view .product-img-box .zoom .btn-zoom-out { position:absolute; left:2px; top:0; }
    .product-view .product-img-box .zoom .btn-zoom-in { position:absolute; right:2px; top:0; }

    /* cor da fonte \"MAIS IMAGENS\" */
    .product-view .product-img-box .more-views h2 { padding: 0 0 5px;color: #555555;font-size:18px; border-bottom:1px solid #d5d5d5; margin:0 0 8px; text-transform:capitalize; font-weight: normal; }
    /* cor da fonte \"MAIS IMAGENS\" */

    .product-view .product-img-box .more-views ul { }
    .product-view .product-img-box .more-views li { float:left; padding: 0 11px 7px 0; [b]display:inline;[/b]}
    .product-view .product-img-box .more-views li.last { padding: 0;}
    .product-view .product-img-box .more-views li a { float:left; width:178px; height:179px; border:1px solid #d5d5d5; overflow:hidden; }
    .product-view .product-img-box .more-views li a:hover {border:1px solid #fd9000;}

    .product-image-popup { margin:0 auto; }
    .product-image-popup .nav { font-weight:bold; text-align:center; }
    .product-image-popup .image { display:block; margin:10px 0; }
    .product-image-popup .image-label { font-size:13px; font-weight:bold; margin:0 0 10px; color:#2f2f2f; }
  • Jonatan Machado Moderador Global, Administrador
    Na verdade as imagens ja estão lado a lado porem deve ter um width que seria a largura que esta pequeno, voce tera que aumentar essa largura so procura no inspecionar elemento qual div que esta com o width menor que deixa as imagens só em duas.
    acho que vai estar nesse tamanho ai e so i aumentando pra o tamanho desejado
    width: 475px;
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • só alterei a linha
    .product-view .product-img-box { float:left; width:500px; }


    para

    .product-view .product-img-box { width: 785px; }


    e funcionou :D

    valeu.
Entre ou Registre-se para fazer um comentário.