G-23 買主註冊頁

Tony Fan

tags: `G系統功能頁` `頁面分析`

API 清單

No	API	Desc	執行順序	執行條件	參考
1	URI-A-02	prepare 多語標籤	1	page init	附註-多語標籤
2	URI054	Prepare code	1	page init	URI-054
3	URI-G-01	Check email	None	on form validate	無
4	URI-G-02	會員買主註冊	None	on form submit	無
5	URI046	SEO資料	1	page init	附註-SEO資料
6	URI-G-07	Check Password Rule	None	on form validate	無

原頁面網址

https://www.taiwantrade.com/register/buyer
- 獨立頁面

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

原頁面 URL 解析

${domain}/register/buyer
- domain: 網域

頁面解說圖

頁面區塊說明

以區塊方式說明使用到的 API

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

G-23-01
- 共用區塊: Header Service元件, 參考A-01 Header元件分析
G-23-02
- HOME : 固定該網域 DID，連結為 https://{domain}
  - 多語標籤: backtohomepage
- Register : 固定標籤
  - 多語標籤: register
G-23-03
- 標題：
  - 多語標籤: registerfortaiwantrade
G-23-04
- 邏輯: Step1文字需要 highlight效果
- Step 1 Fill in the form
  - 多語標籤: ez_step1 + fillintheform
- Step 2 Completion
  - 多語標籤: ez_step2 + completion
G-23-05
- 台灣廠商請由此註冊為會員
  - 寫死文字
  - 連結為 https://info.taiwantrade.com/register/supplier
- 標題：Benefits of Registration
  - 多語標籤: benefitsofregistration
- 項目標題：As a member, you can:
  - 多語標籤: asamemberyoucan
- 項目一：
  - 多語標籤: trackyourfavorites
- 項目二：
  - 多語標籤: takefulladvantage + customizedSourcingServices + asamemberyoucan
  - customizedSourcingServices：
    - 連結為：https://{domain}/mp/customized-sourcing
    - 這一頁只是 MP，開發時請直接使用一頁 html 加上連結做出後再置換連結
- 項目三：
  - 多語標籤: manageyourmessageswithsuppliers

G-23-06
- 註冊表單
  - 各個項目對應參考：頁面欄位說明 G-23-06
  - Submit後，
    - validate error：跳出 G-23-07 的視窗
    - validate success：送出會員買主註冊 API，
      - 送出成功：則導入頁面 G-24 買主註冊成功頁
      - 送出失敗：跳出失敗訊息
        
        Somthing ERROR when register to TT, + [可辨識的失敗訊息]

G-23-07
- G-23-06 有validate錯誤則顯示此視窗並
- Please fill in all required fields.
  - 寫死文字
- 內容
  - 邏輯：提示validate error的欄位
- OK
  - 寫死文字

頁面欄位說明

區塊中使用到的欄位對應

G-23-06

註冊表單，送出會員買主註冊 API，欄位與對應參數(API欄位)如下

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Email：
- 多語標籤: email
- API欄位：email
- Validate：
  - 必填：是
    - 錯誤訊息：Required
  - 透過會員帳號檢查 API 即時檢查Email是否已被使用。
    - 通過：[會員帳號檢查 API] 回傳0: 代表 email可用
    - 錯誤訊息：This email address is already in use.
Your email will be your Taiwantrade.com login.
- 多語標籤: suggestenterofficeemail
Create Password：
- 多語標籤: createapassword
- API欄位：password
- Validate：
  - 必填：是
    - 錯誤訊息：Required
  - 透過 URI-G-07 即時檢查Password是否符合密碼規則。
    - 通過：[URI-G-07] 回傳0: 代表 password可用
    - 錯誤訊息：輸出 [URI-G-07] 回傳的errorMsg
Confirm Password
- 多語標籤: confirmpassword
- API欄位：無
- Validate：
  - 必填：是
    - 錯誤訊息：Required
  - 檢核輸入是否與 Create Password 的輸入ㄧ致
    - 錯誤訊息：Please input the password again.
Full Name：
- 多語標籤: fullname
- 稱謂(下拉)：
  - API欄位：titleCode
  - 下拉選單透過 URI054 取得
  - 預設選項：Mr
    - codemetaId：user-title-code
  - Validate
    - 必填：是
      - 錯誤訊息：Required
- 姓名(輸入框)：
  - API欄位：name
  - Validate
    - 必填：是
      - 錯誤訊息：Required
