Forum for discussing general topics related to Couch.
10 posts Page 1 of 1
Is there a way where a div can have different code if there is no content for another div, for example the current code is below

Code: Select all
<div class="col-md-8 col-xs-12 col-sm-12"> 
          <!-- Product Tabs-->
          <div class="category-product">
            <div class="navbar nav-menu">
              <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a data-toggle="tab" href="#tab-1">New Arrivals</a></li>
                </ul>
              </div>
              <!-- /.navbar-collapse -->
             
            </div>
            <div class="tab-container">
              <!-- tab product -->
              <div class="tab-panel active" id="tab-1">
                <div class="category-products">
                  <ul class="products-grid">
                      <cms:pages masterpage='product.php' limit='3'>
                    <li class="item col-lg-4 col-md-4 col-sm-6 col-xs-6">
                      <div class="item-inner">
                        <div class="item-img">
                          <div class="item-img-info"><a class="product-image" href="<cms:show k_page_link/>"> <img class="img-responsive" alt="<cms:show product_name/>" src="<cms:show product_main_image/>"></a>
                            <div class="action"><a href="<cms:show k_page_link/>" title="View Product"><i class="fa fa-search"></i></a></div>
                          </div>
                        </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"><a href="<cms:show k_page_link/>"><cms:show product_name/></a></div>
                            <div class="item-content">
                              <div class="item-price">
                                <div class="price-box"><span class="regular-price"><span class="price"><cms:show product_price/></span></span></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    </cms:pages>
                  </ul>
                </div>
              </div>
              <!-- tab product -->
            </div>
          </div>
        </div>

<div class="col-md-4 col-sm-12 jtv-features-top"> <!-- our features -->
          <div class="our-features-box">
              <cms:show_repeatable 'sideboxes'>
            <cms:if k_count=='1'>
            <div class="feature-box bg-green"> <i class="pe-7s-piggy"></i>
              <div class="content">
                <h3><cms:show box_heading/></h3>
                <p><cms:show box_caption/></p>
              </div>
            </div>
               <cms:else />
       
            <cms:if k_count=='2'>
            <div class="feature-box bg-pamaranch"> <i class="pe-7s-timer"></i>
              <div class="content">
                <h3><cms:show box_heading/></h3>
                <p><cms:show box_caption/></p>
              </div>
            </div>
               <cms:else />
               
                <cms:if k_count=='3'>
            <div class="feature-box bg-red"> <i class="pe-7s-headphones"></i>
              <div class="content">
                <h3><cms:show box_heading/></h3>
                <p><cms:show box_caption/></p>
              </div>
            </div>
               </cms:if>
            </cms:if>
                </cms:if>
        </cms:show_repeatable>
          </div>
        </div>


I'm thinking if there is no content in the second div
Code: Select all
<div class="col-md-4 col-sm-12 jtv-features-top">
then to make the first div as
Code: Select all
<div class="col-md-12 col-xs-12 col-sm-12">


I thought I would need to use if and else couchcms tags but not 100% sure
You would need to use cms:capture tag in the following manner - cms:capture your repeatable "Our features" section above and before the very first div - simply because we are not limited by where we generate markup, because it can be stored in a variable for later use.

In some not so rare cases, I generated and captured parts of markup in a variable even before the opening <html>, simply because it is perfectly valid approach if need be. So with that done, I expect you can have some global flag (another variable) to be set to "1" if there is content inside that cms:repeatable block. That consists of the solution.

Finally if there is content - tweak the class in you very first div (wrapper of "Product tabs"). Ifs and Elses will work, as you have already guessed. You can output captured markup with content where "Our features" are meant to be situated given your example.
Thank you for the reply, not 100% sure on it as not used cms capture tag before, I found this link viewtopic.php?f=4&t=12497 and see KK's example of the following, would it be something like that for the code? Not sure how to do it to be honest as looking at KK's code has confused me and bit unsure how I would integrate that into my code, think the bit I would be confused on where to put the code is the following in my repeatable code

