Jump to content

Recommended Posts

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:  

product-frozen.jpg.a87990fda6dda0b99079b76d02d53371.jpg

The places where a product shows (in a list) is (linked to Frozen so that you can see the differences);

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

Share this post


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

1C2B26FD-A3F2-4224-8957-A4EE31BAA123.png

AEFED333-5511-490D-A2F0-4B8D90F86418.png

Share this post


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


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

I gave up on trying to implement the jQuery Slim build, due to it not working with colorbox.

Would have meant either;

  1. recoding colorbox
  2. 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.

 

 


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

@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...:thumbsup:

Edited by radhavallabh

Share this post


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

Share this post


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

Edited by burt

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


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


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

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 ?

 


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.
Edited by burt

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

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/


Get the latest Responsive osCommerce CE (community edition) here .

(Live   : OsC 2.2, php 5.4 & UTF-8  |  Local : OsC 234BS php7.2 Edge for future shop)

Share this post


Link to post
Share on other sites

Parameters for choosing how many cards per row...across viewports

ppppppp.jpg.942febda0b00ec3eedef1ea1fdc097ce.jpg


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


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


 

 

Share this post


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


 

 

Share this post


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

Share this post


Link to post
Share on other sites

@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.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


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


Get the latest Responsive osCommerce CE (community edition) here .

(Live   : OsC 2.2, php 5.4 & UTF-8  |  Local : OsC 234BS php7.2 Edge for future shop)

Share this post


Link to post
Share on other sites

@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

Get the latest Responsive osCommerce CE (community edition) here

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

Share this post


Link to post
Share on other sites

I can't see anyone liking cards less, but I suppose there's always one... :wink:


For a new install or if your store isn't mobile-friendly, get the community-supported responsive osCommerce (2.3.4.1 CE) here: https://github.com/gburton/Responsive-osCommerce/archive/2341-Frozen.zip

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

Share this post


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


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites
1 hour ago, BrockleyJohn said:

I can't see anyone liking cards less, but I suppose there's always one... :wink:

Try coding them.  PITA.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


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

Get the latest Responsive osCommerce CE (community edition) here

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

Share this post


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

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

×