Pagination not showing in product listing

  • Posts: 56
  • Thank you received: 0
  • Hikashop Business
8 years 7 months ago #255174

-- url of the page with the problem -- : www.marinepowerservices.co.uk/online-store/category/lw-engines
-- HikaShop version -- : 2.6.4
-- Joomla version -- : 3.6.4

I am currently experiencing small issue in relation to pagination

I currently have my products listed in 3 columns x 7 rows totaling 21 items per page as standard across my shop however one of my sections has now reached 22 items. This issue is that for some reason the pagination does not display and the last item cannot be seen.

I have checked as far as I can that I do not have random turned on but the pagination still does not show.

I have temporarily fixed this buy extending the items per page to 24 but I need to fix the issue as I have more products to upload and the pages will get too large.

I hope someone can help.

Kind Regards

Martyn

Please Log in or Create an account to join the conversation.

  • Posts: 83995
  • Thank you received: 13605
  • MODERATOR
8 years 7 months ago #255176

Hi,

Wouldn't it simply be because you've turned off the "pagination" setting under the Display tab of the HikaShop configuration ?

The following user(s) said Thank You: nippyzap

Please Log in or Create an account to join the conversation.

  • Posts: 56
  • Thank you received: 0
  • Hikashop Business
8 years 7 months ago #255253

Thanks Nicolas, I spent hours yesterday looking for something like that and couldn't find it........... I have now found it and all is working.

I just have to try and alter the CSS to make the pagination match the rest of my site.

Again many thanks

Please Log in or Create an account to join the conversation.

  • Posts: 56
  • Thank you received: 0
  • Hikashop Business
8 years 7 months ago #255271

Hi Again Nicolas,

How would I edit the pagination so the previous start buttons do not show in the pagination when on the first page and likewise the next and end buttons when on the last page. I assume this would be done in the CSS.

Cheers

Martyn

Please Log in or Create an account to join the conversation.

  • Posts: 56
  • Thank you received: 0
  • Hikashop Business
8 years 7 months ago #255317

Hi right after solving the above issue I am now having a few pagination style issues.

After a few hours playing around with my frontend css file I have got the pagination to look very close to the main site pagination but for some reason i have a number of buttons showing which do not on the rest of the site. and its beyond my current skills to remove them perminently however I have managed to get them to display as i need via firebug.

1. currently my hikashop pagination looks like this.



2. but my joomla pagination looks like this.


I have tried editing the frontend css file which gives the results in 1 above and also on another attempt following the advice in this thread https://www.hikashop.com/forum/product-category-display/868410-pagination-display-problem.html and remove what i think is all references to pagination in the frontend css but when I do this I just end up with the stock joomla pagination shown below.



Any ideas what I need to do as I now a bit lost.

Website is on Joomla 3.6.4, Yootheme Square template.

Hikashop is configured for css button style and bootstrap design no

Attachments:
Last edit: 8 years 7 months ago by nippyzap.

Please Log in or Create an account to join the conversation.

  • Posts: 83995
  • Thank you received: 13605
  • MODERATOR
8 years 7 months ago #255401

Hi,

HikaShop also uses the pagination system of Joomla to display the pagination and it's usually the template which generates the HTML of the pagination, not HikaShop.
So I'm surprised it would display differently between HikaShop and Joomla.
Could you provide a link to both pages so that we could see that ?
I've tried to look at your website but couldn't find any pagination.

Please Log in or Create an account to join the conversation.

  • Posts: 56
  • Thank you received: 0
  • Hikashop Business
8 years 7 months ago #255410

Hi Nicolas,

The page with the working Joomla(Yootheme) pagination is www.marinepowerservices.co.uk/engines/past-engines

The hikashop page with with pagination can be found here. www.marinepowerservices.co.uk/gardner/wf-menu-config/lw-engines

You will see that the hikshop page now look as I would like it, but this is a messy temporary fix as from what you have written and the comments in the thread i mentioned earlier I take it that with all the css references removed relating to pagination the hikashop pagination should look identical to the Joomla one.

To get the hikashop one looking correct for now, I have ended up adding code into a number of hikashop files.

In the hikashop pagination.php file I have had to add the below. I cant put it in the template\html\pagination.php file because it breaks the other pages with pagination on the rest of the site however hikashop then shows correctly. Obviously this is messy as it will get overwritten when I update.

