0

Fairly easy question for most but it's somewhat tricky and I'm having issues.

            <span class="note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can create an account now or after checkout. Click the ‘Next’ button below to continue as a guest.'-->$

I want to hyperlink "create" to the register page if they click on it.

I've tried adding <?= $block->escapeHtml(__("<a href='%1'>login</a>", $block->getUrl('customer/account/login'))) ?>"'>

<a class="action action-register primary" data-bind="attr: {href: registerUrl}">
                        <span data-bind="i18n: 'Create'">

and a few other things but no success.

Magento_Checkout/web/template/form/element/email.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!-- ko ifnot: isCustomerLoggedIn() -->

<!-- ko foreach: getRegion('before-login-form') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<form class="form form-login" data-role="email-with-possible-login"
      data-bind="submit:login"
      method="post">
    <fieldset id="customer-email-fieldset" class="fieldset" data-bind="blockLoader: isLoading">
        <div class="field required">
            <label class="label" for="customer-email"><span data-bind="i18n: 'Email Address'"></span></label>
            <div class="control _with-tooltip">
                <input class="input-text"
                       type="email"
                       data-bind="
                            textInput: email,
                            hasFocus: emailFocused,
                            mageInit: {'mage/trim-input':{}}"
                       name="username"
                       data-validate="{required:true, 'validate-email':true}"
                       id="customer-email" />
                <!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko -->
                <span class="note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can create an account now or after checkout. Click the ‘Next’ button below to continue as a guest.'--><!-- /ko --></span>
            </div>
        </div>

        <!--Hidden fields -->
        <fieldset class="fieldset hidden-fields" data-bind="fadeVisible: isPasswordVisible">
            <div class="field">
                <label class="label" for="customer-password"><span data-bind="i18n: 'Password'"></span></label>
                <div class="control">
                    <input class="input-text"
                           data-bind="
                                attr: {
                                    placeholder: $t('Optional'),
                                }"
                           type="password"
                           name="password"

                           id="customer-password"
                           data-validate="{required:true}" autocomplete="off"/>
                    <span class="note" data-bind="i18n: 'You already have an account with us. Sign in or Click the ‘Next’ button below to continue as a guest.'"></span>
                </div>

            </div>
            <!-- ko foreach: getRegion('additional-login-form-fields') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->
            <div class="actions-toolbar">
                <input name="context" type="hidden" value="checkout" />
                <div class="primary">
                    <button type="submit" class="action login primary" data-action="checkout-method-login"><span data-bind="i18n: 'Sign In'"></span></button>
                </div>
                <div class="secondary">
                    <a class="action remind" data-bind="attr: { href: forgotPasswordUrl }">
                        <span data-bind="i18n: 'Forgot Your Password?'"></span>
                    </a>
                </div>
            </div>
        </fieldset>
        <!--Hidden fields -->
    </fieldset>
</form>
<!-- /ko -->

Here's my code:

 <span class="note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can'--><!-- /ko -->
                <a class="note" data-bind="attr: {href: window.checkoutConfig.registerUrl}"> <span data-bind="i18n: 'Create'"></span></a>
                <span class="note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'an account now or after checkout. Click the ‘Next’ button below to continue as a guest.'--><!-- /ko -->

It looks like this below.. not all on one line but create is linking.

You can Create

an account now or after checkout. Click the ‘Next’ button below to continue as a guest.

2
  • Is this in a HTML or PHTML file?
    – Ben Crook
    Jul 28, 2021 at 16:46
  • 1
    it's an html file... i'll post the contents of the full file. @BenCrook
    – Singleton
    Jul 28, 2021 at 16:49

1 Answer 1

1

Presuming you are loading this template on the checkout you can use window.checkoutConfig.registerUrl.

Combine this value with data-bind like so and it should just work:

<a class="action action-register primary" data-bind="attr: {href: window.checkoutConfig.registerUrl}">
    <span data-bind="i18n: 'Create'"></span>
</a>

You was using registerUrl which unless you have defined in the scope of the KO component will be undefined.

Using your other example:

 <a class="note" data-bind="attr: {href: window.checkoutConfig.registerUrl}, fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can create an account now or after checkout. Click the ‘Next’ button below to continue as a guest.'-->$
7
  • How do i add that bit of code into this ? <span class="note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can create an account now or after checkout. Click the ‘Next’ button below to continue as a guest.'-->$
    – Singleton
    Jul 28, 2021 at 17:06
  • That created a button so it essentially worked but i just want to href the word "create" in that ko string. @Ben Crook
    – Singleton
    Jul 28, 2021 at 17:13
  • To only add the href to the word then you want to change the flip the a and the span around then only the word will be the link and not the whole button.
    – Ben Crook
    Jul 28, 2021 at 18:13
  • I've updated my answer with the other example
    – Ben Crook
    Jul 28, 2021 at 18:15
  • I posted on the very bottom of my original post.... look how it's showing up on two lines. Not sure what i've done wrong here.
    – Singleton
    Jul 28, 2021 at 18:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.