How to add links to checkout

[Birdieanimal]

Hi. As shown in the screen enclosed there is one link in blue color. What do I need to do to add more links to other words in the same sentence? Thx.

[Birdieanimal]

Where Do I set the links that are behind the words in brackets? For example: [Allgemeinen Geschäftsbedingungen]

Ich habe die [Allgemeinen Geschäftsbedingungen] des Anbieters gelesen und erkläre mit dem Absenden der Bestellung mein Einverständnis. Mein [Widerrufsrecht] habe ich zur Kenntnis genommen.

[Guest]

[Birdieanimal]

Thank you very much. I was hoping for a way to add 3 links and not only one. Take care.

[Guest]

And why didn't you write it straight away that you wanted more links?
I would give you another solution.

[Birdieanimal]

Please do so. This topic starts with the sentence "As shown in the screen enclosed there is one link in blue color. What do I need to do to add more links to other words in the same sentence?".

[Guest]

./themes/classic/templates/checkout/_partials/steps/payment.tpl

find:

<form id="conditions-to-approve" method="GET">
      <ul>
        {foreach from=$conditions_to_approve item="condition" key="condition_name"}
          <li>
            <div class="float-xs-left">
              <span class="custom-checkbox">
                <input  id    = "conditions_to_approve[{$condition_name}]"
                        name  = "conditions_to_approve[{$condition_name}]"
                        required
                        type  = "checkbox"
                        value = "1"
                        class = "ps-shown-by-js"
                >
                <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
              </span>
            </div>
            <div class="condition-label">
              <label class="js-terms" for="conditions_to_approve[{$condition_name}]">
                {$condition nofilter}
              </label>
            </div>
          </li>
        {/foreach}
      </ul>
    </form>

 

[Guest]

[Birdieanimal]

Good idea. Thank you.

[Guest]

full sample:

<form id="conditions-to-approve" method="GET">
      <ul>
        {foreach from=$conditions_to_approve item="condition" key="condition_name"}
          <li>
            <div class="float-xs-left">
              <span class="custom-checkbox">
                <input  id    = "conditions_to_approve[{$condition_name}]"
                        name  = "conditions_to_approve[{$condition_name}]"
                        required
                        type  = "checkbox"
                        value = "1"
                        class = "ps-shown-by-js"
                >
                <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
              </span>
            </div>
            <div class="condition-label">
              <label class="js-terms" for="conditions_to_approve[{$condition_name}]">
                {$condition nofilter}
              </label>
            </div>
          </li>
        {/foreach}
        <!-- start custom text -->
        <li>
            <div class="alert alert-success" role="alert">
                {l s='This is a custom success text!' d='Shop.Theme.Checkout'}
            </div>
          </li>
          <li>
            <div class="alert alert-danger" role="alert">
                {l s='This is a custom danger text!' d='Shop.Theme.Checkout'}
            </div>
          </li>
          <li>
            <div class="alert alert-warning" role="alert">
                {l s='This is a custom warning text!' d='Shop.Theme.Checkout'}
            </div>
          </li>
          <li>
            <div class="alert alert-info" role="alert">
                {l s='This is a custom info text!' d='Shop.Theme.Checkout'}
            </div>
        </li>
        <!-- end custom text -->
      </ul>
    </form>

 

[Birdieanimal]

Got it. Thx.

[Guest]

full sample + JavaScript + onclick="ShowCustomAlert()"

if checkbox not checked:

 

if checkbox is checked:

<form id="conditions-to-approve" method="GET">
      <ul>
        {foreach from=$conditions_to_approve item="condition" key="condition_name"}
          <li>
            <div class="float-xs-left">
              <span class="custom-checkbox">
                <input  id    = "conditions_to_approve[{$condition_name}]"
                        name  = "conditions_to_approve[{$condition_name}]"
                        required
                        type  = "checkbox"
                        value = "1"
                        class = "ps-shown-by-js"
                        onclick="ShowCustomAlert()"
                >
                <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
              </span>
            </div>
            <div class="condition-label">
              <label class="js-terms" for="conditions_to_approve[{$condition_name}]">
                {$condition nofilter}
              </label>
            </div>
          </li>
        {/foreach}
        <!-- start custom text -->
        <script type="text/javascript">
            var _condition_name = "{$condition_name}";
        </script>
        <script>
            {literal}
                function ShowCustomAlert()
                {
                    var checkBox = document.getElementById("conditions_to_approve["+_condition_name+"]");
                    
                    if (checkBox.checked == true){
                        document.getElementById("alert-danger").style.display = "none";
                        document.getElementById("alert-success").style.display = "block";
                        document.getElementById("alert-warning").style.display = "none";
                        document.getElementById("alert-info").style.display = "none";
                    } else {
                        document.getElementById("alert-danger").style.display = "block";
                        document.getElementById("alert-success").style.display = "none";
                        document.getElementById("alert-warning").style.display = "block";
                        document.getElementById("alert-info").style.display = "block";
                    }
                }
            {/literal}
        </script>
        <li>
            <div id="alert-success" class="alert alert-success" role="alert" style="display:none;">
                {l s='This is a custom success text!' d='Shop.Theme.Checkout'}
            </div>
          </li>
          <li>
            <div id="alert-danger" class="alert alert-danger" role="alert" style="display:block;">
                {l s='This is a custom danger text!' d='Shop.Theme.Checkout'}
            </div>
          </li>
          <li>
            <div id="alert-warning" class="alert alert-warning" role="alert" style="display:block;">
                {l s='This is a custom warning text!' d='Shop.Theme.Checkout'}
            </div>
          </li>
          <li>
            <div id="alert-info" class="alert alert-info" role="alert" style="display:block;">
                {l s='This is a custom info text!' d='Shop.Theme.Checkout'}
            </div>
        </li>
        <!-- end custom text -->
      </ul>
    </form>

 

Edited October 24, 2020 by Guest (see edit history)