VirtueMart Forum

VirtueMart 2 + 3 + 4 => Virtuemart Development and bug reports => Development & Testing => Topic started by: dido76bg on June 20, 2013, 15:16:12 PM

Title: Lets Become User Friendly
Post by: dido76bg on June 20, 2013, 15:16:12 PM
Hi!

Becaue I want to create a more user friendly interface to meet my customers needs, and I have left VM coding and development a year ago, can someone look at the attached pictures and tell me is that the pont point of the prices in product creation (now I am confused).



Thank you in advance!

[attachment cleanup by admin]
Title: Re: Lets Become User Friendly
Post by: Milbo on June 20, 2013, 16:03:05 PM
Quote from: dido76bg on June 20, 2013, 15:16:12 PM
that the pont of the prices in product creation (now I am confused).

Hmm pont of the prices? but nice idea. From my point of view, I just miss that it is using the width
Title: Re: Lets Become User Friendly
Post by: alatak on June 20, 2013, 18:19:35 PM
Hello

I like very much your proposal.
And thanks, with your screen shot,  i found out that for the price shopper group it is not "Select an option" , but "available for all" in this case.
I am fixing it.
Title: Re: Lets Become User Friendly
Post by: Milbo on June 20, 2013, 20:47:26 PM
The problem with the proposal is that it

1. dont use the space and the right
2. it shows the advanced settings at first, which are most time not used.

Title: Re: Lets Become User Friendly
Post by: alatak on June 20, 2013, 21:58:46 PM
Hello
This is not a problem Max. Put those advanced fields at the bottom then.
Title: Re: Lets Become User Friendly
Post by: dido76bg on June 20, 2013, 22:47:42 PM
Hi!

Thank for your replys.
I think you all do a great job.
What I am offering is a little styling.

Quote from: Milbo on June 20, 2013, 20:47:26 PM
1. dont use the space and the right

For me the space is not so important as the clearly styled settings.

Quote from: Milbo on June 20, 2013, 20:47:26 PM
2. it shows the advanced settings at first, which are most time not used.
Thats why I have posted 2 screen shots (original and with my style).
With my style I have tryed to understand if I have catched the point of the cells.
I will put them at the end when they are not so important.
Please see the attached screen shot.



[attachment cleanup by admin]
Title: Re: Lets Become User Friendly
Post by: alatak on June 20, 2013, 22:59:28 PM
Hello

Yes, i agree.
And the tooltips can be enhanced for the optional fields.
Or do something else: add a label "Optional" before them...
Title: Re: Lets Become User Friendly
Post by: dido76bg on June 20, 2013, 23:12:46 PM
OK!

Thanks!

I will do it and I will come with it tomorrow!

Now I will work on!
Title: Re: Lets Become User Friendly
Post by: AH on June 21, 2013, 11:42:49 AM

Alatak has already fixed the wording for shopper group tp "available for all" (thank goodness  ;))

Please let me have a go at this after Dido!

I was just crying over this layout ! it is not so great at the moment!  6 tabs to create a product seems excessive and I agree the price block if you have a number of shooper group prices will go on forever!

Some suggestions that I will work on if you have done the adjustment discussed below:-

For the front page:-

1) Move the stock elements onto this page
2) Same for Weight and Dimensions Move Weight to the first element, it is used in most shipping calculations and should have higher prominence.
Change selection and input to be smaller (do the weight and other selectors really need to be so large if styled will fit Weight L,W,H on a single line)
3) Move availability to the first page also.
Title: Re: Lets Become User Friendly
Post by: alatak on June 21, 2013, 13:03:15 PM
Hello

QuoteChange selection and input to be smaller
At least i am making them smaller. They are at the moment 300px. Which is too big, i agree. 
But they  will be all the same size. It does not work very well when the width is not fixed.
Title: Re: Lets Become User Friendly
Post by: dido76bg on June 21, 2013, 15:58:48 PM
Hi!

