help understanding tep_image_submit

[blackhawk]

Is tep_image_submit the only custom submit function used to submit forms with oscmax? I searched through html_output.php and did not see a tep_submit or anything like that. If tep_image_subimit is the way to submit a form via html_output, then is there a guide on how to use it "without" an image button? Meaning keep the type="submit" not image.

My questions are for the purpose of "expanding" the default functions, so that we can build custom code.

Thanks!

[ridexbuilder]

The functions in that file do form the basis/core.
http://xref.oscmax.com/nav.html?index.html

implode_assoc()
short_name()
tep_href_link()
tep_image()
tep_image_submit()
tep_image_button()
tep_draw_separator()
tep_draw_form()
tep_draw_input_field()
tep_draw_password_field()
tep_draw_selection_field()
tep_draw_checkbox_field()
tep_draw_radio_field()
tep_draw_textarea_field()
tep_draw_hidden_field()
tep_hide_session_id()
tep_draw_pull_down_menu()
tep_get_country_list()

[blackhawk]

The functions in that file do form the basis/core.
PHPXref 0.7: osCMax 2.0.4

Thank you so much R for the extensive list. I had an idea of expanding tep_image_submit function to add more flexibility for developers. If we look at the original function....

 function tep_image_submit($image, $alt = '', $parameters = '') {
    global $language;

    if(is_file(DIR_WS_TEMPLATES . $language. '/images/buttons/' . $image)) {
        $image_submit = '<input type="image" src="' .
            tep_output_string(DIR_WS_TEMPLATES . $language. '/images/buttons/' . $image) . '" class="img" alt="' . tep_output_string($alt) . '"';
    } else {
        $image_submit = '<input type="image" src="' . tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image) . '" class="img" alt="' . tep_output_string($alt) . '"';
    }

    if (tep_not_null($alt)) $image_submit .= ' title=" ' . tep_output_string($alt) . ' "';

    if (tep_not_null($parameters)) $image_submit .= ' ' . $parameters;

    $image_submit .= '>';

    return $image_submit;
  }

we can offer a 'third' condition for the option of not loading an image at all, and in result, change the type from image to submit like this...

function tep_image_submit($image, $alt = '', $parameters = '') {
    global $language;

    if(is_file(DIR_WS_TEMPLATES . $language. '/images/buttons/' . $image)) {
        $image_submit = '<input type="image" src="' .
            tep_output_string(DIR_WS_TEMPLATES . $language. '/images/buttons/' . $image) . '" class="img" alt="' . tep_output_string($alt) . '"';
   
   } 
   elseif(is_file(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image)) {
        $image_submit = '<input type="image" src="' . tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image) . '" class="img" alt="' . tep_output_string($alt) . '"';
    }

	else {
	   $image_submit = '<input type="submit" value="submit" name="submit"';
	}

    if (tep_not_null($parameters)) $image_submit .= ' ' . $parameters;

    $image_submit .= '>';

    return $image_submit;
  }

With the above modification, I can now use...

tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH, 'id="doit"') .'<br>';

or

tep_image_submit('', BOX_HEADING_SEARCH, 'id="doit"') .'<br>';

and they both give me different submit type layouts. Let me know your thoughts!

bh

[ridexbuilder]

My head hurts! Will look again later.

[Luxoria]

....and they both give me different submit type layouts....

Hi, could you give me an example of different submit type layouts? I am not following your idea.

[blackhawk]

This is highly experimental, but the point is to show that you can have an options in either showing image for your submit button, or a default html submit button, within your oscmax forms.

Here are 6 easy steps to glory. Open for revision by the way, but this is what I got initially...

1.
create a custom button folder under your template directory like this...
catalog/templates/owb_fallback/images/buttons

2.
design a custom submit button with photoshop and place it within that button folder you just created

3.
open up your configure.php file and add a custom define that locates your new image directory. write something like...

define('DIR_WS_OWB_IMAGES', HTTP_SERVER . HTTP_COOKIE_PATH . 'templates/owb_fallback/images/');

4.
open up catalog/includes/functions/html_output.php, and look for this line...
function tep_image_submit($image, $alt = '', $parameters = '') {

5.
replace that function with this function...

function tep_image_submit($image, $alt = '', $parameters = '') {
    global $language;

 if(is_file(DIR_WS_TEMPLATES . $language. '/images/buttons/' . $image)) {
        $image_submit = '<input type="image" src="' .
            tep_output_string(DIR_WS_TEMPLATES . $language. '/images/buttons/' . $image) . '" class="img" alt="' . tep_output_string($alt) . '"';
   
   } 
        elseif((DIR_WS_OWB_IMAGES . 'buttons/' . $image) &&($image != null)) {
        $image_submit = '<input type="image" src="' . tep_output_string(DIR_WS_OWB_IMAGES . 'buttons/' . $image) . '" class="img" alt="' . tep_output_string($alt) . '"';
}
	else { 
	   $image_submit = '<input type="submit" value="submit" name="submit"';
	}

    if (tep_not_null($parameters)) $image_submit .= ' ' . $parameters;

    $image_submit .= '>';
    return $image_submit;
  }

6.
Now to see it in action, use the search box on the home page of your oscmax site. Go to catalog/includes/boxes/search.php, line 31. Change...

tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH)