Code: Select all
<cms:if "<cms:strlen inclusion />">
     <cms:show inclusion />
          <cms:set my_has_data='1' 'global' />
</cms:if>

<cms:if my_has_data>
    <cms:show my_buffer />
</cms:if>
I'm trying to have a go at this cms capture code to see if can do what I need but struggling abit with it, so far I have the following

Code: Select all
<cms:capture into='content_output' >
              <div class="col-md-4 col-sm-12 jtv-features-top"> <!-- our features -->
          <div class="our-features-box">
              <cms:show_repeatable 'sideboxes'>
            <cms:if k_count=='1'>
            <div class="feature-box bg-green"> <i class="pe-7s-piggy"></i>
              <div class="content">
                  <cms:if content_info_one>
                <h3><cms:show box_heading/></h3>
                <p><cms:show box_caption/></p>
                      <cms:set has_content='1' 'global' />
                  </cms:if>
              </div>
            </div>
               <cms:else />
       
            <cms:if k_count=='2'>
            <div class="feature-box bg-pamaranch"> <i class="pe-7s-timer"></i>
              <div class="content">
                  <cms:if content_info_two>
                <h3><cms:show box_heading/></h3>
                <p><cms:show box_caption/></p>
                      <cms:set has_content='1' 'global' />
                  </cms:if>
              </div>
            </div>
               <cms:else />
               
                <cms:if k_count=='3'>
            <div class="feature-box bg-red"> <i class="pe-7s-headphones"></i>
              <div class="content">
                  <cms:if content_info_three>
                <h3><cms:show box_heading/></h3>
                <p><cms:show box_caption/></p>
                      <cms:set has_content='1' 'global' />
                  </cms:if>
              </div>
            </div>
               </cms:if>
            </cms:if>
                </cms:if>
        </cms:show_repeatable>
          </div>
        </div>
          </cms:capture>
         
          <!-- display if all conditions met -->
          <cms:if has_content >
              <div class="col-md-4 col-sm-12 jtv-features-top"> <!-- our features -->
              <cms:show content_output />
              </div>
              <cms:else />
           IN HERE I GUESS I NEED THE DIV CLASS IF THERE IS NO CONTENT FOR THE REPEATBLE SIDEBOXES SO WOULD BE DIV CLASS col-md-12 col-xs-12 col-sm-12 FOR THE NEW ARRIVALS DIV
          </cms:if>


I can't seem to work it out so far
I might of worked it out but not sure, I have updated the code to the following

Code: Select all
<cms:capture into='content_output' >
              <div class="col-md-4 col-sm-12 jtv-features-top"> <!-- our features -->
          <div class="our-features-box">
              <cms:show_repeatable 'sideboxes'>
            <cms:if k_count=='1'>
            <div class="feature-box bg-green"> <i class="pe-7s-piggy"></i>
              <div class="content">
                  <cms:if content_info_one>
                <h3><cms:show box_heading/></h3>
                <p><cms:show box_caption/></p>
                      <cms:set has_content='1' 'global' />
                  </cms:if>
              </div>
            </div>
               <cms:else />
       
            <cms:if k_count=='2'>
            <div class="feature-box bg-pamaranch"> <i class="pe-7s-timer"></i>
              <div class="content">
                  <cms:if content_info_two>
                <h3><cms:show box_heading/></h3>
                <p><cms:show box_caption/></p>
                      <cms:set has_content='1' 'global' />
                  </cms:if>
              </div>
            </div>
               <cms:else />
               
                <cms:if k_count=='3'>
            <div class="feature-box bg-red"> <i class="pe-7s-headphones"></i>
              <div class="content">
                  <cms:if content_info_three>
                <h3><cms:show box_heading/></h3>
                <p><cms:show box_caption/></p>
                      <cms:set has_content='1' 'global' />
                  </cms:if>
              </div>
            </div>
               </cms:if>
            </cms:if>
                </cms:if>
        </cms:show_repeatable>
          </div>
        </div>
          </cms:capture>

