Forum for discussing general topics related to Couch.
6 posts Page 1 of 1
I am trying to add pagination to code with masterpage, the non couchcms HTML is below

Code: Select all
<div class="category-products">
<ol class="products-list" id="products-list">
                <li class="item">
                  <div class="product-image"><a href="product.php"><img class="img-responsive" class="small-image" src="images/products/img01.jpg" alt="Product Title Here"></a></div>
                  <div class="product-shop">
                    <h2 class="product-name"><a href="product.php">Product Name</a></h2>
                    <div class="desc std">
                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer... <a class="link-learn" title="" href="product.php">Read More</a></p>
                    </div>
                    <div class="price-box"> <span class="regular-price"> <span class="price">£99.99</span></span></div>
                    <div class="actions">
                        <span class="add-to-links">
                            <a class="button btn-cart" href="product.php"><span>View Product</span></a>
                        </span>
                    </div>
                  </div>
                </li>
                <li class="item">
                  <div class="product-image"><a href="product.php"><img class="img-responsive" class="small-image" src="images/products/img02.jpg" alt="Product Title Here"></a></div>
                  <div class="product-shop">
                    <h2 class="product-name"><a href="product.php">Product Name</a></h2>
                    <div class="desc std">
                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer... <a class="link-learn" title="" href="product.php">Read More</a></p>
                    </div>
                    <div class="price-box"> <span class="regular-price"> <span class="price">£99.99</span></span></div>
                    <div class="actions">
                        <span class="add-to-links">
                            <a class="button btn-cart" href="product.php"><span>View Product</span></a>
                        </span>
                    </div>
                  </div>
                </li>
</ol>
</div>

<div class="toolbar">
              <div class="row">
                <div class="col-sm-6 text-left">
                  <ul class="pagination">
                      <li class="active"><span>1</span></li>
                      <li><a href="#">2</a></li>
                      <li><a href="#">3</a></li>
                      <li><a href="#">4</a></li>
                      <li><a href="#">5</a></li>
                  </ul>
                </div>
              </div>
            </div>


I have added couchcms tags into the code and the only that is not working is the pagination links at the bottom, it shows 1 on the page while I am testing it to make sure it works ok but will have 10 or 15 in total on each page

Code: Select all
<div class="category-products">
              <ol class="products-list" id="products-list">
                  <cms:pages masterpage='product.php' limit='1' paginate='1'>
                <li class="item">
                  <div class="product-image"><a href="<cms:show k_page_link/>"><img class="img-responsive" class="small-image" src="<cms:show product_main_image/>" alt="<cms:show product_name/>"></a></div>
                  <div class="product-shop">
                    <h2 class="product-name"><a href="<cms:show k_page_link/>"><cms:show product_name/></a></h2>
                    <div class="desc std">
                        <cms:show product_short_description/>
                    </div>
                    <div class="price-box"> <span class="regular-price"> <span class="price"><cms:show product_price/></span></span></div>
                    <div class="actions">
                        <span class="add-to-links">
                            <a class="button btn-cart" href="<cms:show k_page_link/>"><span>View Product</span></a>
                        </span>
                    </div>
                  </div>
                </li>
                </cms:pages>
              </ol>
            </div>
            <div class="toolbar">
              <div class="row">
                <div class="col-sm-6 text-left">
                    <cms:paginator adjacents='1'>
                       
                        <cms:if k_crumb_type='page' >
                            <cms:if k_crumb_current>
                                <ul class="pagination">
                                    <li class="active"><span><cms:show k_crumb_text /></span></li>
                                    <cms:else />
                                    <ul class="pagination">
                                    <li><a href="<cms:show k_crumb_link />"><cms:show k_crumb_text /></a></li>
                                    </cms:if>
                                </cms:if>
                       
                    </cms:paginator>


Not sure where I have gone wrong, can anyone help please

Thank you in advance
<cms:paginator> needs to be nested within the <cms:pages> block for it to work.
Hope this info helps.
Hi KK

Thank you for the reply and help, think I have now sorted it, the updated code is below. It now shows the pagination but only appears if I set the limit to 1 but if I set the limit to 2 for example the pagination disappears, is that how the pagination is designed to work so that the pagination does not show all the time?

