Magento描述页输出所有产品图片

作者:stoat 发布时间:2014-01-23 分类:技术

本文仅适用于Magento 1.7版本,其他版本未测试,之前在钥匙及锐想的博客上看到的代码,拿过来用的时候发现有问题(在1.7版本有问题):如果产品是单张图片,描述页不会输出图片;如果是多张图片,则不会输出主图。

简单修改了下,并且加入Nav切换。。
文件:app\design\frontend\base\default\template\catalog\product\view.phtml


<ul id="box-navbar">
	<li>Details</li>
	<li>Images</li>
</ul>
<?php foreach ($this->getChildGroup('detailed_info', 'getChildHtml') as $alias => $html):?>
		<div class="box-collateral <?php echo "box-{$alias}"?> box-nav">
			<?php if ($title = $this->getChildData($alias, 'title')):?>
			<h4><?php echo $this->escapeHtml($title); ?></h4>
			<?php endif;?>
			<?php echo $html;?>
		</div>
<?php endforeach;?>
<div class="box-collateral box-img box-nav">
	<?php $_description = $this->getProduct()->getDescription(); ?>
	<?php if ($_description):  ?>
	<h4><?php echo $this->htmlEscape($this->getImageLabel());?></h4>
	<p>SkyBox Wholesale and skybox Satellite Receiver,Skybox Products Images Show in www.skybox.biz</p>
	<p>
	<?php
	echo '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(500).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
	?>
	<?php if (count($this->getProduct()->getMediaGalleryImages()) > 0): ?>

			<?php foreach ($this->getProduct()->getMediaGalleryImages() as $_image): ?>
					<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(500); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel()) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel()) ?>" />
			<?php endforeach; ?>

	<?php endif; ?>
	<?php endif; ?>
	</p>
</div>
<script type="text/javascript">
//<![CDATA[
	jQuery(document).ready(function(){
		jQuery('.box-nav').removeClass('none');
		jQuery('.box-nav').last().addClass('none');
		jQuery('#box-navbar li').first().click(function(){
			jQuery('.box-nav').removeClass('none');
			jQuery('.box-nav').addClass('none');
			jQuery('.box-nav').first().removeClass('none');
		});
		jQuery('#box-navbar li').last().click(function(){
			jQuery('.box-nav').removeClass('none');
			jQuery('.box-nav').addClass('none');
			jQuery('.box-nav').last().removeClass('none');
		});
	})
//]]>
</script>

增加一段css样式:


.product-collateral .none{
	display:none;
}
.product-collateral {
background: url(../images/base_mini_bg.gif) repeat-x 0 0;
}
#box-navbar {
margin:10px 0 15px 0px;
overflow: hidden;
border-bottom: 1px solid #E5DCC3;
zoom: 1;
height: 28px;
line-height: 28px;
}
#box-navbar li {
float: left;
border-right: 1px solid white;
border-left: 1px solid white;
font-size: 0.9em;
background: #EFEFEF;
cursor: pointer;
padding: 1px 15px;
}
#box-navbar li:hover{
background-color: #DDD;
text-decoration: none;
color: #444;
text-decoration: none;
}

实现效果:
Magento描述页输出所有产品图片.jpg

原文地址:Magento描述页输出所有产品图片 by 雪鼬博客

标签:Magento

评论已关闭