3

I've tried to show the related products under the images of products.
Until here all is ok, but the URL of the products is showing always the same of the first related product

How can I solve this?

My media.phtml

<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
    $store = Mage::app()->getStore();
    $code  = $store->getCode();

    $_productModel = Mage::getModel('catalog/product')->load($_product->getId());
    $related_product_collection = $_productModel->getRelatedProductIds();
    $productModel = Mage::getModel('catalog/product');
?>
<?php
    $aspect_ratio = Mage::getStoreConfig("porto_settings/product_view/aspect_ratio", $code);
    $ratio_width = 600;
    $ratio_height = 600;
    if(Mage::getStoreConfig("porto_settings/product_view/ratio_width", $code))
        $ratio_width = Mage::getStoreConfig("porto_settings/product_view/ratio_width", $code);
    if(!$aspect_ratio){
        if(Mage::getStoreConfig("porto_settings/product_view/ratio_height", $code))
            $ratio_height = Mage::getStoreConfig("porto_settings/product_view/ratio_height", $code);
    }
    $ratio = $ratio_height / $ratio_width;
    $rnd_str = rtrim(base64_encode(md5(microtime())),"=");
    $hide_smallthumb_single = Mage::getStoreConfig("porto_settings/product_view/hide_single_smallthumb", $code);
    if(!$hide_smallthumb_single)
        $hide_smallthumb_single = "false";
    else
        $hide_smallthumb_single = "true";
?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<ul id="etalage_<?php echo $rnd_str; ?>">
<?php foreach ($this->getGalleryImages() as $_image): ?>
    <?php if(substr($_image->getLabel(), -7) != "-swatch"): ?>
    <li>
        <?php
            if(!$aspect_ratio)
                $image_src = $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize($ratio_width, $ratio_height);
            else
                $image_src = $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($ratio_width);
        ?>
        <a rel="gallery" class="fancy-images fancy-images_<?php echo $rnd_str; ?>" href="<?php echo $image_src; ?>"><span class="glyphicon glyphicon-search"></span></a>
        <img class="etalage_thumb_image" src="<?php echo $image_src; ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
        <img class="etalage_source_image" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(100, 100*$ratio)?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
    </li>
    <?php endif; ?>
