Domain Transfer EPP Code Show/Hide

[redit]

First of all I want to say that this is not my idea but I thought it was a good one so thought I would try to get it working.

The original post is here:

Using @brian! hook example I can get a list of all the domains that need an EPP/Transfer code and I can then get these shown from within the domaintransfer.tlp page with the following:

<ul>
{if !empty($epptlds)}
    {foreach from=$epptlds item=eppneeded}
        <li>{$eppneeded}</li>
    {/foreach}
});
</ul>

So that was a great start.

I then moved on to working out either showing or hiding the EPP/Transfer Code box and label. To do this again in the domaintransfer.tlp template I changed the div area around the text box to have an id like so:

<div class="form-group">
  <label for="inputAuthCode" style="width:100%;">
    {lang key='orderForm.authCode'}
    <a href="" data-toggle="tooltip" data-placement="left" title="{lang key='orderForm.authCodeTooltip'}" class="pull-right">
      <i class="fa fa-question-circle"></i> {lang key='orderForm.help'}
    </a>
  </label>
  <input type="text" class="form-control" name="epp" id="inputAuthCode" placeholder="{lang key='orderForm.authCodePlaceholder'}" data-toggle="tooltip" data-placement="left" data-trigger="manual" title="{lang key='orderForm.required'}" />
</div>

<div class="form-group" id="inputAuthCodeBlock">
  <label for="inputAuthCode" style="width:100%;">
    {lang key='orderForm.authCode'}
    <a href="" data-toggle="tooltip" data-placement="left" title="{lang key='orderForm.authCodeTooltip'}" class="pull-right">
      <i class="fa fa-question-circle"></i> {lang key='orderForm.help'}
    </a>
  </label>
  <input type="text" class="form-control" name="epp" id="inputAuthCode" placeholder="{lang key='orderForm.authCodePlaceholder'}" data-toggle="tooltip" data-placement="left" data-trigger="manual" title="{lang key='orderForm.required'}" />
</div>

The final part was to write the JavaScript (now my JavaScript knowledge is slim to say the best so if anyone can improve this please do let me know).

Again in the domaintransfer.tpl page add the following at the top of the page directly under the existing include:

{if !empty($epptlds)}
    <script src='/js/jquery.min.js'></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $('#inputAuthCodeBlock').hide();
          $('#inputTransferDomain').on('input', function() {
              var domain = $('#inputTransferDomain').val();
              if(~domain.indexOf(".")) {
                  var split = domain.slice(domain.indexOf("."));
                  {foreach from=$epptlds item=eppneeded}
                      if(split == "{$eppneeded}") {
                          $('#inputAuthCodeBlock').show();
                          return;
                      }
                  {/foreach}
              }
              $('#inputAuthCodeBlock').hide();
          });
      });
    </script>
{/if}

This now shows and hides the EPP/Transfer code text box and the label as needed. However, the cart page is broken if you try to complete a transfer.

If you enter a domain that you want to transfer it does not matter what stat the domain is in available already registered all you get after clicking the button is the JSON output.

If anyone could please just point me in the right direction I would be more than great full as this is now driving me nuts.

 

 

[brian!]

1 hour ago, redit said:

Using @brian! hook example I can get a list of all the domains that need an EPP/Transfer code and I can then get these shown from within the domaintransfer.tlp page with the following:

there's a typo in your code (no closing if), it should be...

<ul>
{if !empty($epptlds)}
    {foreach from=$epptlds item=eppneeded}
        <li>{$eppneeded}</li>
    {/foreach}
{/if}
</ul>

but if you have a lot of TLDs in that array, it would be a long vertical list!... as I said in the other thread, personally, i'd just implode the array...

<p class="text-center small">+ Authorization Code Required for these TLDs:<br>{', '|implode:$epptlds}</p>

the above should really use a language string too.

1 hour ago, redit said:

The final part was to write the JavaScript (now my JavaScript knowledge is slim to say the best so if anyone can improve this please do let me know).

I don't think you need the call to .jquery.min.js - it should be unnecessary.

1 hour ago, redit said:

This now shows and hides the EPP/Transfer code text box and the label as needed. However, the cart page is broken if you try to complete a transfer.

complete in what sense? go all the way in the cart process past checkout, or just from the transfer page ??

1 hour ago, redit said:

If you enter a domain that you want to transfer it does not matter what stat the domain is in available already registered all you get after clicking the button is the JSON output.

I have to say that for me it's working fine, and not showing any JSON output... this is on a v7.6RC dev using standard_cart & six.

using google.com would work and the domain is added to the cart... works too if Google reCaptcha is enabled.

[redit]

3 minutes ago, brian! said:

there's a typo in your code (no closing if), it should be...

sorry thats a typo on my part when I wrote this post.

After I removed the 'jquery.min.js' it all worked as it should this is so typical.

I've been playing with this since I ready you post about the hook and thought it was a nice idea.

anyhow once again thank you for your help sir you are a legend!