I am working over the styling.
When I clear it to myself, I will post it here.
Yes some of the selectors are too big.
But lets first clear the code. Than I will look to make the things a little bit compact.

There was a problem with category creation - newer DB, old file.

Look now! I think i looks nice.
The optional params can be hidden and shown only on click.
The tax explay is shown only when there is a TAX to be explained! :)
I will try to put on Product Info TAB the dimensions and the product status.
May be the child products should have a separate TAB!






[attachment cleanup by admin]
Title: Re: Lets Become User Friendly
Post by: AH on June 21, 2013, 18:57:23 PM
Dido Alatak

Wow it is getting better very quickly working with what Dido proposed, what do you think about an more compact and functional layout for the prices section as shown in the diagram below??

I have not coded, some quick photoshop work.

Space on the right is better utilised
Shopper group moves down (just in case multiple are entered so keeps the right hand side cleaner if this expands)
Calculate the cost price moves to the relevant position
"Override" wording changed to relate to the Price you may be overriding!
Min max and date boxes are same size as are all selectors






[attachment cleanup by admin]
Title: Re: Lets Become User Friendly
Post by: dido76bg on June 21, 2013, 19:14:51 PM
OK!

I am leaving the prices for now and will go on with the other view folder files to correct the code styling.

I will wait to see what the others will say about the prices and after that I will code it!

Alatak, can you tell me which file is responsible about the div wrappers (for the select boxes - 300px;)

Thanks!
Title: Re: Lets Become User Friendly
Post by: AH on June 23, 2013, 12:00:13 PM
Looks like this size is produced using js

Alatak could help us with exactly which js is creating the 300px

I have spent much time wandering through js etc and cannot find the 300 value - I can see the element for the drop but not the 300 setting
Title: Re: Lets Become User Friendly
Post by: dido76bg on June 23, 2013, 20:32:45 PM
Here are the moded files (I have just closed some tags and removed some unnecessary). If you decide to give them a try, please make a backup of your own files.
The file responsible for "300px" is component\com_virtuemart\assets\js\chosen.jquery.min.js - make a search for "chzn-container". You will not see 300px (this is in component\com_virtuemart\assets\css\chosen.css - ".tabs select{ width:300px;}"). The size is formed by script. May be removing with parameter and adding css styles can achive some results. I will give it a try, but now I have problems with the jQuery (conflict with other components) and I should find a way to solve it (I will try to make a plugin which prevents loading other instances of jQuery when com_virtuemart is active) but first should find which one is the trouble maker :).

Attached image - Category edit page with accordion side bar (not included in the .zip file).

[attachment cleanup by admin]
Title: Re: Lets Become User Friendly
Post by: AH on June 25, 2013, 00:53:51 AM
I have also made some progress on the product admin page.  Did not realise that Dido was off and running!

Modified the Product info and the Product Pricing

Tried to use CSS as much as possible for styling of labels (removes lots of <divs> for bold etc!)

Needed to add some new CSS to get better styling (and stop the radio list from being "a vertical list" <br/> is used in the build of the html.)

Decided to modify the language files as some language was not so helpful.

Added the stock details to the first page click on "status" seems not so friendly. 
Added "Availabe stock" field,  a simple calc that reduces the stock by booked/order value - displays RED/Bold if value is <= Notify

Milbo / Alatak / Dido- what do you think?




[attachment cleanup by admin]
Title: Re: Lets Become User Friendly
Post by: dido76bg on June 25, 2013, 07:33:47 AM
It is nice with the stock on the pront page.
I have made new classes (just moded the available one) to show the rado lists inline. All moded classes are at the end of my html.php in admin folder.

I realy miss an option from v 1.9 - product units, or may be I still can not find it in version 2, because for me it is important the quantity to be: in stock: 5 pcs for examle.

These days I have a lot of other work (other than coding and styling) so I can not spent much time on VM project.

What I am working on is a plugin to load and clear jQuery and jQuery Ui and load unique noconflict too (I have made one for Joomla 1.x). JQuery easy removes chosen jquery when active and have some issues.