function _list_render($list){
		$html = null;

		$html .= '<span class="pagenav_start_chevron">&lt;&lt; </span>';
		$html .= $list['start']['data'];
		$html .= '<span class="pagenav_previous_chevron"> &lt; </span>';
		$html .= $list['previous']['data'];
		foreach( $list['pages'] as $page ) {
			$html .= ' '.$page['data'];
		}
		$html .= ' '. $list['next']['data'];
		$html .= '<span class="pagenav_next_chevron"> &gt;</span>';
		$html .= ' '. $list['end']['data'];
		$html .= '<span class="pagenav_end_chevron"> &gt;&gt;</span>';

		return $html;
	}

I have also had to add/edit the below into the frontend css.
.hikashop_products_pagination, .hikashop_subcategories_pagination{
	font-size:1rem;
	font-weight:400;
	text-align:center;
	clear:both;
	padding-top:15px;
}
.hikashop_products_pagination ul.pagination, .hikashop_subcategories_pagination ul.pagination{
	text-align:center;
}

.hikashop_products_pagination .list-footer .limit, .hikashop_subcategories_pagination .list-footer .limit{
	color:#333;
	font-weight:normal;
	margin-bottom:5px;
}

.hikashop_products_pagination .list-footer .limit select, .hikashop_subcategories_pagination .list-footer .limit select{
	width: 60px;
}

.hikashop_products_pagination .list-footer .limit .inputbox, .hikashop_subcategories_pagination .list-footer .limit .inputbox{
	margin-left:10px;
	border:1px solid #ddd;
	border-radius:3px;
	color:#333;
}

.hikashop_products_pagination .list-footer .pagenav, .hikashop_subcategories_pagination .list-footer .pagenav {
	-moz-box-sizing: content-box;
  box-sizing: content-box;
  display: inline-block;
  min-width: 22px;
  padding: 3px 5px;
  line-height: 26px;
  text-decoration: none;
  text-align: center;
  border-radius: 3px;
  text-weight: 400;
  text-size: 1rem;

}

.hikashop_products_pagination .list-footer a.pagenav:hover, .hikashop_subcategories_pagination .list-footer a.pagenav:hover{
	background-color:rgba (0, 0, 0, 0);
	border-color: #dfe2e8;
	color: #515e6c;
	outline: medium none;
	transition: border color 0.2s ease-in-out 0s, background-color 0.4s ease-in-out 0s;

}
.hikashop_products_pagination .list-footer span.pagenav, .hikashop_subcategories_pagination .list-footer span.pagenav {
	color:#fff;
	background: #3e854b none repeat scroll 0 0;
}
.hikashop_products_pagination .list-footer span.pagenav_text, .hikashop_products_pagination .list-footer span.pagenav_start_chevron, .hikashop_products_pagination .list-footer span.pagenav_previous_chevron, .hikashop_products_pagination .list-footer span.pagenav_next_chevron, .hikashop_products_pagination .list-footer span.pagenav_end_chevron, .hikashop_subcategories_pagination .list-footer span.pagenav_text, .hikashop_subcategories_pagination .list-footer span.pagenav_start_chevron, .hikashop_subcategories_pagination .list-footer span.pagenav_previous_chevron, .hikashop_subcategories_pagination .list-footer span.pagenav_next_chevron, .hikashop_subcategories_pagination .list-footer span.pagenav_end_chevron{
	display:none;
}

.hikashop_products_pagination .list-footer .counter, .hikashop_subcategories_pagination .list-footer .counter{
	color:#666;
}

.hikashop_products_pagination .hikashop_results_counter, .hikashop_subcategories_pagination .hikashop_results_counter{
	color:#666;
}
.hikashop_results_counter{ 
display:none;
}
.hikashop_products_pagination div.limit{
display:none; 
}
.hikashop_products_pagination div.counter{
display:none;
}

There is already a pagination.php file in the template directory with yootheme coding in it which I can send on if you think it might be useful to see what is causing the issue.

Last edit: 8 years 7 months ago by nippyzap.

Please Log in or Create an account to join the conversation.

  • Posts: 83995
  • Thank you received: 13605
  • MODERATOR
8 years 7 months ago #255414

Hi,

Then, as an easy solution, you can add that function in the pagination.php file of your template and add such check at the beginning of the function:

if($_REQUEST['option']!='com_hikashop'){
 return parent::_list_render($list);
}

Please Log in or Create an account to join the conversation.

  • Posts: 56
  • Thank you received: 0
  • Hikashop Business
8 years 7 months ago #255465

Good Morning Nicolas,

Thanks for the code however I don't seem to be able to get it to work, currently it just breaks the rest of the site like it did when I put the function in on its own. Im sure I have done something wrong. but as you can probably tell I am fairly inexperienced with PHP/CSS

