Using Firebug to Help With Development Tool Kit

[ScriptJunkie]

When looking in Firefox's awesome tool, Firebug, I see html code that I want to change.

Firebug will give me the CSS code that's related and even tell me what line to find it on, but it doesn't point me to the correct PHP file.

How can I use the code I find in Firebug in conjunction with the Developer's Toolkit, to locate the appropriate file?

Example:

On my Step 2 of 3 - Payment Information Page in Zen Cart, I find this code using Firebug:

<fieldset><legend>Payment Method</legend>

<strong>We accept:</strong>

<img width="37" height="23" alt="" src="includes/templates/barebones/images/icons/cc1.gif"/>

<img width="37" height="23" alt="" src="includes/templates/barebones/images/icons/cc2.gif"/>

<img width="37" height="21" alt="" src="includes/templates/barebones/images/icons/cc3.gif"/>

<img width="37" height="21" alt="" src="includes/templates/barebones/images/icons/cc5.gif"/>

<br class="clearBoth"/>

In this example, I want to add Alt Text to this code so that the images will be accessible by screen readers for the visually impaired.

What part of the above code would I paste into the Developer's Tool Kit in order to locate the appropriate PHP file?

Or, is there another method I should be using to figure out how to locate the PHP file that contains the code I'm able to see using Firebug?

I've tried pasting this single line of code, for example, in to the bottom most box of the Developer's Tool Kit, but got no results.

<img width="37" height="21" alt="" src="includes/templates/barebones/images/icons/cc5.gif"/>

I think the Developer's Tool Kit is awesome, and I've read the tutorials about how to use it, but I think having some info about how to use it in conjunction with Firebug would come in handy for a lot of folks.

Suggestions?

[s_t_e_v_e]

Firebug, nor web developer will give you that information....

look at the url for the page...main_page= theres a clue here...

so for the above the url will be ...main_page=checkout_payment which tells me to go and look at
includes - templates - yourtemplate - templates - tpl_checkout_payment_default.php

limiting your search to just "cc5.gif" would probably help too...

[ScriptJunkie]

Thanks Steve :)

I've been to the tpl_checkout_payment_default.php file a half dozen times and I don't see any html code there that resembles what I see in Firebug (i.e. an image string with an empty alt tag that I can populate), as below:

<fieldset><legend>Payment Method</legend>

<strong>We accept:</strong>

<img width="37" height="23" alt="" src="includes/templates/barebones/images/icons/cc1.gif"/>

<img width="37" height="23" alt="" src="includes/templates/barebones/images/icons/cc2.gif"/>

<img width="37" height="21" alt="" src="includes/templates/barebones/images/icons/cc3.gif"/>

<img width="37" height="21" alt="" src="includes/templates/barebones/images/icons/cc5.gif"/>

<br class="clearBoth"/>

The code in the tpl_checkout_payment_default.php file that is related to the same page & section as the code above looks like this:

<fieldset>
<legend><?php echo TABLE_HEADING_PAYMENT_METHOD; ?></legend>

<?php
if (SHOW_ACCEPTED_CREDIT_CARDS != '0') {
?>

<?php
if (SHOW_ACCEPTED_CREDIT_CARDS == '1') {
echo TEXT_ACCEPTED_CREDIT_CARDS . zen_get_cc_enabled();
}
if (SHOW_ACCEPTED_CREDIT_CARDS == '2') {
echo TEXT_ACCEPTED_CREDIT_CARDS . zen_get_cc_enabled('IMAGE_');
}
?>

Since that wouldn't work for me, I followed zen_get_cc_enabled('IMAGE_'); to the credit_cards.php file located in includes/languages/english directory and found this code:

// cc enabled text
define('TEXT_CC_ENABLED_VISA','Visa');
define('TEXT_CC_ENABLED_MC','MC');
define('TEXT_CC_ENABLED_AMEX','AmEx');
define('TEXT_CC_ENABLED_DINERS_CLUB','Diners Club');
define('TEXT_CC_ENABLED_DISCOVER','Discover');
define('TEXT_CC_ENABLED_JCB','JCB');
define('TEXT_CC_ENABLED_AUSTRALIAN_BANKCARD','Australian Bankcard');
define('TEXT_CC_ENABLED_SOLO','Solo');
define('TEXT_CC_ENABLED_SWITCH','Switch');
define('TEXT_CC_ENABLED_MAESTRO','Maestro');

and this code:

// cc enabled image
define('IMAGE_CC_ENABLED_VISA', zen_image($template->get_template_dir('cc1.gif', DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . 'cc1.gif'));
define('IMAGE_CC_ENABLED_MC', zen_image($template->get_template_dir('cc2.gif', DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . 'cc2.gif'));
define('IMAGE_CC_ENABLED_AMEX', zen_image($template->get_template_dir('cc3.gif', DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . 'cc3.gif'));
define('IMAGE_CC_ENABLED_DINERS_CLUB', zen_image($template->get_template_dir('cc4.gif', DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . 'cc4.gif'));
define('IMAGE_CC_ENABLED_DISCOVER', zen_image($template->get_template_dir('cc5.gif', DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . 'cc5.gif'));
define('IMAGE_CC_ENABLED_JCB', zen_image($template->get_template_dir('cc6.gif', DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . 'cc6.gif'));
define('IMAGE_CC_ENABLED_AUSTRALIAN_BANKCARD', zen_image($template->get_template_dir('cc7.gif', DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . 'cc7.gif'));
define('IMAGE_CC_ENABLED_SOLO', zen_image($template->get_template_dir('cc8.gif', DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . 'cc8.gif'));
define('IMAGE_CC_ENABLED_SWITCH', zen_image($template->get_template_dir('cc9.gif', DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . 'cc9.gif'));
define('IMAGE_CC_ENABLED_MAESTRO', zen_image($template->get_template_dir('cc10.gif', DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . 'cc10.gif'));

Feels like I'm getting closer, but I still don't see what I can edit there to insert Alt Text.

After coming back here and reading your suggestion, I used the Developer's Toolkit to search "cc5.gif". No results were returned.

I really just don't know what else to try. Any other suggestions?

[s_t_e_v_e]

you're very close....

just another step further and a search for the zen_image function...

// The HTML image wrapper function
function zen_image($src, $alt = '', $width = '', $height = '', $params = '')

using the above function details, try the following;

define('IMAGE_CC_ENABLED_VISA', zen_image($template->get_template_dir('cc1.gif', DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . 'cc1.gif','alt text here'));

try it with one of the defines to start with...

[ScriptJunkie]

Ok thanks!

I'll give that a try and report back here with my results!

You're so appreciated!

[ScriptJunkie]

I did this for each of my cc images by editing the credit_cards.php file located in includes/languages/english/CUSTOM directory:

define('IMAGE_CC_ENABLED_VISA', zen_image($template->get_template_dir('cc1.gif', DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' . 'cc1.gif','Visa'));

and changed the card names and numbers as I went along.

Worked like a charm!

Thank you so much Steve!!