Skip to content

Фотографии продукта Magento в описании

17/08/2011

Пример, как вывести(показать) фото/картинки продукта в блоке подробного описания продукта на странице продукта в CMS Magento Commerce (Мадженто Коммерс).

Для начала создадим файл шаблона (phtml), где будут показываться «превью»(маленькие картинки предпросмотра) фотографий товара в Magento.

Файл будет находится в template/catalog/product/view/media_more_foto.phtml.
Скопируем код из шаблона в файле template/catalog/product/view/media.phtml.

<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>
<?php if (count($this->getGalleryImages()) > 0): ?>
    <div>
        <ul>
            <?php foreach ($this->getGalleryImages() as $_image): ?>
            <li>
                <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(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
            </li>
            <?php endforeach; ?>
        </ul>
    </div>
<?php endif; ?>

Далее откроем xml-файл layout/catlog.xml.
И отредактируем показ страницы товара Magento.

Находим xml-тег

<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml">

и внутри xml-тега вставим

<block type="catalog/product_view_media" name="product.info.media" as="media_more_foto"  template="catalog/product/view/media_more_foto.phtml" />

и блок описания продукта в xml будет выглядеть примерно так

<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml">
    <block type="catalog/product_view_media" name="product.info.media" as="media_more_foto" template="catalog/product/view/media_more_foto.phtml" />
    <action method="addToParentGroup"><group>detailed_info</group></action>
</block>

Теперь откроем файл template/catalog/product/view/description.phtml и добавим вывод содержимого блока media_more_foto.

echo $this->getChildHtml('media_more_foto');

Файл template/catalog/product/view/description.phtml должен выглядеть примерно так

<?php $_description = $this->getProduct()->getDescription(); ?>
<?php if ($_description): ?>
    <h2><?php echo $this->__('Details') ?></h2>
    <div>
        <?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description') ?>
    </div>
    <?php echo $this->getChildHtml('media_more_foto'); ?>
<?php endif; ?>

Теперь надо обновить(сбросить) кеш Magento.

И примерно так должно получится.

Magento - дополнительные картинки в описании продукта
Magento - дополнительные картинки в описании продукта

Теперь осталось только поправить стили CSS.

Magento 1.*