Greeting dear Chouchies!!!

I am doing the a product display that actually consists of
1. TABS (i have used: Easy Responsive Tabs to Accordian)
2. Owl Carousel

I am displaying the products and their descriptions in the Owl Carousel by the concept of Blogs (as in documentation).

I want to be able to display the products in their respective folders. something as shown in the image below:

tabs.png (138.79 KiB) Viewed 4984 times

The folder1, folder2.... are actually my dynamic folders coming from the the products templates on to the home page of the site. the tests are the products...

My problem is that all the posts are being shown in only one tab (folder) while the others are coming up blank.

My code is:

Code: Select all

<div id="tab-container">        
                  <div id="parentHorizontalTab">
                        <ul class="resp-tabs-list hor_1">
                            <cms:embed 'package_folder.html' />
                        </ul>
                        <div class="resp-tabs-container hor_1">
                        <cms:folders masterpage='packages.php'>
                     <div>
                        <div id="demo">
                           <div class="container">
                              <div class="row">      
                                 <div id="owl-demo<cms:show k_couct />" class="owl-carousel"> 
                                               <cms:pages masterpage='packages.php'>
                                                    <div class="boxes">
                                                        <div class="clear-10"></div>
                                                        <img class="boximg" src="<cms:show package_image/>"/>
                                                        <div class="title">
                                                            <h5 class="packages-title"><cms:show k_page_title/></h5>
                                                        </div>
                                                        <div class="packages-text">
                                                            <p><cms:excerptHTML count='15'><cms:show package_content/></cms:excerptHTML></p>
                                                        </div>
                                                        <div class="title">
                                                            <h5 class="package-price">Rs. 50,000/-<cms:show tab_price/></h5>
                                                        </div>
                                                        <center><a href="<cms:show k_page_link />" class="btn">Details</a></center>
                                                    </div>
                                                </cms:pages>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                        </cms:folders>
                </div>
        </div>
</div>

While the posts should be only displayed in their own tab (folder). Where am I going wrong?

Please comment!!!

Regards,
GenXCoders

[KK]

Hi Aashish,

The following statement being used in your code will list *all* pages of 'packages.php'.

Code: Select all

<cms:pages masterpage='packages.php'>

You need to use the 'folder' parameter of cms:pages to constrain the listing to only pages of the specified folder.

In your case the parent cms:folders tag will provide the name of each folder as a variable named 'k_folder_name' so your code can now become -

Code: Select all

<cms:pages masterpage='packages.php' folder=k_folder_name >

Hope it helps.

@KK SIR,

I did that. For now the only Tab is showing the showing the data. When i shift to another tab there is no other post shown.

what to do???

Regards,
Aashish

[KK]

That is a front-end issue, Aashish.
Please try comparing a working static HTML design with the one generated by Couch and see what is different. I'm sure you'll spot the problem.

@KK Sir,

Can we count the number of dynamic folders created like we can in cms:pages tag...

i.e.

Code: Select all

<cms:pages masterpage='pagename.php' startcount='1'>
...
...
...
</cms:pages>

and then we can call the count using:

Code: Select all

<cms:show k_count />

Can this be pulled with folders (out of the box or by a workaround) that I suppose will solve my problem...

Regards,
Aashish

[KK]

Could you please post the static HTML markup that you are trying to couchify?
Please don't add any Couch tags to it and make sure it is *working*.

Thanks.

Dear KK sir,

I have attached the code which i have to couchify... in this post... Also to know more about which two codesi am combining you can refer:

I am doing the a product display that actually consists of
1. TABS (i have used: Easy Responsive Tabs to Accordian)
2. Owl Carousel

Regards,
Aashish

Attachment(s):
1.

Test.zip

(419.45 KiB) Downloaded 709 times

@KK Sir ad @All Couchies

Anything on the repetition???

I need to increment the div containing id=owl-demo, like owl-demo1, owl-demo2, ... , etc. in order to be able to generate the markup as i need to output.

current html markup generated is:

Code: Select all

