Я использую тему Shopify под названием Basal. Вверху моего сайта есть ссылка для входа / регистрации. Когда вы нажимаете ссылку «войти / зарегистрироваться», виджет входа в систему появляется сбоку (например: https://new-basel2.myshopify.com/?key=f7fb74c55f142b94a98cab2918807f42f8f3e861bf52cd098b74bd9d13416020)
Тема объединяет в себе кнопки входа и регистрации (login / зарегистрироваться), однако я хотел бы две отдельные кнопки, одну для входа в систему и одну для регистрации.
На данный момент одна кнопка (Войти / Зарегистрироваться) автоматически открывает форму входа в виджет, и есть кнопка внизу, чтобы создать учетную запись, и когда она нажата, она скрывает форму входа и отображает форму регистрации.
Я хочу, чтобы при нажатии кнопки входа форма входа выскакивала сбоку, и когда вы нажимаете кнопку регистрации, форма регистрации выскакивает сбоку.
Я пытался добиться этого, добавив еще один элемент li в файл header-account.liquid (который создал две отдельные кнопки) и затем сделал другую функцию, чтобы получить новую кнопку регистрации, чтобы открыть форму регистрации со стороны вместо формы входа в систему. Однако это не сработало и стало очень сложным.
Мне интересно, может ли кто-нибудь помочь в решении проблемы или вы могли бы сказать мне, будет ли это легкое изменение или сложное изменение.
Я включил некоторые файлы, которые, я думаю, применяются к изменению, которое я хотел бы внести (по крайней мере, это файлы, которые я в основном просматривал). Заранее благодарим за любую помощь.
header_account.liquid
{%- assign ck_nt = false -%}
{%- if settings.top_bar_enable == false or settings.header_design == 'menu-top' -%}
{%- assign ck_nt = true -%}
{%- endif -%}
{%- unless offpopup -%}
{%- assign offpopup = false -%}
{%- endunless -%}
{%- if settings.account_header_enable -%}
<div class="header-links{%- if ck_curency_lang and ck_nt %} topbar-menu nathan_my-account nt-settings{%- endif -%}">
<ul>
{%- if ck_curency_lang and ck_nt -%}
<li>
<a href="javascript:void(0)">{{ 'general.settings.settings' | t }}</a>
<div class="sub-menu-dropdown color-scheme-dark">
<div class="setting-content text-left">
{%- if settings.show_multiple_currencies and settings.supported_currencies != blank -%}
<div class="select-currency currencies currency clearfix">
<div class="currency-title">{{ 'general.settings.currency' | t }}</div>
<div class="currency-topbar">
<div class="currency-list currency-lists">
{%- include 'gl_currency',currency_header:true -%}
</div>
</div>
</div>
{%- endif -%}
{%- if settings.show_language_currencies and settings.language_link_list != blank -%}
<div class="select-currency jas_lang clearfix">
<div class="currency-title">{{ 'general.settings.language' | t }}</div>
<div class="currency-topbar">
<div class="currency-list currency-lists">
{%- include 'gl-lang',currency_header:true -%}
</div>
</div>
</div>
{%- endif -%}
{%- if shop.customer_accounts_enabled -%}
<ul class="clearfix">
{%- if customer -%}
<li><a class="pr" href="/account">{{ 'layout.customer.my_account' | t }}</a></li>
<li><a class="pr" href="/account/logout">{{ 'layout.customer.log_out' | t }}</a></li>
{%- else -%}
<li{% if settings.login_side and offpopup == false %} class="login-side-opener"{% endif %}><a class="pr" href="/account/login">{{ 'layout.customer.log_in' | t }}</a></li>
{%- endif -%}
</ul>
{%- endif -%}
</div>
</div>
</li>
{%- elsif customer -%}
<li><a href="/account">{{ 'layout.customer.my_account' | t }}</a></li>
<li><a href="/account/logout">{{ 'layout.customer.log_out' | t }}</a></li>
{%- elsif shop.customer_accounts_enabled -%}
<li{% if settings.login_side and offpopup == false %} class="login-side-opener"{% endif %}><a href="/account/login">{{ 'layout.customer.log_in' | t }}</a></li>
{%- endif -%}
</ul>
</div>
{%- endif -%}
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' );
};
},
/**