John Smith John Smith - 4 months ago 19
PHP Question

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

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!

Answer

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>