loop and div structure & carousel in PW problem

mrkhan · December 27, 2014

i am trying to create a product carousel in PW from last few days but can't figure out what i am doing wrong. here is HTML of carousel which is working fine.

<div class="box producttabs">
<div class="tab-nav">
<ul id="producttabs304244223" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab-latest304244223">First Tab</a></li>
<li><a data-toggle="tab" href="#tab-featured304244223">Second Tab</a></li>
</ul>
</div>
<div class="tab-content">

<div id="tab-latest304244223" class="tab-pane box-products  tabcarousel304244223 slide active">
<div class="">
<a data-slide="prev" href="#tab-latest304244223" class="carousel-control left">‹</a>
<a data-slide="next" href="#tab-latest304244223" class="carousel-control right">›</a>
</div>
<div class="carousel-inner ">   

<!-- repeat -->
<div class="item active">
<div class="row-fluid box-product">
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-4.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>

<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-5.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>

<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-6.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>

<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-7.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>

</div>
</div>
<!-- repeat -->

</div>  
</div>
<!-- end of tab -->

<div id="tab-featured304244223" class="tab-pane box-products  tabcarousel304244223 slide">
<div class="">
<a data-slide="prev" href="#tab-featured304244223" class="carousel-control left">‹</a>
<a data-slide="next" href="#tab-featured304244223" class="carousel-control right">›</a>
</div>
<div class="carousel-inner "> 
<div class="item active">
<div class="row-fluid box-product">
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-8.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-1.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-2.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>

<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-3.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
</div>
</div>

<div class="item ">
<div class="row-fluid box-product">

<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-5.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>

<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-6.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>

<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-7.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>

<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-8.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
</div>
</div>

</div>  
</div>

</div>
</div>

if you see in above HTML code there is two tabs and product carousel. one thing important is each 4 items are inclose in

<div class="item">

and first div of tab will be

<div class="item active">

i am using bellow code in PW but output is coming wrong and page disturb

<div class="tab-content">

<div id="tab-latest304244223" class="tab-pane box-products  tabcarousel304244223 slide active">

<?php
$children=$pages->find("template=product,product_cat=1014,show_main>0");
if($children->getTotal() >0){
?>
<div class="">
<a data-slide="prev" href="#tab-latest304244223" class="carousel-control left">‹</a>
<a data-slide="next" href="#tab-latest304244223" class="carousel-control right">›</a>
</div>
<div class="carousel-inner ">   
<?php
$j=1;
$active="active";
foreach($children as $child)
{

if($j==1)
{
echo "<div class=\"item $active\"><div class=\"row-fluid box-product\">";
$active="";
}
?>

<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-4.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
<?php
if($j==5){ echo "</div></div>"; $j=1; }
?>

<?php
$j++;
}
echo "</div></div>";
}
?>

</div>  
</div>
    
</div>

if you see in my code i am using variable $j to count number of products and when product reach 5 i end the two div and make $j to 1 to create another <div class="item"> but active is only once. i am also trying to close two more div at end.

thanks for heloping

SteveB · December 27, 2014

Just for your own sanity break the code into functions where each one is responsible for opening and closing a tag it creates.

Pass info to outermost one, it starts a DIV (whatever) and passes info to another function (drilling down in a nested way) then closes the DIV it started.

All the opening/closing of the tags works out by itself as the functions return. It's easier to test.

Each function handles one level of the nesting and has the tests (logic) and tags (markup) that happen at that level.

mrkhan · December 27, 2014

Hello SteveB,

thanks for reply, as you see my HTML code above how many functions i need and then how to call them in loop ?

see my HTML in this <div class="item active"> will have 4 <div class="span3 product-block">

after 4 again <div class="item "> will repeat but with out active

and this will react for every 4 products from loop.

<div class="item active">
<div class="row-fluid box-product">

<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-4.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>

</div>
</div>

i really can't figure out how to do this in functions also, like

how to call functions in PW pages loop etc.

some code will be really help full.

Thanks

SteveB · December 28, 2014

I was making a point about letting the unwinding of nested function calls help with your tag closures but you don't have to take it to extremes.

Take your example of HTML that works and indent it to see structure/repetition much more easily (see below). Where there is a lot of repetition there is more of a case for using a function. Looking at the indented code, I'd start with two functions.

You get the stuff to display as a PageArray using: $children=$pages->find("template=product,product_cat=1014,show_main>0");

