X-Cart forums - Use Javascript and CSS to hid / flip visibilty of elements

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Use Javascript and CSS to hid / flip visibilty of elements (https://forum.x-cart.com/showthread.php?t=13253)

Use Javascript and CSS to hid / flip visibilty of elements

I use this trick on a few different places on my site. It came about after using some less computer savvy people here at work to try to use the site. Mostly to hide parts of a form that a user doesn't need to see unless some criteria is met. Helps so they don't get confused as we know most users don't read.

Examples.
Gift Certificate page
http://www.aerostich.com/giftcert.php

The registration / checkout pages (shipping address is hidden)
https://www.aerostich.com/register.php

All we are doing is making a block of html code visible or hiding it.

I'll go through the process for the gift certificate page.

Step 1
This javascript function should be either in your javascript page or in the head or somewhere on the page.

Code:

// Function to flip visibility of certain div objects

function flipdiv(el,state) {

        if(state=="show"){

                status="block";

        }else{

                status="none";

        }

        document.getElementById(el).style.display = status;

}

Step 2
skin1/modules/Gift_Certificates/giftcert.tpl
Starting at about line 188

Code:

<TR><TD colspan="3"></TD></TR>



<TR><TD colspan="3" class="table_heading"><FONT class="ProductDetailsTitle">4. {$lng.lbl_gc_choose_delivery_method}</FONT></TD>

</TR>



<TR><TD colspan="3">

<table cellpadding="0" cellspacing="0" border="0" width="50%"><TR>

{if $config.Modules.enablePostMailGC eq "Y"}

<TD align="right"><INPUT type="radio" name="send_via" value="E" {if $giftcert.send_via ne "P"}checked{/if} onClick="flipdiv('sendbyemail','show'); flipdiv('sendbypostal','hide');" /></TD>

{else}

<INPUT type="hidden" name="send_via" value="E">

{/if}

<td nowrap>{$lng.lbl_gc_send_via_email}</TD>

<td width="60%" align="center">OR</td>

<td><INPUT type="radio" name="send_via" value="P" {if $giftcert.send_via eq "P"}checked{/if} onClick="flipdiv('sendbyemail','hide'); flipdiv('sendbypostal','show');" /></td>

<td nowrap>{$lng.lbl_gc_send_via_postal_mail}</td>

</TR>

</TABLE>

</TD>

</TR>

<TR>

<TD colspan="3">

<table id="sendbyemail" {if $giftcert.send_via eq "P"}style="display: none;"{/if}>

<tr>

<TD colspan="3">{$lng.lbl_gc_enter_email}



</TD></TR>

<TR>

<TD nowrap align="right">{$lng.lbl_email}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_email" size="30" value="{$giftcert.recipient_email}" class="required"></TD>

</tr>

</table>



</TR>



{if $config.Modules.enablePostMailGC eq "Y"}

<tr>

<td colspan="3">

<table id="sendbypostal" {if $giftcert.send_via ne "P"}style="display: none;"{/if}



<TR><TD colspan="3">{$lng.txt_gc_enter_postal_mail}



</TD></TR>



<TR>

<TD nowrap align="right">{$lng.lbl_first_name}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_firstname" size="30" value="{$giftcert.recipient_firstname}" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_last_name}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_lastname" size="30" value="{$giftcert.recipient_lastname}" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_address}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_address" size="40" value="{$giftcert.recipient_address}" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_city}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_city" size="30" value="{$giftcert.recipient_city}" class="required"></TD>

</TR>



{if $js_enabled eq 'Y' && $config.General.use_js_states eq 'Y'}

{include file="change_states_js.tpl"}

{include file="main/register_states.tpl" state_name="recipient_state" country_name="recipient_country" country=$giftcert.recipient_country|default:$userinfo.b_country|default:$config.General.default_country state=$giftcert.recipient_state|default:$userinfo.b_state full_state=$giftcert.recipient_statename|default:$userinfo.b_statename county_name="" default_county="" default_countyid="" form_name="gccreate" zipcode_name="recipient_zipcode"}

{else}

<TR>

<TD nowrap align="right">{$lng.lbl_state}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left">

{include file="main/states.tpl" states=$states name="recipient_state" default=$giftcert.recipient_state default_country=$giftcert.recipient_country}

</TD></TR>



<TR>

<TD nowrap align="right">{$lng.lbl_country}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left">

<SELECT name="recipient_country" size="1" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);">

{section name=country_idx loop=$countries}

<OPTION value="{$countries[country_idx].country_code}" {if $giftcert.recipient_country eq $countries[country_idx].country_code}selected{elseif $countries[country_idx].country_code eq $config.General.default_country and $userinfo.b_country eq ""}selected{elseif $countries[country_idx].country_code eq $userinfo.b_country}selected{/if}>{$countries[country_idx].country}</OPTION>

{/section}

</SELECT>

</TD>

</TR>





{/if}





<TR>

<TD nowrap align="right">{$lng.lbl_zip_code}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_zipcode" size="30" value="{$giftcert.recipient_zipcode}" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_phone}</TD>

<TD></TD>

<TD align="left"><INPUT type="text" name="recipient_phone" size="30" value="{$giftcert.recipient_phone}" class="text"></TD>

</TR>



{/if}

</table>

</td>

</tr>

</div>



</FORM>



</TABLE>








<CENTER>