<?php endforeach; ?>
</ul>
<?php else: ?>
<ul id="etalage_<?php echo $rnd_str; ?>" class="<?php echo $thumb_type; ?>">
    <li>
        <?php
            if(!$aspect_ratio)
                $image_src = $this->helper('catalog/image')->init($_product, 'image')->resize($ratio_width, $ratio_height);
            else
                $image_src = $this->helper('catalog/image')->init($_product, 'image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($ratio_width);
        ?>
        <a class="fancy-images fancy-images_<?php echo $rnd_str; ?>" href="<?php echo $image_src; ?>"><span class="glyphicon glyphicon-search"></span></a>
        <img class="etalage_thumb_image" src="<?php echo $image_src; ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel()) ?>"/>
        <img class="etalage_source_image" src="<?php echo (!$aspect_ratio)?$this->helper('catalog/image')->init($_product, 'image')->resize(100, $ratio_height/$ratio_width*100):$this->helper('catalog/image')->init($_product, 'image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(100);?>" alt="<?php echo $this->htmlEscape($this->getImageLabel()) ?>" />
    </li>
</ul>
<?php endif; ?>
<div class="etalage-control">
<?php if (!Mage::getStoreConfig("porto_settings/general/rtl",$code)) : ?>
    <a href="javascript:void(0)" class="etalage-prev"><i class="icon-angle-left"></i></a>
    <a href="javascript:void(0)" class="etalage-next"><i class="icon-angle-right"></i></a>
<?php else: ?>
    <a href="javascript:void(0)" class="etalage-prev"><i class="icon-angle-right"></i></a>
    <a href="javascript:void(0)" class="etalage-next"><i class="icon-angle-left"></i></a>
<?php endif; ?>
</div>
<?php
    $zoom_disabled = Mage::getStoreConfig("porto_settings/product_view/disable_product_zoom", $code);
    $zoom_type = Mage::getStoreConfig("porto_settings/product_view/zoom_type", $code);
    $thumb_type = Mage::getStoreConfig("porto_settings/product_view/thumbnail_image_type", $code);
?>
<div class="product-view-zoom-area">
</div>
<script type="text/javascript">
    var zoom_enabled = false;
    var zoom_type = 0;
    jQuery(document).ready(function(){
        reloadEtalage();
        <?php if(!$zoom_disabled): ?>
        jQuery(".product-img-box .etalage li.etalage_thumb").zoom({
        <?php if($zoom_type == 1): ?>
            target: jQuery(".product-view-zoom-area"),
        <?php endif; ?>
            touch:false
        });
        zoom_enabled = true;
        <?php if($zoom_type == 1): ?>
        zoom_type = 1;
        <?php endif; ?>
        <?php endif; ?>
        setTimeout(function(){reloadEtalage();}, 500);
        jQuery(window).resize(function(e){
            reloadEtalage();
            var width = jQuery(this).width();
        });
        jQuery('.etalage-prev').on('click', function(){ etalage_<?php echo $rnd_str; ?>_previous(); });
        jQuery('.etalage-next').on('click', function(){ etalage_<?php echo $rnd_str; ?>_next(); });
        jQuery("a.fancy-images_<?php echo $rnd_str; ?>").fancybox();
        function reloadEtalage(){
            var src_img_width = <?php echo $ratio_width; ?>;
            var src_img_height = "auto";
            var ratio_width = <?php echo $ratio_width; ?>;
            var ratio_height = <?php echo $ratio_height; ?>;
            var width, height, thumb_position, small_thumb_count;
            small_thumb_count = 4;
            <?php if($thumb_type == "vertical"): ?>
            width = (jQuery(".product-view .product-img-box").width()-15)*small_thumb_count/(small_thumb_count+1);
            height = width*ratio_height/ratio_width;
            <?php if(!Mage::getStoreConfig("porto_settings/general/rtl", $code)): ?>
            thumb_position = "left";
            <?php else: ?>
            thumb_position = "right";
            <?php endif; ?>
            if(jQuery(window).width()<768){
                width = jQuery(".product-view .product-img-box").width()-8;
                height = "auto";
                thumb_position = "bottom";
            }
            <?php else: ?>
            width = jQuery(".product-view .product-img-box").width()-8;
            height = "auto";
            thumb_position = "bottom";
            <?php endif; ?>

            jQuery('#etalage_<?php echo $rnd_str; ?>').etalage({
                thumb_image_width: width,
                thumb_image_height: height,
                source_image_width: src_img_width,
                source_image_height: src_img_height,
                zoom_area_width: width,
                zoom_area_height: height,
                zoom_enable: false,
                small_thumbs:small_thumb_count,
                smallthumb_hide_single: <?php echo $hide_smallthumb_single; ?>,
                smallthumbs_position: thumb_position,
                smallthumb_inactive_opacity: 1,
                small_thumbs_width_offset: 0,
                show_icon: false,
                autoplay: false
            });
            if(jQuery(window).width()<768){
                var first_img = jQuery("#etalage_<?php echo $rnd_str; ?> img.etalage_thumb_image").first();
                var tmp_img = jQuery('<img src="" alt=""/>');
                tmp_img.attr("src",first_img.attr("src"));
                tmp_img.unbind("load");
                tmp_img.bind("load",function(){
                    jQuery("#etalage_<?php echo $rnd_str; ?>").height(Math.round(width*this.naturalHeight/this.naturalWidth+8)+"px");
                });
                jQuery('#etalage_<?php echo $rnd_str; ?>').removeClass("vertical");
                jQuery(".product-view .product-img-box li.etalage_thumb").css({left:0});
            }
            <?php if($thumb_type != "vertical"): ?>
            var first_img = jQuery("#etalage_<?php echo $rnd_str; ?> img.etalage_thumb_image").first();
            var tmp_img = jQuery('<img src="" alt=""/>');
            tmp_img.attr("src",first_img.attr("src"));
            tmp_img.unbind("load");
            tmp_img.bind("load",function(){
                jQuery("#etalage_<?php echo $rnd_str; ?>").height(Math.round(width*this.naturalHeight/this.naturalWidth+8)+"px");
            });
            <?php else: ?>
            jQuery('#etalage_<?php echo $rnd_str; ?>').addClass("vertical");
            <?php endif; ?>
        }
    });
</script>
<div class="clear"></div>
<?php echo $this->getChildHtml("after"); ?>




<div class="custom-thumb showondesktop">
    <div class="container">
    <div class="row">
        <?php foreach ($related_product_collection as $id) :
            $relatedProduct = $productModel->load($id); ?>
            <div class="col-md-3">
            <div class="media">
              <div class="media-left">
                  <!-- <p class="related-product-title"><?php echo $relatedProduct->getName(); ?></p> -->
                <a href="<?php echo $relatedProduct->getProductUrl(); ?>">
                  <img class="media-object" height="80px" width="80px" src="<?php echo $relatedProduct->getImageUrl(); ?>" alt="...">
                </a>
              </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.