<div id="tab-container">        
                  <div id="parentHorizontalTab">
                        <ul class="resp-tabs-list hor_1">
                            
   <li>folder1</li>

   <li>folder2</li>

   <li>folder3</li>

   <li>folder4</li>

   <li>folder5</li>

                        </ul>
                        <div class="resp-tabs-container hor_1">
                            
                                <div>
                                    <div id="demo">
                                        <div class="container">
                                            <div class="row">      
                                                <div id="owl-demo" class="owl-carousel"> 
                                                    
                                                        <div class="boxes">
                                                            <div class="clear-10"></div>
                                                            <img class="boximg" src=""/>
                                                            <div class="title">
                                                                <h5 class="packages-title">test8</h5>
                                                            </div>
                                                            <div class="packages-text">
                                                                <p><p>asd asd asd asd asd as d</p></p>
                                                            </div>
                                                            <div class="title">
                                                                <h5 class="package-price">Rs. 50,000/-</h5>
                                                            </div>
                                                            <center><a href="http://192.168.1.17/StarWoodVacations/packages.php?p=61" class="btn">Details</a></center>
                                                        </div>
                                                    
                                                        <div class="boxes">
                                                            <div class="clear-10"></div>
                                                            <img class="boximg" src=""/>
                                                            <div class="title">
                                                                <h5 class="packages-title">test7</h5>
                                                            </div>
                                                            <div class="packages-text">
                                                                <p><p>asd asdasd asd sad asd sad as</p></p>
                                                            </div>
                                                            <div class="title">
                                                                <h5 class="package-price">Rs. 50,000/-</h5>
                                                            </div>
                                                            <center><a href="http://192.168.1.17/StarWoodVacations/packages.php?p=60" class="btn">Details</a></center>
                                                        </div>
                                                    
                                                        <div class="boxes">
                                                            <div class="clear-10"></div>
                                                            <img class="boximg" src=""/>
                                                            <div class="title">
                                                                <h5 class="packages-title">test6</h5>
                                                            </div>
                                                            <div class="packages-text">
                                                                <p><p>asdas dasdasdasdasdasdasdas d asd asd asd</p></p>
                                                            </div>
                                                            <div class="title">
                                                                <h5 class="package-price">Rs. 50,000/-</h5>
                                                            </div>
                                                            <center><a href="http://192.168.1.17/StarWoodVacations/packages.php?p=59" class="btn">Details</a></center>
                                                        </div>
                                                    
                                                        <div class="boxes">
                                                            <div class="clear-10"></div>
                                                            <img class="boximg" src=""/>
                                                            <div class="title">
                                                                <h5 class="packages-title">test5</h5>
                                                            </div>
                                                            <div class="packages-text">
                                                                <p><p>ads ad as asd asd asd asd as da</p></p>
                                                            </div>
                                                            <div class="title">
                                                                <h5 class="package-price">Rs. 50,000/-</h5>
                                                            </div>
                                                            <center><a href="http://192.168.1.17/StarWoodVacations/packages.php?p=58" class="btn">Details</a></center>
                                                        </div>
                                                    
                                                        <div class="boxes">
                                                            <div class="clear-10"></div>
                                                            <img class="boximg" src="http://192.168.1.17/StarWoodVacations/couch/uploads/image/blog-img/slide2.jpg"/>
                                                            <div class="title">
                                                                <h5 class="packages-title">Book Holidays</h5>
                                                            </div>
                                                            <div class="packages-text">
                                                                <p><p>Holiday Bookings have never been this Starwood week can either...</p>

