Login layout

[PiLLaO]

I'm getting crazy about login layout.

I'm trying to find any not ugly design for desktop.

In my mind the actual design (that I can't make it works) its two columns, because I thing that only column on destkop It is unsightly.

Two columns are:

first column:
up: login_form
down: forgot_password

second column:
up: create_account_link
down: pwa_login (addon)

I need help with ideas or... how you layout your login.php?

[azpro]

I think the two-column idea is fine for desktop, but I would not give all four sections the same visual weight.

The normal login form should remain the primary element. I would use:

**Left column**

* Returning customer heading
* Login form
* Forgot password link directly below the password field
* PWA login below a divider, if it is an alternative login method

**Right column**

* New customer heading
* Short explanation or account benefits
* Create account button

On mobile, both columns should stack, with the login form appearing first.

Something like Bootstrap’s `col-12 col-lg-7` for the login card and `col-12 col-lg-5` for the create-account card usually looks better than two equal-width columns. The login form needs slightly more space, while the create-account section can remain compact.

I would also use two cards with `h-100`, so both columns have the same height on desktop. “Forgot password” probably does not need its own card; it is a secondary action belonging to the login form.

[azpro]

mockup by ChatGPT

[ArtcoInc]

(If I may suggest ...)

IF you have an existing shop, and IF you have Google analytics running, check to see what your customers use to access your shop ... desktops, laptops, or phones. And, what resolutions your customers are using.

I say this because in my shop, over 95%+ of my customers are accessing my shop from a desktop computer. In my case, using something like your mockup above would work.

But, pay attention as to how the layout would display on a phone (especially if more of your customers access your shop via a phone).

M

[ecartz]

PWA Login is going to be confusing. It's not actually a login. It's bypassing the login process. "Check out as Guest" or "No Login" would make more sense for new users. As is, PWA won't tell customers that they can use it to avoid creating an account. Particularly combined with Login, which is what they are trying to avoid.

The simplest way would be to turn off Create Account and change the language to "Returning Customers" and "New or Guest Customers". Then always use PWA instead of Create Account. Offer the ability to create an account *after* checkout, before PWA deletes its temporary account.

[PiLLaO]

Thanks all for your answers

@azpro your picture is more or less like it's on my mind, but I can't find the way to make it possible with actual config

The problem it's If I install login, the second module go at the right and the next module go down the first module but with the second module height, In other words seems to be a puzzle.

The only thing that occurs to me is creating new modules that are grouped together.

[burt]

@PiLLaO to get a modular layout like that, you need to look into how the PI Layout modules work (eg on the product_info page). You then need to create a similar system for the Login page.

--

You might instead look at Masonry effect;
https://getbootstrap.com/docs/5.0/examples/masonry/

[azpro]

@azpro your picture is more or less like it's on my mind, but I can't find the way to make it possible with actual config

The problem it's If I install login, the second module go at the right and the next module go down the first module but with the second module height, In other words seems to be a puzzle.

ChatGPT gives me this as the skeleton:

Code: Select all

<div class="row g-4 align-items-stretch">

  <div class="col-12 col-lg-7">
    <div class="card h-100 shadow-sm">
      <div class="card-body p-4">

        <h1 class="h3 mb-4">
          <?= HEADING_RETURNING_CUSTOMER ?>
        </h1>

        <?= $login_form ?>

        <div class="mt-3">
          <a href="<?= $forgot_password_link ?>">
            <?= TEXT_PASSWORD_FORGOTTEN ?>
          </a>
        </div>

        <?php if (!empty($pwa_login)) { ?>
          <hr class="my-4">

          <div class="text-center">
            <div class="text-muted small mb-3">
              <?= TEXT_OR_LOGIN_WITH_PWA ?>
            </div>

            <?= $pwa_login ?>
          </div>
        <?php } ?>

      </div>
    </div>
  </div>

  <div class="col-12 col-lg-5">
    <div class="card h-100 border-primary">
      <div class="card-body p-4 d-flex flex-column">

        <h2 class="h4">
          <?= HEADING_NEW_CUSTOMER ?>
        </h2>

        <p class="text-muted">
          <?= TEXT_NEW_CUSTOMER_INTRODUCTION ?>
        </p>

        <ul class="mb-4">
          <li>Faster checkout</li>
          <li>View previous orders</li>
          <li>Manage delivery addresses</li>
        </ul>

        <div class="mt-auto">
          <a href="<?= $create_account_link ?>"
             class="btn btn-outline-primary w-100">
            <?= IMAGE_BUTTON_CONTINUE ?>
          </a>
        </div>

      </div>
    </div>
  </div>

</div>

[PiLLaO]

@burt I look this option to, but searching in code I find in admin/includes/modules/cfg_modules/cfgm_layout.php

Code: Select all

    const GROUP_KEYS = [
      'contact_us' => 'MODULE_CONTENT_CU_INSTALLED',
      'index' => 'MODULE_CONTENT_I_INSTALLED',
      'product_info' => 'MODULE_CONTENT_PI_INSTALLED',
      'info' => 'MODULE_CONTENT_INFO_INSTALLED',
    ];

And thinked that need to touch core

[burt]

Yes, you would need to touch core in that file.

See second paragraph here:
viewtopic.php?p=24084#p24084