to

tep_image_submit('', BOX_HEADING_SEARCH)

You will then see on the home page that you don't get an error or blank submit image, but instead a default html submit button. But here is the awesome part, if you created a button called superfly.gif and placed it in catalog/templates/owb_fallback/images/buttons, and you made your tep link...

tep_image_submit('superfly.gif', BOX_HEADING_SEARCH)

It will load instantly! Thats what I mean about layouts. Create as many different submit buttons in photoshop your heart desires and stick them in the buttons folder. Then just call them.

Let me know if you get stuck!
bh

[pgmarshall]

bh,

You can do this by adding the buttons to your template folder ...

catalog/<your template>/<language of buttons>/images/buttons/

See the now defunct pgm template as an example. BTS takes care of the image loading from the template rather than the fallback buttons ...

Which is what I think you are trying a achieve ... If you want to use HTML buttons then I would suggest just writing a new function rather than nesting the ifs ...

Regards,

[blackhawk]

Thanks for the heads up! Ok, I see the pgm example your talking about and I like it. My drive in the post above was leaning towards the fallback template. I noticed that it doesn't have an english folder under it, which gave me my motivation for the customization But I do respect your points given. I do feel though, the methods above can be optional for folks who want to explore fallback.

 If you want to use HTML buttons then I would suggest just writing a new function rather than nesting the ifs ...

that defeats the purpose of making it easy and its not just using the html buttons but it gives the user the option to style his/her html button with the third parameter on the tep_image_submit function.

[Luxoria]

I see what you are getting at now. I personally really dislike changing the core, it makes more work when upgrading to future versions.

My button layout is a bit on the crazy side if I may post a screen shot.

The first one is normal, the middle on is on hover (my screen shooting hides the mouse), and the last one is after the customer clicks the button and is waiting for order to process.

Here is the code I used...

 <script language="JavaScript">
function setVisibility() {
document.getElementById('progress_bar').style.display = 'inline';
document.getElementById('confirm').style.display = 'none';
}
</script>

<div class="flow_button" id="confirm"> <input type="image"  src="includes/languages/english/images/buttons/button_confirm_order.png" onclick="setVisibility();";> </div>

<div id="progress_bar"><img src="images/progress_bar.gif" height="30" width="183"</div>             
   

And the CSS...

.flow_button {
    display:inline-block;    
    background-image:url(images/lux_flow_button_blackout.png);
}


div#progress_bar { /*progress bar for CONFIRM button*/
display: none;
float:right;
text-align:center;
} 
 

It works great for a prototype, I just need to clean it up and have it work beyond a static template/language.

This may seem overly complex but the button image is black with a transparent lettering and a border and the CSS just switches out the background. (the color is actually an animated gif so the the button's color is always changing per theme of the site.)

Sorry for the thread jack, I am hoping to see more creative buttons solutions.

[blackhawk]

I see what you are getting at now. I personally really dislike changing the core, it makes more work when upgrading to future versions.

My button layout is a bit on the crazy side if I may post a screen shot.

The first one is normal, the middle on is on hover (my screen shooting hides the mouse), and the last one is after the customer clicks the button and is waiting for order to process.

Here is the code I used...

 <script language="JavaScript">
function setVisibility() {
document.getElementById('progress_bar').style.display = 'inline';
document.getElementById('confirm').style.display = 'none';
}
</script>
 
<div class="flow_button" id="confirm"> <input type="image"  src="includes/languages/english/images/buttons/button_confirm_order.png" onclick="setVisibility();";> </div>
 
<div id="progress_bar"><img src="images/progress_bar.gif" height="30" width="183"</div>             
   
 
And the CSS...
 
.flow_button {
    display:inline-block;    
    background-image:url(images/lux_flow_button_blackout.png);
}
 
 
div#progress_bar { /*progress bar for CONFIRM button*/
display: none;
float:right;
text-align:center;
} 
 

It works great for a prototype, I just need to clean it up and have it work beyond a static template/language.

This may seem overly complex but the button image is black with a transparent lettering and a border and the CSS just switches out the background. (the color is actually an animated gif so the the button's color is always changing per theme of the site.)

Sorry for the thread jack, I am hoping to see more creative buttons solutions.

Good points! Now that I think about, I wouldn't want to mess with the core files either...Just trying to spark a fire but it just seems to me, we shouldn't be forced to used images at submit buttons, but rather it should be an optional by default. I will investigate too, a css - jquery approach now

Thanks for the feed back peeps!