Custom product collection on product page displays vertically (need it horizontally) [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Magento Stack Exchange.

Closed 4 years ago.

Please advise, I have a custom block named "sizes" to display on product page collection of similar products with another sizes. It is located in app/design/frontend/default/my_theme/blocks/sizes.phtml

The code of sizes.phtml:

<?php
$product = Mage::registry('current_product');
$sizes = explode(',', $product->getData('sizes'));
if (strlen($product->getData('sizes')) > 0) {
    foreach ($sizes as $sku) {
        $sizes[] = trim($sku);
    }

    $linkedProducts = Mage::getModel('catalog/product')->getCollection()
        ->addAttributeToSelect(array('name', 'product_url', 'small_image'))
        //->addFieldToFilter('is_active', 1)
        ->addAttributeToFilter('sku', array('in' => $sizes));
    ?>
    <div class="block box-collateral box-up-sell">
             <div class="block-title" style="text-align: center;"><span>Other Sizes</span></div>
        <div class="block-content clearfix">
            <div class="products-grid">
                <?php foreach ($linkedProducts as $linkedProduct): ?>
                    <div class="item">
                        <div class="item-inner clearfix">
                            <div class="item-img" style="margin-right: 10px;" data-toggle="tooltip" data-original-title="<?php echo $this->htmlEscape($linkedProduct->getName()) ?>">
                                <a href="<?php echo $linkedProduct->getProductUrl(); ?>">
                                    <img
                                        src="<?php echo $this->helper('catalog/image')->init($linkedProduct, 'small_image')->resize(83, 83) ?>"
                                        alt="<?php echo $this->htmlEscape($linkedProduct->getName()) ?>"/>
                                </a>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
<?php } ?>

But instead of grid block in displaying like a list (see the screenshot)

What should I change to show it horizontally? Many thanks for your help in advance!

Answer 1

This is not really a magento specific issue. Your issue is styling, and placement of page elements using css. There will be a couple of approaches for this.

But here is one possible answer:

Use lists, not divs. You are essentially listing a list of items, using list elements makes more sense.

so change this:

           <div class="products-grid">
                <?php foreach ($linkedProducts as $linkedProduct): ?>
                    <div class="item">
                        <div class="item-inner clearfix">
                            <div class="item-img" style="margin-right: 10px;" data-toggle="tooltip" data-original-title="<?php echo $this->htmlEscape($linkedProduct->getName()) ?>">
                                <a href="<?php echo $linkedProduct->getProductUrl(); ?>">
                                    <img
                                        src="<?php echo $this->helper('catalog/image')->init($linkedProduct, 'small_image')->resize(83, 83) ?>"
                                        alt="<?php echo $this->htmlEscape($linkedProduct->getName()) ?>"/>
                                </a>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

to this:

<ul class="products-grid">
    <?php foreach ($linkedProducts as $linkedProduct): ?>
        <li class="item">
            <div class="item-inner clearfix">
                <div class="item-img" style="margin-right: 10px;" data-toggle="tooltip" data-original-title="<?php echo $this->htmlEscape($linkedProduct->getName()) ?>">
                    <a href="<?php echo $linkedProduct->getProductUrl(); ?>">
                        <img
                            src="<?php echo $this->helper('catalog/image')->init($linkedProduct, 'small_image')->resize(83, 83) ?>"
                            alt="<?php echo $this->htmlEscape($linkedProduct->getName()) ?>"/>
                    </a>
                </div>
            </div>
        </li>
    <?php endforeach; ?>
</ul>

and then use css to display the list horizontally. Google is your friend for how to do that.