Announcement

Collapse
No announcement yet.

PR8 Update 4 CSSUI Template Changes: Pagination, Category Sorting, Items Per Page

Collapse
This topic is closed.
X
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    PR8 Update 4 CSSUI Template Changes: Pagination, Category Sorting, Items Per Page

    Requirements for the following code changes: CSSUI Store, PR8 Update 4

    Notes BEFORE you begin:
    1. You will need to turn on Sorting Options, Page Numbers, and the Items Per Page Filter on the following pages in order for these functions to work: CTGY, PROD, PLST, SRCH. The changes will be made to the Category Product List Layout, Related Product List Layout, Product List Layout, and Search Results Layout tabs of their respective pages.
    2. THIS POST WILL NOT FIT INTO A SINGLE POST, SO IT WILL BE SPREAD ACROSS 3 POSTS, THE MAIN POST AND 2 COMMENTS. BE SURE TO READ ALL THREE POSTS
    3. These changes apply to the default templates. Most of you will have custom sites. This means you may have to do some digging to find where in your template the changes should go.
    STEP 1:
    Insert the following new code immediately following the <div class="expanded"> tag ( Or <div class="line-item"> if you are in line-item mode ) in the Category Product List Layout, Related Product List Layout, Product List Layout, and Search Results Layout tabs on pages CTGY, PROD, PLST, and SRCH. You should NOT be replacing any code, just inserting. It should look like this:

    Code:
    <div class="expanded"><div id="filter-items-container"><mvt:if expr="l.settings:category_listing:products_on_page_count GT 1">
            <div class="sorting">
            <form method="get" action="&mvte:global:sessionurl;">
                <input type="hidden" name="Screen" value="&mvte:global:Screen;" />
                <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
                <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
                <input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
                <input type="hidden" name="Search" value="&mvte:global:Search;" /> 
                <input type="hidden" name="Per_Page" value="&mvte:global:Per_Page;" />
                <label for="Sort_By">Sort By:</label>
                <select name="Sort_By" onchange="this.form.submit();">
                    <mvt:if expr="ISNULL g.Sort_By">
                        <option value="disp_order" selected="selected">Default</option>
                    <mvt:else>
                        <option value="disp_order">Default</option>
                    </mvt:if>
                    <mvt:if expr="g.Sort_By EQ 'name_asc'">
                        <option value="name_asc" selected="selected">Name Ascending</option>
                    <mvt:else>
                        <option value="name_asc">Name Ascending</option>
                    </mvt:if>
                    <mvt:if expr="g.Sort_By EQ 'name_desc'">
                        <option value="name_desc" selected="selected">Name Descending</option>
                    <mvt:else>
                        <option value="name_desc">Name Descending</option>
                    </mvt:if>
                    <mvt:if expr="g.Sort_By EQ 'code_asc'">
                        <option value="code_asc" selected="selected">Code Ascending</option>
                    <mvt:else>
                        <option value="code_asc">Code Ascending</option>
                    </mvt:if>
                    <mvt:if expr="g.Sort_By EQ 'code_desc'">
                        <option value="code_desc" selected="selected">Code Descending</option>
                    <mvt:else>
                        <option value="code_desc">Code Descending</option>
                    </mvt:if>
                    <mvt:if expr="g.Sort_By EQ 'bestsellers'">
                        <option value="bestsellers" selected="selected">Best Selling</option>
                    <mvt:else>
                        <option value="bestsellers">Best Selling</option>
                    </mvt:if>
                    <mvt:if expr="g.Sort_By EQ 'price_asc'">
                        <option value="price_asc" selected="selected">Lowest Price</option>
                    <mvt:else>
                        <option value="price_asc">Lowest Price</option>
                    </mvt:if>
                    <mvt:if expr="g.Sort_By EQ 'price_desc'">
                        <option value="price_desc" selected="selected">Highest Price</option>
                    <mvt:else>
                        <option value="price_desc">Highest Price</option>
                    </mvt:if>
                    <mvt:if expr="g.Sort_By EQ 'newest'">
                        <option value="newest" selected="selected">Newest Items</option>
                    <mvt:else>
                        <option value="newest">Newest Items</option>
                    </mvt:if>
                </select>
                <noscript><input type="submit" value="go"></noscript>
            </form>
            </div></mvt:if><mvt:if expr="l.settings:category_listing:products_on_page_count GT 1">
            <div class="per-page">
            <form method="get" action="&mvte:global:sessionurl;">
                <input type="hidden" name="Screen" value="&mvte:global:Screen;" />
                <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
                <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
                <input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
                <input type="hidden" name="Search" value="&mvte:global:Search;" /> 
                <input type="hidden" name="Sort_By" value="&mvte:global:Sort_By;" />
                <label for="Per_Page">View:</label>
                <select name="Per_Page" onchange="this.form.submit();">
                    <mvt:if expr="g.Per_Page EQ 10">
                        <option value="10" selected="selected">10</option>
                    <mvt:else>
                        <option value="10">10</option>
                    </mvt:if>
                    <mvt:if expr="g.Per_Page EQ 20">
                        <option value="20" selected="selected">20</option>
                    <mvt:else>
                        <option value="20">20</option>
                    </mvt:if>
                    <mvt:if expr="g.Per_Page EQ 40">
                        <option value="40" selected="selected">40</option>
                    <mvt:else>
                        <option value="40">40</option>
                    </mvt:if>
                    <mvt:if expr="g.Per_Page EQ -1">
                        <option value="-1" selected="selected">All</option>
                    <mvt:else>
                        <option value="-1">All</option>
                    </mvt:if>
                </select>
                <noscript><input type="submit" value="go"></noscript>
            </form>
            </div></mvt:if>
        <mvt:if expr="l.settings:category_listing:page_links:last_page GT 1">
            <div class="page-links">
                <span class="page-links-title">Page(s):</span>
                <span class="page-links-container">
                    <mvt:if expr="l.settings:category_listing:page_links:current_page NE 1">
                        <a href="&mvte:category_listing:page_links:prev_link;" class="page-links-previous">&lt;</a>
                    <mvt:else>
                        <span class="page-links-previous page-links-deactivated">&lt;</span>
                    </mvt:if>
                    <mvt:if expr="l.settings:category_listing:page_links:current_page NE l.settings:category_listing:page_links:last_page">
                        <a href="&mvte:category_listing:page_links:next_link;" class="page-links-next">&gt;</a>
                    <mvt:else>
                        <span class="page-links-next page-links-deactivated">&gt;</span>
                    </mvt:if>
                    <span class="page-disp">
                        <mvt:if expr="NOT l.settings:category_listing:page_links:contains_first">
                            <a href="&mvte:category_listing:page_links:first_link;" class="page-links-inactive">1</a>...
                        </mvt:if>
                        <mvt:foreach iterator="pages" array="category_listing:page_links:pages">
                            <mvt:if expr="l.settings:category_listing:page_links:current_page EQ l.settings:pages:page_num">
                                <span class="page-links-active">&mvte:pages:page_num;</span>
                            <mvt:else>
                                <a href="&mvte:pages:link;" class="page-links-inactive">&mvte:pages:page_num;</a>
                            </mvt:if>
                        </mvt:foreach>
                        <mvt:if expr="NOT l.settings:category_listing:page_links:contains_last">
                            ...<a href="&mvte:category_listing:page_links:last_link;" class="page-links-inactive">&mvte:category_listing:page_links:last_page;</a>
                        </mvt:if>
                    </span>
                </span>
            </div>
            
        </mvt:if>
        </div><div class="clear"></div>

    Note: the numbers in bold red can and should be changed to reflect your actual pagination settings. For example, if you have pagination set to 12 products per page, you should replace the first set of matching bold red numbers 10 with 12.
    Ryan Guisewite
    Lead UI Developer / Miva, Inc.
    www.miva.com

    #2
    Re: PR8 Update 4 CSSUI Template Changes: Pagination, Category Sorting, Items Per Page

    STEP 2:
    You will also need to change the following code in the Category Product List Layout, Related Product List Layout, Product List Layout, and Search Results Layout tabs on pages CTGY, PROD, PLST, and SRCH.

    Replace...
    Code:
    <mvt:if expr="g.CatListingOffset OR g.CatListingNextOffset">
        <div class="next-previous">
            <mvt:if expr="g.CatListingOffset GT 0">
            <div class="previous-button">
                <form method="post" action="&mvte:global:sessionurl;">
                <input type="hidden" name="Screen" value="&mvte:global:Screen;" />
                <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
                <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
                <input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
                <input type="hidden" name="Search" value="&mvte:global:Search;" />
                <input type="hidden" name="Offset" value = "&mvte:global:CatListingPrevOffset;" />
                <input type="hidden" name="AllOffset" value = "&mvte:global:AllOffset;" />
                <input type="hidden" name="CatListingOffset" value = "&mvte:global:CatListingPrevOffset;" />
                <input type="hidden" name="RelatedOffset" value = "&mvte:global:RelatedOffset;" />
                <input type="hidden" name="SearchOffset" value = "&mvte:global:SearchOffset;" />
                <mvt:item name="buttons" param="Previous" />
                </form>
            </div>
            </mvt:if>
            <mvt:if expr="g.CatListingNextOffset GT 0">
            <div class="next-button">
                <form method="post" action="&mvte:global:sessionurl;">
                <input type="hidden" name="Screen" value="&mvte:global:Screen;" />
                <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
                <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
                <input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
                <input type="hidden" name="Search" value="&mvte:global:Search;" />
                <input type="hidden" name="Offset" value = "&mvte:global:CatListingNextOffset;" />
                <input type="hidden" name="AllOffset" value = "&mvte:global:AllOffset;" />
                <input type="hidden" name="CatListingOffset" value = "&mvte:global:CatListingNextOffset;" />
                <input type="hidden" name="RelatedOffset" value = "&mvte:global:RelatedOffset;" />
                <input type="hidden" name="SearchOffset" value = "&mvte:global:SearchOffset;" />
                <mvt:item name="buttons" param="Next" />
                </form>
            </div>
            </mvt:if>
        </div>
        </mvt:if>
    with...
    Code:
    <mvt:if expr="NOT l.settings:category_listing:page_disp_count GT 0">
            <mvt:if expr="g.CatListingOffset OR g.CatListingNextOffset">
            <div class="next-previous">
                <mvt:if expr="g.CatListingOffset GT 0">
                <div class="previous-button">
                    <form method="post" action="&mvte:global:sessionurl;">
                    <input type="hidden" name="Screen" value="&mvte:global:Screen;" />
                    <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
                    <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
                    <input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
                    <input type="hidden" name="Search" value="&mvte:global:Search;" />
                    <input type="hidden" name="Per_Page" value="&mvte:global:Per_Page;" />
                    <input type="hidden" name="Sort_By" value="&mvte:global:Sort_By;" />
                    <input type="hidden" name="Offset" value = "&mvte:global:CatListingPrevOffset;" />
                    <input type="hidden" name="AllOffset" value = "&mvte:global:AllOffset;" />
                    <input type="hidden" name="CatListingOffset" value = "&mvte:global:CatListingPrevOffset;" />
                    <input type="hidden" name="RelatedOffset" value = "&mvte:global:RelatedOffset;" />
                    <input type="hidden" name="SearchOffset" value = "&mvte:global:SearchOffset;" />
                    <mvt:item name="buttons" param="Previous" />
                    </form>
                </div>
                </mvt:if>
            
                <mvt:if expr="g.CatListingNextOffset GT 0">
                <div class="next-button">
                    <form method="post" action="&mvte:global:sessionurl;">
                    <input type="hidden" name="Screen" value="&mvte:global:Screen;" />
                    <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
                    <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
                    <input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
                    <input type="hidden" name="Search" value="&mvte:global:Search;" />
                    <input type="hidden" name="Per_Page" value="&mvte:global:Per_Page;" />
                    <input type="hidden" name="Sort_By" value="&mvte:global:Sort_By;" />
                    <input type="hidden" name="Offset" value = "&mvte:global:CatListingNextOffset;" />
                    <input type="hidden" name="AllOffset" value = "&mvte:global:AllOffset;" />
                    <input type="hidden" name="CatListingOffset" value = "&mvte:global:CatListingNextOffset;" />
                    <input type="hidden" name="RelatedOffset" value = "&mvte:global:RelatedOffset;" />
                    <input type="hidden" name="SearchOffset" value = "&mvte:global:SearchOffset;" />
                    <mvt:item name="buttons" param="Next" />
                    </form>
                </div>
                </mvt:if>
            </div>
            </mvt:if>
        </mvt:if>
    Ryan Guisewite
    Lead UI Developer / Miva, Inc.
    www.miva.com

    Comment


      #3
      Re: PR8 Update 4 CSSUI Template Changes: Pagination, Category Sorting, Items Per Page

      STEP 3:
      The following changes can be placed anywhere within the cssui.css file:

      Code:
      #filter-items-container
      {
          color: #434343;
          font-size: 11px;
          font-family: Verdana, Arial, Helvetica, sans-serif;
      }
      #filter-items-container .per-page
      {
          position: relative;
          float:left;
          padding: 0 5px;
          margin-right: 5px;
          height: 22px;
          line-height: 20px;
      }
      #filter-items-container .per-page label
      {
          margin-right: 3px;
      }
      #filter-items-container .per-page select
      {
          padding: 0;
      }
      #filter-items-container .sorting
      {
          position: relative;
          float:left;
          padding: 0 5px;
          height: 22px;
          line-height: 20px;
      }
      #filter-items-container .sorting label
      {
          margin-right: 3px;
      }
      #filter-items-container .sorting select
      {
          padding: 0;
          font-size: 11px;
      }
      
      
      .page-links-previous, .page-links-next
      {
          text-decoration: none;
          line-height: 20px;
          padding: 0 8px;
          white-space: nowrap;
          font-weight: bold;
      }
      .page-links-previous
      {
          float: left;
          text-align: right;
      }
      .page-links-next
      {
          float: right;
          text-align: left;
      }
      .page-links-inactive
      {
          text-decoration: none;
          padding: 2px 3px;
      }
      .page-links-active
      {
          color: #434343;
          border-bottom: 2px solid #434343;
          font-weight: bold;
          text-decoration: none;
          padding: 1px 3px;
      }
      .page-links-deactivated
      {
          color: #999;
          text-decoration: none;
      }
      .page-links-deactivated:hover
      {
          color: #999;
          text-decoration: none;
          background: none;
      }
      .page-disp {
          display: block;
          line-height: 20px;
          float: left;
          text-align: center;
      }
      .page-links, .page-links a
      {
          color: #434343;
          font-size: 11px;
          font-family: Verdana, Arial, Helvetica, sans-serif;
      }
          .page-links
          {
              margin: 0px;
              text-align: right;
              float: right;
          }
          
      .page-links-container
      {
          text-decoration: none;
          display:block;
          float: right;
      }
      .page-links-title
      {
          margin-top: 3px;
          position: relative;
          display:block;
          float:left;
      }
      Ryan Guisewite
      Lead UI Developer / Miva, Inc.
      www.miva.com

      Comment


        #4
        Re: PR8 Update 4 CSSUI Template Changes: Pagination, Category Sorting, Items Per Page

        Another thing to note for STEP 2: - The items in bold red below must be changed depending on what page you are on. If you are editing the Related Product List Layout on page PROD, for example, you must change the bold CatListing to Related and you must add the Prev to &mvte:global:RelatedOffset; so that it reads &mvte:global:RelatedPrevOffset; These same changes must be made to the next button as well.

        Code:
        <mvt:if expr="NOT l.settings:category_listing:page_disp_count GT 0">
                <mvt:if expr="g.CatListingOffset OR g.CatListingNextOffset">
                <div class="next-previous">
                    <mvt:if expr="g.CatListingOffset GT 0">
                    <div class="previous-button">
                        <form method="post" action="&mvte:global:sessionurl;">
                        <input type="hidden" name="Screen" value="&mvte:global:Screen;" />
                        <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
                        <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
                        <input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
                        <input type="hidden" name="Search" value="&mvte:global:Search;" />
                        <input type="hidden" name="Per_Page" value="&mvte:global:Per_Page;" />
                        <input type="hidden" name="Sort_By" value="&mvte:global:Sort_By;" />
                        <input type="hidden" name="Offset" value = "&mvte:global:CatListingPrevOffset;" />
                        <input type="hidden" name="AllOffset" value = "&mvte:global:AllOffset;" />
                        <input type="hidden" name="CatListingOffset" value = "&mvte:global:CatListingPrevOffset;" />
                        <input type="hidden" name="RelatedOffset" value = "&mvte:global:RelatedOffset;" />
                        <input type="hidden" name="SearchOffset" value = "&mvte:global:SearchOffset;" />
                        <mvt:item name="buttons" param="Previous" />
                        </form>
                    </div>
                    </mvt:if>
                
                    <mvt:if expr="g.CatListingNextOffset GT 0">
                    <div class="next-button">
                        <form method="post" action="&mvte:global:sessionurl;">
                        <input type="hidden" name="Screen" value="&mvte:global:Screen;" />
                        <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
                        <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
                        <input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
                        <input type="hidden" name="Search" value="&mvte:global:Search;" />
                        <input type="hidden" name="Per_Page" value="&mvte:global:Per_Page;" />
                        <input type="hidden" name="Sort_By" value="&mvte:global:Sort_By;" />
                        <input type="hidden" name="Offset" value = "&mvte:global:CatListingNextOffset;" />
                        <input type="hidden" name="AllOffset" value = "&mvte:global:AllOffset;" />
                        <input type="hidden" name="CatListingOffset" value = "&mvte:global:CatListingNextOffset;" />
                        <input type="hidden" name="RelatedOffset" value = "&mvte:global:RelatedOffset;" />
                        <input type="hidden" name="SearchOffset" value = "&mvte:global:SearchOffset;" />
                        <mvt:item name="buttons" param="Next" />
                        </form>
                    </div>
                    </mvt:if>
                </div>
                </mvt:if>
            </mvt:if>
        Ryan Guisewite
        Lead UI Developer / Miva, Inc.
        www.miva.com

        Comment

        Working...
        X