CSS3 Buttons [support thread]

Regardless the confusion, v1.1.1 is now available for download from the Plugins.

I've just submitted v1.1.2 to the plugins for review. That version incorporates downward-compatible changes introduced in Zen Cart v1.5.5.

Please note that the base functionality of this plugin has been included in the Zen Cart core since v1.5.2. This plugin now extends that functionality, providing a method to insert Font Awesome glyphs into your CSS buttons. If you are running Zen Cart v1.5.2 or later, you'll need to install this plugin ***only if ***you want that additional functionality for your store.

v1.1.2 is now available for download.

lat9:

***Please note that the base functionality of this plugin has been included in the Zen Cart core since v1.5.2. This plugin now extends that functionality, providing a method to insert Font Awesome glyphs into your CSS buttons. ***If you are running Zen Cart v1.5.2 or later, you'll need to install this plugin ***only if ***you want that additional functionality for your store.
This is GOOD to know!!!

Finally got round to changing over to css buttons. Took me a while to work out why my customisations of certain buttons were not taking affect.

Turns out I had changed most of the *.gif buttons and language defines to *.png but had forgotten about this line of code in function zenCssButton in \includes\functions\html_output.php

   $button_name = basename($image, '.gif');

Changing .gif to .png fixed my immediate problems, however, it seems that I may have to change this code and all the .png buttons and language defines back to .gif because there is currently no provision for mixed image types (eg gif, png, jpg). Sigh!

dw08gm:

Finally got round to changing over to css buttons. Took me a while to work out why my customisations of certain buttons were not taking affect.

Turns out I had changed most of the *.gif buttons and language defines to *.png but had forgotten about this line of code in function zenCssButton in \includes\functions\html_output.php

$button_name = basename($image, '.gif');

> 
> Changing .gif to .png fixed my immediate problems, however, it seems that I may have to change this code and all the .png buttons and language defines back to .gif because there is currently no provision for mixed image types (eg gif, png, jpg). Sigh!
That code fragment can be made extension-agnostic with a small code change:

$button_name = [B]pathinfo [/B]($image[B], PATHINFO_BASENAME[/B]);

I don't know if it's too late to "catch" Zen Cart v1.5.5 for this change, but I'll be (re-)submitting an update to this plugin (and its admin-level sibling) real-soon-now.

***UPDATE:  Having written that, since the zenCSSButton function doesn't really care about the file extension of the image-based button, I don't think that that's the solution!***

Wanted to share a variation of lat9's post regarding the shopping cart icons.. What follows is how I replaced the trash can and refresh icons in the shopping cart with Font Awesome glyphs.
Edit /includes/languages/english/YOUR_TEMPLATE/icon_names.php and editing the name of the ICON_UPDATE_ALT

<?php
/**
 * @package languageDefines
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: icon_names.php 4224 2006-08-24 01:41:50Z drbyte $
 */

// define the icon images used in the project
define('ICON_IMAGE_ERROR', 'error.gif');
define('ICON_IMAGE_WARNING', 'warning.gif');
define('ICON_IMAGE_SUCCESS', 'success.gif');
define('ICON_IMAGE_TRASH', 'small_delete.gif');
define('ICON_IMAGE_UPDATE', 'button_update_cart.gif');
define('ICON_IMAGE_TINYCART', 'cart.gif');

//alt tags for buttons
define('ICON_ERROR_ALT', 'Error');
define('ICON_SUCCESS_ALT', 'Success');
define('ICON_WARNING_ALT', 'Warning');
define('ICON_TRASH_ALT', 'Delete this item from the cart by clicking this icon.');
define('ICON_UPDATE_ALT', '');
define('ICON_TINYCART_ALT', 'Add this product to your cart by clicking here.');

?>

Added the following to the stylesheet:

button.button_update_cart:hover {
background: none repeat scroll 0% 0% #CAC7C2;
border: 1px solid #CAC7C2;
}

button.button_update_cart {
background: none repeat scroll 0% 0% #0037B4;
border: 1px solid #0037B4;
padding:0;
display:block;
width:30px;
height:30px;
border-radius:15px;
font-size:15px;
line-height:30px;
cursor: pointer;
text-align:center;
text-decoration: none;
font-family: "FontAwesome";
}

