Jump to content
Sign in to follow this  
mrkhan

loop and div structure & carousel in PW problem

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>  

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By clickpass
      I want to split my output of an image array, see my code here:
      <div class="row"> <?php foreach($page->umf_imgs as $image) {echo "<div class='one-fourth column refs'><img src='$image->url'></div>";} ?> </div> <div class="row"> <?php foreach($page->umf_imgs as $image) {echo "<div class='one-fourth column refs'><img src='$image->url'></div>";} ?> </div> <div class="row"> <?php foreach($page->umf_imgs as $image) {echo "<div class='one-fourth column refs'><img src='$image->url'></div>";} ?> </div> The number of images is 11, but I only want to add four in a row. Is it possible to grab them, e.g. image 1-4, image 5-8, image 9-12?
    • By rareyush
      hi everyone
       
      I am trying get a full width sub-menu on 3rd item in menu or navbar which is coming from a loop.
      i was hoping this can be done by using jquery by targeting 3rd element in navbar but jquery is blocked in some browser by default so is there any other method I can do this
    • By mike62
      I've implemented Slick sliders on WordPress sites many times, but I've never had this error before.
      The site is here.
      The template code I'm using is:
      <link rel="stylesheet" type="text/css" href="/site/templates/scripts/slick/slick.css"/> <script type="text/javascript" src="/site/templates/scripts/slick/slick.js"></script> <?php // if (count($page->home_header_image) > 0): ?> <div class="home-featured-image slick-carousel"> <?php foreach($page->home_header_image as $image): ?> <div class="slide"><img src="<?php echo $image->size(1280,420)->url; ?>"></div> <?php endforeach ?> </div> <?php // endif ?> <script> (function($) { $('.slick-carousel').slick(); })( jQuery ); </script> The JS error I'm getting is:
      TypeError: $.proxy is not a function. (In '$.proxy(_.autoPlay, _)', '$.proxy' is undefined)
      As you can see, I tried wrapping the JS call in noconflict, but that doesn't help. 
      What am I missing?
       
    • By alxndre
      I just happened upon something that I think is curious, and I'm wondering if this is default behavior. So help me because I know nothing.
      While writing a module, i logged something in wire('log') inside the module's init() function. I was surprised to see that the text was being logged multiple times continuously. So I tried to open a small random module and logged something in its init() function as well, and the same thing happened - the text being logged many times.
      My question is, is this supposed to happen? I just want to understand what's going on. My concern is that if I do something huge in the init function, it will get called repeatedly, as with the log, and cause performance issue. Please note that these are both autoload modules. I was expecting them to log at least once when I refresh, but not continuously like what happened.
      Please let me know. Thanks.
    • By MilenKo
      Hello guys. I am almost on the final line of building my second complete website with ProcessWire and got stuck a bit on the recipe nutrition presentation. I am not sure if I would be able to explain it promptly, but will do my best. So I have the code in my HTML template:
      So to fill up the values in the frontend, I am using a simple TextArea field and dropping the following content:
      As far as I needed to split the text field into separate lines and every line into 3 parts (nutrition name, quantity and measure) I used regex code to sort everything through and the results are OK. Now the issue I am facing is that as per the theme, I need to assign class to left or right block and on top of that to close the nutrition-detail div after every right-box div.
      For the class I added $counter and using odd:even managed to assign the class of left-box & right-box. But I am having difficulty to insert the opening div of nutrition-detail on the beginning of every row and the closing div after the second block. Here is the code that sort of works, but is not inserting the divs properly:
      Any suggestions how to go around or some simple function to introduce to make it work? I tried to add another check for odd:even and if the result is odd, to insert the <div class="nutrition-detail"> and close the div if even, but I am still missing something...
×
×
  • Create New...