Product Reviews

Plug-in Sort and Pagination

Once setup, sorting and pagination controls can be managed from the plug-in template, which is named: "product_reviews_pagination_controls".
Each client has the option of implementing their own version of pagination (so they can decide styling to the fullest extent). The standard example is shown in both image and code form.>
Sample Image

Template Code

<form method="post" id="pagination_controls_form">
        <input type="hidden" 
 name="pagination_page" value="{$pagination_page}" 
 id="pagination_page">
        <input type="hidden" 
 name="offset" value="{$offset}" id="offset">
        <label for="results_per_page">Results 
 per Page: </label>
        <select name="results_per_page" 
 id="results_per_page">
                <option 
 value="5" {if $results_per_page == 5}SELECTED{/if}>5</option>
                <option 
 value="10" {if $results_per_page == 10}SELECTED{/if}>10</option>
                <option 
 value="20" {if $results_per_page == 20}SELECTED{/if}>20</option>
                <option 
 value="50" {if $results_per_page == 50}SELECTED{/if}>50</option>
                <option 
 value="100" {if $results_per_page == 100}SELECTED{/if}>100</option>
                <option 
 value="500" {if $results_per_page == 500}SELECTED{/if}>500</option>
        </select>
        <label for="sort_by">Sort 
 By: </label>
        <select name="sort_by" 
 id="sort_by">
                <option 
 value="rated_descending" {if $sort_by == "rated_descending"}SELECTED{/if}>Highest 
 First</option>
                <option 
 value="rated_ascending" {if $sort_by == "rated_ascending"}SELECTED{/if}>Lowest 
 First</option>
                <option 
 value="date_descending" {if $sort_by == "date_descending"}SELECTED{/if}>Newest 
 First</option>
                <option 
 value="date_ascending" {if $sort_by == "date_ascending"}SELECTED{/if}>Oldest 
 First</option>
        </select>
        <br>
        <div id="pagination" 
 style="text-align: center; padding-top: 10px;">
                <a 
 id="prev">< Previous Page</a>
                <div 
 id="pagination_numbers" style="display: inline;">
                        {assign 
 var="end_range" value=$largest_pagination_number-5}
                        {foreach 
 from=$pagination_numbers item=number}
                                {if 
 $number >= 1 && $number <= 5}
                                        {if 
 $pagination_page == $number}
                                                <span 
 value='{$number}' style="color: blue;">{$number}</span> 
 
                                        {else}
                                                <span 
 value='{$number}' style="cursor:pointer;" class="can_select">{$number}</span> 
 
                                        {/if}
                                {/if}
                        {/foreach}
                        <span> 
 ..... </span>
                        {foreach 
 from=$pagination_numbers item=number}
                                {if 
 $number >= $end_range && $number <= $largest_pagination_number}
                                        {if 
 $pagination_page == $number}
                                                <span 
 value='{$number}' style="color: blue;">{$number}</span> 
 
                                        {else}
                                                <span 
 value='{$number}' style="cursor:pointer;" class="can_select">{$number}</span> 
 
                                        {/if}
                                {/if}
                        {/foreach}
                </div>
                <a 
 id="next"> Next Page > </a>
        </div>
</form>
{literal}
<script>
        $(document).ready(function(){
                //Handles 
 sorting and amount to show per page
                $('#results_per_page,#sort_by').change(function(){
                        $('#pagination_controls_form').submit();
                });
                //handles 
 going to previous page of results
                $('#prev').click(function(){
                        $('#pagination_page').val('prev');
                        $('#pagination_controls_form').submit();
                });
                //handles 
 going to next page of results
                $('#next').click(function(){
                        $('#pagination_page').val('next');
                        $('#pagination_controls_form').submit();
                });
                //Handles 
 clicking of page numbers
                $('#pagination_numbers 
 .can_select').click(function(){
                        $('#pagination_page').val($(this).attr('value'));
                        $('#pagination_controls_form').submit();
                });
                //Hide 
 Previous Page if on first page
                if($("#offset").val() 
 == 0){
                        $('#prev').hide();
                }
                
                //Hide 
 Next Page if hit end of results
                if($("#offset").val() 
 == {/literal}{$largest_pagination_number}{literal}){
                        $('#next').hide();
                }
        });
</script>
{/literal}