<!-- display if all conditions met -->
          <cms:if has_content >
              <div class="col-md-4 col-sm-12 jtv-features-top"> <!-- our features -->
              <cms:show content_output />
              </div>
              <cms:else />
              <div class="col-md-12 col-xs-12 col-sm-12">
          <!-- Product Tabs-->
          <div class="category-product">
            <div class="navbar nav-menu">
              <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a data-toggle="tab" href="#tab-1">New Arrivals</a></li>
                </ul>
              </div>
              <!-- /.navbar-collapse -->
             
            </div>
            <div class="tab-container">
              <!-- tab product -->
              <div class="tab-panel active" id="tab-1">
                <div class="category-products">
                  <ul class="products-grid">
                      <cms:pages masterpage='product.php' limit='3'>
                    <li class="item col-lg-4 col-md-4 col-sm-6 col-xs-6">
                      <div class="item-inner">
                        <div class="item-img">
                          <div class="item-img-info"><a class="product-image" href="<cms:show k_page_link/>"> <img class="img-responsive" alt="<cms:show product_name/>" src="<cms:show product_main_image/>"></a>
                            <div class="action"><a href="<cms:show k_page_link/>" title="View Product"><i class="fa fa-search"></i></a></div>
                          </div>
                        </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"><a href="<cms:show k_page_link/>"><cms:show product_name/></a></div>
                            <div class="item-content">
                              <div class="item-price">
                                <div class="price-box"><span class="regular-price"><span class="price"><cms:show product_price/></span></span></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    </cms:pages>
                  </ul>
                </div>
              </div>
              <!-- tab product -->
            </div>
          </div>
        </div>
          </cms:if>


I have not uploaded it yet onto the site as it's a live site but does it look kind of right or correct?
Just uploaded it but is not working correctly as it's made the div class col-md-12 col-xs-12 col-sm-12 even if there is content in the sideboxes

Thought I had sussed it then haha, can anyone look over the code please and see where I have gone wrong with it please
Think I have just sorted it with the following code, it does seem to be working now

Code: Select all
<cms:capture into='content_output' >
              <div class="col-md-4 col-sm-12 jtv-features-top"> <!-- our features -->
          <div class="our-features-box">
              <cms:show_repeatable 'sideboxes'>
            <cms:if k_count=='1'>
            <div class="feature-box bg-green"> <i class="pe-7s-piggy"></i>
              <div class="content">
                  <cms:if "<cms:strlen box_heading />">
                <h3><cms:show box_heading/></h3>
                <p><cms:show box_caption/></p>
                      <cms:set has_content='1' 'global' />
                  </cms:if>
              </div>
            </div>
               <cms:else />
       
            <cms:if k_count=='2'>
            <div class="feature-box bg-pamaranch"> <i class="pe-7s-timer"></i>
              <div class="content">
                  <cms:if "<cms:strlen box_heading />">
                <h3><cms:show box_heading/></h3>
                <p><cms:show box_caption/></p>
                      <cms:set has_content='1' 'global' />
                  </cms:if>
              </div>
            </div>
               <cms:else />
               
                <cms:if k_count=='3'>
            <div class="feature-box bg-red"> <i class="pe-7s-headphones"></i>
              <div class="content">
                  <cms:if "<cms:strlen box_heading />">
                <h3><cms:show box_heading/></h3>
                <p><cms:show box_caption/></p>
                      <cms:set has_content='1' 'global' />
                  </cms:if>
              </div>
            </div>
               </cms:if>
            </cms:if>
                </cms:if>
        </cms:show_repeatable>
          </div>
        </div>
          </cms:capture>

