CSS buttons v2.x

19 Sep 2006, 19:55

#1

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

CSS buttons v2.x

This is a new support/discussion thread for the CSS buttons contribution version 2.x

The current version is still in beta stage (=not very well tested), and I have got several ideas to improve it (little time though). But it should be quite an improvement as it is, compared to 0.x and 1.x versions (hopefully).

Written for Zen Cart 1.3.5, expected to work on 1.3.0.x without modification.

CSS buttons 2.0 notes:

1) First version for Zen Cart v1.3.5 (probably works on 1.3.0.x too)
2) Removed admin css-buttons (Sorry little time, should be easy to add though, maybe reading the oldreadme/1.05.txt helps, if you like you can uncomment outcommented sql lines for admin settings)
3) Added css to enable automatic button width (replaces calculated width).
4) Changed sizes from pixels to em's (improves usability!).
5) Added feature to easily use both image and css buttons (since many people asked for this).

Archived support thread 1.x versions: http://www.zen-cart.com/forum/showthread.php?t=19281

Download v2: http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_44&products_id=272

01 Oct 2006, 14:32

#2

paulm

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

Re: CSS buttons v2.x

There were some serious errors in the 2.0beta readme (:wacko: :wacko: ). These have been corrected now (I hope ;-) ). Also some minor code/css edits were done.

The new version 2.01 is tested quite extensively on 1.3.5.

It's uploaded today, and will hopefully available for download soon (download link in first post).

18 Oct 2006, 07:28

#3

paulm

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

Re: CSS buttons v2.x

I have a new version available that fixes a minor bug in the previous css-buttons mod, and also makes replacing one or more css-buttons by image buttons even easier. It should also fix de Zen Cart 1.3.5 gv edit bug. If anyone is willing to test it before I upload please let me know.

22 Oct 2006, 21:46

#4

s_mack

Totally Zenned

Join Date:: Jun 2005
Posts:: 1,033
Plugin Contributions:: 3

Re: CSS buttons v2.x

code suggestion...

I never understood this in the original 1.35 release code, and I see you keep it:

    $css_button = '<span class="' . $mouse_out_class . '" ' . $css_button_js . $style . ' > ' . $text . ' </span>'; // add $parameters ???

Why not add the parameters? It hurts nothing, and in my case I'm writing a mod that requires the button have a proper id. I realize ids *can* be harmful if there are repeat buttons, but I can easily add it as a parameter if the code allows it. So for flexibility, I strongly suggest you change that line to:

    $css_button = '<span class="' . $mouse_out_class . '" ' . $css_button_js . $style . $parameters . ' > ' . $text . ' </span>';

unless there is some good reason not to.

Otherwise, thank you for the contrib. I haven't used it enough to see any benefit over the stock cssButtons code, but it seems to work well enough!

- Steven

22 Oct 2006, 22:44

#5

paulm

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

Re: CSS buttons v2.x

Hi Steven,

I think you are right. If I rember well I commented out the parameters because there were a few depricated HTML paramters being used at the time (long before 1.3.5), which would/could mess up the button layout.

That it's still like this, is because I never got any complaints about it and that I was too lazy to check if it was safe already to add the paramters to the link buttons ;-)

But I got a newer version ready anyway, and I will re-add the parameters before uploading it :-)

I haven't used it enough to see any benefit over the stock cssButtons code

The benefits compared to the Zen Cart css buttons are briefly described in point 3, 4 and 5 in the initial post of this thread. No inline styles needed anymore, no (hardcoded) width settings, and it's very easy to use image buttons for some of the buttons if you like (even better in the soon to be released version). Also a bug with the GV edit button should be fixed in the next version.

Thnx for the feedback :-)

22 Oct 2006, 23:47

#6

paulm

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

Re: CSS buttons v2.x

Attached version 2.31 to this post.

1) Added $paramaters as suggested in this thread by Steven (also to the input buttons, $parameters was already re-added the the inputs a long time ago, but somehow where lost in a later version again :shocking: ).

2) Added fix for edit GV button bug (feedback on this would be nice, so if anyone uses Gift Vouchers .....).

3) Changed the automatic image button loader
Now the css buttons script only looks for image buttons in your custom template directory! With previous versions you had to remove buttons from template_default to take advantage of the automatic image button loader:

with this version you can enable "Automaticly load image buttons if found" (in CSS Buttons admin) and put the button images in includes/templates/YOUR_TEMPLATE/buttons/english/, no need to remove any images form template_default anymore.
(in which YOUR_TEMPLATE is the name of you custom template dir, and english is your language)

4) Some minor code changes

23 Oct 2006, 17:39

#7

dsepshun

New Zenner

Join Date:: Oct 2006
Posts:: 2
Plugin Contributions:: 0

Re: CSS buttons v2.x

Hi

