OpenCart Community

Posted: **Mon Oct 23, 2017 5:48 am**

Hi!

I've got a question. My store has 2 versions mobile and desktop. What I need is different number of items per page for desktop version (6 items) and mobile version (3 items). So I've try to use javascript to change the form with limits in category.tpl

Code: Select all

$(function () {
if ($(window).outerWidth()>800) {
document.getElementById('input-limit').selected = 1;
} else {
document.getElementById('input-limit').selected = 0;
}
});

of course I've made changes in category.php :

Code: Select all

$limits = array_unique(array($this->config->get($this->config->get('config_theme') . '_product_limit'), 6, 25, 50, 75, 100));

and in back-end template options (default items per page setting on 3)

But unfortunately this didn't works - it's changed the selected items but the trigger onchange="location=this.value" used in form don't see this. So the page shows always 3 items per page. I've tried to use document.location in javascript but I couldn't stop eternal refreshing the page.

So , the question is - how to do this thing working?

Posted: **Mon Oct 23, 2017 7:03 am**

A bootstrap Setup horizontal full-width ROW is sectioned in 12 COLUMNS.
---
And the Page Content layout is usually declared in the corresponding Theme *.tpl File,
called style-classes, and then looks like:

Code: Select all

<?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>

declaring, in this case, that, if left and right colums exist, (usually in large View)
the available amount of columns in the middle Section will be 6
or, if only one left or right column exists,
the available amount of columns in the middle Section will be 9
or, if no left or right column exists,
the available amount of columns in the middle Section will be 12
---
A Category Grid View BOX Class Style Content Line may look like this:
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
meaning, that the BOX uses: (aproximate Values shown!)
3 Columns in Large View Mode (usually >1000px) col-lg-3 - equals 25% of the available total width = 4 Boxes
3 Columns in Medium Mode (usually >900px) col-md-3 same as above = 4 Boxes
6 Columns in Small Mode (usually >750px) col-sm-6 - equals 50% of the available total width = 2 Boxes
12 Columns in X-Small Mode (usually >300px) col-xs-12 - equals 100% of the available total width = 1 Box
to then present a 'matching' amount of Products.
---
So, if your Box Declaration is set to col-lg-3 col-md-3
you will be able to place 4 products besides each other, in one Row,
AT LEAST as long, as those Boxes have NO min-width size/image
Values, and so breaking the total Row width pixelsize-wise, and then
adding the 4th. Product into the Row below, possibly beeing the only
one there, a well known phenomenon in OC Bootstrap Themes ...

---
Or then such a Solution would also be possible:
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
3 Columns in Large View Mode (usually >1000px) col-lg-3 - equals 25% of the available total width = 4 Boxes
4 Columns in Medium Mode (usually >900px) col-md-4 - equals 33.3% of the available total width = 3 Boxes
6 Columns in Small Mode (usually >750px) col-sm-6 - equals 50% of the available total width = 2 Boxes
12 Columns in X-Small Mode (usually >300px) col-xs-12 - equals 100% of the available total width = 1 Box
---
Just to give you some ideas on this !
Good Luck!

Ernie

Posted: **Mon Oct 23, 2017 2:23 pm**

Hi,

thanks for the advice, but this solution is not for me - the container is set to 100% of height so no meter what width you set it shows always so many items as you have set in theme options. In fact I use this product grid - for mobile is one box per row and for desktop 3 boxes per row.

Posted: **Mon Oct 23, 2017 11:55 pm**

This is exactly what something like Bootstrap is for. When you say you have two versions (desktop and mobile), is your theme using Bootstrap ("responsive"), or do you have separate versions served ("adaptive")? Using Bootstrap's CSS, your theme should be configured to use different layouts for given display widths, and give one box on something narrow like a phone, and up to three boxes for wide displays. Any configuration "row width" should be subject to these limits, and not override them (in fact, it should probably be ignored by the theme).

Posted: **Tue Oct 24, 2017 5:00 am**

Sorry guys but I can't agree with this what you are talking about.

If this what you wrote is true, what for is this option with items per page??? The controller - category.php says exacty about the limits per page which also configure pagination. The bootstrap says onyly how many columns and rows will be used to show the limited items. See this code below - it's loading the limit with the page so col-width doesn't metter of course if you don't set exactly height and overfolow:hide

Code: Select all

if (isset($this->request->get['limit'])) {
			$limit = (int)$this->request->get['limit'];
		} else {
			$limit = $this->config->get($this->config->get('config_theme') . '_product_limit');
		}

Then you have in template a loop:

Code: Select all

<?php foreach ($products as $product) { ?>

, and again in controller:

Code: Select all

$data['products'] = array();

			$filter_data = array(
				'filter_category_id' => $category_id,
				'filter_filter'      => $filter,
				'sort'               => $sort,
				'order'              => $order,
				'start'              => ($page - 1) * $limit,
				'limit'              => $limit
			);

For me it's simple if you change on front-end in the filter the limits items per page (standard is 15,25 and so on) the page should show you so many items as you have setted up in the limit and not so many as the columns width was setted up. Am I wrong??

Posted: **Tue Oct 24, 2017 7:06 am**

Well, we where talking about different things, you about the max-value of
products on a page, and I was explaining the amount of products per ROW!
Sorry about that.

But you could hardcode the Source, if your Mobile Whatever-it-is uses it's own
cat- and other pages, where such selections are used in the display selection dropdown,
to show whatever quantity you want to exist.
Sample Code of such a oc-default routine:

Code: Select all

<div class="limit"><b><?php echo $text_limit; ?></b>
<select onchange="location = this.value;">
<?php foreach ($limits as $limits) { ?>
<?php if ($limits['value'] == $limit) { ?>
<option value="<?php echo $limits['href']; ?>" selected="selected"><?php echo $limits['text']; ?></option>
<?php } else { ?>
<option value="<?php echo $limits['href']; ?>"><?php echo $limits['text']; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>

Good Luck!
Ernie

Posted: **Tue Oct 24, 2017 3:34 pm**

IP_CAM wrote: ↑
Tue Oct 24, 2017 7:06 am
Well, we where talking about different things, you about the max-value of
products on a page, and I was explaining the amount of products per ROW!

That's why I was so suprised what you were talking about

Correct me if I'm wrong - the code that you have posted check all limits which are in the array but how to select specific limit for specific resolution?

OpenCart Community

Prodcuts per page depending on window width

Prodcuts per page depending on window width

Re: Prodcuts per page depending on window width

Re: Prodcuts per page depending on window width

Re: Prodcuts per page depending on window width

Re: Prodcuts per page depending on window width

Re: Prodcuts per page depending on window width

Re: Prodcuts per page depending on window width