Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Responsive osCommerce - Bootstrap


Recommended Posts

I haven't looked at the latest version so these changes may be in, but just in case they are not:

 

1 - In languages/create_account_success.php, priviledges shoul be privileges.

 

2 - In languages/shopping_cart.php has "dont exist: and "immediate deliver in"

 

3 - In includes/aaplication_top.php after the error_reporting line,  ini_set('display_errors','0'); should be added. No having it is a potential security problem and it prevents the site from showing the errors, which can upset customers.

 

4 - In modules/product_listing, there are nine possible items to display, like model and image, but only four variables that control whether they are displayed or not.

Support Links:

For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc.

Get the latest versions of my addons

Recommended SEO Addons

Link to comment
Share on other sites

  • Replies 2.2k
  • Created
  • Last Reply

"Holey" grid appearance:

Use images of the same height, this is best practice for Responsive.
Install the equal-height HT module.

 

(@@dan_Cole too) This is using the stock page template.me.uk/234bs3/ setup (and sample store data), not my own. If "equal height" is the cure, I think you should build equal-height into the core, then, because this "holey" grid is an awful advertisement for osC! Besides, I see cases such as attachment 1 (newproductsgrid.jpg) where the grid misalignment is clearly caused by two lines of text (product title) rather than one. I also marked where the Buy Now button is overlapping the hover border around the cell.
 
Grid view wasted space left and right, and only two columns on 980 wide:

What you see is not what the next person sees. Screenshots are required.

 

I'm not seeing it now. If I can get this to happen consistently, I'll attach a screenshot.
 
Menu icons unlabeled and no tooltips:

No. Think about it more deeply and you should be able to come up with a good reason why they do not have them.

 

OK, a tooltip might be hidden by my fat fingertip. Is that it? I still would have no idea what any of those symbols mean. Are unlabeled graphic buttons the norm and accepted by all phone users?

 

Specials page at 1024W x 768H, the Buy Now buttons partly cover the sale price:

Screenshot required.

 

Second attachment (specials.jpg). See also misplacement of Buy Now button in newproductsgrid.jpg.

Index page offer View choice Grid/List:

index is due to go modular soon, but having this as a list/grid is overkill.

 

Appearance and consistency. Appearance and consistency. Appearance and consistency...

 

What's New etc. info boxes in list format if main content is list and single column:

You can force this easily enough.

 

Can this be in the documentation? It would really make a single column format look a lot nicer to have consistent formatting. Instructions on how to eliminate unwanted boxes or collapse less important ones (by owner-selected default) in single-column mode I'm sure would be appreciated by the vast majority of potential store owners.

 

One thing you need to keep in mind is that a sample store (such as your template.me.uk) is an advertisement for the product. If it looks awful (or too lacking in capability) because you need to add a bunch of add-ons, or manually turn on some modules, that will lose a lot of potential osC users right then and there. If you want to be fanatical about shipping a minimal installation, I suggest doing the demo stores with a few add-ons/switch-ons to look good, and clearly state that you've done so in the installation instructions or distribution page. Think about this: do auto makers show off their base models with a 3-speed stick, no hubcaps, no trim, no AC, AM radio? Of course not -- there's always an "Optional Equipment Shown" message! They want to upsell you and make more profit than the base.

 

(Sorry about the delay replying, but my cable modem went out last night (right about SB50 kickoff) and the power was off quite a while today.)

post-91717-0-70129300-1454975930_thumb.jpg

post-91717-0-08257600-1454975946_thumb.jpg

Link to comment
Share on other sites

Too many cells shown, especially in single column:

Nice idea. Anybody?

 