<cms:if has_content >
              <!-- display if all conditions met -->
              <div class="col-md-8 col-xs-12 col-sm-12">
          <!-- Product Tabs-->
          <div class="category-product">
            <div class="navbar nav-menu">
              <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a data-toggle="tab" href="#tab-1">New Arrivals</a></li>
                </ul>
              </div>
              <!-- /.navbar-collapse -->
             
            </div>
            <div class="tab-container">
              <!-- tab product -->
              <div class="tab-panel active" id="tab-1">
                <div class="category-products">
                  <ul class="products-grid">
                      <cms:pages masterpage='product.php' limit='3'>
                    <li class="item col-lg-4 col-md-4 col-sm-6 col-xs-6">
                      <div class="item-inner">
                        <div class="item-img">
                          <div class="item-img-info"><a class="product-image" href="<cms:show k_page_link/>"> <img class="img-responsive" alt="<cms:show product_name/>" src="<cms:show product_main_image/>"></a>
                            <div class="action"><a href="<cms:show k_page_link/>" title="View Product"><i class="fa fa-search"></i></a></div>
                          </div>
                        </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"><a href="<cms:show k_page_link/>"><cms:show product_name/></a></div>
                            <div class="item-content">
                              <div class="item-price">
                                <div class="price-box"><span class="regular-price"><span class="price"><cms:show product_price/></span></span></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    </cms:pages>
                  </ul>
                </div>
              </div>
              <!-- tab product -->
            </div>
          </div>
        </div>
              <cms:show content_output />
              <cms:else />
              <div class="col-md-12 col-xs-12 col-sm-12">
          <!-- Product Tabs-->
          <div class="category-product">
            <div class="navbar nav-menu">
              <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a data-toggle="tab" href="#tab-1">New Arrivals</a></li>
                </ul>
              </div>
              <!-- /.navbar-collapse -->
             
            </div>
            <div class="tab-container">
              <!-- tab product -->
              <div class="tab-panel active" id="tab-1">
                <div class="category-products">
                  <ul class="products-grid">
                      <cms:pages masterpage='product.php' limit='3'>
                    <li class="item col-lg-4 col-md-4 col-sm-6 col-xs-6">
                      <div class="item-inner">
                        <div class="item-img">
                          <div class="item-img-info"><a class="product-image" href="<cms:show k_page_link/>"> <img class="img-responsive" alt="<cms:show product_name/>" src="<cms:show product_main_image/>"></a>
                            <div class="action"><a href="<cms:show k_page_link/>" title="View Product"><i class="fa fa-search"></i></a></div>
                          </div>
                        </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"><a href="<cms:show k_page_link/>"><cms:show product_name/></a></div>
                            <div class="item-content">
                              <div class="item-price">
                                <div class="price-box"><span class="regular-price"><span class="price"><cms:show product_price/></span></span></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    </cms:pages>
                  </ul>
                </div>
              </div>
              <!-- tab product -->
            </div>
          </div>
        </div>
          </cms:if>
Congratulations! Your last posting seems correct. I noticed there is a markup presentation duplication which is cluttering the logical structure, making it less manageable. Although everything is working fine as is, let me suggest another optimisation which inevitably (if employed where appropriate) helps towards productivity -

Code: Select all
<cms:capture into='content_our_features' >
  <!-- our features -->
  ...
</cms:capture>

<cms:capture into='content_product_tabs' >
  <!-- product tabs -->
  <div class="category-product">
     ...
   </div>
</cms:capture>



<cms:if has_content >

      <div class="col-md-8 col-xs-12 col-sm-12">
        <cms:show content_product_tabs />
      </div>

      <cms:show content_our_features />

<cms:else />

      <div class="col-md-12 col-xs-12 col-sm-12">
        <cms:show content_product_tabs />
      </div>

</cms:if>


What this does is simple yet effective philosophy - separate logic from content and have a better grasp of what's going on by setting variables with content outside of logic coding and keep logic organized and minimal.
Thank you trendoman, that does seem a better way and more manageable and optimised

I'll try that way shortly and let you know how I get on
I tried your better optimised code trendoman and works perfect

Thank you so much
10 posts Page 1 of 1
cron