I have returned the hikashop pagination.php file back to the standard one. and the template/html/pagination.php file now looks like this

<?php
/**
* @package   yoo_square
* @author    YOOtheme http://www.yootheme.com
* @copyright Copyright (C) YOOtheme GmbH
* @license   http://www.gnu.org/licenses/gpl.html GNU/GPL
*/

// include config and layout
$base = dirname(__FILE__);
include($base.'/config.php');
include($warp['path']->path('layouts:'.preg_replace('/'.preg_quote($base, '/').'/', '', __FILE__, 1)));

if($_REQUEST['option']!='com_hikashop'){
 return parent::_list_render($list);
}
function _list_render($list){
		$html = null;

		$html .= '<span class="pagenav_start_chevron">&lt;&lt; </span>';
		$html .= $list['start']['data'];
		$html .= '<span class="pagenav_previous_chevron"> &lt; </span>';
		$html .= $list['previous']['data'];
		foreach( $list['pages'] as $page ) {
			$html .= ' '.$page['data'];
		}
		$html .= ' '. $list['next']['data'];
		$html .= '<span class="pagenav_next_chevron"> &gt;</span>';
		$html .= ' '. $list['end']['data'];
		$html .= '<span class="pagenav_end_chevron"> &gt;&gt;</span>';

		return $html;
	}

This causes the joomla page with pagination to look like this



and the hikashop page pagination looks like this

Attachments:
Last edit: 8 years 7 months ago by nippyzap.

Please Log in or Create an account to join the conversation.

  • Posts: 83995
  • Thank you received: 13605
  • MODERATOR
8 years 7 months ago #255469

Hi,

Try it like that then:

<?php
/**
* @package   yoo_square
* @author    YOOtheme http://www.yootheme.com
* @copyright Copyright (C) YOOtheme GmbH
* @license   http://www.gnu.org/licenses/gpl.html GNU/GPL
*/

// include config and layout
$base = dirname(__FILE__);
include($base.'/config.php');
include($warp['path']->path('layouts:'.preg_replace('/'.preg_quote($base, '/').'/', '', __FILE__, 1)));

if($_REQUEST['option']!='com_hikashop'){
function _list_render($list){
		$html = null;

		$html .= '<span class="pagenav_start_chevron">&lt;&lt; </span>';
		$html .= $list['start']['data'];
		$html .= '<span class="pagenav_previous_chevron"> &lt; </span>';
		$html .= $list['previous']['data'];
		foreach( $list['pages'] as $page ) {
			$html .= ' '.$page['data'];
		}
		$html .= ' '. $list['next']['data'];
		$html .= '<span class="pagenav_next_chevron"> &gt;</span>';
		$html .= ' '. $list['end']['data'];
		$html .= '<span class="pagenav_end_chevron"> &gt;&gt;</span>';

		return $html;
	}
}

Please Log in or Create an account to join the conversation.

  • Posts: 56
  • Thank you received: 0
  • Hikashop Business
8 years 7 months ago #255554

Good Morning Nicolas,

Thank you for your efforts. I have returned Hikashops pagination.php file to the standard one and replaced the code in my template/html/pagination.php with your suggestion. It no longer breaks the rest of the site but does not alter the hikashop pagination from what is displayed without this code added.

I have left the site with the problem hikashop pagination showing so you can see what is happening.

Kind Regards

Martyn

Please Log in or Create an account to join the conversation.

  • Posts: 83995
  • Thank you received: 13605
  • MODERATOR
8 years 7 months ago #255570

Hi,

I've checked the issue on your website again, and its quite strange as it looks like the template is adding a second chevron next to the one added by HikaShop.
The one with the class hikashop_next_link, displayed by HikaShop has the correct look, while the class pagenav_next_chevron has a wrong look.
So the easy solution would simply be to hide these extra elements with CSS like that:

.pagenav_next_chevron , .pagenav_end_chevron{
display: none;
}

Please Log in or Create an account to join the conversation.

  • Posts: 56
  • Thank you received: 0
  • Hikashop Business
8 years 7 months ago #255692

Hi Nicolas,

Again many thanks for your help, all is now fixed and hopefully update proof. I ended up adding the below to my custom hikashop css file so it deals with the incorrect buttons showing when at both ends of the page list.

.pagenav_previous_chevron , .pagenav_start_chevron , .pagenav_next_chevron , .pagenav_end_chevron{
display: none;
}

Many thanks

Martyn

Please Log in or Create an account to join the conversation.

Time to create page: 0.100 seconds
Powered by Kunena Forum