Product listing in 2 colums on mobile/reponsive view

Oh, we posted the same time.

Ok, I can use the overwrite section.
Nice and easy.
Works like a charme.

Well, I was thinking "Why can't the module respect the column value being set in the module - and avoid defaulting to 1 column if not set to 1?".

Mhhh...thinking about it...then we would have to create a module for desktop and mobile, which makes sense (e.g. load less products). You probably want people to use 1 module out of the box with default 1 column for mobile.

With 375px width, there would be enough space for 2 cards and image width 150px.

Added changes with backend Display > View to be save with updates!

Would it make sense, to offer an extra option "breakpoint for 1 column layout"?

Right now Hikashop has a hardcoded breakpoint 768px.
Below 768px, module product list will default to 1 column.

I have made the changes described only to the carousel view right now.
This will create a 2 column layout >375px with carousel enabled.

dektop > 1366px = 5 column
tablet > 1024px = 4 column
mobile > 375px = 2 column

With a breakpoint Option I could go ahead and have < 375px = 1 column or 0px = 1 column.
The default could still be 768px when first installed.

It would be like a switch in case you don't want the default 768px breakpoint and you don't want to hack the core (which I will do for now).

I will test some more, but I will probably keep the 2 column layout.
The initial idea arrived from this eShop: www.zalando.de/herrenbekleidung/

Hello,

yes, I am using a pagebuilder. I can disable sections based on the viewport. They offer disable with Desktop, Tablet and Phone, but might add Lanscpae/Portrait at some point, since they are also using those viewports with main settings.

The 2 column layout with phone works with little hacks.
Right now I would create a module per viewport I want to use.

However, maybe add this with module in the future:

Default > columns count > thumb image with height > badge percentage > item responsive or fixed width
Laptop > columns count > thumb image with height > badge percentage > item responsive or fixed width
Tablet-Landscape > columns count > thumb image with height > badge percentage > item responsive or fixed width
Tablet-Portrait > columns count > thumb image with height > badge percentage > item responsive or fixed width
Phone-Landscape > columns count > thumb image with height > badge percentage > item responsive or fixed width
Phone-Portrait > columns count > thumb image with height > badge percentage > item responsive or fixed width

I would need only one module for all viewports.

Well, it turned out very well.
For anybody interested in 2 col layout with mobile...

I have one module (carousel enabled!) with image size 260x364px (biggest possible image with list output).

Page Container max-width 1366px.
Original image size 600x840px

For golden ratio take into account, that there will be data and buttons below the product image.
Therefore the size I have chosen should do fine.

With Display > View > YourTemplateName > product > carousel.php

	$slideByFor2 = $this->params->get('one_by_one') ? 1 : 2;
	$slideByFor3 = $this->params->get('one_by_one') ? 1 : 3;
	if($options['dots']) {
		$options['responsive'] = '{0:{items:2, slideBy:2, dotsEach: 1}, 420:{items:3, slideBy:'.$slideByFor3.', dotsEach: '.$slideByFor3.'}, 768:{items:'.$products.', dotsEach: '.$products.'}}';
	} else {
		$options['responsive'] = '{0:{items:2, slideBy:2}, 420:{items:3, slideBy:'.$slideByFor3.'}, 768:{items:'.$products.'}}';
	}

/* <><><><><><><><><><><><><><><><><><><><><><><><><>
DO NOT TOUCH CODE BELOW
hikashop - module product list
<><><><><><><><><><><><><><><><><><><><><><><><><> */

/* hikashop - module product list - image responsive */
.hikashop_module .hikashop_product_image,
.hikashop_module .hikashop_product_image_subdiv {
	width: 100% !important;
	height: auto !important;
}

/* <><><><><><><><><><><><><><><><><><><><><><><><><>
DO NOT TOUCH CODE BELOW
hikashop - module product list
<><><><><><><><><><><><><><><><><><><><><><><><><> */

/* hikashop - module product list - badge responsive */
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_topleft_div img,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_topright_div img,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_bottomleft_div img,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_bottomright_div img {
	width: 100% !important;
	height: auto !important;
}

/* hikashop - module product list - badge responsive */
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_topleft_div,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_topright_div,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_bottomleft_div,
.hikashop_module .hikashop_product_image_subdiv .hikashop_badge_bottomright_div {
	width: 20% !important; /* whatever value is set with module */
	height: auto !important;
}