♥JcMagpie Posted August 14, 2018 Share Posted August 14, 2018 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 More sharing options...
vampirehunter Posted August 23, 2018 Share Posted August 23, 2018 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 More sharing options...
rule Posted August 23, 2018 Author Share Posted August 23, 2018 @vampirehunter Just follow Gary's instructions on the first page. They are sound. Link to comment Share on other sites More sharing options...
♥14steve14 Posted August 29, 2018 Share Posted August 29, 2018 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. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
Mikepo Posted August 29, 2018 Share Posted August 29, 2018 @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 More sharing options...
♥JcMagpie Posted August 29, 2018 Share Posted August 29, 2018 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. Link to comment Share on other sites More sharing options...
♥14steve14 Posted August 29, 2018 Share Posted August 29, 2018 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 More sharing options...
Hotclutch Posted August 29, 2018 Share Posted August 29, 2018 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. 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 More sharing options...
♥JcMagpie Posted August 29, 2018 Share Posted August 29, 2018 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 More sharing options...
Hotclutch Posted August 29, 2018 Share Posted August 29, 2018 ^^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 More sharing options...
♥JcMagpie Posted August 29, 2018 Share Posted August 29, 2018 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 Link to comment Share on other sites More sharing options...
Hotclutch Posted August 29, 2018 Share Posted August 29, 2018 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 More sharing options...
♥JcMagpie Posted August 29, 2018 Share Posted August 29, 2018 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 More sharing options...
♥Smoky Barnable Posted August 29, 2018 Share Posted August 29, 2018 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 More sharing options...
♥JcMagpie Posted August 29, 2018 Share Posted August 29, 2018 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 More sharing options...
♥JcMagpie Posted August 30, 2018 Share Posted August 30, 2018 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.) So you get, which is just what we were after, the challenge now is to make it work in osC! Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 30, 2018 Share Posted August 30, 2018 Well happy to say with a little code edit it works with osC CE, 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 30, 2018 Share Posted August 30, 2018 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 More sharing options...
rule Posted October 5, 2018 Author Share Posted October 5, 2018 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 More sharing options...
LeeFoster Posted August 5, 2019 Share Posted August 5, 2019 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. Did you ever get this to work? I'm trying to achieve similar. Link to comment Share on other sites More sharing options...
LeeFoster Posted August 5, 2019 Share Posted August 5, 2019 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. 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 More sharing options...
♥JcMagpie Posted August 5, 2019 Share Posted August 5, 2019 It should be as simple as picking right sort order and the right width. Link to comment Share on other sites More sharing options...
LeeFoster Posted August 5, 2019 Share Posted August 5, 2019 43 minutes ago, JcMagpie said: It should be as simple as picking right sort order and the right width. 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 More sharing options...
♥14steve14 Posted August 6, 2019 Share Posted August 6, 2019 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. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
LeeFoster Posted August 6, 2019 Share Posted August 6, 2019 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. No code changes? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.