Configuring 2 column checkout page

  • Posts: 216
  • Thank you received: 18
  • Hikashop Business
3 weeks 4 days ago #313288

I'm trying to get my head around the use of separators in the checkout workflow configuration. The client wants the cart summary in the right column and everything else in the left. While I can achieve this I can't see how to have the height of the items in the right column independent of the left. For example, if there are many products in the cart on the right, there is a lot of space under the payment section. Essentially what I have achieved is a grid layout when I wanted a column layout. Images below


Attachments:
Last edit: 3 weeks 4 days ago by rodfarrell.

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

  • Posts: 216
  • Thank you received: 18
  • Hikashop Business
3 weeks 3 days ago #313301

OK, I found a solution but I'm not sure is is a good coding solution. In css I set a max height of 300px for the cart and set overflow to visible. It works but feels a bit like a hack. Is there a better way?

Last edit: 3 weeks 3 days ago by rodfarrell.

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

  • Posts: 1113
  • Thank you received: 112
3 weeks 3 days ago #313304

Hi,

First i think you shouldn't use so many seperators in one step. Basically you want to add one seperator between left and right columns only. So in you case you should add seperator between your cart block and other blocks.

So what it does, it moves cart block to the right and other views to the left.

Now, adding max height to reduce the hight of the cart is good practise here. However you scrollbar on the right should be visible and some text showing how many items in cart should be somewhere near "cart summary" so if the user has 4 items and u set max height to show only 2, the user while looking to the cart will see scrollbar and how many items he has in the cart, will understand that he needs to use scrollbar to see other items. So UI/UX is good here.

Now, on mobile it is different story. You should get rid of the scrollbar because people intend to scroll to bottom on mobile and having another vertical scroll is not good practise from UI/UX. IHowever if user have like 20 items in cart the cart block could be to long...What you want is to make items display inline and add horizontal scroll or add some button where on click it will show hes cart...Where are other things which could be done for better UI/UX but it is long story tho...

Hope that helps a bit.

Regards

Last edit: 3 weeks 3 days ago by kyratn.

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

  • Posts: 216
  • Thank you received: 18
  • Hikashop Business
3 weeks 2 days ago #313332

What you are describing is what I was trying to achieve however having a single vertical seperator means all of the following elemeents get pushed to the right as well. The css I described only applies to screens over 990. You are correct that this would be a mess on a mobile otherwise.

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

  • Posts: 67676
  • Thank you received: 10046
  • MODERATOR
3 weeks 2 days ago #313339

Hi,

If you want to avoid having the rest of the elements after the cart view to the right side, you can add a horizontal separator betwee the cart view and the rest of the views.

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

  • Posts: 216
  • Thank you received: 18
  • Hikashop Business
3 weeks 2 days ago #313374

Thanks Nicolas, that's what I've done. The fixed height with overflow visible seems to be the best solution.

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

Time to create page: 0.086 seconds
Powered by Kunena Forum