仅限 B2B 登录解决方案

注意:

  1. 此方案需要修改主题代码,会导致主题变为私有主题。

  2. 此方案根据官方默认主题 Fashion 改写,若主题已存在定制信息,请谨慎改写。

  3. 非 B2B 用户点击「登录另一个账户」后,会进入用户中心,需手动退出并重新登录 B2B 账号。

效果展示

1. 非 B2B 用户查看到的页面

2. 未登录用户查看到的页面

配置方式

1. 开启新客户账户登录

2. 增加用户提示页

说明:用于提示非 B2B 用户,可自行进行修改。

2.1. 打开主题代码编辑器
2.2. 新建 components,名称为 b2bInfo,后缀选择 html
2.3. 将以下代码复制进去
<style>
.box {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                   "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    background-color: #f6f6f7;
    color: #1d1d1f;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
    max-width: 420px;
    padding: 50px;
    border: 1px solid #c7c7c7;
    border-radius: 4px;
}

.message {
    font-size: 17px;
    line-height: 1.4;
    color: #1d1d1f;
    margin-bottom: 24px;
}

.btn {
    display: inline-block;
    min-width: 200px;
    padding: 24px 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.17648;
    color: #fff !important;
    background-color: #0071e3;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
    border: none;
}

.btn:hover {
    background-color: #0066cc;
}
</style>
<div class="box">
    <div class="container">
        <p class="message">
            您未注册为 {{ shop.name }} 的 B2B 客户
        </p>

        <a class="btn" href="/account/signIn">
        登录另一个账户
        </a>
    </div>
</div>

3. 修改 layout/theme.html

说明:

  1. 用于处理核心跳转逻辑。

  2. 可自行在「配置哪些页面可以绕过」处控制哪些页面链接不进行限制。

<!DOCTYPE html>
<html lang="{{ request.locale.iso_code }}">
  <head>
    {{#component "page-head" /}}

    {{#component "theme-css-var" /}}
    {{#component "stylesheet" src="base/index.css" | asset_url() preload=true /}}
    {{#component "script" src="base/index.js" | asset_url() /}}

    {{#if request.design_mode }}
      {{#component "script" src="base/theme-editor.js" | asset_url() /}}
    {{/if}}

    {{#content "header" /}}
  </head>
  <body
    class="color-scheme-1"
    data-page-type="{{ request.page_type }}"
    data-cart-add-type="{{ settings.cart_add_type }}"
  >
    {{#var showPage /}}
    {{#set showPage = false /}}

    {{!-- 控制b2b用户可以访问页面 --}}
    {{#if customer.b2b }}
        {{#set showPage = true /}}
    {{/if}}
    {{!-- 配置哪些页面可以绕过,如登录页等 --}}
    {{#if request.path == "/account/signIn"}}
        {{#set showPage = true /}}
    {{/if}}

    {{#if showPage }}
        {{!-- 具体页面信息 --}}
        {{#sections "header-group" /}}

        {{#content "layout" /}}

        {{#sections "footer-group" /}}

        {{#content "footer" /}}

        {{#if settings.cart_add_type == "drawer" && request.page_type != "cart" }}
        {{#component "cart/cart-drawer" /}}
        {{/if}}

        <script>
        window.shopUrl = '{{ request.origin }}';
        window.routes = {
            cartAddUrl: '{{ routes.cart_add_url }}',
            cartChangeUrl: '{{ routes.cart_change_url }}',
            cartUpdateUrl: '{{ routes.cart_update_url }}',
            cartUrl: '{{ routes.cart_url }}',
            cartCountUrl: '{{ routes.cart_count_url }}',
            predictiveSearchUrl: '{{ routes.predictive_search_url }}',
            accountUrl: '{{ routes.account_url }}',
            accountLoginUrl: '{{ routes.account_login_url }}',
            addressUrl: '{{ routes.address_url }}',
            cartDiscountCodeApplyUrl: '{{ routes.cart_discount_code_apply_url }}',
            cartDiscountCodeRemoveUrl: '{{ routes.cart_discount_code_remove_url }}',
            addressCountriesUrl: '{{ routes.address_countries_url }}',
            addressCountryTemplateUrl: '{{ routes.address_country_template_url }}',
            addressNextUrl: '{{ routes.address_next_url }}',
        };
        </script>
    {{#else/}}
        {{#if customer }}
            {{!-- 用户提示页 --}}
            {{#component "b2bInfo" /}}
        {{#else/}}
            {{!-- 自动跳转去登录 --}}
            <script>
                location.href = "/account/signIn"
            </script>
        {{/if}}
    {{/if}}
    
  </body>
</html>