I am trying to install the CSS buttons but am failing at Step 1.
I copy and paste all the text in "cssbuttons.sql" into the "Sql Patch Tool"(SQL Query Executor), click on "Send", however I get the following error in Firefox

"Not Acceptable
An appropriate representation of the requested resource /sgp/admin/sqlpatch.php could not be found on this server."

and I get this error in IE:

"The resource cannot be displayed
The resource you are looking for cannot be opened by your browser.

--------------------------------------------------------------------------------

Please try the following:

Click the Back button to try another link.
Click Search to look for information on the Internet.

HTTP Error 406 - Not acceptable
Internet Explorer"

I have checked my installation and the file "/sgp/admin/sqlpatch.php" is definately on my server, so what am I doing wrong plz? Thank u in advance.

23 Oct 2006, 21:22

#8

paulm

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

Re: CSS buttons v2.x

Hi dsepshun,

I think it's a server configuration issue. Can you try to paste this:

SELECT *
FROM products;

and see if you get the same error?

Another question: are you using a table prefix for your zen tables? (like zen_****) If not, you can easily load the sql using phpMyAdmin. If you do use a prefix however you would need to rename all tables accordingly.....

But if it really is a server configuration issue, you better contact your hosting provider.

24 Oct 2006, 20:40

#9

paulm

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

Re: CSS buttons v2.x

New fix for the GV button, the last one (in 2.31) unfortunately did not work (it only *seemed* to work on my testshop). Hopefully this time it does do the trick though (note that the fix is a hack, that works around a problem that probably should be fixed in the Zen core code instead).

To upgrade from 2.31 you only need to replace:
catalog\includes\functions\extra_functions\css_buttons.php
no need te reïnstall

27 Oct 2006, 15:23

#10

paulm

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

Re: CSS buttons v2.x

Changes:
1.) Tested on Zen Cart v1.3.6

2.) Added the CSS for the /* css popups */

(No code changes were needed for 1.3.6 compatibility)

#####################

Some advantages over the stock Zen CSS button are:

1) Easy to replace single CSS buttons by image buttons (handy for the update cart for example)

2) Includes fix for the gift certificate edit button
(bug exist in 1.3.5 and 1.3.6, and maybe other 1.3.x.s versions)

3) Better/easier button width control

30 Oct 2006, 17:07

#11

paulm

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

Re: CSS buttons v2.x

UPDATE
I just uploaded version 2.34 to http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_44&products_id=272
(So it will probably will be available soon)

Changes compared to 2.33 are minor, only the css_button() function has changed (It looks for the existence of a class in $parameters now, and if found that class will over ride the css buttons class. And some cleanup is done.).

To upgrade form 2.33 to 2.34 just replace the css_buttons.php function file.

Tested on 1.3.6 (and 1.3.5)

31 Oct 2006, 10:54

#12

paulm

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

Re: CSS buttons v2.x

Ok, this will *really* be the last version for a while :smartass:

There has been no change in functionality, just another small (but important?) cleanup that I should have done a long time ago.....

Except for loading the sql and copying the files, the whole installation now is reduced to:

Open includes/functions/html_output.php (do not forget to backup first!)

a) find(1.3.6 line 267):

if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes' && strlen($alt)<30) return zenCssButton($image, $alt, 'submit', $sec_class /*, $parameters = ''*/ );

replace by:
// bof css buttons (submit)
if (css_button_allowed($image) === TRUE) return css_button($image, $alt, 'submit', $parameters);
// eof css buttons

b) find (1.3.6 line 293 before edits):
if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') return zenCssButton($image, $alt, 'button', $sec_class, $parameters = '');

replace by:
// bof css buttons (button)
if (css_button_allowed($image) === TRUE) return css_button($image, $alt, 'button', $parameters);
// eof css buttons

This should also make it more flexible, and even easier to upgrade if needed.

03 Nov 2006, 15:58

#13

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: CSS buttons v2.x

There will be some issues with some people with the SQL file you provided. I know cause I had issues, LOL. It depends on the version on the server, though I don't know what versions have the issue.

ANYWAY, you need to change all lines that have this:
'zen_cfg_select_option(array(\'true\', \'false\'),' );

to this:
'zen_cfg_select_option(array(''true'', ''false''),' );

The backslash causes SQL syntax error for some.

03 Nov 2006, 20:36

#14

paulm

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

Re: CSS buttons v2.x

Thanks for the feedback Jade,

I must say I like syntax you propose better.

Maybe it's related to the magic (or should I say evil? ;-) ) quotes settings? I think I will change it in the next version, and keep my fingers crossed ;-)

:-)

07 Nov 2006, 21:49

#15

paulm

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

Re: CSS buttons v2.x

2.50:
1) Minor change to .sql installation file (2.4 version still included in extra folder)
2) Minor change to CSS to prevent full table cell width for buttons within tables
3) Finally added admin css buttons again :-) (see readme-admin for installation instructions)
4) Small change to catalog/includes/functions/extra_functions/css_buttons.php for admin css buttons on/off switch

