How do I create such a dynamic structure?HTML + PHP

John Smith

I have the following PHP code, which dynamically generates content:

<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <div class="row">
                <?php foreach ($this->getItems() as $_item): ?>
                    <div class="col-sm-3">
                        <a class="product-image" href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
                        <div class="product-details">
                            <h3 class="product-name"><a href="<?php echo $_item->getProductUrl() ?>"><?php echo $this->escapeHtml($_item->getName()) ?></a></h3>
                            <?php echo $this->getPriceHtml($_item, true) ?>
                            <button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                            <ul class="add-to-links">
                                <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                     <li><a href="<?php echo $this->getAddToWishlistUrl($_item) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                                <?php endif; ?>
                                <?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?>
                                    <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                                <?php endif; ?>
                            </ul>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>

The above code outputs the following structure:

<div class="carousel-inner">
    <div class="item active">
        <div class="row">
            <div class="col-sm-3">product1</div>
            <div class="col-sm-3">product2</div>
            <div class="col-sm-3">product3</div>
            <div class="col-sm-3">product4</div>
            <div class="col-sm-3">product5</div>
            <div class="col-sm-3">product6</div>
            .
            .
            .
            etc..
        </div>
    </div>
</div>

I want to create this structure:

 <div class="carousel-inner">
     <div class="item active">
         <div class="row">
             <div class="col-sm-3">product1</div>
             <div class="col-sm-3">product2</div>
             <div class="col-sm-3">product3</div>
             <div class="col-sm-3">product4</div>
         </div>
     </div>

     <div class="item">
         <div class="row">
             <div class="col-sm-3">product1</div>
             <div class="col-sm-3">product2</div>
             <div class="col-sm-3">product3</div>
             <div class="col-sm-3">product4</div>
         </div>
     </div>

     <div class="item">
         <div class="row">
             <div class="col-sm-3">product1</div>
             <div class="col-sm-3">product2</div>
             <div class="col-sm-3">product3</div>
             <div class="col-sm-3">product4</div>
         </div>
     </div>
     .
     .
     .
     etc...
</div>

How do I change the dynamic structure so they get what they want?

Thanks in advance!

Angel Politis

In order to create the structure you want:

You need to put <div class="item active"> in the foreach loop as well, because in order to have many items, you want that to be repeated many times too.
You have to remove active from <div class="item active"> as it will be added to every item, while we only want it to be in the first one.
You have to create a checking variable, so that the class active is added to the first item only.

Your final code should look like:

<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
    <div class="carousel-inner">
        <?php
            $i = 0; /* This is the checking variable */
            $active; /* This is the variable containing the class 'active' */
            foreach ($this->getItems() as $_item):
                $i++; /* We increment the checking variable in each loop */
                $active = ($i === 1) ? "active" : ""; /* We make the check */
        ?>
                <div class="item <?php echo $active;?>">
                    <!-- The rest of your code as it is -->
                </div>
        <?php
            endforeach;
        ?>
    </div>
</div>

[EDIT]:

Considering your comment, in the case of wanting four products in each item, you would need to use another loop inside <div class = "row">.

The key part you are doing wrong in your code, however, that doesn't change, is that you don't loop the <div class = "item"> and that's way you have only one.

A preview of how your code inside <div class="item"> should be:

<div class="item <?php echo $active;?>">
    <div class="row">
        <?php
            for ($i = 0; $i <= 4; ++$i):
        ?>
                <div class="col-sm-3"><!-- The rest of the code --></div>
        <?php
            endfor;
        ?>
    </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.