<ul>
   <li>Login to our website and</li>
   <li>Fax or...</li></ul></p>
                                                            </div>
                                                            <div class="title">
                                                                <h5 class="package-price">Rs. 50,000/-</h5>
                                                            </div>
                                                            <center><a href="http://192.168.1.17/StarWoodVacations/packages.php?p=49" class="btn">Details</a></center>
                                                        </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            
                                <div>
                                    <div id="demo">
                                        <div class="container">
                                            <div class="row">      
                                                <div id="owl-demo" class="owl-carousel"> 
                                                    
                                                        <div class="boxes">
                                                            <div class="clear-10"></div>
                                                            <img class="boximg" src=""/>
                                                            <div class="title">
                                                                <h5 class="packages-title">test4</h5>
                                                            </div>
                                                            <div class="packages-text">
                                                                <p><p>fdgfhgjhkjhllkjljhfgfgdfdfdfsfds</p></p>
                                                            </div>
                                                            <div class="title">
                                                                <h5 class="package-price">Rs. 50,000/-</h5>
                                                            </div>
                                                            <center><a href="http://192.168.1.17/StarWoodVacations/packages.php?p=65" class="btn">Details</a></center>
                                                        </div>
                                                    
                                                        <div class="boxes">
                                                            <div class="clear-10"></div>
                                                            <img class="boximg" src=""/>
                                                            <div class="title">
                                                                <h5 class="packages-title">test3</h5>
                                                            </div>
                                                            <div class="packages-text">
                                                                <p><p>hgjhfgjhgkuuoj</p></p>
                                                            </div>
                                                            <div class="title">
                                                                <h5 class="package-price">Rs. 50,000/-</h5>
                                                            </div>
                                                            <center><a href="http://192.168.1.17/StarWoodVacations/packages.php?p=64" class="btn">Details</a></center>
                                                        </div>
                                                    
                                                        <div class="boxes">
                                                            <div class="clear-10"></div>
                                                            <img class="boximg" src=""/>
                                                            <div class="title">
                                                                <h5 class="packages-title">test2</h5>
                                                            </div>
                                                            <div class="packages-text">
                                                                <p><p>gfghgfhjgkljkllghfgfgdfdfgfhgh</p></p>
                                                            </div>
                                                            <div class="title">
                                                                <h5 class="package-price">Rs. 50,000/-</h5>
                                                            </div>
                                                            <center><a href="http://192.168.1.17/StarWoodVacations/packages.php?p=63" class="btn">Details</a></center>
                                                        </div>
                                                    
                                                        <div class="boxes">
                                                            <div class="clear-10"></div>
                                                            <img class="boximg" src=""/>
                                                            <div class="title">
                                                                <h5 class="packages-title">test1</h5>
                                                            </div>
                                                            <div class="packages-text">
                                                                <p><p>dfghdgfjhjhjgggkjkkkkkkkkkkkkkk</p></p>
                                                            </div>
                                                            <div class="title">
                                                                <h5 class="package-price">Rs. 50,000/-</h5>
                                                            </div>
                                                            <center><a href="http://192.168.1.17/StarWoodVacations/packages.php?p=62" class="btn">Details</a></center>
                                                        </div>
                                                    
                                                        <div class="boxes">
                                                            <div class="clear-10"></div>
                                                            <img class="boximg" src="http://192.168.1.17/StarWoodVacations/couch/uploads/image/blog-img/slide1.jpg"/>
                                                            <div class="title">
                                                                <h5 class="packages-title">Major Benefits of Starwood Week</h5>
                                                            </div>
                                                            <div class="packages-text">
                                                                <p><p>Starwood week empowers you to holiday&nbsp; as you please. You decide how, where and when...</p></p>
                                                            </div>
                                                            <div class="title">
                                                                <h5 class="package-price">Rs. 50,000/-</h5>
                                                            </div>
                                                            <center><a href="http://192.168.1.17/StarWoodVacations/packages.php?p=50" class="btn">Details</a></center>
                                                        </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
</div>
</div>
              

while i need to generate: the owl-demo1, owl-demo2....... in the following line:

Code: Select all

<div id="owl-demo" class="owl-carousel"> 

Regards,
Aashish

[KK]

Hi,

I'll try to explain the solution in generic terms so that it could help others in applying the same to other tab/carousel scripts.

Let us tackle the tabs part first.
According to the tab's docs (http://webthemez.com/demo/easy-responsi ... Index.html) following is the required markup -

Code: Select all

<div id="parentHorizontalTab">          
    <ul class="resp-tabs-list">
        <li> .... </li>
        <li> .... </li>
        <li> .... </li>
    </ul> 

    <div class="resp-tabs-container">                                                        
        <div> ....... </div>
        <div> ....... </div>
        <div> ....... </div>
    </div>
</div>  

As should be expected, there are two connected parts to the markup - the 'tabs' on top (UL/LI) and the equal number of containers below (DIV).

Your static version of the markup shows two fixed tabs (with two corresponding container divs)-

Code: Select all

<div id="parentHorizontalTab">
    <ul class="resp-tabs-list hor_1">
        <li>Folder 1</li>
        <li>Folder 2</li>
    </ul>
    
    <div class="resp-tabs-container hor_1">
        <div>
            <div id="demo">
                <div class="container">
                    <div class="row">                    
                        <div id="owl-demo1" class="owl-carousel">
                            <div class="item1"><img src="images/ban_img3.jpg" alt="Owl Image"></div>
                            <div class="item1"><img src="images/ban_img2.jpg" alt="Owl Image"></div>
                            <div class="item1"><img src="images/ban_img3.jpg" alt="Owl Image"></div>
                            <div class="item1"><img src="images/ban_img2.jpg" alt="Owl Image"></div>
                            <div class="item1"><img src="images/ban_img3.jpg" alt="Owl Image"></div>
                            <div class="item1"><img src="images/ban_img2.jpg" alt="Owl Image"></div>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
        
        <div>
            <div id="demo">
                <div class="container">
                    <div class="row">                    
                        <div id="owl-demo2" class="owl-carousel">
                            <div class="item2"><img src="images/ban_img3.jpg" alt="Owl Image"></div>
                            <div class="item2"><img src="images/ban_img2.jpg" alt="Owl Image"></div>
                            <div class="item2"><img src="images/ban_img3.jpg" alt="Owl Image"></div>
                            <div class="item2"><img src="images/ban_img2.jpg" alt="Owl Image"></div>
                            <div class="item2"><img src="images/ban_img3.jpg" alt="Owl Image"></div>
                            <div class="item2"><img src="images/ban_img2.jpg" alt="Owl Image"></div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#owl-demo1").owlCarousel({
            autoPlay: 3000,
            items : 4,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3]
        });
        $("#owl-demo2").owlCarousel({
            autoPlay: 3000,
            items : 4,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3]
        });
    });
