Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Product Page Layout


Recommended Posts

11 minutes ago, 14steve14 said:

why doesn't someone creative enough get something set up

😊 With Bootstrap this is one area that custom code is actually needed. Without it we will have thousands of websites with stock layout on product info pages how boring.

With a little html5 you can make a nice custom product info page exactly as you want. Bootstrap is not always the answer its very limiting if you want to be creative. Its one the few times I'm happy to move from stock code.

 

Link to comment
Share on other sites

  • 2 weeks later...
  • Replies 87
  • Created
  • Last Reply
On 8/14/2018 at 5:26 PM, rulegacy said:

Just an update to say that we have managed to get the desired layout without any core code changes as suggested by @burt. So don't touch the core.

One thing we'd like to correct though is how price jumps under model in xs view. We do have both wrapped in p tags inside divs now.

hi, do you have example of it in action how it looks? or the code what you did to get it in that way.

 

 

Link to comment
Share on other sites

have been having a bit of a play with this on a new version of Frozen. I thought others may like to see the results. There have been no core file changes, and apart from a bit of padding in the button code nothing has been changed. The layout is created by using the method that Gary explained further up the thread. The product price will be played with later as I need to convert some code to make the layout different as I need to show customers the savings on the actual price and the buying price.

The description is under the image disclaimer, as will be the cross sell products, recently viewed and the reviews and what ever else will be tagged onto the end of the page. These may even be placed inside Garys 28 days of code tabs so will have to see what looks best.

 

new-site-layout.png

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

@14steve14 I'll have to try this myself, as last time I couldn't get it to work.  The modules (price, reviews gtin, etc) dropped below the image.  I'll try again.

osC CE live - developing osC Phoenix adding modules with no core changes(awesome and easy!)

Link to comment
Share on other sites

This is the quality of page layout I like to aim for or improve on. Simple clean layout without any fuss. No number gymnastics to play to achive, just available out of the box and easy to modify. Designed with the customer in mind.

 

image.thumb.png.36244e73bfedbd1838be8f71fc595617.png

 

Link to comment
Share on other sites

1 hour ago, Mikepo said:

@14steve14 I'll have to try this myself, as last time I couldn't get it to work.  The modules (price, reviews gtin, etc) dropped below the image.  I'll try again.

I did add the following into the user css file.

@media only screen and (min-width : 768px) {
  div.cm-pi-gallery {
    min-height: 600px;
  }
}

The 600 is the length that I did have to play around with a bit, and may need to again. I also think it helps having the description under the image and full width 12. It looked really silly otherwise.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

1 hour ago, JcMagpie said:

This is the quality of page layout I like to aim for or improve on. Simple clean layout without any fuss. No number gymnastics to play to achive, just available out of the box and easy to modify. Designed with the customer in mind.

 

image.thumb.png.36244e73bfedbd1838be8f71fc595617.png

The core code needs to be improved. Just like there is an option to have a 1/2/3 column layout overall, so there can be an option to have 1/2/3 columns on the product page. Then for each product_info module, there will be a configurable option of which column you want to insert the module into.

Link to comment
Share on other sites

I have also found that if you get a layout you like that works well on your PC for large screens, it tends not to work the same on small devices, even keeping the same order of display can be difficult if not imposable.

Must be  some way of defining what order it should display on other screens. 😊 not found it yet but will keep trying.

 

Link to comment
Share on other sites

^^Bootstrap has lots of utilities for this - even more so now with BS4. You can give us an example of what layout you mean, or if you mean the above layout, then how do you want it to look on a small screen?

Link to comment
Share on other sites

This is a test example in CE which is a nice clean layout in large screen. Just not able to keep order on small screen, Should be name, price, image,discription, add to cart. That would be fine. Even better would be name, price, image, add to cart ,discription. Need this without changing view on large screen. No matter what I do image falls below discription. The only way to make it work is to let image be on other side on large view. Clearly I'm missing something?

You can see it on https://www.justfastfood.com  test site

image.thumb.png.289a8f2e002406d5fef54eb5dc281ec3.png

 

Link to comment
Share on other sites

it's very difficult to plan layout this way with the way osCommerce is now. The reason the image falls below the description is because of the sort order you have set on the product_info modules, and everything goes into a single row. It's very limiting.

BS3 uses push pull classes which are now deprecated in BS4 where ordering is easier. I don't remember if you can do push/pull for different breakpoints eg. push-sm-*, but that's probably your only options. 

Link to comment
Share on other sites

Yes I think it's going to need code changes to use Push/Pull classes , it's the only way I have found so far to dictate how it's displayed on small screens. Will need to look into it a bit more.

😁 Was hoping I had missed some css tricks but no luck.

 

Link to comment
Share on other sites

