CSS3 Buttons [support thread]

[lat9]

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

[lat9]

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

[Feznizzle]

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>',
  
);

[lat9]

@Feznizzle, you've got some kind of encoding issue on that site. When I look at this (https://001mc.justmedical.biz/index....n_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.

[Feznizzle]

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('"' => '&quot;', '\'' => ''', '<' => '&lt;', '>' => '&gt;')) . '</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;
  }

[Feznizzle]

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 (&nbsp;). 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.

[Feznizzle]

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....all-use-a-font

[Feznizzle]

@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.

[Feznizzle]

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/