Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Products Per Page with Great Features

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design
 
Thread Tools Search this Thread
  #1  
Old 01-01-2013, 10:42 AM
  ADDISON's Avatar 
ADDISON ADDISON is offline
 

X-Man
  
Join Date: Jan 2008
Posts: 2,613
 

Lightbulb Products Per Page with Great Features

Hello Folks. Happy New Year! Here is a gift for you. This customization will allow you the get the following features for Products Per Page:

1) Customer can change how many products wants to see in a category (if input box is available)

2) Customer can select to View All products in a category (if selection menu and option View All are available)

3) XC Administrator can easy manage enable/disable selection menu, change input box, View All option. By default both selection menu and input box are available, but you can do changes with a few clicks in Admin -> Appearance.

4) Variants for number of products per page can be changed as you want. You can enter one after other in a textarea box in Admin -> Appearance by pressing Enter button. Take in consideration how many columns for products are on a row (if you have 3, your variants of products per page should be multiply by 3). And also what is the default value (normally it should be the first value in selection menu).

(!!) It is silly to see in default XC Gold listing 3 products on a row (Offers and Products), but in selection menu values are multiply by 5 and default per page is 10. Think deeply people are not smart. If they see one product remaining on the last row they could think the listing is over. So, be careful setting up the numbers.

Let's start the customization. We have to do 3 steps: changing two files content, add a few options in DB and add a few selectors in CSS main file.

CHANGING THE FILES CONTENT (search.php and per_page.tpl)

In file [XC-Dir]/include/search.php find this part of the code (in v4.5.4 Gold+ it is around Line 1087)

replace this
PHP Code:
$perPageValues = array();

for (
$i 550 >= $i$i $i 5) {
    
$perPageValues[] = $i;
}

$smarty->assign('per_page',         'Y');
$smarty->assign('per_page_values',  $perPageValues); 
with this
PHP Code:
$perPageValues = array();
$perPageValues preg_split('/\r?\n/'$config['Appearance']['products_per_page_variants']);
        
/* for ($i = 5; 50 >= $i; $i = $i + 5) {
            $perPageValues[] = $i;
} */            

$smarty->assign('per_page',         'Y');
$smarty->assign('per_page_values',  $perPageValues); 

In file [XC_Dir]/skin/common_files/customer/main/per_page.tpl replace the whole file content. As you can see I let the original code in place.

replace original

PHP Code:
{*
$Idper_page.tpl,v 1.3 2010/07/16 14:01:30 joy Exp $
vimset ts=2 sw=2 sts=2 et:
*}
{
strip}
  <
span class="per-page-selector">
  <
select onchange="javascript:window.location='{$current_location}/{$navigation_script}&amp;objects_per_page=' + this.value;">
    <
option value="" selected="selected"></option>
    {foreach 
from=$per_page_values item="value"}
    <