Maybe limit it to three rows (1 column for a phone). I'm not sure that even on a full size display that visitors want to scroll down to see 7 or more rows, but this might be configurable, since every shop owner will have their own idea of what's good. Perhaps the maximum number of cells  (rows x cols) can be sent initially, and then based on what Responsive chooses to show, the number of cells per page can be sent back with the request for the next page (including the starting point, which could overlap what was previously sent). For example, out of 28 products, 5 rows of 3 initially are sent on the index page, as you have no idea how it's going to be formatted. It's on a phone, so 4 through 15 are suppressed, and pagination (don't forget to update the pagination: initially 1 of 2 pages, update to 1 of 10) goes back with starting point 4 (not 21) and per-page 3. Try to pick an initial number of cells that completely fills rows (e.g., 20 is bad if 3 columns is the maximum, as the last row is incomplete).

 

An alternative is to provide one "Show X more items" button (say, on cell 4), and toggle it off with "Don't show X more items" on cells 4 and 15.

 

Payment methods box too narrow on 1024x768 to fit PayPal logo:

Screenshot..

 

Attached image (paypal.jpg)

 

Documentation, cookbook for customization, how to template:

Sure, waiting on someone to write it.
 
A (so called) "template" should not change hardly any core code. 1 or 2 lines of code maximum.

 

I'll be happy to help out with the wordsmithing and editing/polishing, if someone who really knows the innards can provide the basic technical details. A lot of authors know what they would like to say in such documentation, but freeze up when it actually comes time to putting ink on paper.
 

post-91717-0-19023500-1454978502_thumb.jpg

Link to comment
Share on other sites

Regarding the 3 rows on mobile XS view.

Changing MAX_DISPLAY_SEARCH_RESULTS to 3 in the follwing piece of code does that.

 $listing_split = new splitPageResults($listing_sql, MAX_DISPLAY_SEARCH_RESULTS, 'p.products_id');

A simple "if else" would have been cool but ...how can you read out someones viewport in php? Not possible with PHP say people unless you use sort of javascript.

Can it be done via CSS? I tried but can't get my head around it.

 

Regarding the payment images, the images use the img-responsive class and therefore they should resize automatically. In SM view the boxes are at their most narrow size and in my test shop the logo resizes nicely to fit inside the box.

 

 

Link to comment
Share on other sites

A simple "if else" would have been cool but ...how can you read out someones viewport in php? Not possible with PHP say people unless you use sort of javascript.

Can it be done via CSS? I tried but can't get my head around it.

This is what bootstrap is all about. The php needs to know about your settings for how many you want though. When you've output the ones for all sizes, you just add the class

'hidden-xs'

to the rest of them and they magically disappear on smallest width screens.

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

@@BrockleyJohn

 

Yeah, normally you would be right.

But how would you use this for the MAX_DISPLAY_SEARCH_RESULTS code?

Or can the page result be limited otherwise via classes and CSS?

 

If you really want to maintain different scrolling for different sizes, you'd have to have two sets of controls (with the different visibility settings) each with their own set of values to feed back to the php page control for the next page.

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

@@MrPhil you need to install your own and play with it a -lot- more, you will soon realise that what you see on the that template.me site is 10% of what is available.  Same goes for any other potential user => if a person reads a book by looking at the cover...etc etc.  

 

Somewhere back in time, there was an effort by a few shopowners to put together a real demo site with real products, I don't know what became of that.  Anybody?

 

As far as consistency and coding and all the rest;

I'm waiting on people to step up to the plate and start swinging.

If no-one takes action, nothing gets done.  

Link to comment
Share on other sites

@@MrPhil you need to install your own and play with it a -lot- more, you will soon realise that what you see on the that template.me site is 10% of what is available.  Same goes for any other potential user => if a person reads a book by looking at the cover...etc etc.  

 

Somewhere back in time, there was an effort by a few shopowners to put together a real demo site with real products, I don't know what became of that.  Anybody?

 

http://bootstrap.kymation.com/

 

[edit] actually, maybe that's not what you meant, that was a better set of example products than 1990s DVDs

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

@@MrPhil you need to install your own and play with it a -lot- more, you will soon realise that what you see on the that template.me site is 10% of what is available.  Same goes for any other potential user => if a person reads a book by looking at the cover...etc etc.  

 

Somewhere back in time, there was an effort by a few shopowners to put together a real demo site with real products, I don't know what became of that.  Anybody?

 

 

My primary point that I'm trying to make is that any (more or less) official demo site is the primary advertising for osC. If it doesn't look good, people won't go any further than looking at the cover, so to speak. They will use some other product with a slicker presentation. By all means load it up with add-ons and tune it up, so long as it's clearly stated what's been added or done to the out-of-the-box store. Offer some theme variations to show what can be done with it.

 

I personally don't care if the demo products are stuck in 1999 or whatever, but if someone wants to put in the effort to update the inventory to current products and prices, that could be marginally helpful to someone considering whether or not to use osC. Just remember that the sample inventory should be kept updated (every 5 years or so, at most).

Link to comment
Share on other sites

@@burt

 

Somewhere back in time, there was an effort by a few shopowners to put together a real demo site with real products, I don't know what became of that.  Anybody?

 

http://www.oscommerce.com/forums/topic/407244-shop-owners-bootstrap-demo/?p=1724756

 

Dan

Link to comment
Share on other sites

 

My primary point that I'm trying to make is that any (more or less) official demo site is the primary advertising for osC. If it doesn't look good, people won't go any further than looking at the cover, so to speak. They will use some other product with a slicker presentation. By all means load it up with add-ons and tune it up, so long as it's clearly stated what's been added or done to the out-of-the-box store. Offer some theme variations to show what can be done with it.

 

I personally don't care if the demo products are stuck in 1999 or whatever, but if someone wants to put in the effort to update the inventory to current products and prices, that could be marginally helpful to someone considering whether or not to use osC. Just remember that the sample inventory should be kept updated (every 5 years or so, at most).

 

Unfortunately a lot of new users wont ever see the trees for the forest. As we all know, the software can look like anything you can imagine, but too often users do not see that.

 

Demo products are risky - there are all kinds of rights involved in their usage. An individual setting up a demo probably has no problems getting away with placing whatever products and images up, but an official repository would have photography usage issues among others.

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

If we have the legal right to use images of real products, that's fine. Make sure that it's not only copyright clearance on the images themselves, but also licensing permissions on trademarks, etc. Just keep in mind that eventually you'll want to refresh the set to update the sample data, so how much of a hassle is it to get permissions for a fresh set of real products?

Link to comment
Share on other sites

Also, bear in mind that most shopowners using the Responsive (or at least most shopowners I've had dealings with) have seen that all the boxes in the 2 side columns can be easily replaced by things in the header/footer/content area.  

 

On a standard 234 install - {in brackets, positioning on Responsive};

 

Left column:

 

categories    - {module exists for horizontal}

manufacturers   - {modules exists for horizontal}

quick find   -  {header}

whats new   - {link in headerNavbar}

information  -  {footer}

we accept  - {footer}

 

Right Column:

 

cart   - {link/dropdown in headerNavbar}

bestsellers  - {MISSING}

specials  - {link in headerNavbar}

reviews  - {products page content module}

currencies  - {link in headerNavbar}

 

The one that is missing is BestSellers, do customers give a fig about that.  

That's of interest to the site owner.  Of zero interest to a shopper, I'd suggest.

 

So, 90% of that wasted real estate (the two side columns) is replicated elsewhere...

 

But, the Responsive also has 1 of the most important extra boxes in the Footer:

- contact us

And some others.

 

I'd most certainly hope that users of this Responsive osCommerce would not just install out of the box, turn on a few modules and be done with it.  It is so so easy to make a beautiful site in less than half a day.  And best of all, very few changes to core code are needed, sometimes (mostly) zero changes.  

 

Options, options....

 

Then, of course, there are modules being written (and already written and available at the addons area) that change no core code to do really cool things.  It's my belief (proven in fact) that a very good percentage of shops could get away with zero code changes in this version when it would have taken loads in the older versions of osC.

Link to comment
Share on other sites

I have to agree with Gary. The latest bootstrap version is so simple to use, its refreshing. It is so simple to change everything, even I can do it. I currently have the left column only, but items are being removed from that as the site develops. What I have found hardest is to understand how to create additional pages that work on all size screens. My site has lots of information pages and I have spent days changing them to get tables and images to resize, but that task is now complete with the help of Google and some nifty built in features with bootstrap.

 

There are a few good addons available, and some bad ones, but more good ones are needed, which means that developers and coders need to develop and code, oh, and also be prepared to give their work away for free and put it in the addons area. If core code is left untouched, then updating will be easier and you should not get the position where people are posting on how to update very old code. Addons can be updated and modified with just a few clicks of buttons. Shop owners will be able to do that.

 

Nothing but praise for the new BS community version from me.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

@@burt, from this very old post....

 

Tested it in IE, Chrome. The youtube popup works OK.

In Firefox, the opened modal includes the video => OK.
But the window has no height.

Reason:

<object type="application/x-shockwave-flash" width="640" height="385" data="http://www.youtube.com/watch?v=tAbsmHMAhrQ?fs=1&autoplay=1"><paramname="movie" value="http://www.youtube.com/watch?v=tAbsmHMAhrQ?fs=1&autoplay=0" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="wmode" value="transparent" /></object>

should be

<iframe width="560" height="315" src="http://www.youtube.com/embed/tAbsmHMAhrQ?autoplay=0"frameborder="0" allowfullscreen></iframe>

 

I see we should now be using iframe and not object type.... however I'm trying to use ?autoplay=1 and have some weird behaviour in firefox 43.0.4.

 

If you exit the video (just by closing the colorbox window) the sound for the video restart and plays within product_info (with the colorbox now closed).

 

Can anyone else confirm? The youtube link to Samsung is dead - and so I can't test at http://template.me.uk/234bs3/product_info.php?products_id=28

Link to comment
Share on other sites

I'd never use autoplay=1 as it loads immediately without accessing the popup (in Chrome).

 

There probably is a programmatical way to autoplay only if the popup is active...I don't know if anyone has explored it.

Link to comment
Share on other sites

  • 2 weeks later...

Just been having a real good look at my site before making it live and have one half sensible question.

 

Is there any reason why on the checkout_confirmation.php that the payment information bit on the page is not set up like the other areas of the page and use <div class="panel panel-default"> type code. It uses a totally different layout and looks separated from the rest of the page.

 

I have modded my page to use that type code and it looks so much better.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

  • burt locked this topic
  • burt unlocked and locked this topic

Archived

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

×
×
  • Create New...