Product listing in 2 colums on mobile/reponsive view

  • Posts: 52
  • Thank you received: 4
3 years 11 months ago #331210

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.

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

  • Posts: 52
  • Thank you received: 4
3 years 11 months ago #331237

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/

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

  • Posts: 4816
  • Thank you received: 654
  • MODERATOR
3 years 11 months ago #331232

Hello,

Okay this time we get your point, basically your way to proceed is to have 1 module for mobile, and 1 module for classic (width) screen.
This way to proceed isn't possible without using a page builder or other tool plugin, but you can have different display by using the @media command.

For the carousel just using some css isn't possible that's why the override is required, but for classic module just some Css can allow you to have different display from mobile to classic screen, and especially on width elements.
Let's detail this :
1. First, see this documentation about the @media command.
2. Have a look on this forum subject
=> Example : (pseudo code)

@media only screen and (max-width: 600px) {
  .classic_listing_module .item_container {
    width: 50%;
  }
}
With this code, you will have your listing module (or item menu) will automatically switch for 2 columuns (2 item per row module) WHEN the screen will be smaller than 600 pixel.

Hope this will fit your needs and be more clear about your possible solutions
Regards

Last edit: 3 years 11 months ago by Philip.

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

  • Posts: 52
  • Thank you received: 4
3 years 11 months ago #331269

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.

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

  • Posts: 52
  • Thank you received: 4
3 years 11 months ago #331278

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.'}}';
	}

And CSS for responsive product image and badges:
/* <><><><><><><><><><><><><><><><><><><><><><><><><>
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;
}

This will show:

Phone-Portrait: 2 col
Phone-Landscape: 3 col
Tablet: 5 col
Dektop: 5 col

Happy.

Last edit: 3 years 11 months ago by knuffiwuffi.

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

Time to create page: 0.064 seconds
Powered by Kunena Forum