Code: Select all
<cms:pages masterpage='product.php' limit='2' paginate='1'>
            <div class="category-products">
              <ol class="products-list" id="products-list">
                <li class="item">
                  <div class="product-image"><a href="<cms:show k_page_link/>"><img class="img-responsive" class="small-image" src="<cms:show product_main_image/>" alt="<cms:show product_name/>"></a></div>
                  <div class="product-shop">
                    <h2 class="product-name"><a href="<cms:show k_page_link/>"><cms:show product_name/></a></h2>
                    <div class="desc std">
                        <cms:show product_short_description/>
                    </div>
                    <div class="price-box"> <span class="regular-price"> <span class="price"><cms:show product_price/></span></span></div>
                    <div class="actions">
                        <span class="add-to-links">
                            <a class="button btn-cart" href="<cms:show k_page_link/>"><span>View Product</span></a>
                        </span>
                    </div>
                  </div>
                </li>
               
              </ol>
            </div>
                 
                  <div class="toolbar">
              <div class="row">
                <div class="col-sm-6 text-left">
                    <cms:paginator adjacents='1'>
                       
                        <cms:if k_crumb_type='page' >
                            <cms:if k_crumb_current>
                                <ul class="pagination">
                                    <li class="active"><span><cms:show k_crumb_text /></span></li>
                                    <cms:else />
                                    <ul class="pagination">
                                    <li><a href="<cms:show k_crumb_link />"><cms:show k_crumb_text /></a></li>
                                    </cms:if>
                                </cms:if>
                       
                    </cms:paginator>

                </div>
                   
              </div>
            </div>
                 
                  </cms:pages>
Update: I have amended the code but the pagination still don't show if limit is set to 2 for example but if I set it to 1 then the pagination displays so am guessing that is how the pagination is designed to work as if I set the limit to 1 then the pagination shows so can go to page 2 etc. but if set the limit is set to 2 then the pagination don't show as guessing it is because it's all on the one page so is no need for the pagination to be displayed as is no need for page 2 etc.

Code: Select all
<div class="category-products">
              <ol class="products-list" id="products-list">
                  <cms:pages masterpage='product.php' limit='2' paginate='1'>
                <li class="item">
                  <div class="product-image"><a href="<cms:show k_page_link/>"><img class="img-responsive" class="small-image" src="<cms:show product_main_image/>" alt="<cms:show product_name/>"></a></div>
                  <div class="product-shop">
                    <h2 class="product-name"><a href="<cms:show k_page_link/>"><cms:show product_name/></a></h2>
                    <div class="desc std">
                        <cms:show product_short_description/>
                    </div>
                    <div class="price-box"> <span class="regular-price"> <span class="price"><cms:show product_price/></span></span></div>
                    <div class="actions">
                        <span class="add-to-links">
                            <a class="button btn-cart" href="<cms:show k_page_link/>"><span>View Product</span></a>
                        </span>
                    </div>
                  </div>
                </li>
                      </cms:pages>
                </ol>
                </div>

<div class="toolbar">
              <div class="row">
                <div class="col-sm-6 text-left">
                    <cms:pages masterpage='product.php' limit='2' paginate='1'>
                       
                        <ul class="pagination">
                    <cms:paginator adjacents='1'>
                        <cms:if k_crumb_type='page' >
                            <cms:if k_crumb_current>
                                    <li class="active"><span><cms:show k_crumb_text /></span></li>
                                    <cms:else />
                                    <li><a href="<cms:show k_crumb_link />"><cms:show k_crumb_text /></a></li>
                                    </cms:if>
                                </cms:if>
                       
                    </cms:paginator>
                            </cms:pages>
                </div>
                   
              </div>
            </div>

It depends on the total number of pages in the listing - if all of them can be shown on a single page, there is no need to show the paginator and it gets hidden.
KK wrote: It depends on the total number of pages in the listing - if all of them can be shown on a single page, there is no need to show the paginator and it gets hidden.


Thank you KK, I thought that was the case when was testing as when set a limit of 1 the pagination would show but when set a limit of 2 (currently is a total of 2) the pagination is hidden

Thank you for confirming KK, appreciate it
6 posts Page 1 of 1
cron