Modify the color and font size to your liking.

Edit line 113 of includes/templates/YOUR_TEMPLTAE/templates/tpl_shopping_cart_default.php as follows

<a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, 'action=remove_product&product_id=' . $product['id']); ?>"><i class="fa fa-trash"></i></a>

Added the following to the stylesheet:

.cartRemoveItemDisplay .fa-trash {color:#0037B4;font-size:2rem;}

Modify the color and font size to your liking.

lat9:

The Delete button is always shown as an icon. You can change the image used by copying /includes/languages/english/icon_names.php to /includes/languages/english/new1.5/icon_names.php and editing the name of the ICON_IMAGE_TRASH (make sure to copy the new icon to /includes/templates/new1.5/buttons/icons).

For the Update button, you'll copy/edit the same file to reduce the length of ICON_UPDATE_ALT; the default behavior is to use the button images of the alt-text is longer than 40 characters.

<?php /** * @package languageDefines * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0 * @version $Id: icon_names.php 4224 2006-08-24 01:41:50Z drbyte $ */ // define the icon images used in the project define('ICON_IMAGE_ERROR', 'error.gif'); define('ICON_IMAGE_WARNING', 'warning.gif'); define('ICON_IMAGE_SUCCESS', 'success.gif'); define('ICON_IMAGE_TRASH', 'small_delete.gif'); define('ICON_IMAGE_UPDATE', 'button_update_cart.gif'); define('ICON_IMAGE_TINYCART', 'cart.gif'); //alt tags for buttons define('ICON_ERROR_ALT', 'Error'); define('ICON_SUCCESS_ALT', 'Success'); define('ICON_WARNING_ALT', 'Warning'); define('ICON_TRASH_ALT', 'Delete this item from the cart by clicking this icon.'); define('ICON_UPDATE_ALT', 'Update'); define('ICON_TINYCART_ALT', 'Add this product to your cart by clicking here.'); ?>

I've just submitted v1.1.3 to the Plugins for review; it can be downloaded once approved. Starting with this version, your store must be running Zen Cart v1.5.4 or later for the plugin to be successfully installed. Please use the plugin's v1.1.1 distribution for Zen Cart installations prior to v1.5.4.

This version no longer distributes the overridden files (/includes/functions/html_output.php and /includes/templates/YOUR_TEMPLATE/common/html_header.php), since those files have a wide variation over Zen Cart versions and your installed template. Instead, the installation instructions identify the code fragments that you'll need to add to those files.

v1.1.3 is now available for download.

Hi,

I just installed this mod into a zc155e. I messed it up somehow and can't figure out what I did wrong.

Here is a link to my cart:
https://001mc.justmedical.biz/

If you add something to the shopping cart, then go to the shopping cart page, you'll see a nice selection of wonky buttons.

Interestingly, I was able to get the little trashcan icon working nicely. What I don't understand is why the "Continue Shopping" and "Shipping Estimator" buttons are messed up.

Can somebody take a look and poing me in the right direction?

Thanks!

++++
MORE INFO:
My template is a clone of Responsive Classic, plus the following mods:
Responsive Color Changes v1.1a
Image Handler 4 v4.3.2
Zen Lightbox v1.6.5
Recently Viewed Items v2.3
Ceon URI Mapping (SEO) v4.5.2

Btw: After I noticed the problems, I revert both the db and file set to exactly as it was right after installing Ceon URI. Everything was working and only threw 3 minor validation warnings (https://validator.w3.org). Then I re-installed CSS3 buttons, same result.

Oops, forgot that I'd updated to include that Font Awesome support.

Would you post your update to /includes/extra_datafiles/css_button_glyphs.php?

lat9:

Oops, forgot that I'd updated to include that Font Awesome support.

Yes, that was the main thing I wanted! :)

Here is my /includes/extra_datafiles/css_button_glyphs.php:

<?php
// -----
// Part of the CSS3 buttons for Zen Cart plugin, v1.1.0 and later.  Copyright (C) 2014, Vinos de Frutas Tropicales (lat9).
//
// This file contains an optional mapping to include font-awesome (http://fortawesome.github.io/Font-Awesome/) glyphs in the text for CSS3 buttons.
//
// Use this array to define any glyph to pre-pend to the button's text.
//
$cssButtonGlyphs = array (
  'button_back' => '<i class="fa fa-undo"></i>',
  'button_in_cart' => '<i class="fa fa-shopping-cart"></i>',
  'button_send' => '<i class="fa fa-send"></i>',
  
);

@Feznizzle, you've got some kind of encoding issue on that site. When I look at this (https://001mc.justmedical.biz/index.php?main_page=privacy) page, I see the Font-Awesome glyph inserted with those invalid multi-byte characters, too.

Once you correct that, you'll need to edit that css_buttons_glyphs.php file to add the glyphs for additional buttons.

Think I made a little progress (icons are showing up now), but I still can't figure out where the invalid characters are coming from.

Maybe it's my /includes/functions/html_output.php?

I used the code supplied in the mod to replace the bottom half (lines 302 - 590) of my untouched zc1553 html_output.php file.

This is what I replaced it with (from the mod):

/**
 * generate CSS buttons in the current language
 * concept from contributions by Seb Rouleau and paulm, subsequently adapted to Zen Cart
 * note: any hard-coded buttons will not be able to use this function
**/
  function zenCssButton($image = '', $text, $type, $sec_class = '', $parameters = '') {
   global $css_button_text, $css_button_opts, $template, $current_page_base, $language;

   $button_name = basename($image, '.gif');
   
//-bof-20141016-lat9-css3_buttons-Add font-awesome glyph support  *** 1 of 3 ***
   global $cssButtonGlyphs;  //-Defined in /includes/extra_datafiles/css_button_glyphs.php
   $button_glyph = (isset ($cssButtonGlyphs) && is_array ($cssButtonGlyphs) && isset ($cssButtonGlyphs[$button_name])) ? ($cssButtonGlyphs[$button_name] . '####') : '';
   
//-eof-20141016-lat9-css3_buttons-Add font-awesome glyph support  *** 1 of 3 ***

    // if no secondary class is set use the image name for the sec_class
    if (empty($sec_class)) $sec_class = $button_name;
    if(!empty($sec_class)) $sec_class = ' ' . $sec_class;
    if(!empty($parameters))$parameters = ' ' . $parameters;
    $mouse_out_class  = 'cssButton ' . (($type == 'submit') ? 'submit_button button ' : 'normal_button button ') . $sec_class;
    $mouse_over_class = 'cssButtonHover ' . (($type == 'button') ? 'normal_button button ' : '') . $sec_class . $sec_class . 'Hover';
    // javascript to set different classes on mouseover and mouseout: enables hover effect on the buttons
    // (pure css hovers on non link elements do work work in every browser)
    $css_button_js =  'onmouseover="this.className=\''. $mouse_over_class . '\'" onmouseout="this.className=\'' . $mouse_out_class . '\'"';

    if (CSS_BUTTON_POPUPS_IS_ARRAY == 'true') {
      $popuptext = (!empty($css_button_text[$button_name])) ? $css_button_text[$button_name] : ($button_name . CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT);
      $tooltip = ' title="' . $popuptext . '"';
    } else {
      $tooltip = '';
    }
    $css_button = '';

    if ($type == 'submit'){
      // form input button
      if ($parameters != '') {
        // If the input parameters include a "name" attribute, need to emulate an <input type="image" /> return value by adding a _x to the name parameter (creds to paulm)
        if (preg_match('/name="([a-zA-Z0-9\-_]+)"/', $parameters, $matches)) {
          $parameters = str_replace('name="' . $matches[1], 'name="' . $matches[1] . '_x', $parameters);
        }
        // If the input parameters include a "value" attribute, remove it since that attribute will be set to the input text string.
        if (preg_match('/(value="[a-zA-Z0=9\-_]+")/', $parameters, $matches)) {
          $parameters = str_replace($matches[1], '', $parameters);
        }
      }
//-bof-20141016-lat9-css3_buttons-Add font-awesome glyphs  *** 2 of 3 ***
      if (CSS3_BUTTONS_SUBMIT_TYPE == 'button') {
        $css_button = '<button class="' . $mouse_out_class . '" ' . $css_button_js . ' type="submit" value="' . $text . '"' . $tooltip . $parameters . '>' . $button_glyph . $text . '</button>';
        
      } else {
        $css_button = '<input class="' . $mouse_out_class . '" ' . $css_button_js . ' type="submit" value="' . $text . '"' . $tooltip . $parameters . ' />';
        
      }
//-eof-20141016-lat9-css3_buttons-Add font-awesome glyphs  *** 2 of 3 ***
    }

    if ($type=='button'){
      // link button
      $css_button = '<span class="' . $mouse_out_class . '" ' . $css_button_js . $tooltip . $parameters . '>##' . $button_glyph . $text . '##</span>';  //-20141016-lat9-css3_buttons-Add font-awesome glyphs *** 3 of 3 ***
    }
    return $css_button;
  }


/*
 *  Output a separator either through whitespace, or with an image
 */
  function zen_draw_separator($image = 'true', $width = '100%', $height = '1') {

    // set default to use from template - zen_image will translate if not found in current template
    if ($image == 'true') {
      $image = DIR_WS_TEMPLATE_IMAGES . OTHER_IMAGE_BLACK_SEPARATOR;
    } else {
      if (!strstr($image, DIR_WS_TEMPLATE_IMAGES)) {
        $image = DIR_WS_TEMPLATE_IMAGES . $image;
      }
    }
    return zen_image($image, '', $width, $height);
  }

/*
 *  Output a form
 */
  function zen_draw_form($name, $action, $method = 'post', $parameters = '') {
    $form = '<form name="' . zen_output_string($name) . '" action="' . zen_output_string($action) . '" method="' . zen_output_string($method) . '"';

    if (zen_not_null($parameters)) $form .= ' ' . $parameters;

    $form .= '>';
    if (strtolower($method) == 'post') $form .= '<input type="hidden" name="securityToken" value="' . $_SESSION['securityToken'] . '" />';
    return $form;
  }

/*
 *  Output a form input field
 */
  function zen_draw_input_field($name, $value = '', $parameters = '', $type = 'text', $reinsert_value = true) {
    $field = '<input type="' . zen_output_string($type) . '" name="' . zen_sanitize_string(zen_output_string($name)) . '"';
    if ( (isset($GLOBALS[$name]) && is_string($GLOBALS[$name])) && ($reinsert_value == true) ) {
      $field .= ' value="' . zen_output_string(stripslashes($GLOBALS[$name])) . '"';
    } elseif (zen_not_null($value)) {
      $field .= ' value="' . zen_output_string($value) . '"';
    }

    if (zen_not_null($parameters)) $field .= ' ' . $parameters;

    $field .= ' />';

    return $field;
  }

/*
 *  Output a form password field
 */
  function zen_draw_password_field($name, $value = '', $parameters = 'maxlength="40"') {
    return zen_draw_input_field($name, $value, $parameters, 'password', false);
  }

/*
 *  Output a selection field - alias function for zen_draw_checkbox_field() and zen_draw_radio_field()
 */
  function zen_draw_selection_field($name, $type, $value = '', $checked = false, $parameters = '') {
    $selection = '<input type="' . zen_output_string($type) . '" name="' . zen_output_string($name) . '"';

    if (zen_not_null($value)) $selection .= ' value="' . zen_output_string($value) . '"';

    if ( ($checked == true) || ( isset($GLOBALS[$name]) && is_string($GLOBALS[$name]) && ( ($GLOBALS[$name] == 'on') || (isset($value) && (stripslashes($GLOBALS[$name]) == $value)) ) ) ) {
      $selection .= ' checked="checked"';
    }

    if (zen_not_null($parameters)) $selection .= ' ' . $parameters;

    $selection .= ' />';

    return $selection;
  }

/*
 *  Output a form checkbox field
 */
  function zen_draw_checkbox_field($name, $value = '', $checked = false, $parameters = '') {
    return zen_draw_selection_field($name, 'checkbox', $value, $checked, $parameters);
  }

/*
 * Output a form radio field
 */
  function zen_draw_radio_field($name, $value = '', $checked = false, $parameters = '') {
    return zen_draw_selection_field($name, 'radio', $value, $checked, $parameters);
  }

/*
 *  Output a form textarea field
 */
  function zen_draw_textarea_field($name, $width, $height, $text = '~*~*#', $parameters = '', $reinsert_value = true) {
    $field = '<textarea name="' . zen_output_string($name) . '" cols="' . zen_output_string($width) . '" rows="' . zen_output_string($height) . '"';

    if (zen_not_null($parameters)) $field .= ' ' . $parameters;

    $field .= '>';

    if ($text == '~*~*#' && (isset($GLOBALS[$name]) && is_string($GLOBALS[$name])) && ($reinsert_value == true) ) {
      $field .= stripslashes($GLOBALS[$name]);
    } elseif ($text != '~*~*#' && zen_not_null($text)) {
      $field .= $text;
    }

    $field .= '</textarea>';

    return $field;
  }

/*
 *  Output a form hidden field
 */
  function zen_draw_hidden_field($name, $value = '~*~*#', $parameters = '') {
    $field = '<input type="hidden" name="' . zen_sanitize_string(zen_output_string($name)) . '"';

    if (zen_not_null($value) && $value != '~*~*#') {
      $field .= ' value="' . zen_output_string($value) . '"';
    } elseif (isset($GLOBALS[$name]) && is_string($GLOBALS[$name])) {
      $field .= ' value="' . zen_output_string(stripslashes($GLOBALS[$name])) . '"';
    }

    if (zen_not_null($parameters)) $field .= ' ' . $parameters;

    $field .= ' />';

    return $field;
  }

/*
 * Output a form file-field
 */
  function zen_draw_file_field($name, $required = false) {
    $field = zen_draw_input_field($name, '', ' size="50" ', 'file');

    return $field;
  }


/*
 *  Hide form elements while including session id info
 *  IMPORTANT: This should be used in every FORM that has an OnSubmit() function tied to it, to prevent unexpected logouts
 */
  function zen_hide_session_id() {
    global $session_started;

    if ( ($session_started == true) && defined('SID') && zen_not_null(SID) ) {
      return zen_draw_hidden_field(zen_session_name(), zen_session_id());
    }
  }

/*
 *  Output a form pull down menu
 *  Pulls values from a passed array, with the indicated option pre-selected
 */
  function zen_draw_pull_down_menu($name, $values, $default = '', $parameters = '', $required = false) {
    $field = '<select';

    if (!strstr($parameters, 'id=')) $field .= ' id="select-'.zen_output_string($name).'"';

    $field .= ' name="' . zen_output_string($name) . '"';

    if (zen_not_null($parameters)) $field .= ' ' . $parameters;

    $field .= '>' . "\n";

    if (empty($default) && isset($GLOBALS[$name]) && is_string($GLOBALS[$name]) ) $default = stripslashes($GLOBALS[$name]);

    for ($i=0, $n=sizeof($values); $i<$n; $i++) {
      $field .= '  <option value="' . zen_output_string($values[$i]['id']) . '"';
      if ($default == $values[$i]['id']) {
        $field .= ' selected="selected"';
      }

      $field .= '>' . zen_output_string($values[$i]['text'], array('"' => '"', '\'' => ''', '<' => '<', '>' => '>')) . '</option>' . "\n";
    }
    $field .= '</select>' . "\n";

    if ($required == true) $field .= TEXT_FIELD_REQUIRED;

    return $field;
  }

/*
 * Creates a pull-down list of countries
 */
  function zen_get_country_list($name, $selected = '', $parameters = '') {
    $countriesAtTopOfList = array();
    $countries_array = array(array('id' => '', 'text' => PULL_DOWN_DEFAULT));
    $countries = zen_get_countries();

    // Set some default entries at top of list:
    if (STORE_COUNTRY != SHOW_CREATE_ACCOUNT_DEFAULT_COUNTRY) $countriesAtTopOfList[] = SHOW_CREATE_ACCOUNT_DEFAULT_COUNTRY;
    $countriesAtTopOfList[] = STORE_COUNTRY;
    // IF YOU WANT TO ADD MORE DEFAULTS TO THE TOP OF THIS LIST, SIMPLY ENTER THEIR NUMBERS HERE.
    // Duplicate more lines as needed
    // Example: Canada is 108, so use 108 as shown:
    //$countriesAtTopOfList[] = 108;

    //process array of top-of-list entries:
    foreach ($countriesAtTopOfList as $key=>$val) {
      $countries_array[] = array('id' => $val, 'text' => zen_get_country_name($val));
    }
    // now add anything not in the defaults list:
    for ($i=0, $n=sizeof($countries); $i<$n; $i++) {
      $alreadyInList = FALSE;
      foreach($countriesAtTopOfList as $key=>$val) {
        if ($countries[$i]['countries_id'] == $val)
        {
          // If you don't want to exclude entries already at the top of the list, comment out this next line:
          $alreadyInList = TRUE;
          continue;
        }
      }
      if (!$alreadyInList) $countries_array[] = array('id' => $countries[$i]['countries_id'], 'text' => $countries[$i]['countries_name']);
    }

    return zen_draw_pull_down_menu($name, $countries_array, $selected, $parameters);
  }
/*
 * Assesses suitability for additional parameters such as rel=nofollow etc
 */
  function zen_href_params($page = '', $parameters = '') {
    global $current_page_base;
    $addparms = '';
    // if nofollow has already been set, ignore this function
    if (stristr($parameters, 'nofollow')) return $parameters;
    // if list of skippable pages has been set in meta_tags.php lang file (is by default), use that to add rel=nofollow params
    if (defined('ROBOTS_PAGES_TO_SKIP') && in_array($page, explode(",", constant('ROBOTS_PAGES_TO_SKIP')))
        || $current_page_base=='down_for_maintenance') $addparms = 'rel="nofollow"';
    return ($parameters == '' ? $addparms : $parameters . ' ' . $addparms);
  }
////
// output label for input fields
  function zen_draw_label($text, $for, $parameters = ''){
    $label = '<label for="' . $for . '" ' . $parameters . '>' . $text . '</label>';
    return $label;
  }

Ok, found the source of the odd characters. To see it, search my code above for: </span>

In one version, that was blank space. In another, it was hardcoded space ( ). I tried removing the spaces, glitched out. So then I put back in hard coded space and worked.

Mostly.

The "Add to Cart" button on prod pages is still wonky. After I track that down, I'll try inserting the glyphs as you mentioned.

Ok. I'm going to surrender for now.

My primary interest in this was trying to figure out how to properly load/use fonts. Maybe you could take a look at this thread and point me in the right direction?
https://www.zen-cart.com/showthread.php?223012-How-to-install-use-a-font

@lat9,

The code you supply in the mod (to be inserted in html_output.php) cleanly marks the bof and eof your additions for:
*** 1 of 3 ***
*** 2 of 3 ***

But the last (*** 3 of 3 ***) is pretty unclear.

Any chance you could repost that code with the 3rd section more clearly marked?

I'm using a cloned copy of zc155e Responsive Classic. If I can figure out where your 3rd section begins/ends, I'd like to try pasting those 3 sections in manually, rather than doing a copy pasta of the entire section.

In case somebody else stumbles in here, trying to get the glyph/fontawesome support provided by this mod for a zc155e (responsive classic):

I am now fairly certain that the problem has something to do with js:
/includes/javascript/jquery-1.12.1.min.js
/includes/templates/template_default/jscript/jquery.min.js

Before installing, the site validates fine (https://validator.w3.org/). After installing, the validator gets so offended it won't even try.

Gives this message:

Sorry, I am unable to validate this document because on line 286 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.
The error was: utf8 "\xA0" does not map to Unicode

That reference (\xA0) only occurs in the two js files I listed above. They exist prior to installing this mod and work fine.

Anyway, I'm not smart enough to understand what this means... but it seems like a big hint for fixing the problem.

I'm giving up for now, but I'll follow this thread just in case somebody posts a solution. I really want to use it!

Also, I've already started a new staging site so that I can continue working. I'll leave my 155e with this mod installed alone in case anybody wants to play with it or run in on the validator:
https://001mc.justmedical.biz/

Would you post the changes you made to the zenCssButtons function? I'm thinking that that's the source of the issue.