{if $usertype eq "C" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")}

{if $smarty.get.gcindex ne "" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")}

{if $active_modules.Wishlist ne "" and $action eq "wl"}

{ include file="buttons/gc_update.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y"}

{else}

{ include file="buttons/gc_update.tpl" href="javascript: formSubmit();" js_to_href="Y"}

{/if}

{else}

{ include file="buttons/button.tpl" button_title=$lng.lbl_gc_add_to_cart href="javascript: formSubmit();" js_to_href="Y" style="button"}

{if $active_modules.Wishlist and $login ne ""}



{ include file="buttons/add_to_wishlist.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y" style="button"}

{/if}

{/if}

{else}

{ include file="buttons/button.tpl" button_title=$lng.lbl_gc_create href="javascript: formSubmit();" js_to_href="Y"}

{/if}

</CENTER>

{/capture}

{include file="dialog.tpl" title=$lng.lbl_gift_certificate_details content=$smarty.capture.dialog extra="width=100%"}

In the above code you will notice a few things that are essential to making it work.
1. The table tag containing the differnt deliver fields are as follows:
The email table tag

Code:

<table id="sendbyemail" {if $giftcert.send_via eq "P"}style="display: none;"{/if}>

The postal table tag

Code:

<table id="sendbypostal" {if $giftcert.send_via ne "P"}style="display: none;"{/if}>

2. The radio buttons to specify which way to send it are as follows
Send Via Email radio button

Code:

<INPUT type="radio" name="send_via" value="E" {if $giftcert.send_via ne "P"}checked{/if} onClick="flipdiv('sendbyemail','show'); flipdiv('sendbypostal','hide');" />

Send Via Postal radio button

Code:

<INPUT type="radio" name="send_via" value="P" {if $giftcert.send_via eq "P"}checked{/if} onClick="flipdiv('sendbyemail','hide'); flipdiv('sendbypostal','show');" />

That's it, you can use it to hid several things on a page and make them appear. Have fun!

This is great. I really appreciate this mod. Looks good and very user friendly.

Will you be posting the code for the registration / checkout pages (shipping address is hidden)?

Unfortunately when I comes to java I am a complete novice.

Thanks

Quote:

Originally Posted by CopperB

CopperB,

I've modded my skin1/customer/main/register.tpl a bit. Here is what I have.

Code:

                <tr>

                        <td align="left" width="50%"><table>{include file="main/register_billing_address.tpl" userinfo=$userinfo}</table>Shipping same as billing?  Yes<input type="radio" name="shipping" checked="checked" onclick="flipdiv('shippingaddress','hide')" /> No<input type="radio" name="shipping" onclick="flipdiv('shippingaddress','show')" /></td>

                        <td align="left" valign="top"><table id="shippingaddress" style="display: none;">{include file="main/register_shipping_address.tpl" userinfo=$userinfo}</table></td>

                </tr>

That's it, along with the essential javascript flipdiv function you can do that to most any block type HTML tags.

I would give more advice, but like I said, I have changed the layout of my register forms which changes the HTML from the default install.

Also, just an FYI, it's JavaScript. It's completely different from Java, why it was named JavaScript is beyond me, but it is not Java at all. I think when it first came out it was called Livescript by Netscape but someone changed it to JavaScript to jump on the then Java Band Wagon.

Once again great mod. I have the register working just fine but am having some trouble with the Gift Certificate page.

If the customer chooses send via Email the form cannot be sent because the code is looking for the required fields of the postal address.

Any ideas? I haven't changed the code you posted for the giftcert template at all.

Thanks

Quote:

Originally Posted by CopperB

If customers are selecting "Send via Email" and they are getting prompted to fill in the postal info, then you have some problems with the code you altered. We are not changing the logic, just the display of those fields. Post your code and maybe we can give you a hand.

Sorry I should have been more clear. They are not getting prompted for Postal info. I tested it out and found that even though Email was selected it wouldn't send without the Postal info included.

Here is my giftcert code.

Code:

{* $Id: giftcert.tpl,v 1.37.2.3 2004/09/15 12:01:51 max Exp $ *}



<script language=JavaScript1.3 src="{$SkinDir}/show_hide.js"></script>



{include file="page_title.tpl" title=$lng.lbl_gift_certificate}



{include file="check_gcemail_script.tpl"}

{literal}

<SCRIPT type="text/javascript" language="JavaScript 1.2">

        function check_gc_form()

        {

         goodAmount=document.gccreate.amount.value.search(/^[0-9]+(\.[0-9][0-9]?)?$/);

         if (document.gccreate.recipient.value == "")

         {

{/literal}

                document.gccreate.recipient.focus();

                alert ("{$lng.txt_recipient_invalid|strip_tags|replace:"\n":" "|replace:"\r":" "}");

{literal}

                return false;

         }

{/literal}

        if (goodAmount==-1{if $usertype eq "C"} || document.gccreate.amount.value<{$min_gc_amount} || ({$max_gc_amount}>0 && document.gccreate.amount.value>{$max_gc_amount}){/if})

{literal}

         {

{/literal}

                document.gccreate.amount.focus();

            alert ("{$lng.txt_amount_invalid|strip_tags|replace:"\n":" "|replace:"\r":" "}");

{literal}

                return false;

         }

{/literal}

{if $config.Modules.enablePostMailGC eq "Y"}

    if ((document.gccreate.send_via[0].checked) && (!checkGCEmailAddress(document.gccreate.recipient_email)))

{literal}

     {

        document.gccreate.recipient_email.focus();

        return false;

     }

     if (document.gccreate.send_via[1].checked && (document.gccreate.recipient_firstname.value == "" || document.gccreate.recipient_lastname.value == "" || document.gccreate.recipient_address.value == "" || document.gccreate.recipient_city.value == "" || document.gccreate.recipient_zipcode.value == ""))

     {

        document.gccreate.recipient_firstname.focus();

{/literal}

        alert ("{$lng.txt_gc_enter_mail_address|strip_tags|replace:"\n":" "|replace:"\r":" "}");

{literal}

        return false;

     }

{/literal}

{else}

{literal}

     if if (!checkGCEmailAddress(document.gccreate.recipient_email))

     {

        document.gccreate.recipient_email.focus();

        return false;

     }

{/literal}

{/if}

{literal}

     return true;

    }



    function formSubmit() {

                if (check_gc_form()) {

                        document.gccreate.submit();

                }

        }

</SCRIPT>

{/literal}



{include file="check_zipcode_js.tpl"}



<TABLE cellpadding="5">

<TR>

<TD>[img]{$ImagesDir}/gift.gif[/img]</TD>

<TD>

{$lng.txt_gc_header}

</TD></TR>

</TABLE>

{if $login and $usertype eq "C"}








{capture name=dialog}

{$lng.txt_gift_certificate_checking_msg}








{if $smarty.get.gcid and $gc_array eq ""}

<FONT class="ErrorMessage">{$lng.err_gc_not_found}</FONT>

{/if}

<TABLE border="0">

<FORM action="giftcert.php">

<TR>

<TD>{$lng.lbl_gift_certificate}:</TD>

<TD><INPUT type="text" size="25" maxlength="16" name="gcid" value="{$smarty.get.gcid|escape:"html"}"></TD>

<TD><INPUT type="submit" value="{$lng.lbl_submit}"></TD>

</TR>

</FORM>

</TABLE>

{if $gc_array}

<HR size="1" noshade>

<TABLE border="0">

<TR>

<TD>{$lng.lbl_gc_id}:</TD>

<TD>{$gc_array.gcid}</TD>

</TR>

<TR>

<TD>{$lng.lbl_amount}:</TD>

<TD>{include file="currency.tpl" value=$gc_array.amount}</TD>

</TR>

<TR>

<TD>{$lng.lbl_remain}:</TD>

<TD>{include file="currency.tpl" value=$gc_array.debit}</TD>

</TR>

<TR>

<TD>{$lng.lbl_status}:</TD>

<TD>

{if $gc_array.status eq "P"}{$lng.lbl_pending}

{elseif $gc_array.status eq "A"}{$lng.lbl_active}

{elseif $gc_array.status eq "B"}{$lng.lbl_blocked}

{elseif $gc_array.status eq "D"}{$lng.lbl_disabled}

{elseif $gc_array.status eq "E"}{$lng.lbl_expired}

{elseif $gc_array.status eq "U"}{$lng.lbl_used}

{/if}

</TD>

</TR>

</TABLE>

{/if}

{/capture}

{include file="dialog.tpl" title=$lng.lbl_gift_certificate_checking content=$smarty.capture.dialog extra="width=100%"}

{/if}








{capture name=dialog}

{if $amount_error}

<P class="ErrorMessage">{$lng.txt_amount_invalid}</P>

{/if}

<TABLE border="0" width="100%" cellpadding="0">



{if $usertype eq "C"}



<FORM name="gccreate" action="giftcert.php" method="POST" onSubmit="javascript: return check_gc_form()">

<INPUT type="hidden" name="gcindex" value="{$smarty.get.gcindex|escape:"html"}">

<INPUT type="hidden" name="mode" value="gc2cart">



{else}



<FORM name="gccreate" action="giftcerts.php" method="POST" onSubmit="javascript: return check_gc_form()">

<INPUT type="hidden" name="mode" value="{$smarty.get.mode|escape:"html"}">

<INPUT type="hidden" name="gcid" value="{$smarty.get.gcid|escape:"html"}">



{/if}



<TR><TD colspan="3"><FONT class="ProductDetailsTitle">1. {$lng.lbl_gc_whom_sending}




</FONT>

{$lng.lbl_gc_whom_sending_subtitle}




</TD></TR>



<TR>

<TD align="right">{$lng.lbl_from}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="purchaser" size="30" value="{if $usertype eq "A"}{$config.Company.company_name}{else}{if $giftcert.purchaser}{$giftcert.purchaser|escape:"html"}{else}{$userinfo.firstname} {$userinfo.lastname}{/if}{/if}"></TD>

</TR>



<TR>

<TD align="right">{$lng.lbl_to}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient" size="30" value="{$giftcert.recipient|escape:"html"}"> </TD>

</TR>



<TR>

<TD colspan="3"><FONT class="ProductDetailsTitle">

2. {$lng.lbl_gc_add_message}

</FONT>

{$lng.lbl_gc_add_message_subtitle}




</TD>

</TR>



<TR>

<TD align="right">{$lng.lbl_message}</TD>

<TD><FONT class="Star"></FONT></TD>

<TD align="left"><TEXTAREA name="message" rows="8" cols="50">{$giftcert.message}</TEXTAREA></TD>

</TR>



<TR>

<TD colspan="3"><FONT class="ProductDetailsTitle">

3. {$lng.lbl_gc_choose_amount}

</FONT>

{$lng.lbl_gc_choose_amount_subtitle}




</TD>

</TR>



<TR>

<TD align="right">{$config.General.currency_symbol}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="amount" size="10" maxlength="9" value="{$giftcert.amount}">

{if $usertype eq "C" and ($min_gc_amount gt 0 or $max_gc_amount gt 0)}{$lng.lbl_gc_amount_msg} {if $min_gc_amount gt 0}{$lng.lbl_gc_from} {$config.General.currency_symbol}{$min_gc_amount}{/if} {if $max_gc_amount gt 0}{$lng.lbl_gc_through} {$config.General.currency_symbol}{$max_gc_amount}{/if}{/if}

</TD></TR>





<TR><TD colspan="3"></TD></TR>



<TR><TD colspan="3" class="table_heading"><FONT class="ProductDetailsTitle">4. {$lng.lbl_gc_choose_delivery_method}</FONT></TD>

</TR>



<TR><TD colspan="3">

<table cellpadding="0" cellspacing="0" border="0" width="50%"><TR>

{if $config.Modules.enablePostMailGC eq "Y"}

<TD align="right"><INPUT type="radio" name="send_via" value="E" {if $giftcert.send_via ne "P"}checked{/if} onClick="flipdiv('sendbyemail','show'); flipdiv('sendbypostal','hide');" /></TD>

{else}

<INPUT type="hidden" name="send_via" value="E">

{/if}

<td nowrap>{$lng.lbl_gc_send_via_email}</TD>

<td width="60%" align="center">OR</td>

<td><INPUT type="radio" name="send_via" value="P" {if $giftcert.send_via eq "P"}checked{/if} onClick="flipdiv('sendbyemail','hide'); flipdiv('sendbypostal','show');" /></td>

<td nowrap>{$lng.lbl_gc_send_via_postal_mail}</td>

</TR>

</TABLE>

</TD>

</TR>

<TR>

<TD colspan="3">

<table id="sendbyemail" {if $giftcert.send_via eq "P"}style="display: none;"{/if}>

<tr>

<TD colspan="3">{$lng.lbl_gc_enter_email}



</TD></TR>

<TR>

<TD nowrap align="right">{$lng.lbl_email}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_email" size="30" value="{$giftcert.recipient_email}" class="required"></TD>

</tr>

</table>



</TR>



{if $config.Modules.enablePostMailGC eq "Y"}

<tr>

<td colspan="3">

<table id="sendbypostal" {if $giftcert.send_via ne "P"}style="display: none;"{/if}



<TR><TD colspan="3">{$lng.txt_gc_enter_postal_mail}



</TD></TR>



<TR>

<TD nowrap align="right">{$lng.lbl_first_name}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_firstname" size="30" value="{$giftcert.recipient_firstname}" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_last_name}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_lastname" size="30" value="{$giftcert.recipient_lastname}" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_address}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_address" size="40" value="{$giftcert.recipient_address}" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_city}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_city" size="30" value="{$giftcert.recipient_city}" class="required"></TD>

</TR>



{if $js_enabled eq 'Y' && $config.General.use_js_states eq 'Y'}

{include file="change_states_js.tpl"}

{include file="main/register_states.tpl" state_name="recipient_state" country_name="recipient_country" country=$giftcert.recipient_country|default:$userinfo.b_country|default:$config.General.default_country state=$giftcert.recipient_state|default:$userinfo.b_state full_state=$giftcert.recipient_statename|default:$userinfo.b_statename county_name="" default_county="" default_countyid="" form_name="gccreate" zipcode_name="recipient_zipcode"}

{else}

<TR>

<TD nowrap align="right">{$lng.lbl_state}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left">

{include file="main/states.tpl" states=$states name="recipient_state" default=$giftcert.recipient_state default_country=$giftcert.recipient_country}

</TD></TR>



<TR>

<TD nowrap align="right">{$lng.lbl_country}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left">

<SELECT name="recipient_country" size="1" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);">

