Jump to content
burt

Responsive osCommerce - Bootstrap

Recommended Posts

Great, so get to work on the community build to;

 

4.  update the admin side to bootstrap

 

 

So in keeping with the community build, I have started on an initial admin makeover using the latest bootstrap, and the 23 Github branch, based on 2.3.4

 

It is an offcanvas layout, which makes viewing on small devices relatively painless, though we all know it is impractical to manage a shop and anything smaller than a tablet, there are those times you need a quick view.

 

So far only a few files that must be changed to achieve the admins new look have been edited:

  • template_top.php
  • template_bottom.php
  • header.php
  • footer.php
  • column_left.php
  • New File: admin/ext/stylesheet.css

In addition to those files, these have been modified to reflect how the overall theme will look and perform:

  • index.php
  • configuration.php
  • login.php
  • includes/functions/html_output.php
  • includes/functions/general.php
  • All dashboard modules

The theme is based on Bootstrap but custom styles so not as to look like the blah blah basic BS. In creating the theme I kept in mind the history of the osCommerce admin - Simply header/footer - functional left column - those gray an blue shades!

 

Changes I would like feedback on before moving to other pages:

 

Overall rendering in different devices and OS systems.

 

The new method of editing/viewing info as seen in configuration.php - I have bypassed the box class in favor of simply opening a new row where all actions may be carried out. The info previously loaded into the box still only loads once per row selected and only for that row selected.

 

One main reason for removing the right box was for room on smaller devices.

 

An online version is located here:

http://bsadmin.wsfive.com/admin/login.php

User: demo

Pass: demo1

 

I will upload the changes to GIT as soon as I figure out how to make a branch of my fork.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

 

Changes I would like feedback on before moving to other pages:

 

Overall rendering in different devices and OS systems.

.

 

Win 7, HP notebook.   :thumbsup:

Android 4.4.4 version, Droid Ultra  :thumbsup:

 

Punished when clicking non existent pages: :) Beavis and Butthead.

 

mini-0923.jpg

 

On the droid,  when looking at the menu, the chart data goes off screen, i.e. revenue, customers graphs.  A couple of taps on the screen fixed that.

 

Otherwise..looks good.

 

If there's something specific you want tested, viewed let me know.

Edited by altoid

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Share this post


Link to post
Share on other sites

@@altoid

 

Thanks for the feedback - thus far I have only been able to see it on a Mac and iPhone.

 

I notice when resizing the screen that sometimes the flot charts text overflows, generally fixed with a refresh. Maybe I need to nest them in an additional wrapper.

 

 

For everyone else - the primary page that I need input on is anything in the configuration menu, minus store_logo and admin. This is what I would like solid input on before continuing on, as that will be the basis of many, many, many pages.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

@

 

very nice! not only visually but also usability is awesome. I like the way the row opens underneath it when clicking "info" or "edit" buttons in the listing.

Maybe a smoother slide in transition for the menu on smaller screens would be cool.

Looking forward to see other pages "IF" you decide to continue with your project.

 

Tested with Windows 7, 15" Notebook and Android Phone. Looked OK so far.

The current used flot can be a pain in the ass though. Should look into other possibilities like newer flot or morris.

Share this post


Link to post
Share on other sites

@@Tsimi

 

Thanks for feedback. It does seem that the sidebar does slide in a bit rough on mobile devices. Looks like it should also take the screen back to top of page as well.

 

As for flot, it has to stay. I'm trying to keep everything as close to the default build, changing only what is needed for the theme.

 

Now that Ive got everything wrapped in the theme and the configuration page working smoothly, I can move on to the other 40 pages.

 

I do have current changes committed to github branch @ https://github.com/GLWalker/oscommerce2-bs-admin

 

Before committing I weeded through the files that compromise the actual theme/template and corrected all HTML indention so that it renders perfectly balanced - with the exception of dashboard modules - thought it a bit anal retentive to add extra indention to the html on each module just for that.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

The categories.php page is about 1/3rd done if anyone would like to check it out.

 

Only the category listing area is formatted and all the actions that go along with categories. This page was a bit trickier than the configuration, but I believe I have it well underway.

 

Feel free to edit and create any categories for testing.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

I created a couple new categories and included "non optimized" images to see what would happen.  I successfully moved a category I created into another category.  All went well.

 

Interface was rather intuitive, but after moving the one category i had to puzzle out how to get back to the top.  Found the back button and got there.

 

So from that looks good.


I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Share this post


Link to post
Share on other sites

I took the button group wrapper away from the "Back | New Category | New Product" buttons, I think it lays out a bit better and feel the space between buttons is really needed on an administration interface to avoid accidental clicks.

 

Ive since updated the products_new area, and product_preview - still no actions on the product rows, its next.

 

I have also added in 2 additional languages for demonstration of everything as a whole.

 

New Product:

http://bsadmin.wsfive.com/admin/categories.php?cPath=&action=new_product

 

Edit Product:

http://bsadmin.wsfive.com/admin/categories.php?cPath=21&pID=28&action=new_product

 

Product Preview:

http://bsadmin.wsfive.com/admin/categories.php?cPath=21&pID=28&action=new_product_preview

 

demo

demo1

 