What do you think about the child products? Should they have a separate tab or not?

Hutson you mentioned that you now how to code the prices in product list to be the FINAL not BASE. Can you post your style code changes?


Redards!


Title: Re: Lets Become User Friendly
Post by: alatak on June 25, 2013, 08:56:24 AM
Hello

QuoteMilbo / Alatak / Dido- what do you think?
Txs
We did almost that for the product pricing :)
We did not move the stock in the product information.
Title: Re: Lets Become User Friendly
Post by: AH on June 25, 2013, 09:34:55 AM
It removes much of excessive use of <div>s for label styling and introduces a new CSS for label and Price display

Still need to style the staus page as that no longer has stock in it.

Alatak could you look at the display of the Base price before discounts on the product / orders and in the database I cannot do this, but can sort this display out

I will post my updates here later today?

Title: Re: Lets Become User Friendly
Post by: AH on June 25, 2013, 11:47:35 AM
Milbo / Alatak - please take a look, finished the updates

I know we could all spend years just tweaking each others displays but I think the small amount of change does make things simpler and quicker for the site administrator.

Screen shots and code below

Summary
1) Moved stock information to Tab1
2) Simple stock available and alert
3) Modified pricing panel
4) Moved dimensions to Status tab and removed redundant dimensions tab
5) Tried to remove excessive use of "hard coded" styling for labels etc (not always successful!)

Tech
1 ) Removed product_edit_dimensions.php
2 ) Set table widths using classes "widthXX" used "floatright or floatleft" for position
3 ) Used tables (within tables) rather than killing myself trying to get TD's to align across a large page of data and allowing for easier styling if required
4 ) Used "VMadminform" class to allow for new styling and prevent core Joomla overwriting VM styles
5 ) Replaced hard coded row colours with row colouring code used in other pages
6 ) In product_edit, product_status, product_edit_price - removed where possible instances of DIV that were used to format strong/bold for labels and prices
7 ) Utilised new class for TD .prices and .labels where relevant
8 ) Adjusted the select size in chosen.css-  .tabs select{ width:200px;}
9 ) New language elements (at bottom of language file)
10) Modified language for some elements (better - IMHO for display)
11) Added new css VMadminform and others to adminui.css

Please don't just throw this away, I think it will make it easier to edit and use the product admin page. :)





[attachment cleanup by admin]
Title: Re: Lets Become User Friendly
Post by: dido76bg on June 28, 2013, 00:00:44 AM
Hi!
I have just installed the new test version (G) and right now I will give it a try.
I am a few days away from finishing my jQuery plugin (it is based on jQuery Easy).
If someone wants to use a newer version of jQuery with VM (because some other components, modules, or plugins may need it), than he should install the jquery migrate plugin (as a link <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>) and be sure not to strip out for any reason the 'chosen.jquery.min.js' script.
I have noticed that most of the problems come in the back end.

I have a question (may be stupid but...): does VM realy needs all the <label> TAGS? For example in config view:
<span><label><?php echo JText::_(); ?></label></span>
or we can remove the <label> tags.

Thank you developers! Keep doing that good work!
Title: Re: Lets Become User Friendly
Post by: AH on June 28, 2013, 10:28:06 AM
Valerie is working on the layouts and the price is in much better shape!

Title: Re: Lets Become User Friendly
Post by: dido76bg on July 03, 2013, 18:27:37 PM
Here is almost a perfect plugin for dealing with jQuery libraries and some other options.
It is working with VirtueMart (jQuery 1.10.1 and jQuery Ui 1.10.3 - just have to add a js file to keep 'chosen.jquery.min.js') and JoomlaWorks components (the still need jQuery Ui 1.9.x to work properly and again  keep 'chosen.jquery.min.js').
It is not something new... just a moded plugin!
Please give it a try if you have time.

I will wait to see and try the new stable version of VM with all the style changes.
What I am missing most is the cropping function and the 2 or 3 different images.

Best regards

[attachment cleanup by admin]