{section name=country_idx loop=$countries}

<OPTION value="{$countries[country_idx].country_code}" {if $giftcert.recipient_country eq $countries[country_idx].country_code}selected{elseif $countries[country_idx].country_code eq $config.General.default_country and $userinfo.b_country eq ""}selected{elseif $countries[country_idx].country_code eq $userinfo.b_country}selected{/if}>{$countries[country_idx].country}</OPTION>

{/section}

</SELECT>

</TD>

</TR>





{/if}





<TR>

<TD nowrap align="right">{$lng.lbl_zip_code}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_zipcode" size="30" value="{$giftcert.recipient_zipcode}" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_phone}</TD>

<TD></TD>

<TD align="left"><INPUT type="text" name="recipient_phone" size="30" value="{$giftcert.recipient_phone}" class="text"></TD>

</TR>



{/if}

</table>

</td>

</tr>

</div>



</FORM>



</TABLE>








<CENTER>



{if $usertype eq "C" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")}

{if $smarty.get.gcindex ne "" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")}

{if $active_modules.Wishlist ne "" and $action eq "wl"}

{ include file="buttons/gc_update.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y"}

{else}

{ include file="buttons/gc_update.tpl" href="javascript: formSubmit();" js_to_href="Y"}

{/if}

{else}

{ include file="buttons/button.tpl" button_title=$lng.lbl_gc_add_to_cart href="javascript: formSubmit();" js_to_href="Y" style="button"}

{if $active_modules.Wishlist and $login ne ""}



{ include file="buttons/add_to_wishlist.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y" style="button"}

{/if}

{/if}

{else}

{ include file="buttons/button.tpl" button_title=$lng.lbl_gc_create href="javascript: formSubmit();" js_to_href="Y"}

{/if}

</CENTER>

{/capture}

{include file="dialog.tpl" title=$lng.lbl_gift_certificate_details content=$smarty.capture.dialog extra="width=100%"}

Here is a link to the page: http://www.copperboppers.com/xcart/giftcert.php

Thanks for the help.

Is it possible to have the "No" selected if the shipping address is already filled in once the customer is registered?

Bump...

Any idea why when Email is selected it won't send without the Postal info included.

I have posted my Giftcert code above.

Thanks

Sorry, CopperB, I took a brief look at your code and didn't see anything glaringly wrong. Maybe start over and implement very small changes until you see what is breaking it.

sstill,

CopperB is probably having problems because the instructions aren't terribly clear. Thank you for explaining "why" it works and all, but you're not clear for the folks who don't "already know" on how to implement it.

For instance... you said...

Quote:

Step 1
This javascript function should be either in your javascript page or in the head or somewhere on the page.

Well... what does that mean....exactly? what is a javascript page? or somewhere on the page mean?

Please post crystal clear instructions that illustrate what people are supposed to do.

Quote:

Step 2
skin1/modules/Gift_Certificates/giftcert.tpl
Starting at about line 188

Ok...now what? Replace it? add it above? add it below? amend to it? What are the people who don't know this stuff supposed to do when they get to line 188?

Thanks for the mod...it's a great one. But to avoid many many replies and confusion and people tarsnishing your work with questions....you gotta be super duper clear when instructing people who to implement them. step by step. don't let people think on their own. *smile*

- Shannon

First of all I would like to say Thanks for this is a great little mod and Yes I agree it would have been much easier from the start to just say replace your giftcert.tpl with the code below. The code above was incomplete missing the javascript tags which most newbies would never even know and would be pulling their hair out not knowing why its not working, in addition I fixed a few out of place things to give it a cleaner look. Code below tested and works in 4.0.13

replace the entire contents of giftcert.tpl found in directory: /skin1/modules/Gift_Certificates/giftcert.tpl
with the code below, tested and works in 4.0.13:

Quote:

Originally Posted by snorocket

{* $Id: giftcert.tpl,v 1.37.2.3 2004/09/15 12:01:51 max Exp $ *}
{include file="page_title.tpl" title=$lng.lbl_gift_certificate}
{include file="check_email_script.tpl"}
{literal}
<SCRIPT type="text/javascript" language="JavaScript 1.2">
function check_gc_form()
{
goodAmount=document.gccreate.amount.value.search(/^[0-9]+(\.[0-9][0-9]?)?$/);
if (document.gccreate.recipient.value == "")
{
{/literal}
document.gccreate.recipient.focus();
alert ("{$lng.txt_recipient_invalid|strip_tags|replace:" \n":" "|replace:"\r":" "}");
{literal}
return false;
}
{/literal}
if (goodAmount==-1{if $usertype eq "C"} || document.gccreate.amount.value<{$min_gc_amount} || ({$max_gc_amount}>0 && document.gccreate.amount.value>{$max_gc_amount}){/if})
{literal}
{
{/literal}
document.gccreate.amount.focus();
alert ("{$lng.txt_amount_invalid|strip_tags|replace:"\n" :" "|replace:"\r":" "}");
{literal}
return false;
}
{/literal}
{if $config.Modules.enablePostMailGC eq "Y"}
if ((document.gccreate.send_via[0].checked) && (!checkEmailAddress(document.gccreate.recipient_em ail)))
{literal}
{
document.gccreate.recipient_email.focus();
return false;
}
if (document.gccreate.send_via[1].checked && (document.gccreate.recipient_firstname.value == "" || document.gccreate.recipient_lastname.value == "" || document.gccreate.recipient_address.value == "" || document.gccreate.recipient_city.value == "" || document.gccreate.recipient_zipcode.value == ""))
{
document.gccreate.recipient_firstname.focus();
{/literal}
alert ("{$lng.txt_gc_enter_mail_address|strip_tags|repla ce:"\n":" "|replace:"\r":" "}");
{literal}
return false;
}
{/literal}
{else}
{literal}
if (!checkEmailAddress(document.gccreate.recipient_em ail))
{
document.gccreate.recipient_email.focus();
return false;
}
{/literal}
{/if}
{literal}
return true;
}
function formSubmit() {
if (check_gc_form()) {
document.gccreate.submit();
}
}
</SCRIPT>
{/literal}
{include file="check_zipcode_js.tpl"}
<TABLE cellpadding="5">
<TR>
<TD>[img]{$ImagesDir}/gift.gif[/img]</TD>
<TD>
{$lng.txt_gc_header}
</TD></TR>
</TABLE>
{if $login and $usertype eq "C"}

{capture name=dialog}
{$lng.txt_gift_certificate_checking_msg}

{if $smarty.get.gcid and $gc_array eq ""}
<FONT class="ErrorMessage">{$lng.err_gc_not_found}</FONT>
{/if}
<TABLE border="0">
<FORM action="giftcert.php">
<TR>
<TD>{$lng.lbl_gift_certificate}:</TD>
<TD><INPUT type="text" size="25" maxlength="16" name="gcid" value="{$smarty.get.gcid|escape:"html"}"></TD>
<TD><INPUT type="submit" value="{$lng.lbl_submit}"></TD>
</TR>
</FORM>
</TABLE>
{if $gc_array}
<HR size="1" noshade>
<TABLE border="0">
<TR>
<TD>{$lng.lbl_gc_id}:</TD>
<TD>{$gc_array.gcid}</TD>
</TR>
<TR>
<TD>{$lng.lbl_amount}:</TD>
<TD>{include file="currency.tpl" value=$gc_array.amount}</TD>
</TR>
<TR>
<TD>{$lng.lbl_remain}:</TD>
<TD>{include file="currency.tpl" value=$gc_array.debit}</TD>
</TR>
<TR>
<TD>{$lng.lbl_status}:</TD>
<TD>
{if $gc_array.status eq "P"}{$lng.lbl_pending}
{elseif $gc_array.status eq "A"}{$lng.lbl_active}
{elseif $gc_array.status eq "B"}{$lng.lbl_blocked}
{elseif $gc_array.status eq "D"}{$lng.lbl_disabled}
{elseif $gc_array.status eq "E"}{$lng.lbl_expired}
{elseif $gc_array.status eq "U"}{$lng.lbl_used}
{/if}
</TD>
</TR>
</TABLE>
{/if}
{/capture}
{include file="dialog.tpl" title=$lng.lbl_gift_certificate_checking content=$smarty.capture.dialog extra="width=100%"}
{/if}

{capture name=dialog}
{if $amount_error}
<P class="ErrorMessage">{$lng.txt_amount_invalid}</P>
{/if}
<TABLE border="0" width="100%" cellpadding="0">
{if $usertype eq "C"}
<FORM name="gccreate" action="giftcert.php" method="POST" onSubmit="javascript: return check_gc_form()">
<INPUT type="hidden" name="gcindex" value="{$smarty.get.gcindex|escape:"html"}">
<INPUT type="hidden" name="mode" value="gc2cart">
{else}
<FORM name="gccreate" action="giftcerts.php" method="POST" onSubmit="javascript: return check_gc_form()">
<INPUT type="hidden" name="mode" value="{$smarty.get.mode|escape:"html"}">
<INPUT type="hidden" name="gcid" value="{$smarty.get.gcid|escape:"html"}">
{/if}
<TR><TD colspan="3"><FONT class="ProductDetailsTitle">1. {$lng.lbl_gc_whom_sending}

</FONT>
{$lng.lbl_gc_whom_sending_subtitle}

</TD></TR>
<TR>
<TD align="right">{$lng.lbl_from}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="purchaser" size="30" value="{if $usertype eq "A"}{$config.Company.company_name}{else}{if $giftcert.purchaser}{$giftcert.purchaser|escape:"h tml"}{else}{$userinfo.firstname} {$userinfo.lastname}{/if}{/if}">
</TD>
</TR>
<TR>
<TD align="right">{$lng.lbl_to}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left">
<INPUT type="text" name="recipient" size="30" value="{$giftcert.recipient|escape:"html"}">
</TD>
</TR>
<TR>
<TD colspan="3"><FONT class="ProductDetailsTitle">
2. {$lng.lbl_gc_add_message}
</FONT>
{$lng.lbl_gc_add_message_subtitle}

</TD>
</TR>
<TR>
<TD align="right">{$lng.lbl_message}</TD>
<TD><FONT class="Star"></FONT></TD>
<TD align="left"><TEXTAREA name="message" rows="8" cols="50">{$giftcert.message}</TEXTAREA></TD>
</TR>
<TR>
<TD colspan="3"><FONT class="ProductDetailsTitle">
3. {$lng.lbl_gc_choose_amount}
</FONT>
{$lng.lbl_gc_choose_amount_subtitle}

</TD>
</TR>
<TR>
<TD align="right">{$config.General.currency_symbol}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="amount" size="10" maxlength="9" value="{$giftcert.amount}">
{if $usertype eq "C" and ($min_gc_amount gt 0 or $max_gc_amount gt 0)}{$lng.lbl_gc_amount_msg} {if $min_gc_amount gt 0}{$lng.lbl_gc_from} {$config.General.currency_symbol}{$min_gc_amount}{ /if} {if $max_gc_amount gt 0}{$lng.lbl_gc_through} {$config.General.currency_symbol}{$max_gc_amount}{ /if}{/if}
</TD></TR>
<TR><TD colspan="3"></TD></TR>
<TR><TD colspan="3" class="table_heading"><FONT class="ProductDetailsTitle">4. {$lng.lbl_gc_choose_delivery_method}</FONT></TD>
</TR>
<TR><TD colspan="3">
<table cellpadding="0" cellspacing="0" border="0" width="50%"><TR>
{if $config.Modules.enablePostMailGC eq "Y"}
<TD align="right"><INPUT type="radio" name="send_via" value="E" {if $giftcert.send_via ne "P"}checked{/if} onClick="flipdiv('sendbyemail','show'); flipdiv('sendbypostal','hide');" /></TD>
{else}
<INPUT type="hidden" name="send_via" value="E">
{/if}
<td nowrap>{$lng.lbl_gc_send_via_email} </TD>
<td width="60%" align="center">or</td>
<td><INPUT type="radio" name="send_via" value="P" {if $giftcert.send_via eq "P"}checked{/if} onClick="flipdiv('sendbyemail','hide'); flipdiv('sendbypostal','show');" /></td>
<td nowrap>{$lng.lbl_gc_send_via_postal_mail}</td>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="3">
<table id="sendbyemail" {if $giftcert.send_via eq "P"}style="display: none;"{/if}>
<tr>
<TD colspan="3">{$lng.lbl_gc_enter_email}

</TD></TR>
<TR>
<TD nowrap align="right">{$lng.lbl_email}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="recipient_email" size="30" value="{$giftcert.recipient_email}" class="required"></TD>
</tr>
</table>
</TR>
{if $config.Modules.enablePostMailGC eq "Y"}
<tr>
<td colspan="3">
<table id="sendbypostal" {if $giftcert.send_via ne "P"}style="display: none;"{/if}
<TR><TD colspan="3">{$lng.txt_gc_enter_postal_mail}

</TD></TR>
<TR>
<TD nowrap align="right">{$lng.lbl_first_name}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="recipient_firstname" size="30" value="{$giftcert.recipient_firstname}" class="required"></TD>
</TR>
<TR>
<TD nowrap align="right">{$lng.lbl_last_name}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="recipient_lastname" size="30" value="{$giftcert.recipient_lastname}" class="required"></TD>
</TR>
<TR>
<TD nowrap align="right">{$lng.lbl_address}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="recipient_address" size="40" value="{$giftcert.recipient_address}" class="required"></TD>
</TR>
<TR>
<TD nowrap align="right">{$lng.lbl_city}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="recipient_city" size="30" value="{$giftcert.recipient_city}" class="required"></TD>
</TR>
{if $js_enabled eq 'Y' && $config.General.use_js_states eq 'Y'}
{include file="change_states_js.tpl"}
{include file="main/register_states.tpl" state_name="recipient_state" country_name="recipient_country" country=$giftcert.recipient_country|default:$useri nfo.b_country|default:$config.General.default_coun try state=$giftcert.recipient_state|default:$userinfo. b_state full_state=$giftcert.recipient_statename|default:$ userinfo.b_statename county_name="" default_county="" default_countyid="" form_name="gccreate" zipcode_name="recipient_zipcode"}
{else}
<TR>
<TD nowrap align="right">{$lng.lbl_state}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left">
{include file="main/states.tpl" states=$states name="recipient_state" default=$giftcert.recipient_state default_country=$giftcert.recipient_country}
</TD></TR>
<TR>
<TD nowrap align="right">{$lng.lbl_country}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left">
<SELECT name="recipient_country" size="1" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);">
{section name=country_idx loop=$countries}
<OPTION value="{$countries[country_idx].country_code}" {if $giftcert.recipient_country eq $countries[country_idx].country_code}selected{elseif $countries[country_idx].country_code eq $config.General.default_country and $userinfo.b_country eq ""}selected{elseif $countries[country_idx].country_code eq $userinfo.b_country}selected{/if}>{$countries[country_idx].country}</OPTION>
{/section}
</SELECT>
</TD>
</TR>
{/if}
<TR>
<TD nowrap align="right">{$lng.lbl_zip_code}</TD>
<TD><FONT class="Star">*</FONT></TD>
<TD align="left"><INPUT type="text" name="recipient_zipcode" size="30" value="{$giftcert.recipient_zipcode}" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);" class="required"></TD>
</TR>
<TR>
<TD nowrap align="right">{$lng.lbl_phone}</TD>
<TD></TD>
<TD align="left"><INPUT type="text" name="recipient_phone" size="30" value="{$giftcert.recipient_phone}" class="text"></TD>
</TR>
{/if}
</table>
</td>
</tr>
</div>
</FORM>
</TABLE>

