The Register page functionality is to be developed.Extend the register page and develop it as a 2 page registration.
Add the custom fields in the registration form and save it to the required customer fields in Netsuite.
Steps:
1.Create custom entity field in netsuite.
2.extend “login_register_register.tpl” .
3. created an extension called “registerpage” and extended Extended ‘LoginRegister.Register.View’ and ‘Account.Register.Model’ to give the validations.
4. Extended the “account.model” suitescript file to save the values to netsuite.
// entry point file
define(
'JJ.registerpage.customer'
, [
'JJ.registerpage.customer.View', 'Utils', 'Profile.Model','LoginRegister.Register.View','Account.Register.Model'
]
, function (
customerView, Utils, ProfileModel,LoginRegisterRegisterView,AccountRegisterModel
)
{
'use strict';
return {
mountToApp: function mountToApp (container)
{
var layout = container.getComponent('Layout');
_.extend(LoginRegisterRegisterView.prototype, {
bindings: {
'[name="firstname"]': 'firstname',
'[name="lastname"]': 'lastname',
'[name="company"]': 'company',
'[name="email"]': 'email',
'[name="password"]': 'password',
'[name="password2"]': 'password2',
'[name="custentity46"]': 'custentity46',
'[name="custentity_cust_gdc"]': 'custentity_cust_gdc',
'[name="custentity40"]': 'custentity40',
'[name="custentity41"]': 'custentity41',
'[name="custentity43"]': 'custentity43',
'[name="custentity44"]': 'custentity44',
'[name="custentity45"]': 'custentity45',
'[name="custentity_leadcountry"]': 'custentity_leadcountry',
'[name="custentity_postcode"]': 'custentity_postcode',
'[name="phone"]': 'phone',
'[name="custentity42"]': 'custentity42'
}
}),
_.extend(AccountRegisterModel.prototype, {
validation: {
firstname: {
required: true,
msg: Utils.translate('First Name is required')
},
lastname: {
required: true,
msg: Utils.translate('Last Name is required')
},
email: {
required: true,
pattern: 'email',
msg: Utils.translate('Valid Email is required')
},
company: {
required: SC.ENVIRONMENT.siteSettings.registration.companyfieldmandatory === 'T',
msg: Utils.translate('Company Name is required')
},
password: {
required: true,
msg: Utils.translate('Please enter a valid password')
},
custentity46: {
required: true,
msg: Utils.translate('Please enter a valid value')
},
custentity_cust_gdc: {
required: true,
msg: Utils.translate('Please enter a valid value')
},
custentity40: {
required: true,
msg: Utils.translate('Please enter a valid value')
},
custentity41: {
required: true,
msg: Utils.translate('Please enter a valid value')
},
custentity43: {
required: true,
msg: Utils.translate('Please enter a valid value')
},
custentity44: {
required: true,
msg: Utils.translate('Please enter a valid value')
},
custentity45: {
required: true,
msg: Utils.translate('Please enter a valid value')
},
custentity_leadcountry: {
required: true,
msg: Utils.translate('Please enter a valid value')
},
custentity_postcode: {
required: true,
msg: Utils.translate('Please enter a valid value')
},
phone: {
required: true,
msg: Utils.translate('Please enter a valid value')
},
custentity42: {
required: true,
msg: Utils.translate('Please enter a valid value')
},
password2: [
{
required: true,
msg: Utils.translate('Confirm password is required')
},
{
equalTo: 'password',
msg: Utils.translate('New Password and Confirm Password do not match')
}
]
}
})
}
};
});
//Suitescrpt
// JJ.registerpage.customer.js
// Load all your starter dependencies in backend for your extension here
// ----------------
define('JJ.registerpage.customer'
, [
'JJ.registerpage.customer.ServiceController',
'Account.Model',
'SC.Model',
'Application',
'SC.Models.Init',
'Profile.Model',
'LiveOrder.Model',
'Address.Model',
'CreditCard.Model',
'SiteSettings.Model',
'underscore',
'Utils'
]
, function (
customerServiceController,
AccountModel,
SCModel,
Application,
ModelsInit,
Profile,
LiveOrder,
Address,
CreditCard,
SiteSettings,
_,
Utils
) {
'use strict';
_.extend(AccountModel,{
register: function (user_data) {
console.log("inside register");
console.log("user_data",user_data);
// var customer = ModelsInit.getCustomer();
try {
console.log("inside try");
var customfields = {};
for (var property in user_data) {
if (property.substring(0, 10) == 'custentity') {
customfields[property] = user_data[property];
}
}
console.log("customfields",customfields);
if (ModelsInit.customer.isGuest()) {
console.log("inside guest");
var guest_data = ModelsInit.customer.getFieldValues();
ModelsInit.customer.setLoginCredentials({
internalid: guest_data.internalid,
email: user_data.email,
password: user_data.password
});
ModelsInit.session.login({
email: user_data.email,
password: user_data.password
});
if (Object.keys(customfields).length) {
ModelsInit.customer.updateProfile({
internalid: guest_data.internalid,
firstname: user_data.firstname,
lastname: user_data.lastname,
companyname: user_data.company,
//phone: user_data.phone,
emailsubscribe:
user_data.emailsubscribe && user_data.emailsubscribe !== 'F'
? 'T'
: 'F',
customfields: customfields
});
} else {
ModelsInit.customer.updateProfile({
internalid: guest_data.internalid,
firstname: user_data.firstname,
lastname: user_data.lastname,
companyname: user_data.company,
//phone: user_data.phone,
emailsubscribe:
user_data.emailsubscribe && user_data.emailsubscribe !== 'F' ? 'T' : 'F'
});
}
} else {
console.log("inside register customer")
user_data.emailsubscribe =
user_data.emailsubscribe && user_data.emailsubscribe !== 'F' ? 'T' : 'F';
var result = ModelsInit.session.registerCustomer({
firstname: user_data.firstname,
lastname: user_data.lastname,
companyname: user_data.company,
email: user_data.email,
password: user_data.password,
password2: user_data.password2, emailsubscribe: user_data.emailsubscribe && user_data.emailsubscribe !== 'F' ? 'T' : 'F'
});
console.log("result",result );
try {
console.log("inside update profile");
ModelsInit.customer.updateProfile({
internalid: result.customerid,
customfields: {
custentityphonenumber:user_data.custentityphonenumber,
custentity46: user_data.custentity46,
custentity_cust_gdc: user_data.custentity_cust_gdc,
custentity40: user_data.custentity40,
custentity41: user_data.custentity41,
custentity43: user_data.custentity43,
custentity44: user_data.custentity44,
custentity45: user_data.custentity45,
custentity_leadcountry: user_data.custentity_leadcountry,
custentity_postcode: user_data.custentity_postcode,
custentity42: user_data.custentity42
}
});
}catch(e){
console.log("error at update session",e);
}
if (Object.keys(customfields).length && result.customerid) {
ModelsInit.customer.updateProfile({
internalid: result.customerid,
customfields:customfields
});
}
}
var user = Profile.get();
user.isLoggedIn = ModelsInit.session.isLoggedIn2() ? 'T' : 'F';
user.isRecognized = ModelsInit.session.isRecognized() ? 'T' : 'F';
return {
touchpoints: ModelsInit.session.getSiteSettings(['touchpoints']).touchpoints,
user: user,
cart: LiveOrder.get(),
address: Address.list(),
creditcard: CreditCard.list()
};
} catch(e) {
console.log('error at register function',e);
}
}
});
});//Template
{{#unless showFormFieldsOnly}}
<form class="login-register-register-form" method="POST" novalidate>
<br>
</br>
{{/unless}}
<div id='firstsection'>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control" id="register-firstname-div">
<input {{#if hasAutoFocus}} autofocus {{/if}} type="text" name="firstname" id="register-firstname"
placeholder="First Name" class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control" id="register-lastname-div">
<input type="text" name="lastname" id="register-lastname" placeholder="Last Name"
class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group ">
<div class="login-register-register-form-controls" data-validation="control" id="custentity_cust_gdc-div">
<input type="number" name="custentity_cust_gdc" id="custentity_cust_gdc" placeholder="GDC Number"
class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control" id="custentity40-div">
<input type="text" name="custentity40" id="custentity40" placeholder="Practice Name"
class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control" id="custentity41-div">
<input type="text" name="custentity41" id="custentity41" placeholder="Your Role"
class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control" id="custentity43-div">
<input type="text" name="custentity43" id="custentity43"
placeholder="Practice Manager/Receptionist Name" class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-next">
<div class='next-wrap-div'>
<span type="submit" class="login-register-register-next-button">
{{translate ' Next '}}
</span>
</div>
</div>
</div>
<div id='secondsection'>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control">
<input type="text" name="custentity44" id="custentity44" placeholder="Practice Address Line 1"
class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control">
<input type="text" name="custentity45" id="custentity45" placeholder="Practice Address Line 2"
class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control">
<input type="text" name="custentity46" id="custentity46" placeholder="Town/City"
class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control">
<input type="text" name="custentity_leadcountry" id="custentity_leadcountry" placeholder="Country"
class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control">
<input type="number" name="custentity_postcode" id="register-custentity_postcode"
placeholder="Postal Code" class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control">
<input type="number" name="custentityphonenumber" id="custentityphonenumber" placeholder="Phone Number"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls selectField" data-validation="control">
<select name="custentity42" id=" register-custentity42" placeholder="Next Step"
class="login-register-register-form-input">
<option value="Call me now - I am ready to order!"> Call me now - I am ready to order!</option>
<option value="call me now to arrange an hour free Enlighten Online Training with CPD"> call me now
to arrange an hour free Enlighten Online Training with CPD</option>
<option value="No need to call me - send me more information about your whitening system">No need to
call me - send me more information about your whitening system</option>
</select>
</div>
</div>
{{#if showCompanyField}}
<div class="login-register-register-form-controls-group" data-validation="control-group">
<label class="login-register-register-form-label" for="register-company">
{{#if isCompanyFieldRequire}}
{{translate 'Company <small class="login-register-register-form-required">*</small>'}}
{{else}}
{{translate 'Company'}} <small class="login-register-register-form-optional">{{translate
'(optional)'}}</small>
{{/if}}
</label>
<div class="login-register-register-form-controls" data-validation="control">
<input type="text" name="company" id="register-company" class="login-register-register-form-input" />
</div>
</div>
{{/if}}
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control">
<input type="email" name="email" id="register-email" placeholder="Email Address"
class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control">
<input type="password" name="password" id="register-password" placeholder="Password"
class="login-register-register-form-input">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control">
<input type="password" name="password2" id="register-password2" placeholder="Re-Enter Password"
class="login-register-register-form-input">
</div>
</div>
{{#if isRedirect}}
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control">
<input value="true" type="hidden" name="redirect">
</div>
</div>
{{/if}}
<div data-view="Register.CustomFields"></div>
<div class="login-register-register-form-controls-group">
<label class="login-register-register-form-label">
<input type="checkbox" name="emailsubscribe" id="register-emailsubscribe" value="T" {{#if
isEmailSubscribeChecked}} checked {{/if}}>
{{translate 'Sign me up for Enlighten Smiles exclusive offers and promotions'}}
</label>
</div>
<div class="login-register-register-form-messages" data-type="alert-placeholder"></div>
{{#unless showFormFieldsOnly}}
<div class="login-register-register-form-controls-group">
<span class="login-register-register-Back-button">
{{translate ' Back '}}
</span>
<button type="submit" class="login-register-register-form-submit">
{{translate ' Register Now '}}
</button>
</div>
</div>
</form>
{{/unless}}
<div data-cms-area="cms_login_register_register_area" data-cms-area-filters="path"></div>
<script>
$(document).ready(function () { // use jQuery lib
var $select = $("select"),
$speed = "fast";
$select.each(function () {
// Allow default browser styling
if ($(this).hasClass("default")) {
return;
}
$(this).css("display", "none");
// Generate fancy select box
$(this).after('<ul class="fancy-select" style="display: none;"></ul>');
var $current = $(this),
$fancy = $current.next(".fancy-select");
// Get options
var $options = $(this).find("option");
$options.each(function (index) {
var $val = $(this).val(),
$text = $(this).text(),
$disabled = "";
// Add class for disabled options
if ($(this).attr("disabled")) $disabled = " disabled";
if (index == 0) {
// Create clickable object from first option
$fancy.before('<span class="selected" data-val="' + $val + '">' + $text + "</span>");
}
// Load all options into fake dropdown
$fancy.append('<li class="fancy-option' + $disabled + '" data-val="' + $val + '">' + $text + "</li>");
// Update fake select box if this option is selected
if ($(this).attr("selected")) {
$(this).parent("select").val($val);
$(this).parent("select").next(".selected").attr("data-val", $val).text($text);
}
});
});
// Show/hide options on click
$(".selected").click(function (target) {
var $box = $(this).next(".fancy-select"),
$target = target,
$object = $(this);
// Prevent multiple open select boxes
if ($box.is(":visible")) {
$box.slideUp($speed);
return;
} else {
$(".fancy-select").slideUp();
$box.slideDown($speed);
}
// Click outside select box closes it
$target.stopPropagation();
if ($box.css("display") !== "none") {
$(document).click(function () {
$box.slideUp($speed);
});
}
});
// Make selection
$(".fancy-option").click(function () {
var $val = $(this).attr("data-val"),
$text = $(this).text(),
$box = $(this).parent(".fancy-select"),
$selected = $box.prev(".selected"),
$disabled = $(this).hasClass("disabled");
// Basic disabled option functionality
if ($disabled) {
return;
}
$box.slideUp($speed);
// Update select object's value
// and the fake box's "value"
$selected.prev("select").val($val);
$selected.attr("data-val", $val).text($text);
// Get Output
var $what = $("#what").val(),
$when = $("#when").val();
console.log($what);
});
});
</script>
{{!----
Use the following context variables when customizing this template:
showCompanyField (Boolean)
isCompanyFieldRequire (Boolean)
siteName (String)
showFormFieldsOnly (Boolean)
isRedirect (Boolean)
hasAutoFocus (Boolean)
----}}//sass file
.login-register-register-form-description {
margin-top: $sc-margin-lv4;
margin-bottom: $sc-margin-lv4;
}
.login-register-register-form-controls-group {
margin-top: $sc-margin-lv4;
}
.login-register-register-form-required {
@extend .input-required;
}
.login-register-register-form-input {
@extend .input-large;
}
.login-register-register-form-submit {
@extend .button-large;
@extend .button-primary;
}
.login-register-register-form-messages {
margin-top: $sc-margin-lv4;
.global-views-message-error {
@extend .message-error;
margin-bottom: 0;
}
.global-views-message-button {
display: none;
}
}
.login-register-login-form-controls input,
.login-register-login-form-controls input:active,
.login-register-login-form-controls input:focus-visible,
.login-register-login-form-controls input:focus {
border: 1px solid #cccccc;
outline: none;
}
[data-validation-error] .login-register-login-form-controls input {
border-color: #eb5757;
}
.login-register-login-form-controls input {
font-weight: 400;
font-size: 16px;
font-family: $sc-font-family1;
color: #000;
border-radius: 3px;
padding-left: 20px;
}
.login-register-login-form-controls input::placeholder {
color: #858585;
text-transform: capitalize;
}
@media (min-width: 1200px) {
.login-register-login-form-controls input {
min-width: 550px;
}
.action-forgot-remember,
.login-action-en {
width: auto;
max-width: 450px;
}
button.login-register-login-submit {
padding-left: 20px;
padding-right: 23%;
}
}
.login-register-login-form-controls p {
font-family: $sc-font-family1;
font-weight: 400;
background-color: transparent;
border-color: transparent;
color: #eb5757;
font-size: 16px;
padding-left: 20px;
}
.forgot-remember-div {
width: 50%;
}
.action-forgot-remember,
.remember-checkbox {
display: flex;
flex-wrap: wrap;
}
a.login-register-login-forgot {
float: right;
margin-top: 0px;
}
.forgot-remember-div a,
.forgot-remember-div label {
font-family: "Roobert";
font-weight: 400;
color: #000000;
font-size: 14px;
text-transform: capitalize;
}
button.login-register-login-submit {
margin-left: auto;
display: block;
background-color: #000;
border-color: #000;
}
button.login-register-login-submit:hover,
.login-register-login-submit:disabled,
.login-register-login-submit:disabled:hover,
.login-register-login-submit:disabled:focus {
background-color: #000;
border-color: #000;
}
.login-action-en {
margin-top: 50px;
}
@media (min-width: 768px) and (max-width: 1199px) {
.action-forgot-remember,
.login-action-en {
width: auto;
max-width: 300px;
}
.checkout-layout-content {
width: 100%;
}
.login-register-wrapper-login {
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
margin: auto;
width: fit-content;
}
}
@media (max-width: 767px) {
.action-forgot-remember,
.login-action-en {
width: auto;
max-width: 100%;
}
}
input[type="checkbox"]:checked {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
border: 1px solid #000;
box-shadow: none;
font-size: 0.8em;
text-align: center;
line-height: 1em;
background: #000;
}
input[type="checkbox"] {
width: 14px !important;
height: 14px !important;
margin: 5px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
border: 1px solid #000;
box-shadow: none;
font-size: 0.8em;
text-align: center;
line-height: 1em;
}
input[type="checkbox"]:checked:after {
content: "✔";
color: white;
}
.login-register-login-description {
margin-top: 5px;
}
.show-hide-button {
height: 0;
}
.login-register-login-form-controls p:before {
content: url("https://www.enlightenprofessional.tk/SSP Applications/Enlighten Custom/Development/img/info icon.png");
margin-right: 5px;
}