I did something similar with product tabs on my test server, but I put the product description and image in the tab itself and the text wraps around the image for small screen.

The water in a vessel is sparkling; the water in the sea is dark. The small truth has words which are clear; the great truth has great silence.

- Rabindranath Tagore

Link to comment
Share on other sites

You are right Eric, it will work if the image and discription are in the same container, but that again limits your layout. I'll look a bit more and see if I can control the order in the code.

Just needs a bit more work 😊 the push pull may work or the css may still be an option using Flexbox  not sure just need to play with it more.

@media (max-width: 768px) {
  .row {
    display: flex;
    flex-direction: column;
  }
  .top {
    order: 2;
  }
  .bottom {
    order: 1;
  }
}

 

Link to comment
Share on other sites

Well the css "order" will work and control how the order is shown on a mobile screen. Have only tested it in pure html at the moment, simple layout in pc, keeping order as product, price, image, discription on mobile. ( yes the layout is not perfect but just testing the code for now.)

image.thumb.png.b92e770bb78fbbe3eedaff729be88595.png

So you get, which is just what we were after, the challenge now is to make it work in osC!

image.png.1a4b99b2a9bb225e635ef302b310a1ca.png

 

Link to comment
Share on other sites

Well happy to say with a little code edit it works with osC CE,

image.thumb.png.a97ca2fc7ba0b9938125107a2e65d56f.png

Shows as this on mobile, the discription is as required below image. Needed to rap the modules, discription and gallery

in another <div class="col-sm-8 bottom">  and <div class="col-sm-4 top"> to get it to work, I know this is a hack but it works. Will need more work to make it work with the moduler product info page. Oh and yes it's doing something strange to the image on the large screen!  much smaller than it should be! not sure why yet.

image.png.84a88488c3ef036748ffd4c1a4bdf278.png

 

Link to comment
Share on other sites

23 minutes ago, JcMagpie said:

Oh and yes it's doing something strange to the image on the large screen!  much smaller than it should be! not sure why yet.

Image fixed by removing sort class from gallery.php, was not required as sort in discription only gives required results.

 

Link to comment
Share on other sites

  • 1 month later...

Somewhat off topic but will ask here not to create another thread.

On iPad (regular, not Pro) viewport the search box slides beneath the logo. How could we keep the search box next to the logo in this particular case without affecting all the other viewports?

Link to comment
Share on other sites

  • 10 months later...
On 8/8/2018 at 4:15 PM, rule said:

We would like to set up the shown layout in Frozen on desktop. Having tried multiple variations of sort order and width for the respective modules, we are yet to achieve our goal. Either modules refuse to be positioned next to each other or run under gallery. Is this possible with stock means or do we want to employ styling as well? Any insight would be greatly appreciated.

layout.png

Did you ever get this to work? I'm trying to achieve similar.

Link to comment
Share on other sites

On 8/29/2018 at 9:41 AM, 14steve14 said:

have been having a bit of a play with this on a new version of Frozen. I thought others may like to see the results. There have been no core file changes, and apart from a bit of padding in the button code nothing has been changed. The layout is created by using the method that Gary explained further up the thread. The product price will be played with later as I need to convert some code to make the layout different as I need to show customers the savings on the actual price and the buying price.

The description is under the image disclaimer, as will be the cross sell products, recently viewed and the reviews and what ever else will be tagged onto the end of the page. These may even be placed inside Garys 28 days of code tabs so will have to see what looks best.

 

new-site-layout.png

What changes did you have to make to achieve this? I've got the below module and trying to get it under the price and add to cart button.

https://apps.oscommerce.com/ZxuJW&jcm-product-info-share-or-contact-v1-3

Link to comment
Share on other sites

43 minutes ago, JcMagpie said:

It should be as simple as picking right sort order and the right width.

image.thumb.png.ee5e38eb4701baa5e70947b5022f7b47.png

It will do that for the most part but I want the gallery on the left and because of the size everything else gets pushed below it.

Link to comment
Share on other sites

12 hours ago, LeeFoster said:

What changes did you have to make to achieve this? I've got the below module and trying to get it under the price and add to cart button.

https://apps.oscommerce.com/ZxuJW&jcm-product-info-share-or-contact-v1-3

Lee, it was just a case of playing with the sort orders and the widths as explained in the original post.  The gallery was set to 6 and everything else was either 3 or 6 apart from the product name that was still 12. Here is an image of the settings from admin.

admin-product-info.png

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

21 minutes ago, 14steve14 said:

Lee, it was just a case of playing with the sort orders and the widths as explained in the original post.  The gallery was set to 6 and everything else was either 3 or 6 apart from the product name that was still 12. Here is an image of the settings from admin.

admin-product-info.png

No code changes?

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...