</script>

Each container div then shows a carousel each - that requires the fixed JS code that handles two explicitly named elements (#owl-demo1, #owl-demo2).

Our requirement now is to make the whole thing dynamic. You wish to use the 'folders' to create the 'tabs' and then use the 'pages' within each folder to create the 'carousel'.

Following the standard Couch technique, we isolate one single instances of all elements that will be dynamically repeated. we end up with this -

Code: Select all

<div id="parentHorizontalTab">
    <ul class="resp-tabs-list hor_1">
        <li>Folder 1</li>
    </ul>
    
    <div class="resp-tabs-container hor_1">
        <div>
            <div id="demo">
                <div class="container">
                    <div class="row">                    
                        <div id="owl-demo1" class="owl-carousel">
                            <div class="item1"><img src="images/ban_img3.jpg" alt="Owl Image"></div>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#owl-demo1").owlCarousel({
            autoPlay: 3000,
            items : 4,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3]
        });
    });
</script>

As you can see, we have isolated a single 'tab', a single 'container' and a single 'carousel item' (and also a single JS code block).

To make the isolated blocks dynamic, we add the required Couch tags as follows -

Code: Select all

<div id="parentHorizontalTab">
    <ul class="resp-tabs-list hor_1">
    <cms:folders depth='1'>
        <li><cms:show k_folder_title /></li>
    </cms:folders>    
    </ul>
    
    <div class="resp-tabs-container hor_1">
    <cms:folders depth='1'>
        <div>
            <div id="demo">
                <div class="container">
                    <div class="row">                    
                        <div id="owl-demo<cms:show k_folder_id />" class="owl-carousel">
                        <cms:pages folder=k_folder_name >
                            <div class="item1"><img src="<cms:show whatever_image_name />" alt="<cms:show k_page_title />"></div>
                        </cms:pages>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
    </cms:folders>      
    </div>
</div>  

<script>
    $(document).ready(function() {
    <cms:folders depth='1'>
        $("#owl-demo<cms:show k_folder_id />").owlCarousel({
            autoPlay: 3000,
            items : 4,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3]
        });
    </cms:folders>     
    });
</script>

And that was our final code.
Please notice -
1. We used cms:folders *thrice* - for the 'tabs', for the 'containers' and finally for the JS code for each container.
2. To give each tab-container a unique ID (that ties it up with the JS code) we used k_folder_id variable.

Hope this helps.

@KK Sir,
Thanks a lot. It worked just as we intended it to. I was TOTALLY unaware of the use of depth and k_folder_id and hence could not implement the function.

My concern was,that as we cant use startcount in the <cms:pages>...</cms:pages> I was unable to do that with folders... But thanks to you now I am aware of the method of implementing the code for counting (kind of) the folders and displaying their count (kind of).

I would also want to mention that we will have to use the masterpage attribute of the <cms:folders>...</cms:folders> and <cms:pages>...</cms:pages> tags in the code. In order to be able to bringing data from some other Couch template. The code for doing that is:

Code: Select all

<div id="parentHorizontalTab">
    <ul class="resp-tabs-list hor_1">
    <cms:folders masterpage='packages.php' depth='1'>  <!-- Added the [b]masterpage[/b] Attribute -->
        <li><cms:show k_folder_title /></li>
    </cms:folders>   
    </ul>
   
    <div class="resp-tabs-container hor_1">
    <cms:folders masterpage='packages.php' depth='1'> <!-- Added the [b]masterpage[/b] Attribute -->
        <div>
            <div id="demo">
                <div class="container">
                    <div class="row">                   
                        <div id="owl-demo<cms:show k_folder_id />" class="owl-carousel">
                        <cms:pages masterpage='packages.php' folder=k_folder_name > <!-- Added the [b]masterpage[/b] Attribute -->
                            <div class="item1"><img src="<cms:show whatever_image_name />" alt="<cms:show k_page_title />"></div>
                        </cms:pages>
                        </div>   
                    </div>
                </div>
            </div>
        </div>
    </cms:folders>     
    </div>
</div> 

<script>
    $(document).ready(function() {
    <cms:folders masterpage='packages.php' depth='1'>
        $("#owl-demo<cms:show k_folder_id />").owlCarousel({
            autoPlay: 3000,
            items : 4,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3]
        });
    </cms:folders>     
    });
</script>

Once again thanks a ton sir. I will post this Tab and content display method to GitHub, if you dont mind.

Regards,
Aashish