I think it may need an additional set of save/cancel buttons elsewhere on the page - would be handy when editing existing products?


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

@ - I haven't had a lot of time especially in the last couple of weeks, apologies. Looks really great!


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

@WS5

 

Very nicely done!

Nice going with the multilingual tabs.

 

When deleting a large image a popup shows up asking to confirm. That popup is javascript right? On a smartphone (android in my case) the popup gets a bit cut off. Any chance to have a bootstrap modal instead? Would sure look great.

And the text that says "this product was added on...bla, bla, bla..." doesn't break to the next line in xs view mode.

But then on the other hand, as you mentioned once, who would add/edit products with a smartphone right?

 

Oh, and sorry for the empty product, that was me.

Share this post


Link to post
Share on other sites

When deleting a large image a popup shows up asking to confirm. That popup is javascript right?

And the text that says "this product was added on...bla, bla, bla..." doesn't break to the next line in xs view mode.

@@Tsimi

Thats actually just an error message, as also used in the message stack. I'll have to check if it has an issue breaking @ xs size

Product add on is a bootstrap label, their not made to break, which has been a pain in the but for another project I did when it came down to mobile view.

 

@@wHiTeHaT

 

That's a very good point - I could see it being done as well.  For the most part it should be much easier to do with this admin VS the current admin.

 

I think some small tweaks to the stylesheet can fix everything up. I keep going back and forth tweaking things as I build - upon completion of the categories.php I have a cut list to take care of :)


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

I see, bs label...hmmm...maybe shorten the text to Added: xx/xx/xxxx or Product added: xx/xx/xxxx something like that?

Share this post


Link to post
Share on other sites

Just added

white-space: pre-line;
display: inline-block;

 

to label and looks good now, the pre-line makes it wrap and inline-block keeps the background color a solid block so it doesn't cut off when the text goes to a new line :thumbsup:


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

categories.php file is complete. I believe I have it set to render usable across all devices - Some of the xs view Im not super happy with, but I am probably being too picky - my objective was to space the row buttons enough that they are not inadvertently clicked - I am pretty happy with desktop and tablet view, though I only tested tablet on simulator.

 

As this page went one I also changed details to the configuration page.

 

Next will be products_attributes.php


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

i like the setup and the new looks of the admin side

 

are the latest files already on github ?

 

keep up the hard work

Share this post


Link to post
Share on other sites

Whats been changed so far is @ https://github.com/GLWalker/oscommerce2-bs-admin\

 

I recently went through and balanced all the html brackets so it has a perfect nesting when viewing source - if anyone takes on any files, always start the first HTML tag, usually <div class="page-header"> @ 10 spaces and follow on down.

 

I try to code classes in html using this method:

 

<div class="col-xs-* col-sm-* col-md-*  any-other-class">  

 

where applicable I always start with the mobile classes and work up, then place others at the end. If ever a need for a mass search and replace it could help.

 

I do have some trouble with Git's software on a Mac so the comments are not as I would like.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

The Git software is pretty cool, but frustrating in it's intergration.  There are some config settings like line endings where it will convert automatically to LF or not, but I think native is to convert.  It's in the man pages buy you can manually edit your config also.  You might find this interesting https://github.com/fabpot/PHP-CS-Fixer  but it's just for php.  I think it would be a good idea to look at going with some of the fig standards since we're moving to php 5.3+ but I'm not as involved and you guys are.
 

 

I have problems with it in Netbeans, which has it built in.  I've tried a couple of the other clients and I set up SourceTree which Hararld said he's using.  The simple Git Bash may be the best but i hate typing. 


I'm not really a dog.

Share this post


Link to post
Share on other sites

SourceTree is what I use.  It's a learning curve, but not very steep.

 

I did in the past use Githubs own windows program, but that's quite limited in what it can do (compared to sourcetree).


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

Please don't turn this thread into a support for "this and that" type of thread.  Please open a new thread and solve your problems in that new thread.   Thanks

 

This thread is for discussion of the core concept of the community build of Bootsrtapped osCommerce, it is not for advice on how to use it, how to change it or how to add addons or anything else of that nature.

Edited by burt

Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

Back on topic -

 

The products attributes file is one of those monsters of a file, lots of actions, lots of page results, a lot of data to look at.

 

I see it uses a lot of html for forms and inputs and selects, rather than taking advantage of the functions.

 

It was probably the nature of the beast - it works, so let it be!

 

As I'm styling it I am converting all to use the carts functions, and consolidating down the tables for deleting and edition options and values into cases that will display in the existing list of options/values when the action is initiated.

 

Testing each step along the way and all is well so far. Of course halfway through I got tired of looking at the page results and had to Bootstrap that too :)

 

Anyhow - a very chopped version is available that shows the way its going.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

One issue I've noticed from the start -

 

When clicking on a button/row in a table to initiate an action,  the page needs to reload on that some area - not such a big deal on a desktop, but for smaller devices it would make the workflow a lot better.

 

I tried using anchors, but that's jumpy and cumbersome and adds ridiculous markup to everything.

 

Maybe something like scrollspy? http://getbootstrap.com/javascript/#scrollspy

 

Anyone have an ideas/advice?

Edited by WebSource 5

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×