Phone number field on Register page in SCA
for this we need to add field in tpl first then we need to get the date from the back and then we need to write function for that.
TPL file :first we need to create a field according the page design and validation.
<div class="login-register-register-form-controls-group" data-validation="control-group">
<div class="login-register-register-form-controls" data-validation="control">
<input type="tel" name="phone" id="register-phone" placeholder="Phone Number"
class="login-register-register-form-input">
</div>
</div>then we need to write the js file for that we need to extend LoginRegisterRegisterView view in that we need to add the bindings and then we need to extend the AccountRegisterModel this view for valiodation if we want then we can add other wise optional
_.extend(AccountRegisterModel.prototype, {
validation: {
firstname: {
required: true,
msg: Utils.translate('First Name is required')
},
lastname: {
required: true,
msg: Utils.translate('Last Name is required')
},
phone: [
{
required: true,
msg: Utils.translate('Phone Number is required'),
},
{
fn: Utils.validatePhone,
msg: Utils.translate('Please Enter a valid Phone Number'),
}
],
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')
},
password2: [
{
required: true,
msg: Utils.translate('Confirm password is required')
},
{
equalTo: 'password',
msg: Utils.translate('New Password and Confirm Password do not match')
}
]
}
});LoginRegisterRegisterView
bindings: {
'[name="firstname"]': 'firstname',
'[name="lastname"]': 'lastname',
'[name="phone"]': 'phone',
'[name="company"]': 'company',
'[name="email"]': 'email',
'[name="password"]': 'password',
'[name="password2"]': 'password2'
},then we need to get the date from the back end foe that we need extend the suite script file and alter the register function
iam adding the codding snipped is related to custom field and phone number here we have extend ‘Account.Model’, view in the suite script for the padding the two custom field that are present in the config record so u need to change according to ur requirement.
_.extend(AccountModel, {
register: function (user_data)
{
var customfields = {};
var customerSubdivision = Configuration.get('customerSubdivision.partnerId');
var siteId = Configuration.get('micrositeSolution.siteID');
for (var property in user_data) {
if (property.substring(0, 10) == 'custentity') {
customfields[property] = user_data[property];
}
}
try {
if (ModelsInit.customer.isGuest()) {
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,
phone: user_data.phone,
companyname: user_data.company,
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,
phone: user_data.phone,
companyname: user_data.company,
emailsubscribe: user_data.emailsubscribe && user_data.emailsubscribe !== 'F' ? 'T' : 'F',
customfields: {
'custentity_tag_partner': customerSubdivision,
'custentity_tag_microsite': siteId,
}
});
}
} else {
user_data.emailsubscribe =
user_data.emailsubscribe && user_data.emailsubscribe !== 'F' ? 'T' : 'F';
var result;
if (customerSubdivision) {
result = ModelsInit.session.registerCustomer({
firstname: user_data.firstname,
lastname: user_data.lastname,
phone: user_data.phone,
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',
partner: customerSubdivision
});
}
else {
result = ModelsInit.session.registerCustomer({
firstname: user_data.firstname,
lastname: user_data.lastname,
phone: user_data.phone,
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',
})
}
//If the customerSubdivision value is defined, it will be added to the customer's profile as a custom field. the siteId value is also added to the customer's profile as a custom field. The function returns an object containing information about the session//
ModelsInit.customer.updateProfile({
internalid: result.customerid,
phone: result.phone,
customfields: {
'custentity_tag_partner': customerSubdivision,
'custentity_tag_microsite': siteId,
'phone': user_data.phone
}
});
if (Object.keys(customfields).length && result.customerid) {
ModelsInit.customer.updateProfile({
internalid: result.customerid,
phone: result.phone,
customfields: {
'custentity_tag_partner': customerSubdivision,
'custentity_tag_microsite': siteId,
'phone': user_data.phone
}
});
}
}
} catch (e) {
const error = Application.processError(e);
if (error.errorMessage === "An error occurred during registration. Please try again.") {
throw new Error('There is already an account with this email address. If you are sure that it is your email address, please go to the login section and use the Forgot Password option to retrieve your password.');
}
else {
throw new Error(error.errorMessage);
}
}
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()
};
},
//this code is used to check email and password is correct or not,If not it will redirect to reset page//
login: function login(email, password, redirect)
{
ModelsInit.session.login({
email: email
, password: password
});
var user = Profile.get();
user.isLoggedIn = ModelsInit.session.isLoggedIn2() ? 'T' : 'F';
user.isRecognized = ModelsInit.session.isRecognized() ? 'T' : 'F';
var ret = {
touchpoints: ModelsInit.session.getSiteSettings(['touchpoints']).touchpoints
, user: user
};
var customerSubdivision = Configuration.get('customerSubdivision.partnerId');
if (customerSubdivision != user.subdivision) {
ModelsInit.session.logout();
return ret;
}
if (!redirect) {
var Environment = Application.getEnvironment(request)
, language = Environment && Environment.currentLanguage || {};
language.url = language.locale && ModelsInit.session.getAbsoluteUrl('checkout', '/languages/' + language.locale + '.js') || '';
_.extend(ret, {
cart: LiveOrder.get()
, address: Address.list()
, creditcard: CreditCard.list()
, language: language
, currency: Environment && Environment.currentCurrency || ''
});
}
return ret;
},
})