Jira Code:VG-35
Display the address list of the customers in the checkout page as drop-down options.
Template
order_wizard_address_module.tpl
<div class="order-wizard-address-module">
<div class="order-wizard-address-module-show-addresses-container">
{{#if showTitle}}
<h3 class="order-wizard-address-module-title">
{{title}}
</h3>
{{/if}}
<!-- {{#if isbilling}}
<div class="section-billing-address">BILLING ADDRESS</div>
{{/if}}
{{#if isshipping}}
<div class="section-shipping-address">SHIPPING ADDRESS</div>
{{/if}} -->
{{#if isSameAsEnabled}}
<label class="order-wizard-address-module-checkbox">
<input
{{#if isSameAsCheckBoxDisable}}disabled="disabled"{{/if}}
class="same-as-billing"
type="checkbox"
name="same-as-address"
data-action="same-as"
value="1"
{{#if isSameAsSelected}}checked{{/if}}
>
<!-- {{#if isSameAsSelected}}checked{{/if}} -->
<div class="order-wizard-address-module-checkbox-label">{{sameAsMessage}}</div>
</label>
{{/if}}
{{#if showSingleAddressDetails}}
<div data-view="Single.Address.Details" class="order-wizard-address-module-single"></div>
{{else}}
{{#if showAddressList}}
<div id="order-wizard-address-module-placeholder" {{#if showManageValue}}data-manage="{{manageValue}}"{{/if}} class="order-wizard-address-module-list-placeholder">
<!-- <p>
<a class="order-wizard-address-module-new-button" href="/addressbook/new" data-toggle="show-in-modal">
{{translate 'Add New Address'}}
</a>
</p> -->
<!-- <div class="order-wizard-address-module-address-container">
<div data-view="Address.List"></div>
</div> -->
</div>
{{else}}
<div id="address-module-form-placeholder" {{#if showManageValue}}data-manage="{{manageValue}}"{{/if}} class="order-wizard-address-module-form-placeholder">
<div data-view="New.Address.Form"></div>
{{#if showSaveButton}}
<div class="order-wizard-address-module-form-actions">
<button type="submit" class="order-wizard-address-module-save-button" data-action="submit">
{{translate 'Save Address'}}
</button>
</div>
{{/if}}
</div>
{{/if}}
{{/if}}
<!--jj starts............................ -->
{{#if defaultbilladdress}}
<div id=defaultbilladdress style="display: none;">
{{defaultbilladdress}}
</div>
{{/if}}
{{#if defaultshipaddress}}
<div id=defaultshipaddress style="display: none;">
{{defaultshipaddress}}
</div>
{{/if}}
{{#if isshipping}}
<button class="accordion-section-shipping-address" onclick="myFunction2()">
<span class="serial-shipping-address">2</span>
<div class="section-shipping-address">SHIPPING ADDRESS</div>
<!-- <span class="fa fa-minus shipping-address-check-plus" id="accor-plus-shipping-address"></span> -->
<span class="minu-accc-section-shipping-address" id="minu-accc-section-shipping-address"><img class="ship-accordion" src="/SSP Applications/NetSuite Inc. - SCA Aconcagua/Development/img/minus.png"></span>
</button>
<div class="info-section-shipping-address" id="info-section-shipping-address">
<div class="text-shipping-address">{{translate 'Select a shipping address from your address book or enter a new address.'}}
</div>
<div>
<select id=shipping >
{{#each addr}}
<option data-id="{{internalid}}" >{{fullname}}, {{company}}, {{addr1}}, {{city}}, {{state}}, {{zip}}, {{country}}</option>
{{/each}}
</select>
</div>
<div class="address-list-button-container">
<a href="/addressbook/new" class="address-list-button-info-cards-new" data-toggle="show-in-modal"><span class="section-address-list-button-container"></span> <span>Add New Address</span></a>
</div>
</div>
{{/if}}
{{#if isbilling}}
<button class="accordion-section-billing-address" onclick="myFunction1()">
<span class="serial-billing-address">1</span>
<div class="section-billing-address">BILLING ADDRESS</div>
<!-- <span class="fa fa-minus billing-address-check-plus" id="accor-plus-billing-address"></span>
</button> -->
<span class="minu-accc-section-billing-address" id="minu-accc-section-billing-address"><img class="bill-accordion" src="/SSP Applications/NetSuite Inc. - SCA Aconcagua/Development/img/minus.png"></span>
</button>
<div class="info-section-billing-address" id="info-section-billing-address">
<div class="text-billing-address">{{translate 'Select a billing address from your address book or enter a new address.'}}
</div>
<div>
<select id=billing>
{{#each addr}}
<option class="billing_dropdown_label" data-id="{{internalid}}">{{fullname}}, {{company}}, {{addr1}}, {{city}}, {{state}}, {{zip}}, {{country}}</option>
{{/each}}
</select>
</div>
<div class="address-list-button-container">
<a href="/addressbook/new" class="address-list-button-info-cards-new" data-toggle="show-in-modal"><span class="section-address-list-button-container"></span> Add New Address</a>
</div>
</div>
{{/if}}
<!--jj ends............................ -->
</div>
</div>
<!-- <script>
$("#billing").on('change', function () {
var ide = $(this).find('option:selected').attr('data-id');
alert($(this).find('option:selected').attr('data-id'));
$('.address-details-change-address').click();
$('.address-details-select-address[data-id='+ide+']').click();
});
$("#abcd").on('change', function () {
var ide = $(this).find('option:selected').attr('data-id');
alert($(this).find('option:selected').attr('data-id'));
$('.address-details-change-address').click();
$('.address-details-select-address[data-id='+ide+']').click();
});
</script>
-->
<script>
if($('#defaultbilladdress').length>0)
{
var defaultbillingaddress= document.getElementById("defaultbilladdress").innerHTML;
//$('#billing option[data-id=b]').attr("selected",true);
$('#billing option[data-id='+defaultbillingaddress+']').attr("selected",true);
}
if($('#defaultshipaddress').length>0)
{
var defaultshippingaddress=document.getElementById("defaultshipaddress").innerHTML;
$('#shipping option[data-id='+defaultshippingaddress+']').attr("selected",true);
}
$('#shipping').on('change', function() {
if ($('input.same-as-billing').is(':checked')) {
$(".same-as-billing"). prop("checked", false);
}
});
/*function myFunction1() {
var x = document.getElementById("info-section-billing-address");
if (x.style.display === "none") {
x.style.display = "block";
$("#minu-accc-section-billing-address").text("-");
$(".order-wizard-address-module-checkbox").show();
} else {
x.style.display = "none";
$("#minu-accc-section-billing-address").text("+");
$(".order-wizard-address-module-checkbox").hide();
}
}
function myFunction2() {
var x = document.getElementById("info-section-shipping-address");
if (x.style.display === "none") {
x.style.display = "block";
$("#minu-accc-section-shipping-address").text("-");
} else {
x.style.display = "none";
$("#minu-accc-section-shipping-address").text("+");
}
}*/
function myFunction1() {
var x = document.getElementById("info-section-billing-address");
$(".bill-accordion").hide();
if (x.style.display === "none") {
x.style.display = "block";
$("#minu-accc-section-billing-address").removeClass("plus").addClass("minus");
$(".order-wizard-address-module-checkbox").show();
} else {
x.style.display = "none";
$("#minu-accc-section-billing-address").removeClass("minus").addClass("plus");
$(".order-wizard-address-module-checkbox").hide();
}
}
function myFunction2() {
var x = document.getElementById("info-section-shipping-address");
$(".ship-accordion").hide();
if (x.style.display === "none") {
x.style.display = "block";
$("#minu-accc-section-shipping-address").removeClass("plus").addClass("minus");
} else {
x.style.display = "none";
$("#minu-accc-section-shipping-address").removeClass("minus").addClass("plus");
}
}
var maxLength =90;
$('#billing > option').text(function(i, text) {
if(screen.width > 1204){
if (text.length > maxLength) {
return text.substr(0,100) + '...';
}
}
else if(screen.width <= 1204 && screen.width >768){
if (text.length > maxLength) {
return text.substr(0,75) + '...';
}
}
else if(screen.width <= 768 && screen.width >411){
if (text.length > maxLength) {
return text.substr(0,60) + '...';
}
}
else if(screen.width <= 411 && screen.width >360){
if (text.length > maxLength) {
return text.substr(0,35) + '...';
}
}
else if(screen.width <= 360 && screen.width >300){
if (text.length > maxLength) {
return text.substr(0,32) + '...';
}
}
});
$('#shipping > option').text(function(i, text) {
if(screen.width > 1204){
if (text.length > maxLength) {
return text.substr(0,100) + '...';
}
}
else if(screen.width <= 1204 && screen.width >768){
if (text.length > maxLength) {
return text.substr(0,75) + '...';
}
}
else if(screen.width <= 768 && screen.width >411){
if (text.length > maxLength) {
return text.substr(0,60) + '...';
}
}
else if(screen.width <= 411 && screen.width >360){
if (text.length > maxLength) {
return text.substr(0,35) + '...';
}
}
else if(screen.width <= 360 && screen.width >300){
if (text.length > maxLength) {
return text.substr(0,32) + '...';
}
}
});
</script>Javascript
OrderWizard.Module.Address.js
Add the following events to this js file:
, 'change #billing': 'selectCustAddress'
, 'change #shipping': 'selectCustAddress'
Add the following methods to this js file:
, selectCustAddress: function (e)
{
console.log("SELECT ADDRESS");
jQuery('.wizard-content .alert-error').hide();
console.log("-----",jQuery(e.target).find('option:selected').attr('data-id'));
var custaddress =jQuery(e.target).find('option:selected').attr('data-id').toString();
this.setAddress(custaddress);
var is_checked = jQuery('.same-as-billing').prop('checked');
if(is_checked){
//jQuery('#setsameship').val(custaddress);
jQuery('#shipping option[data-id='+custaddress+']').prop("selected",true);
}
}
Add the changes to the get context method:
, getContext: function ()
{
var addr = this.addresses.models;
var elclassname = this.el.className;
if(elclassname === 'OrderWizard.Module.Address.Shipping module-rendered')
{
var isshipping = true;
}
else{
var isshipping = false;
}
if(elclassname === 'OrderWizard.Module.Address.Billing module-rendered')
{
var isbilling = true;
}
else{
var isbilling = false;
}
var ifbilladdr =this.address.attributes.defaultbilling;
var ifshipaddr =this.address.attributes.defaultshipping;
if(ifbilladdr === 'T')
{
var defaultbilladdress = this.address.id;
}
if(ifshipaddr === 'T')
{
var defaultshipaddress = this.address.id;
}
//@class OrderWizard.Module.Address.Context
return {
//@property {Boolean} showTitle
showTitle: !!(!this.options.hide_title && this.getTitle())
//@property {String} title
, title: this.getTitle()
//@property {Boolean} isSameAsEnabled
, isSameAsEnabled: !!this.isSameAsEnabled
//@property {Boolean} isSameAsCheckBoxDisable
, isSameAsCheckBoxDisable: !!this.disableSameAsCheckBox
//@property {Boolean} isSameAsSelected
, isSameAsSelected: !!this.sameAs
//@property {String} sameAsMessage
, sameAsMessage: this.sameAsMessage
//@property {Boolean} showSingleAddressDetails
, showSingleAddressDetails: !!((this.isSameAsEnabled && this.sameAs) || this.addressId && !this.address.isNew()) || !!(this.getAddressesToShow().length && this.isGuest)
//@property {Boolean} showAddressList
, showAddressList: !!(this.getAddressesToShow().length && !this.isGuest)
//@property {String} changeLinkText
, changeLinkText: this.getChangeLinkText()
//@property {String} selectedAddressId
, selectedAddressId: (this.address && this.address.get('internalid')) || ''
//@property {Boolean} showManageValue
, showManageValue: !!this.manage
//@property {Boolean} manageValue
, manageValue: this.manage
//@property {Boolean} showSaveButton
, showSaveButton: this.showSaveButton
// JJ--return the array of addresses//
, addr: addr
, isshipping: isshipping
, isbilling: isbilling
, defaultbilladdress:defaultbilladdress
, defaultshipaddress:defaultshipaddress
};
}