Показать форму регистрации вместо формы входа - PullRequest
Новая
       2

Показать форму регистрации вместо формы входа

0 голосов
/ 09 января 2020

Я использую тему Shopify под названием Basal. Вверху моего сайта есть ссылка для входа / регистрации. Когда вы нажимаете ссылку «Войти / Зарегистрироваться», виджет входа в систему выскакивает со стороны (например: https://new-basel2.myshopify.com/?key=f7fb74c55f142b94a98cab2918807f42f8f3e861bf52cd098b74bd9d13416020)

Форма автоматически сначала показывает сторону входа, а затем вы можете нажмите на ссылку «создать учетную запись» в нижней части формы, и она покажет сторону регистра, одновременно скрывая сторону входа в систему.

Мой вопрос заключается в том, как я могу сначала показать сторону регистра, когда некоторые нажимают кнопку входа / кнопка регистрации? Любая помощь будет принята.

Я пытался возиться с элементом "register_sidediv" и использовал функции "showFormLogin" и "hideFormLogin", но ничего не помогло.

Вот два файла, связанные со всплывающим окном входа / регистрации

login_side.liquid - 

{%- assign gl_shopify_error = false -%}
<div class="login-form-side">
   <div class="widget-heading">
      <h3 class="widget-title">{{ 'general.login_popup.title' | t }}</h3>
      <a href="#" class="widget-close">{{ 'general.login_popup.close' | t }}</a>
   </div>
   <div class="login-form">
      <div class="shopify-message resetSuccessside" style="display:none;">{{ 'customer.recover_password.success' | t }}</div>
      <p class="text_content_success resetSuccessside" style="display:none;">{{ 'customer.recover_password.content_success' | t }}</p>
      <ul id="gl_shopify_errorside" class="shopify-error" style="display:none;">
         <li class="html_li" id="jas_html_frmside"></li>
      </ul>
      {%- form 'customer_login', id: "customer_login_side",class:'login shopify-form shopify-form-login' -%}
         {%- if form.errors -%}
            {%- assign gl_shopify_error = true -%}
            {%- for field in form.errors -%}
               {%- if field == 'form' -%}
                  {%- assign error_html = form.errors.messages[field] -%}
               {%- else -%}
                  {%- assign error_html = form.errors.translated_fields[field] | append:form.errors.messages[field] -%}
               {%- endif -%}
            {%- endfor -%}
         {%- endif -%}
         <p class="shopify-FormRow shopify-FormRow--wide form-row form-row-wide">
            <label for="usernameside">{{ 'customer.login.email' | t }} <span class="required">*</span></label>
            <input type="text" class="shopify-Input shopify-Input--text input-text{%- if form.errors contains 'email' %} input--error{%- endif -%}" name="customer[email]" id="usernameside" value="">
         </p>
         {%- if form.password_needed -%}
            <p class="shopify-FormRow shopify-FormRow--wide form-row form-row-wide">
               <label for="passwordside">{{ 'customer.login.password' | t }} <span class="required">*</span></label>
               <input class="shopify-Input shopify-Input--text input-text{%- if form.errors contains 'password' %} input--error{%- endif -%}" type="password" name="customer[password]" id="passwordside">
            </p>
            <p class="shopify-LostPassword lost_password">
               <a href="javascript:void(0)" onclick="showRecoverPasswordFormSide();return false;">{{ 'customer.login.forgot_password' | t }}</a>
            </p>
         {%- endif -%}
         <p class="form-row">
            <input type="submit" class="shopify-Button button" name="login" value="{{ 'customer.login.sign_in' | t }}">
         </p>
      {%- endform -%}

         <div id="register_sidediv" style="display: none">
            {%- form 'create_customer',id:'register_side',class:'login shopify-form shopify-form-login' -%}
               {%- if form.errors -%}
                  {%- assign gl_shopify_error = true -%}
                  {%- for field in form.errors -%}
                     {%- if field == 'form' -%}
                        {%- assign error_html = form.errors.messages[field] -%}
                     {%- else -%}
                        {%- assign error_html = form.errors.translated_fields[field] | append:form.errors.messages[field] -%}
                     {%- endif -%}
                  {%- endfor -%}
               {%- endif -%}
               <p class="shopify-FormRow shopify-FormRow--wide form-row form-row-wide">
                  <label for="FirstNamereg">{{ 'customer.register.first_name' | t }}</label>
                  <input type="text" name="customer[first_name]" id="FirstNamereg"{%- if form.first_name %} value="{{ form.first_name }}"{%- endif %} autofocus>
               </p>
               <p class="shopify-FormRow shopify-FormRow--wide form-row form-row-wide">
                  <label for="LastNamereg">{{ 'customer.register.last_name' | t }}</label>
                  <input type="text" name="customer[last_name]" id="LastNamereg"{%- if form.last_name %} value="{{ form.last_name }}"{%- endif -%}>
               </p>
               <p class="shopify-FormRow shopify-FormRow--wide form-row form-row-wide">
                  <label for="reg_emailreg">{{ 'customer.register.email' | t }} <span class="required">*</span></label>
                  <input type="email" class="shopify-Input shopify-Input--text input-text{%- if form.errors contains 'email' %} input--error{%- endif -%}" name="customer[email]" id="reg_emailreg"{%- if form.email %} value="{{ form.email }}"{%- endif -%}>
               </p>
               <p class="shopify-FormRow shopify-FormRow--wide form-row form-row-wide">
                  <label for="reg_passwordreg">{{ 'customer.register.password' | t }} <span class="required">*</span></label>
                  <input type="password" class="shopify-Input shopify-Input--text input-text{%- if form.errors contains 'password' %} input--error{%- endif -%}" name="customer[password]" id="reg_passwordreg" required="required">
                  <div class="shopify-password-strength" aria-live="polite"></div>
               </p>
               <p class="shopify-FormRow form-row">          
                  <input type="submit" class="shopify-Button button" name="register" value="{{ 'customer.register.submit' | t }}">
               </p>
            {%- endform -%}
        </div>
       <div id="recover_passwordside" style="display: none">
         {%- form 'recover_customer_password',id:'reset_password_side', class:'shopify-ResetPassword lost_reset_password' -%}
            <p class="gl_mb_0 gl_first">{{ 'customer.recover_password.subtext' | t }}</p>
            {%- if form.posted_successfully? -%}
               {%- assign reset_success = true -%}
            {%- endif -%}
            {%- if form.errors -%}
               {%- assign gl_shopify_error = true -%}
               {%- for field in form.errors -%}
                  {%- if field == 'form' -%}
                     {%- assign error_html = form.errors.messages[field] -%}
                  {%- else -%}
                     {%- assign error_html = form.errors.translated_fields[field] | append:form.errors.messages[field] -%}
                  {%- endif -%}
               {%- endfor -%}
            {%- endif -%}
            <p class="shopify-form-row shopify-form-row--first form-row form-row-first">
               <label for="RecoverEmailside">{{ 'customer.recover_password.email' | t }}</label>
               <input type="email" value="" name="email" id="RecoverEmailside" class="shopify-Input shopify-Input--text input-text" autocorrect="off" autocapitalize="off">
            </p>
            <div class="clear"></div>
            <p class="shopify-form-row form-row">
               <input type="submit" class="shopify-Button button" value="{{ 'customer.recover_password.submit' | t }}">
               <button type="button" onclick="hideRecoverPasswordFormSide();return false;" class="shopify-Button button">{{ 'customer.recover_password.cancel' | t }}</button>
            </p>
         {%- endform -%}
      </div>
   </div>
   <div class="register-question">
      <span class="create-account-text">{{ 'general.login_popup.account_text' | t }}</span>
      <p>{{ settings.registration_text }}</p>
      <a class="btn btn-style-link" href="/account/register" id="hideFormLogin" onclick="hideFormLogin();return false;">{{ 'general.login_popup.register' | t }}</a>
      <a class="btn btn-style-link" href="/account/login" id="showFormLogin" onclick="showFormLogin();return false;" style="display:none">{{ 'general.login_popup.login' | t }}</a>
   </div>
</div>
<script type="text/javascript">
  /*
    Show/hide the recover password form when requested.
  */
  function showRecoverPasswordFormSide() {
    document.getElementById('recover_passwordside').style.display = 'block';
    document.getElementById('customer_login_side').style.display='none';
  }

  function hideRecoverPasswordFormSide() {
    document.getElementById('recover_passwordside').style.display = 'none';
    document.getElementById('customer_login_side').style.display = 'block';
  }
  function hideFormLogin() {
    document.getElementById('register_sidediv').style.display = 'block';
    document.getElementById('customer_login_side').style.display='none';
    document.getElementById('showFormLogin').style.display = 'inline-block';
    document.getElementById('hideFormLogin').style.display='none';
  }

  function showFormLogin() {
    document.getElementById('register_sidediv').style.display = 'none';
    document.getElementById('customer_login_side').style.display = 'block';
    document.getElementById('hideFormLogin').style.display = 'inline-block';
    document.getElementById('showFormLogin').style.display='none';
  }
  // Allow deep linking to the recover password form
  //if (window.location.hash == '#recover') { showRecoverPasswordForm() }

  // reset_success is only true when the reset form is
  {% if reset_success -%}
    var x = document.getElementsByClassName('resetSuccessside');
    x[0].style.display = 'block';  x[1].style.display = 'block';
  {% endif -%}
   {% if gl_shopify_error -%}
      {%- if error_html != blank -%}
      var html = {{error_html | json }};
      var element = document.getElementById("jas_html_frmside");
         element.innerHTML = '';
         element.innerHTML = '{{ 'customer.login.error' | t }} '+html;
      
      {%- endif -%}
      document.getElementById('gl_shopify_errorside').style.display = 'block';
  {% endif -%}
</script>

функций. js - 

 *-------------------------------------------------------------------------------------------------------------------------------------------
             * Login sidebar
             *-------------------------------------------------------------------------------------------------------------------------------------------
             */
             
            loginSidebar: function() {
                if ($( '.login-form-side' ).length === 0) return;
                var body = $( 'body' );
                $( '.login-side-opener' ).on( 'click', function ( e ) {
                    e.preventDefault();
                    if( isOpened() ) {
                        closeWidget();
                    } else {
                        setTimeout( function() {
                            openWidget();
                        }, 10);
                    }
                });
                
                body.on( 'click touchstart', '.basel-close-side', function() {
                    if( isOpened() ) closeWidget();
                });

                body.on( 'click', '.widget-close', function( e ) {
                    e.preventDefault();
                    if( isOpened() ) closeWidget();
                });
                
                var closeWidget = function() {
                    body.removeClass( 'basel-login-side-opened' );
                };

                var openWidget = function() {
                    body.addClass( 'basel-login-side-opened' );
                };
                
                var isOpened = function() {
                    return body.hasClass( 'basel-login-side-opened' );
                };

            },
          
            
            /**

Ответы [ 2 ]

1 голос
/ 09 января 2020

Вы можете попытаться адаптировать код следующим образом:

Добавьте «hideFormLogin» после e.preventDefault ();

Это должно вызывать функцию переключения при открытии ссылки на боковую панель. нажата. Это должно работать как для настольных компьютеров, так и для мобильных устройств. 

             
            loginSidebar: function() {
                if ($( '.login-form-side' ).length === 0) return;
                var body = $( 'body' );
                $( '.login-side-opener' ).on( 'click', function ( e ) {
                    e.preventDefault();
                    hideFormLogin();
                    
                    if( isOpened() ) {
                        closeWidget();
                    } else {
                        setTimeout( function() {
                            openWidget();
                        }, 10);
                    }
                });
                
                body.on( 'click touchstart', '.basel-close-side', function() {
                    if( isOpened() ) closeWidget();
                });

                body.on( 'click', '.widget-close', function( e ) {
                    e.preventDefault();
                    if( isOpened() ) closeWidget();
                });
                
                var closeWidget = function() {
                    body.removeClass( 'basel-login-side-opened' );
                };

                var openWidget = function() {
                    body.addClass( 'basel-login-side-opened' );
                };
                
                var isOpened = function() {
                    return body.hasClass( 'basel-login-side-opened' );
                };

            },
1 голос
/ 09 января 2020

Добавьте этот javascript код в нижний колонтитул вашего шаблона: 

<script>hideFormLogin();</script>

Я просмотрел ваш шаблон, и это функция, которая скрывает форму входа и показывает форму регистрации на боковой панели. Это также работает, если боковая панель скрыта, тогда форма регистрации отображается при открытии боковой панели.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...