In Example One , we hard coded the font icons in the button code. The problem with this is you can not use image buttons again without changing the code back plus you would have to edit each file if you wanted to change icons. In Example Two I’ll change the includes/functions/html_output.php file such that you can turn css buttons off and display the hard buttons if you wish to. Plus you can use different icons based on languege.
Files affected are:
includes/functions/html_output.php (Master file)
includes/languages/english/YOUR_TEMPLATE/button_names.php
includes/templates/YOUR_TEMPLATE/css/stylesheet_css_buttons.css
html_output.php Lines in red need to be edited/added..
Code:
function zen_image_submit($image, $alt = '', $parameters = '', $sec_class = '') {
global $template, $current_page_base, $zco_notifier;
if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes' && strlen($alt)<70) return zenCssButton($image, $alt, 'submit', $sec_class, $parameters); //modified for FA5
$zco_notifier->notify('PAGE_OUTPUT_IMAGE_SUBMIT');
$alt = trim(explode('</i>', $alt)[1]); //modified for FA5
$image_submit = '<input type="image" src="' . zen_output_string($template->get_template_dir($image, DIR_WS_TEMPLATE, $current_page_base, 'buttons/' . $_SESSION['language'] . '/') . $image) . '" alt="' . zen_output_string($alt) . '"';
if (zen_not_null($alt)) $image_submit .= ' title=" ' . zen_output_string($alt) . ' "';
if (zen_not_null($parameters)) $image_submit .= ' ' . $parameters;
$image_submit .= ' />';
return $image_submit;
}
and
Code:
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');
// 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 (defined('CSS_BUTTON_POPUPS_IS_ARRAY') && 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);
}
} /* */
// -----
// Give an observer the chance to provide alternate formatting for the button (it's set to an empty
// string above). If the value is still empty after the notification, create the standard-format
// of the button.
//
$GLOBALS['zco_notifier']->notify(
'NOTIFY_ZEN_CSS_BUTTON_SUBMIT',
array(
'button_name' => $button_name,
'text' => $text,
'sec_class' => $sec_class,
'parameters' => $parameters,
),
$css_button
);
if ($css_button == '') {
// $css_button = '<input class="' . $mouse_out_class . '" ' . $css_button_js . ' type="submit" value="' . $text . '"' . $tooltip . $parameters . ' />';
$css_button = '<button class="' . $mouse_out_class . '" ' . $css_button_js . ' type="submit" ' . $parameters . ' >' . $text . '</button>'; // modified for FA5
}
}
if ($type=='button'){
// link button
// -----
// Give an observer the chance to provide alternate formatting for the button (it's set to an empty string
// above). If the value is still empty after the notification, create the standard-format
// of the button.
//
$GLOBALS['zco_notifier']->notify(
'NOTIFY_ZEN_CSS_BUTTON_BUTTON',
array(
'button_name' => $button_name,
'text' => $text,
'sec_class' => $sec_class,
'parameters' => $parameters,
),
$css_button
);
if ($css_button == '') {
$css_button = '<span class="' . $mouse_out_class . '" ' . $css_button_js . $tooltip . $parameters . '> ' . $text . ' </span>';
}
}
return $css_button;
}
Button name file holds your buttons and alt defines if it’s not in your template folder, copy it there. This is where you can add the font icons to match your languages. Each language should have it’s own button name file.. besure to use the right style, they are fas, far, and fab..
Code:
define('BUTTON_IN_CART_ALT', '<i class="fas fa-cart-plus"></i> Add to Cart');
define('BUTTON_LOGIN_ALT', '<i class="fas fa-sign-in-alt"></i> Sign In');
define('BUTTON_LOOKUP_ALT', '<i class="far fa-eye"></i> Lookup');
This was the one I used on my site, I'm now fully using Font Awesome 5. That about covers what I fond..
Bookmarks