Company Name：
- 多語標籤: companyname
- 必填：以下兩欄位至少一項
1. 公司名(輸入框)：
  - API欄位：companyName
  - Validate
    - 必填：是 (公司名(輸入框)和I'm an indivdual buyer(檢核方框)至少一有值)
      - 錯誤訊息：Required
2. I'm an indivdual buyer(檢核方框)：
  - API欄位：individualbuyer
    - 勾選：1，取消：0
    - 同時將字串 Individual buyer 填入companyName
  - onClick：
    - 勾選：自動將字串 Individual buyer 填入公司名(輸入框)，並將輸入框設為 readonly 。
    - 取消：清除公司名(輸入框) 內容並取消 readonly。
Country/Region：
- 多語標籤: countryregion
- API欄位：location
- 代碼下拉選單透過 URI054 取得，
  - codemetaId：user-country
- 預設選項：please select
  - 多語標籤: ez_pleaseselect
- Validate
  - 必填：是
    - 錯誤訊息：Required
  - 檢查是否輸入為Taiwan (UI邏輯新版不實作)
    - 錯誤訊息：registerintaiwan + 請由此註冊成會員
      - registerintaiwan：多語標籤
      - 請由此註冊成會員
        
        連結為：https://info.taiwantrade.com/register/supplier
- onSelect：
  - 所選的代碼，其API回應欄位telcode會帶入Business Phone Number和Mobile Phone Number的國碼欄位為預設值。
  - 並且，選取的代碼作為parentCode帶入State/Province/City 的欄位
State/Province/City
- 必填：以下兩欄位至少一項
1. State/Province/City：
  - 多語標籤: stateprovincecity
  - API欄位：officeStateCode
  - 代碼下拉選單透過 URI054 取得，
    - codemetaId：user-country-state ，
    - parentCode：Company/Region 所選的location。
  - 預設選項：please select
    - 多語標籤: ez_pleaseselect
  - Validate
    - 必填：是 (State/Province/City和Other State/Provice/City至少一有值)
      - 錯誤訊息：Required
2. Other State/Provice/City：
  - 多語標籤: otherstateprovincecity
  - API欄位：officeOtherState
Address：
- 多語標籤: address
- API欄位：officeAddress
- Validate
  - 必填：是
    - 錯誤訊息：Required
Company Website：
- 多語標籤: companywebsite
- 必填：以下兩欄位至少一項
  1. 網址(輸入框)：
    - API欄位：companyWebsite
    - Validate
      - 必填：是 (網址(輸入框)和Not Avaliable(檢核方框)至少一有值)
        
        錯誤訊息：Required
  2. Not Avaliable(檢核方框)：
    - 多語標籤: notavailable
    - API欄位：websiteNotAvaliable
      - 勾選：1，取消：0
      - 同時將字串 Not Available 填入companyWebsite
    - onClick：
      - 勾選：自動將字串 Not Available 填入公司名(輸入框)，並將輸入框設為 readonly 。
      - 取消：清除公司名(輸入框) 內容並取消 readonly。
Business Phone Number：
- 多語標籤: tel1
- 國碼：
  - API欄位：telCountry
  - Validate
    - 必填：否
    - 必須為數字：是
      - 錯誤訊息：Please enter only numbers.
  - 預設值：參考 URI054 取得
    - codemetaId：user-country
    - 對應 Company/Region 所選的location的欄位：telcode帶入。
  - user-country的客製輸出
- 號碼：
  - API欄位：tel
  - Validate
    - 必填：否
    - 必須為數字：是
      - 錯誤訊息：Please enter only numbers.
- 分機：
  - API欄位：telExt
  - Validate
    - 必填：否
    - 必須為數字：是
      - 錯誤訊息：Please enter only numbers.
Mobile Phone Number
- 多語標籤: mobilephone
- 國碼：
  - API欄位：mobileCountry
  - Validate
    - 必填：否
    - 必須為數字：是
      - 錯誤訊息：Please enter only numbers.
  - 預設值：參考 URI054 取得
    - codemetaId：user-country
    - 對應 Company/Region 所選的location的欄位：telcode帶入。
- 號碼：
  - API欄位：mobile
  - Validate
    - 必填：否
    - 必須為數字：是
      - 錯誤訊息：Please enter only numbers.
I accept the Taiwantrade.com Membership Agreement, Terms of Use and Privacy Policy
- API欄位：(https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#輸入參數說明)：acceptAgreement
- 多語標籤: iacceptthe + taiwantradecommembershipagreement + termsofuse + and + privacypolicy
  - taiwantradecommembershipagreement
    - 連結為：https://www.taiwantrade.com/mp/help#2
      - 這一頁只是 MP，開發時請直接使用一頁 html 加上連結做出後再置換連結
  - termsofuse
    - 連結為：https://www.taiwantrade.com/mp/help#3
      - 這一頁只是 MP，開發時請直接使用一頁 html 加上連結做出後再置換連結
  - privacypolicy
    - 連結為：https://www.taiwantrade.com/mp/help#4
      - 這一頁只是 MP，開發時請直接使用一頁 html 加上連結做出後再置換連結
- 同意服務條款，要勾選才能submit
- Validate
  - 必填：是
    - 錯誤訊息：無。但disable Submit Button。
I'd like to show my email address to the suppliers I contact on Taiwantrade.com.
- 多語標籤: idontlikeshowmyemail
- API欄位：newShowInfo
  - 勾選：1，取消：0
- 必填：否
Google recaptcha
- API欄位：無
- Validate
  - 必填：是
    - 錯誤訊息：無。但disable Submit Button。
- 用法：請見 Google Recaptcha 說明
I'd like to receive information on related products and events.
- 多語標籤: subscribetotaiwantradenewsletter
- API欄位：newsLetter
  - 勾選：1，取消：0
Submit
- 多語標籤: register
- onClick：
  - Sumbit表單，參考：頁面區塊說明 G-23-06

頁面邏輯說明

請見頁面解說圖頁面欄位說明各欄說明

以下僅列出特別需要注意的頁面邏輯

SEO資料

比照AEM舊案，在HEAD TAG 內植入的SEO資料

參考 API URI046

General類的頁面代碼指定為 REGISTER_BUYER

Google Recaptcha

請參考 Google官網實作，每一種語言的用法不同

目前使用 V2
需驗證合法性
secrekey請向貿協或凌網EODA索取
請確認使用的開發技術，能讓中國大陸地區也能使用(中國有檔 https://www.google.com/recaptcha/api.js )
如果是使用angular，可以參考使用：
- https://www.npmjs.com/package/ngx-captcha
  - 這個確定可以支援中國地區，遇到中國地區瀏覽器會自動轉成https://www.recaptcha.net/recaptcha/api.js 來翻牆
- https://www.npmjs.com/package/ng-recaptcha