Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Product Page Layout


Recommended Posts

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.

 

Link to comment
Share on other sites

  • Replies 87
  • Created
  • Last Reply

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.

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

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 

image.png.e4ab845b9793f80039256f7884879bc8.png

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

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

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.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...