Bobber Posted June 17, 2018 Share Posted June 17, 2018 On 6/13/2018 at 2:35 AM, burt said: Todays task is to try to make all the places where a product shows (in a list) look the same. I settled on this look: The places where a product shows (in a list) is (linked to Frozen so that you can see the differences); http://template.me.uk/234bs3/index.php - new products for month http://template.me.uk/234bs3/index.php?cPath=1 - new products for month http://template.me.uk/234bs3/index.php?cPath=1_4 - product list in category http://template.me.uk/234bs3/specials.php http://template.me.uk/234bs3/products_new.php http://template.me.uk/234bs3/advanced_search_result.php?keywords=matrox You can see that in Edge/Frozen the lists look broadly similar. I want them all to look exact the same in Frozen2BS4 @burt Plans to add this formatting to the "You Might Also Like..." Section too? http://template.me.uk/frozen2bs4/product_info.php?products_id=28 Link to comment Share on other sites More sharing options...
Bobber Posted June 17, 2018 Share Posted June 17, 2018 54 minutes ago, Bobber said: Huge improvement visually... Well Done @burt!!! Displays a little oddly on my mobile and responsive when testing... easy fix. Moving Forward the Right Way @burt Link to comment Share on other sites More sharing options...
burt Posted June 18, 2018 Author Share Posted June 18, 2018 14 hours ago, Bobber said: Your BS4 version is looking good bud! Do you have this available in https://github.com/gburton yet? Are there projects / items I or others in the community can help with @burt??? I don't expect this will be a publicly available thing; its a showcase of what the Responsive could (and should) have been had we got as far as Final. It will be available to some shopowners if they want it, but that will only be the handful of shopowners who are the diehard supporters of my efforts. Put simply; this is made to flatten my bsv4 learning curve. Link to comment Share on other sites More sharing options...
burt Posted June 19, 2018 Author Share Posted June 19, 2018 I gave up on trying to implement the jQuery Slim build, due to it not working with colorbox. Would have meant either; recoding colorbox removing colorbox in favour of something else similar that does work slim Slim saves a grand total of 6kb which is "not a lot". And as this mini project is for my benefit only, no need to use up more of my time on it. Thanks to all for testing. This mini project has allowed me to better understand the new features in BSv4, ready for the next major project. Link to comment Share on other sites More sharing options...
radhavallabh Posted June 19, 2018 Share Posted June 19, 2018 @burt I really admire the hard work you have put into the awesome project !!!! Cheers! Mini is way beyond awesome...Cant wait to see what the major will hold in future... Link to comment Share on other sites More sharing options...
puddlec Posted June 19, 2018 Share Posted June 19, 2018 On 6/14/2018 at 5:47 PM, burt said: This is hopefully solved. Better, still some screen sizes it will cut some of the text off, just an idea, on the product page you got the special price in red, but not in any of the product boxea same on the product page (well the Samsung Galaxy Tab at least), the right hand menu will cover over the last digit. also just a question is the link to the reviews meant to be that far away from the actual reviews, e.g. you have the you may also like boxes, and then modal etc info, then the review Phoenix support now at https://phoenixcart.org/forum/ App created for phoenixTinyMCE editor for admin Link to comment Share on other sites More sharing options...
burt Posted June 19, 2018 Author Share Posted June 19, 2018 7 hours ago, puddlec said: also just a question is the link to the reviews meant to be that far away from the actual reviews, e.g. you have the you may also like boxes, and then modal etc info, then the review It (product page) is fully modular so can do as wanted regards layout. Link to comment Share on other sites More sharing options...
burt Posted June 19, 2018 Author Share Posted June 19, 2018 On 6/16/2018 at 12:14 PM, wHiTeHaT said: A presentation of the products in bs4 is best when use the card component. Bs4 has build-in flex utilities. The whole of bsv4 is using flexbox. I found cards quite difficult to get a handle on. I wasn't able to easily make them responsive, eg; XS: 1 (in a row) SM: 2 MD: 3 LG and XL: 4 I did get that working (hard coded), but it seemed like a "hack" to have to do. I will try to get that "hacked" code into a Module for the index page -> new products and clean it up a bit. Link to comment Share on other sites More sharing options...
burt Posted June 20, 2018 Author Share Posted June 20, 2018 Front page of http://template.me.uk/frozen2bs4/ now has a second "New Products for <month>" using the CARD system. To better show (one of the) differences between using the CARD system and usual COL system, I have increased the size of the image of the Galaxy Tab. You can plainly see 1 major difference; CARD: all boxes expand to the height of the tallest box COL: boxes are set at their own individual height To my eye, I prefer that boxes are their own height. What do you guys think? The same "equal height" effect can be achieved in the COL system in a different way, easily enough. I do not see any advantage to using CARD over COL... Code (in each Template) Size: CARD: 54 lines COL: 39 lines The CARD system requires more code to achieve little of benefit. Are there benefits (other than equal height) that I am not aware of ? Link to comment Share on other sites More sharing options...
Zzyzx1234 Posted June 20, 2018 Share Posted June 20, 2018 I prefer card, seems much more even and flows better. Would need to have all the product names aligned at the bottom and the pictures centered to keep it aesthetically pleasing though. Link to comment Share on other sites More sharing options...
burt Posted June 20, 2018 Author Share Posted June 20, 2018 Changed the CARD layout to make a better use of headers and footers. Now it looks better, to my eye. Another plus point for Cards; much easier for shopowner to decide how many products per row across different viewports. 2 for SM, 3 for MD, 4 for LG etc. All done in the Module now. Link to comment Share on other sites More sharing options...
bonbec Posted June 20, 2018 Share Posted June 20, 2018 Hello Burt, As timray, I prefer card. I don't know if you can insert a panel in a card. With bsv3, I use panel for my new website in construction, see in the the index page "Les dernières nouveautés" : http://www.araproduction.fr/234BS/ with OsC 2.2 since 2006 ... Link to comment Share on other sites More sharing options...
burt Posted June 20, 2018 Author Share Posted June 20, 2018 Parameters for choosing how many cards per row...across viewports Link to comment Share on other sites More sharing options...
Stephan Gebbers Posted June 20, 2018 Share Posted June 20, 2018 12 minutes ago, burt said: Changed the CARD layout to make a better use of headers and footers. Now it looks better, to my eye. Another plus point for Cards; much easier for shopowner to decide how many products per row across different viewports. 2 for SM, 3 for MD, 4 for LG etc. All done in the Module now. looks nice! but maybe the title space could line up with the other ones in a row? Link to comment Share on other sites More sharing options...
Stephan Gebbers Posted June 20, 2018 Share Posted June 20, 2018 14 minutes ago, bonbec said: Hello Burt, As timray, I prefer card. I don't know if you can insert a panel in a card. With bsv3, I use panel for my new website in construction, see in the the index page "Les dernières nouveautés" : http://www.araproduction.fr/234BS/ looks realy good! do you want to share what you did to make it look like that? Link to comment Share on other sites More sharing options...
Zzyzx1234 Posted June 20, 2018 Share Posted June 20, 2018 22 minutes ago, burt said: Changed the CARD layout to make a better use of headers and footers. Now it looks better, to my eye. Another plus point for Cards; much easier for shopowner to decide how many products per row across different viewports. 2 for SM, 3 for MD, 4 for LG etc. All done in the Module now. That does look much better, is it possible to center images vertically in the box? Just wondering how it would look. Link to comment Share on other sites More sharing options...
burt Posted June 20, 2018 Author Share Posted June 20, 2018 @timray @Stephan Gebbers It's possible to do whatever is required. But as this is a test project ... it is not likely to happen that I spend my time making tweaks. Link to comment Share on other sites More sharing options...
Zzyzx1234 Posted June 20, 2018 Share Posted June 20, 2018 4 minutes ago, burt said: @timray @Stephan Gebbers It's possible to do whatever is required. But as this is a test project ... it is not likely to happen that I spend my time making tweaks. Thats fair enough Link to comment Share on other sites More sharing options...
bonbec Posted June 20, 2018 Share Posted June 20, 2018 58 minutes ago, Stephan Gebbers said: looks realy good! do you want to share what you did to make it look like that? Yes Stephan, but in another thread to not interfere with the excellent work of Burt. with OsC 2.2 since 2006 ... Link to comment Share on other sites More sharing options...
♥14steve14 Posted June 20, 2018 Share Posted June 20, 2018 @burt Gary. I prefer the look of the cards. It looks so much better. Just a small thought. Is there a way to adjust the image size so that all images are shown the same size, or is that something that may be too difficult. May be something to look into lots later but could it be done when uploading an image to a product to create a small and large size image, then the problem would not arise. It would mean that all images need to start the same size and shape I suppose. Like I said, something for the future. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
BrockleyJohn Posted June 20, 2018 Share Posted June 20, 2018 I can't see anyone liking cards less, but I suppose there's always one... 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 More sharing options...
burt Posted June 20, 2018 Author Share Posted June 20, 2018 1 hour ago, 14steve14 said: @burt Gary. I prefer the look of the cards. It looks so much better. Just a small thought. Is there a way to adjust the image size so that all images are shown the same size, or is that something that may be too difficult. May be something to look into lots later but could it be done when uploading an image to a product to create a small and large size image, then the problem would not arise. It would mean that all images need to start the same size and shape I suppose. Like I said, something for the future. Yes...in the example (to make the galaxy image larger) I just removed the two parameters in the tep_image call; SMALL_IMAGE_WIDTH & SMALL_IMAGE_HEIGHT. Replacing those makes the images all the same size. Link to comment Share on other sites More sharing options...
burt Posted June 20, 2018 Author Share Posted June 20, 2018 1 hour ago, BrockleyJohn said: I can't see anyone liking cards less, but I suppose there's always one... Try coding them. PITA. Link to comment Share on other sites More sharing options...
♥14steve14 Posted June 20, 2018 Share Posted June 20, 2018 32 minutes ago, burt said: Yes...in the example (to make the galaxy image larger) I just removed the two parameters in the tep_image call; SMALL_IMAGE_WIDTH & SMALL_IMAGE_HEIGHT. Replacing those makes the images all the same size. What I meant was is there a way of making all the images the same size if they are uploaded to the store in different sizes. I make all my images the right size so both large and small images are consistent, but I do know others don't do this. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
Dan Cole Posted June 20, 2018 Share Posted June 20, 2018 2 hours ago, 14steve14 said: What I meant was is there a way of making all the images the same size if they are uploaded to the store in different sizes. I make all my images the right size so both large and small images are consistent, but I do know others don't do this. Steve...won't the KISS thumbnail add-on that Rainer supports do that for you? Dan Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.