option value="{$value}"{if $value eq $objects_per_pageselected="selected"{/if}>{$value}</option>
    {/foreach}
  </
select>
  &
nbsp;{$lng.lbl_per_page}
  </
span>
{/
strip

with this one
PHP Code:
{*
$Idper_page.tpl,v 1.3 2010/07/16 14:01:30 joy Exp $
vimset ts=2 sw=2 sts=2 et:
*}
{* 
ORIGINAL
{strip}
  <
span class="per-page-selector">
  <
select onchange="javascript:window.location='{$current_location}/{$navigation_script}&amp;objects_per_page=' + this.value;">
    <
option value="" selected="selected"></option>
    {foreach 
from=$per_page_values item="value"}
    <
option value="{$value}"{if $value eq $objects_per_pageselected="selected"{/if}>{$value}</option>
    {/foreach}
  </
select>
  &
nbsp;{$lng.lbl_per_page}
  </
span>
{/
strip}
ORIGINAL *}

{*
$Idper_page.tpl,v 1.3 2010/07/16 14:01:30 joy Exp $
vimset ts=2 sw=2 sts=2 et:
*}
{
strip}
    {if 
$objects_per_page gt $total_items}
        {
assign var='objects_per_page' value=$total_items}
    {/if}
    {if 
$config.Appearance.products_per_page_hide_selector eq 'N'}
    {
assign var='insert_select_option' value='N'}
    <
span class="per-page-selector">
  <
select onchange="javascript:window.location='{$current_location}/{$navigation_script}&amp;objects_per_page=' + this.value;">
    {foreach 
from=$per_page_values item="value"}
        {if 
$objects_per_page eq $value || $objects_per_page eq $total_items}
            {
assign var='insert_select_option' value='Y'}
        {/if}
  
         {if 
$objects_per_page lt $value && $insert_select_option eq 'N'}
            <
option value="" selected="selected">{$objects_per_page} {$lng.lbl_per_page}</option>
            {
assign var='insert_select_option' value='Y'}
        {/if}
        
    {if 
$value lte $total_items}
    <
option value="{$value}"{if $value eq $objects_per_pageselected="selected"{/if}>{$value} {$lng.lbl_per_page}</option>
    {/if}
    {/foreach}
    {if 
$config.Appearance.products_per_page_view_all eq 'Y'}
    <
option value="{$total_items}"{if $total_items eq $objects_per_pageselected="selected"{/if}>View All</option>
    {/if}
  </
select>
  </
span>
  {/if}
  
  {if 
$config.Appearance.products_per_page_allow_change eq 'Y'}
  <
span class="per-page-change">
      <
input type="text" {if $objects_per_page gt $total_itemsvalue="{$total_items}{else} value="{$objects_per_page}"{/if} maxlength="3" onchange="javascript:window.location='{$current_location}/{$navigation_script}&amp;objects_per_page=' + this.value;">
  </
span>
  &
nbsp;{$lng.lbl_per_page}
    {/if}
{/
strip

ADDING THE OPTIONS IN DATABASE

Execute the following SQL queries:

1) For Appearance section
Code:
insert into `xcart_config` (`name`, `comment`, `value`, `category`, `orderby`, `type`, `defvalue`, `variants`, `validation`) values('products_per_page_allow_change','Allow customer to change number of products on the search results page','Y','Appearance','23','checkbox','N','',''); insert into `xcart_config` (`name`, `comment`, `value`, `category`, `orderby`, `type`, `defvalue`, `variants`, `validation`) values('products_per_page_hide_selector','Hide products per page selector','N','Appearance','22','checkbox','N','',''); insert into `xcart_config` (`name`, `comment`, `value`, `category`, `orderby`, `type`, `defvalue`, `variants`, `validation`) values('products_per_page_variants','Products per page variants (for customer area)','12\r\n24\r\n36\r\n96','Appearance','26','textarea','12\r\n24\r\n36\r\n96','',''); insert into `xcart_config` (`name`, `comment`, `value`, `category`, `orderby`, `type`, `defvalue`, `variants`, `validation`) values('products_per_page_view_all','Include \"View All\" option in products per page selector','Y','Appearance','29','checkbox','Y','','');

2) For easy changing option texts when using Webmaster Mode
Code:
insert into `xcart_languages`(`code`,`name`,`value`,`topic`) values ('en', 'opt_products_per_page_allow_change','Allow customer to change number of products on the search results page','Appearance'); insert into `xcart_languages`(`code`,`name`,`value`,`topic`) values ('en', 'opt_products_per_page_hide_selector','Hide products per page selector','Appearance'); insert into `xcart_languages`(`code`,`name`,`value`,`topic`) values ('en', 'opt_products_per_page_variants','Products per page variants (for customer area)','Appearance'); insert into `xcart_languages`(`code`,`name`,`value`,`topic`) values ('en', 'opt_products_per_page_view_all','Include \"View All\" option in products per page selector','Appearance');

ADDING SELECTORS IN CSS

In file [XC_Dir]/skin/common_files/css/main.css

change this
PHP Code:
.per-page-selector {
  
floatright;


with this
PHP Code:
.per-page-selector {
  
floatleft;
}

.
per-page-change {
  
margin-left5px;
}

.
per-page-change input {
    
text-aligncenter;
    
width30px;


For results see the attachments.

A few thoughts

1) You have the freedom to use them together, or one of them as you wish. Just check/uncheck the options in Admin -> Appearance.

2) As you can see for "View All" option I am using the total number of products in that category instead of numbers like 999, 2000 as I saw as solutions in this Forum (it is not wrong but this one is an elegant way in my opinion). By default XC calculates this and assigns it to smarty variable $total_items.

3) For changing the box content just input a number and click outside or press Enter.

4) If you set up the number bigger than total number of products in that category, after reloading the page it will see the total number of products instead of the number you entered (for avoiding confusion).

5) For selection menu I created a few nice features when working together with input box. If the number is bigger than total number of products in that category it shows View All, if you enter a number which is different than variant number you will see it in selection (e.g. 1 per page). This value will disappear if you choose from selection other variant. Changing this will change the input box content. Selection menu won't show all variants if the total number of products is exceed (e.g. if total number is 33 and you have variants ( 12, 24, 36, 48 ) only 12, 24 will appear - another elegant way in my opinion).

Once you do these small changes cleanup your website cache (in my case it worked without cleaning up). If you visit again you should find the new results (see the attachments).

Do not forget to backup the data before starting modification.

>> If you like this customization please click [Thanks] button for this post. Having lots of [Thanks] hope Qualiteam will take in consideration inserting this customization into future versions.

Have a great year!
Attached Thumbnails
Click image for larger version

Name:	admin-per-page-appearance.jpg
Views:	160
Size:	105.5 KB
ID:	3321  Click image for larger version

Name:	admin-per-page-appearance-webmaster.jpg
Views:	149
Size:	125.3 KB
ID:	3322  Click image for larger version

Name:	frontend-change.jpg
Views:	151
Size:	74.7 KB
ID:	3323  Click image for larger version

Name:	frontend-selection-change.jpg
Views:	143
Size:	77.9 KB
ID:	3324  Click image for larger version

Name:	frontend-selection-viewall.jpg
Views:	147
Size:	81.6 KB
ID:	3325  

__________________
X-Cart Next: Business 5.2 (learning and testing)
X-Cart Classic: Gold and Gold Plus 4.7
Lots of Modules and Customizations
OS in use: Red Hat Enterprise, Fedora, CentOS, Debian, Ubuntu, Linux Mint, Kali Linux
Ideas for Server configuration (basicaly): Nginx/Pound (reverse proxy), Apache/Nginx (webserver), Squid/Varnish (cache server), HHVM or (PHP-FPM + PHP 5.6 + opcache), MariaDB/Percona MySQL Server, Redis (storing sessions)

You can catch my ideas here: http://ideas.x-cart.com
Reply With Quote

The following 8 users thank ADDISON for this useful post:
anandat (01-01-2013), Danimal (02-24-2013), Katsu (04-06-2021), kevfromwiganinlancashire (01-03-2013), langhale (04-08-2013), photo (01-01-2013), ScrapOrchard (01-05-2013), tartaglia (01-01-2013)
  #2  
Old 01-01-2013, 11:49 AM
  ADDISON's Avatar 
ADDISON ADDISON is offline
 

X-Man
  
Join Date: Jan 2008
Posts: 2,613
 

Default Re: Products Per Page with Great Features

"Next in Dallas": Products list layouts settings.

- We have to do something with that silly "Sort By" feature. As it is now it is like a relic from ancient times ("XC and the Lost Ark").

- We have to do something to change the layout with a click of a button from Grid, List, Compact list, ...
__________________
X-Cart Next: Business 5.2 (learning and testing)
X-Cart Classic: Gold and Gold Plus 4.7
Lots of Modules and Customizations
OS in use: Red Hat Enterprise, Fedora, CentOS, Debian, Ubuntu, Linux Mint, Kali Linux
Ideas for Server configuration (basicaly): Nginx/Pound (reverse proxy), Apache/Nginx (webserver), Squid/Varnish (cache server), HHVM or (PHP-FPM + PHP 5.6 + opcache), MariaDB/Percona MySQL Server, Redis (storing sessions)

You can catch my ideas here: http://ideas.x-cart.com
Reply With Quote

The following user thanks ADDISON for this useful post:
tartaglia (01-01-2013)
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 10:52 PM.

   

 
X-Cart forums © 2001-2020