<CENTER>
{if $usertype eq "C" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")}
{if $smarty.get.gcindex ne "" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")}
{if $active_modules.Wishlist ne "" and $action eq "wl"}
{ include file="buttons/gc_update.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y"}
{else}
{ include file="buttons/gc_update.tpl" href="javascript: formSubmit();" js_to_href="Y"}
{/if}
{else}
{ include file="buttons/button.tpl" button_title=$lng.lbl_gc_add_to_cart href="javascript: formSubmit();" js_to_href="Y" style="button"}
{if $active_modules.Wishlist and $login ne ""}

{ include file="buttons/add_to_wishlist.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y" style="button"}
{/if}
{/if}
{else}
{ include file="buttons/button.tpl" button_title=$lng.lbl_gc_create href="javascript: formSubmit();" js_to_href="Y"}
{/if}
</CENTER>
{/capture}
{include file="dialog.tpl" title=$lng.lbl_gift_certificate_details content=$smarty.capture.dialog extra="width=100%"}
{literal}
<script type="text/javascript" language="JavaScript 1.2">
function flipdiv(el,state) {
if(state=="show"){
status="block";
}else{
status="none";
}
document.getElementById(el).style.display = status;
}
</script>
{/literal}

There is one annoying little glitch I did find which is also in the original giftcert.tpl template and that is in the To: email field there is a space that you have to delete out to enter your email, for the life of me I could'nt figure out how to get rid of the space, anyone?

IndieDepot,

Thanks for the comments, your right, I could go into more detail, but then I have to assume a certain level of knowledge.

If there is a questions such as you asked

Quote:

Well... what does that mean....exactly? what is a javascript page? or somewhere on the page mean?

That is what these forums are for, asking questions, getting directions. My mod is written for people who understand on a basic level the workings of Javascript, if you don't understand Javascript I would not attempt this mod.

Unfortunatly because all carts differ in some ways I can't just flop out mod that is universal (or I would be charging for it.) Mostly the mods I post are things that I have done and posted in the hopes that someone can adapt it and apply it to their cart. No guarentees though, if you don't understand what something is ask or Google on it, if the directions are unclear ask. Simple as that.

I hope I don't need to dumb things way down or put up disclaimers all over the place to keep people from shooting themselves in the foot.

WARNING!! WARNING!! WARING!! This mod could distroy your cart, cost you millions of dollars in down time, bring about global warming, use all your mouse fluid, break the tip of our pencil, lower your chances at winning the lottery, etc.

:wink:

sstillwell,

I didn't mean to ruffle your feathers dude. All I did was make an observation on how you communicated as opposed to 95% of the other great mods posted on this wonderful website, and then I simply commented on it explaining why you had troubles with people right off the bat...and how you could avoid them in the future. Had I not said anything, then snorocket probably would have never came with his fix, and your great mod will have gone unused by many, MANY people when it didn't have to. I was always told "Don't Assume Anyting"...especially the level of compentence of others....espcially on a website where beginners come to learn. This is not a geeked-out hackers site...i don't think. *smile* Either way, I didn't mean to bend you outta shape about it.

snorocket,

Thanks for making a 'Universal' and 'Free' fix to the great mod posted by sstillwell.

- Shannon

IndieDepot,

No offense taken, I was just having a little fun at your expense.

Seriously though, my mod was written in response to someone liking what I had done in a few places on my site. It is more of a concept that can be used in several different places than a specific mod.

"Don't assume anything" is a nice cliche but you have to assume a level of knewledge. For example if I say 'ok edit the home.tpl file'. Do I not assume that they know how to edit a text file?

Actually on these forums we have a wide range of knowledge from people who have no idea how to edit HTML to those that are coding PHP. So yes, there are geeks among us.

In closing, I do appreciate all comments good/bad, they help me improve and that is what I am interested in.

So, where the register.tpl code and java should be add?

Hide/Flip Shipping Fields?

Has anyone been able to succesfully hide/flip the shipping fields in register.tpl?

yea yea yea I know sstillwell posted the code to do this and it works perfectly but the formatting is the most horrendous thing I've ever come across. I've poked around the code for hours in an effort to fix the formatting with no progress, let us know if you have managed to hide/flip the shipping fields while retaining the same formatting as the orginal code, Thank You.

Re: Hide/Flip Shipping Fields?

Quote:

Originally Posted by snorocket

Try This:

Code:

{if $config.General.use_https_login eq "Y"}

<INPUT type="hidden" name="{$XCARTSESSNAME}" value="{$XCARTSESSID}">

{/if}





<tr>

         <td align="left" width="50%"><table>

{include file="main/register_personal_info.tpl" userinfo=$userinfo}</table></td>

</tr> 







      <tr>

         <td align="left" width="50%"><table>{include file="main/register_billing_address.tpl" userinfo=$userinfo}</table>Shipping same as billing?  Yes<input type="radio" name="shipping" checked="checked" onclick="flipdiv('shippingaddress','hide')" /> No<input type="radio" name="shipping" onclick="flipdiv('shippingaddress','show')" /></td>

         <td align="left" valign="top"><table id="shippingaddress" style="display: none;">{include file="main/register_shipping_address.tpl" userinfo=$userinfo}</table></td>

      </tr> 



<tr>

         <td align="left" width="50%"><table>{include file="main/register_contact_info.tpl" userinfo=$userinfo}</table></td>

</tr> 



<tr>

         <td align="left" width="50%"><table>{include file="main/register_additional_info.tpl" section='A'}</table></td>

</tr>







{if $config.General.disable_cc ne "Y"}

{include file="main/register_ccinfo.tpl"}

{/if}

I would just like to figure out how to keep the Yes checked after the customer is registered with a different shipping address. So far it just defaults to No, confuses the customer if he wants to ship something to the billing address at a later time

Quote:

Just a thought, but you could have smarty do a test on the value of the address fields. If it's the same then leave it as "no" if it is different then make it "yes".

Code:

Shipping same as billing?  Yes<input type="radio" name="shipping" {if $userinfo.s_address eq $userinfo.b_address}

checked="checked"{/if} onclick="flipdiv('shippingaddress','hide')" /> No<input type="radio" name="shipping" {if $userinfo.s_address ne $userinfo.b_address}

checked="checked"{/if}onclick="flipdiv('shippingaddress','show')" />

You'll also need to add that to the css that hides that block of markup.

Code:

{if $userinfo.s_address eq $userinfo.b_address}

style="display: none;"

{/if}

I have not implemented this so it's just a guess.

i keep getting an error in the javascript console in firefox that says "flipdiv is not defined" and nothing happens when i click yes or no