- create five configuration for footer content
- but we have default configuration for that configuration we have to create sub configuration for changing content for footer.
- Code for that{
“type”: “object”,
“subtab”: {
“id”: “myfooter”,
“group”: “extensions”,
“title”: “myfooter”
},
“properties”: {
“myfooter1.config”: {
“group”: “extensions”,
“subtab”: “myfooter1”,
“type”: “string”,
“title”: “myfooter_titel1”,
“description”: “Config description example”,
“default”: “<div>hi</div>”
},
“myfooter2.config”: {
“group”: “extensions”,
“subtab”: “myfooter2”,
“type”: “string”,
“title”: “myfooter_titel2”,
“description”: “Config description example”,
“default”: “<div>hi</div>”
},
“myfooter3.config”: {
“group”: “extensions”,
“subtab”: “myfooter3”,
“type”: “string”,
“title”: “myfooter_titel3”,
“description”: “Config description example”,
“default”: “<div>hi</div>”
},
“myfooter4.config”: {
“group”: “extensions”,
“subtab”: “myfooter4”,
“type”: “string”,
“title”: “myfooter_titel4”,
“description”: “Config description example”,
“default”: “<div>hi</div>”
},
“myfooter5.config”: {
“group”: “extensions”,
“subtab”: “myfooter5”,
“type”: “string”,
“title”: “myfooter_titel5”,
“description”: “Config description example”,
“default”: “<div>hi</div>”
}
}
}
Working on extension
find the paths of five configuration and store the value of that in one one variable .
Return the variable in template,here we declare the variable in {{{}}} then only configuration having html content should be display on footer other wise it not display the content.
For responsive i use the bootstrap grid class in template, in system view it display straight in movile view one in single and next two in side by side .thats way i used the col-xs,col-lg. I removed the existed code in template .
<div data-view=”Global.BackToTop”></div>
<div class=”row”>
<div class=”col-xs-12 col-lg-4″>
<div>{{{my}}}</div>
</div>
<div class=”col-xs-6 col-lg-2″>
{{{my1}}}
</div>
<div class=”col-xs-6 col-lg-2″>
{{{my2}}}
</div>
<div class=”col-xs-6 col-lg-2″>
{{{my3}}}
</div>
<div class=”col-xs-6 col-lg-2″>
{{{my4}}}
</div> </div>
Exetension code
define(
‘jj.footer.myfooter’
, [
‘jj.footer.myfooter.View’,’Footer.View’
]
, function (
myfooterView,footer
)
{
‘use strict’;
return {
mountToApp: function mountToApp (container)
{
// using the ‘Layout’ component we add a new child view inside the ‘Header’ existing view
// (there will be a DOM element with the HTML attribute data-view=”Header.Logo”)
// more documentation of the Extensibility API in
// https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/index.html
/** @type {LayoutComponent} */
var layout = container.getComponent(‘Layout’);
_.extend(footer.prototype, {
getContext: _.wrap(footer.prototype.getContext, function(fn) {
try{
var original = fn.apply(this,_.toArray(arguments).slice(1));
console.log(‘this’,this);
var my=SC.CONFIGURATION.myfooter1.config;
original.my=my;
var my1=SC.CONFIGURATION.myfooter2.config;
original.my1=my1;
var my2=SC.CONFIGURATION.myfooter3.config;
original.my2=my2;
var my3=SC.CONFIGURATION.myfooter4.config;
original.my3=my3;
var my4=SC.CONFIGURATION.myfooter5.config;
original.my4=my4;
// console.log(‘foot’,my);
}catch(e){
console.log(“err@barcode2View”,e);
}
return original
})
})
// if(layout)
// {
// layout.addChildView(‘Header.Logo’, function() {
// return new myfooterView({ container: container });
// });
// }
}
};
});
If we change the html content in configuration automatically footer content was changing.