11 Nov 2006, 21:38

#16

s_mack

Totally Zenned

Join Date:: Jun 2005
Posts:: 1,033
Plugin Contributions:: 3

Re: CSS buttons v2.x

Hey Paul...

I'm having an... umm... unusual side effect here after installing your contrib. I don't know if this is with your newest version only or not as I previously don't think I ever tested the order process with it. I'm sure this would have come up before... its very odd...

When I have your contrib installed and operating... my orders are doubled. I can't imagine why! But if I'm at order 100 and I complete a test order, I'm now at #102 and the last order is duplicated in every way.

It took me nearly 4 hours of testing to confirm its being caused by the css buttons. The problem goes away if either:

1) I turn css-buttons off in the admin
2) I leave css-buttons on, but revert to the stock 1.36 files (ie, remove your mod)

Its extremely confusing... but I wonder if I contributed. Out of curiousity I put my independently-revised css-button hack back to use and I get the same problem!! It seems like it has to do with passing the $parameters on to the css_buttons.

Anyway, it probably is an incompatibility with another one of my mods... so I figured I'd ask if you can check for sure and make certain you aren't having the same problem.

Log in (as a customer)... place an order... see if you have one order or two.

Thanks.

- Steven

12 Nov 2006, 10:52

#17

paulm

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

Re: CSS buttons v2.x

Hi Steven,

that's weird indeed. I have installed the latest css buttons version (2.5) on both my live shop (1.3.6 but modified) and on a fresh 1.3.6 install. And I don't have this problem on either. To be sure I just did some testorders on the fresh 1.3.6 install. Also I never heard about problems like this before with the CSS buttons.

Maybe you can try to comment out the $parameters hack I recently added to make the CSS buttons simulate image buttons (added to fix the GV edit button bug):

    // bof hack to simulate image button (replace parameter by _x parameter)
    // needed for gv name="edit" button (other named buttons are name="btn_submit" and name="submit1" and ...??)
    if (strpos($parameters, 'name')!== false){
    // replace by regular expression
      $s=strpos($parameters, '"', strpos($parameters, 'name'))+1;
      $e=strpos($parameters, '"', $s);
      $name = substr($parameters, $s, $e-$s);
      // replaces values of both name and value ()
      //$parameters = str_replace($name, $name . '_x', $parameters);
      // replaces the value of name only
      $parameters = substr_replace($parameters, $name . '_x', $s, $e-$s);
    }
    // eof hack to simulate image button

(in the includes/functions/extra_fuctions/css_buttons.php file)

12 Nov 2006, 19:37

#18

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: CSS buttons v2.x

Anyone else noticing padding differences in IE for the submit buttons?

I've added just a tad of a top and bottom padding for the buttons, as I want them a little taller, but in IE, there is much more of a top padding than a bottom padding. I use this setting for padding: padding:0.2em 0.5em;.... yet even with the standard padding:0 0.5em;, there is still more top padding than bottom padding in IE. You can see what I mean here:
http://www.zencart136.jadetrue.com/index.php?main_page=product_info&products_id=2

(look at the add to cart vs. tell a friend and write review)

12 Nov 2006, 19:49

#19

mat123slade

Zen Follower

Join Date:: Nov 2005
Posts:: 90
Plugin Contributions:: 0

Re: CSS buttons v2.x

Hi, when inserting the following into phpmyadmin :

INSERT INTO edl_configuration( configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, use_function, set_function )
VALUES (
'Enable CSS buttons (catalog)', 'CSSBUTTONS_CATALOG_ENABLE', 'true', 'If true, CSS buttons for the catalog are enabled', @cssbuttonsid , 10, NULL , 'zen_cfg_select_option(array("true", "false"),'
)

I'm getting the following error :

MySQL a répondu:Documentation
#1048 - Column 'configuration_group_id' cannot be null

Problem seams to come from the fact that it is considering : @cssbuttonsid as being null.

Any idea how to solve the problem.

Cheers.

12 Nov 2006, 21:00

#20

paulm

Totally Zenned

Join Date:: Nov 2003
Posts:: 1,878
Plugin Contributions:: 3

Re: CSS buttons v2.x

jettrue:
Anyone else noticing padding differences in IE for the submit buttons?

I've added just a tad of a top and bottom padding for the buttons, as I want them a little taller, but in IE, there is much more of a top padding than a bottom padding. I use this setting for padding: padding:0.2em 0.5em;....

It's best to leave the top/bottom padding 0, and instead adjust the height and line-height (always giving both the same value!). It often helps to increase the font-size/height/line-height a little, at small sizes weird things can happen...

@mat123slade: are you trying to add only that part of the total sql? If so, @cssbuttonsid indeed will have no value.