Jump to content
Latest News: (loading..)

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.


 

Share this post


Link to post
Share on other sites
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.

 

 

Share this post


Link to post
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

Edited by 14steve14
Added more info.

REMEMBER BACKUP, BACKUP AND BACKUP

Before installing the official version of oscommerce first look at a responsive version here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
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 BS gold live - osC CE in development (awesome)

Share this post


Link to post
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


 

Share this post


Link to post
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

Before installing the official version of oscommerce first look at a responsive version here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
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.

Share this post


Link to post
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.


 

Share this post


Link to post
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?

Share this post


Link to post
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

Edited by JcMagpie

 

Share this post


Link to post
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. 

Share this post


Link to post
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.

Edited by JcMagpie

 

Share this post


Link to post
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

Share this post


Link to post
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;
  }
}

 

Share this post


Link to post
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


 

Share this post


Link to post
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

Edited by JcMagpie

 

Share this post


Link to post
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.


 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×