The thing I see being repeated a lot is for each product-block. Markup to display one product's attributes. Each grouping of those has a simple wrapper surrounding it which is a couple nested divs (item and row).

Make a function to do the item and row divs. Pass it $children and since you want to do products in groups of four pass it an index and a quantity (4). It can test that to tell whether it should use the "active" class and it can use the index and quantity to pick pages to be displayed from of the $children PageArray. It will use another function multiple times to produce the items and then it will close the item and row divs it started.

Make a second function for the first function to pass a product page to. This will make the markup for that one product, starting with div class="span3 product-block" inserting the data from the product page, and closing the divs for the product block before returning.

Your foreach loop can then call the first function, incrementing the index, until it runs out of pages. You could have the first function help out by returning either the next index to use or false if there are no more products and it's time to stop.

I left out making the "carousel" markup around each "row" but it's just more of the same idea.

            <div class="carousel-inner ">   

                <!-- repeat -->
                <div class="item active">
                    <div class="row-fluid box-product">
                        <div class="span3 product-block"><div class="product-inner">
                                <div class="image">
                                    <a href="#"><img alt="Loves or pursues" src="products/image-4.jpg"></a>
                                </div>
                                <div class="wrap-infor">
                                    <div class="name"><a href="#">Loves or pursues</a></div>
                                    <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
                                </div>
                            </div>
                        </div>

                        <div class="span3 product-block"><div class="product-inner">
                                <div class="image">
                                    <a href="#"><img alt="Loves or pursues" src="products/image-5.jpg"></a>
                                </div>
                                <div class="wrap-infor">
                                    <div class="name"><a href="#">Loves or pursues</a></div>
                                    <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
                                </div>
                            </div>
                        </div>

                        <div class="span3 product-block"><div class="product-inner">
                                <div class="image">
                                    <a href="#"><img alt="Loves or pursues" src="products/image-6.jpg"></a>
                                </div>
                                <div class="wrap-infor">
                                    <div class="name"><a href="#">Loves or pursues</a></div>
                                    <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
                                </div>
                            </div>
                        </div>

                        <div class="span3 product-block"><div class="product-inner">
                                <div class="image">
                                    <a href="#"><img alt="Loves or pursues" src="products/image-7.jpg"></a>
                                </div>
                                <div class="wrap-infor">
                                    <div class="name"><a href="#">Loves or pursues</a></div>
                                    <div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- repeat -->

            </div>

SteveB · January 11, 2015

Hey mrkahn, I ended up needing the kind of thing you're talking about for a simple image gallery. Each image is a page and this code goes in the PW template file rendering the page the images are parented to.


function albumRows($pages, $perRow){
    $out = '';
    $rowCt = ceil($pages->count() / $perRow);
    for($i = 0; $i < $rowCt; $i++){
        $out .= PHP_EOL.'<div class="block-group album-row">'.PHP_EOL;
        $out .= albumRowItems($pages, $i, $perRow);
        $out .= '</div>'.PHP_EOL;
    }
    return $out;
}
function albumRowItems($pages, $rowIndex, $perRow){
    $out = '';
    $index = $rowIndex * $perRow;
    $row = $pages->slice($index, $perRow);
    $i = 0;
    foreach($row as $page){
        $img = $page->image->size(110,110);
        $out .= '   <div class="b'.++$i.' block">'.PHP_EOL;
        $out .= '       <a href="'.$page->url.'"><img src="'.$img->url.'"></a>'.PHP_EOL;
        $out .= '   </div>'.PHP_EOL;
    }
    return $out;
}

if($page->hasChildren){
    $content .= albumRows($page->children, 5);
}

Along with that I'm using Pocketgrid.css (just great, look it up) with these few additions:

.block > a > img {
    border:1px solid #AAA;    
}
.block > a {
    border:none;    
}
/*five per row*/
.b1, .b2, .b3, .b4, .b5 { width: 20%; }
/*tweak the grid spacing*/
.album-row {
    width:600px;
    line-height:1.5em;
}

Hope that helps.

Sign In

loop and div structure & carousel in PW problem

Recommended Posts

mrkhan

Link to comment

Share on other sites

SteveB

Link to comment

Share on other sites

mrkhan

Link to comment

Share on other sites

SteveB

Link to comment

Share on other sites

SteveB

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content

Grab several certain images from array

navbar Full Width Menu

[SOLVED] Error integrating Slick slider

How many times is a Module's init() function called for autoload modules?

Splitting field content to parts and showing them in divs

Browse

Activity

My Activity Streams

Support

Store

My Details