Product Page Layout

[♥JcMagpie 1,418]

9 hours ago, LeeFoster said:

I want the gallery on the left and because of the size everything else gets pushed below it.

Just set gal to 6 wide and anything that needs to sit next to it has to be 6 or less in width. Just remember any row can only be 12 wide so if an item is 12 wide it can not sit next to any other item. You can have any number of items next to each other as long as the all add up to no more than 12.

Maintaining this layout on all screen sizes is simply not posiable as Bootstrap will reoder based on screen size. You will need to add much more css to maintain any layout over diferent screen sizes.

[LeeFoster 107]

I have set as below 

Name = 10 & 12

Gallery = 20 & 6

Price = 30 & 6

Buy button = 40 & 6

Share buttons = 50 & 6

Tabbed description = 60 & 12 

This is how it looks 

[♥BrockleyJohn 237]

An issue you might get,  depending on the screen width is if the description runs out longer than the images you can get a gap underneath the gallery.

There is not a way to get the description to start to the right of the image and then wrap underneath it without code changes/replacement modules.

[CommerceMania 0]

Keep it simple and clean. 

Make the buy button/text visible.

Use high quality images.

And the OP layout looks decent!

 

[♥BrockleyJohn 237]

11 minutes ago, LeeFoster said:

I have set as below 

Name = 10 & 12

Gallery = 20 & 6

Price = 30 & 6

Buy button = 40 & 6

Share buttons = 50 & 6

Tabbed description = 60 & 12 

This is how it looks 

There are a couple of things that could force those 6-widths down: styling making something wider than it should be, and left/right floats

[LeeFoster 107]

No matter what I put next to the gallery it defaults to the same height as the gallery

[♥JcMagpie 1,418]

Just tested on Phoenix 1.0.1.2 and out of the box I'm not abe to produce what you need. I would suspect that some aditional css changes are required.

[♥14steve14 491]

50 minutes ago, LeeFoster said:

No code changes?

The only code changed was mentioned in the original thread you found. It was CSS added to the user.css file to control the length of the image placeholder. I did also add some padding to the buy now button as I wanted to make that intl a module which would have had padding in it but that has been done now in the latest version.

I am about to try the same thing on the latest Phoenix version so it will be interesting to see if it still works.

[LeeFoster 107]

13 minutes ago, JcMagpie said:

Just tested on Phoenix 1.0.1.2 and out of the box I'm not abe to produce what you need. I would suspect that some aditional css changes are required.

I'm on Edge bs4 and I suspect the same. Just don't want to hard code css changes and break it in mobile view.

[♥14steve14 491]

10 minutes ago, LeeFoster said:

I'm on Edge bs4 and I suspect the same. Just don't want to hard code css changes and break it in mobile view.

You are right. I have just tried and regardless of what I try  I cannot replicate the layout I had in Frozen. Something somewhere must have changed. I have had a quick look through the module files and the template files and they look very much the same. . I will have to dig deeper.

[LeeFoster 107]

1 minute ago, 14steve14 said:

You are right. I have just tried and regardless of what I try  I cannot replicate the layout I had in Frozen. Something somewhere must have changed. I have had a quick look through the module files and the template files and they look very much the same. . I will have to dig deeper.

Thanks it's much appreciated. 

[♥14steve14 491]

7 minutes ago, LeeFoster said:

Thanks it's much appreciated. 

It may be worth contacting Gary and see what he says as it was his suggestion last time that it should just work. He may know what is different.

[LeeFoster 107]

2 minutes ago, 14steve14 said:

It may be worth contacting Gary and see what he says as it was his suggestion last time that it should just work. He may know what is different.

@burt Can you offer any insight please?

[burt 3,793]

BSv4 uses Flexbox and does not have a "masonry" style capability at the moment.

This approach that can be used in BSv3 cannot be used in BSv4.

[LeeFoster 107]

4 minutes ago, burt said:

BSv4 uses Flexbox and does not have a "masonry" style capability at the moment.

This approach that can be used in BSv3 cannot be used in BSv4.

Thanks @burt

[♥14steve14 491]

Thats a shame.

Had a quick look here and it went straight over my head.

https://www.w3schools.com/bootstrap4/bootstrap_flex.asp

[burt 3,793]

You'll notice none of those examples show an output like the image posted earlier.  They are all in standard rows.

[LeeFoster 107]

20 minutes ago, burt said:

You'll notice none of those examples show an output like the image posted earlier.  They are all in standard rows.

What;s the best way to achieve it then? Or is it a case of it cant?

[burt 3,793]

4 minutes ago, LeeFoster said:

What;s the best way to achieve it then? Or is it a case of it cant?

Idea:

Chop up the product_info page and make modules installable per chopped section. 

Like the navbar is done (home, left, right).   

That adds in different problems but may be a solution that works.  Would take some hardcore coding though.

 

[LeeFoster 107]

4 minutes ago, burt said:

Idea:

Chop up the product_info page and make modules installable per chopped section. 

Like the navbar is done (home, left, right).   

That adds in different problems but may be a solution that works.  Would take some hardcore coding though.

 

So a Left, Right, Top, Bottom. May be a lot more work then I'm wanting to do on this at the moment.

Could it not be done easier with card-columns?

Edited August 6 by LeeFoster

[burt 3,793]

Just now, LeeFoster said:

So a Left, Right, Top, Bottom. May be a lot more work then I'm wanting to do on this at the moment.

You've already seen the problem.  

What if someone else wants;

Top
Left Right
Left Middle Right
Left
Bottom

And then someone else wants

Left Right
Full
Full
Left RIght
Full

Put simply;

• The overall controlling module would need to be able to be changed to any layout needed. 
• Then the modules would need to dynamically pick up available slots.

Good Luck with that!

[LeeFoster 107]

2 minutes ago, burt said:

You've already seen the problem.  

What if someone else wants;

Top
Left Right
Left Middle Right
Left
Bottom

And then someone else wants

Left Right
Full
Full
Left RIght
Full

Put simply;

• The overall controlling module would need to be able to be changed to any layout needed. 
• Then the modules would need to dynamically pick up available slots.

Good Luck with that!

Yeah that's a bit beyond me

Edited August 6 by LeeFoster

[♥JcMagpie 1,418]

1 hour ago, LeeFoster said:

Yeah that's a bit beyond me

It all depends on what you are trying to do. If you are just looking to fix one layout get it right and then never wanting to mess with it  then the solution is very easy.

Decide on the key layout you wish to fix, ie top line then one left and one right. Hardcode that into your product info page, then any othe stuff can be added as normal below that.

You are basicly trying to do fixed yet responsive layout for part of your page which can be done with BS4.

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-fixed-layout.php

If your going be chainging the product info layout every week, month, year..... then you have more work to do.

Question gets even more intresting if you wish to have a diferent layout per product type!

Edited August 6 by JcMagpie

[LeeFoster 107]

7 minutes ago, JcMagpie said:

Question gets even more intresting if you wish to have a diferent layout per product type!

What do you mean?

[♥JcMagpie 1,418]

Well a simple product like a M5 screw costing 1p may only need a simple basic layout. A complex power tool costing a few £k may need a far more complacated layout. The one size fits all is not allways the best sollution but that's another discussion not relavent to your question.