for creating responsive popup we need to extend the model and add the inmodel show view to the coresponding js file
view file:
// @module JJ.orderoffer.orderoffer
define('JJ.orderoffer.orderoffer.View'
, [
'jj_orderoffer_orderoffer.tpl',"JJ.orderoffer.orderoffer.Model"
, 'Backbone'
]
, function (
jj_orderoffer_orderoffer_tpl,orderoffer_orderoffer_Model
, Backbone
)
{
'use strict';
// @class JJ.orderoffer.orderoffer.View @extends Backbone.View
return Backbone.View.extend({
template: jj_orderoffer_orderoffer_tpl
, initialize: function (options) {
this.ordermodel = new orderoffer_orderoffer_Model();
}
, events: {
'click [data-action="ooga-booga"]': 'sangiiscapitalsade'
},
sangiiscapitalsade :function sangiiscapitalsade() {
let inputEmail = $('#in-modal-couponEmail').val();
let data = {email : inputEmail}
console.log('data',data);
this.ordermodel.save({data: (data)}).done(function (result) {
console.log('RES', result);
})
.catch(error=>{
console.log(error);
})
}
, bindings: {
}
, childViews: {
}
//@method getContext @return JJ.orderoffer.orderoffer.View.Context
, getContext: function getContext()
{
//@class JJ.orderoffer.orderoffer.View.Context
this.message = this.message || 'Hello World!!'
return {
message: this.message
};
}
});
});
FS file
_.extend(FacetsBrowseView.prototype, {
initialize:_.wrap(FacetsBrowseView.prototype.initialize,function(fn){
fn.apply(this,_.toArray(arguments).slice(1));
console.log('thisss',this);
this.on('afterViewRender', this.showPopupModel, this);
}),
showPopupModel:function () {
//var showPopupPLP = cookie.get("showPopupPLP");
// if (showPopupPLP !== true && showPopupPLP !== "true") {
console.log('thisssshow',this);
let view = new PromotionpopupView();
view.useLayoutError = true;
container.getLayout().showInModal(view);
// cookie.set("showPopupPLP", true, { expires: null });
// }
},
suite script js file
// JJ.orderoffer.orderoffer.js
// Load all your starter dependencies in backend for your extension here
// ----------------
define('JJ.orderoffer.orderoffer'
, [
'JJ.orderoffer.orderoffer.ServiceController',"SC.Model"
]
, function (
orderofferServiceController,SCModel
)
{
'use strict';
return SCModel.extend({
name: 'JJ.orderoffer.orderoffer',
newcustomer: function (data) {
console.error('suitejs',data);
// return { success: true, message: 'Promocode is applied' }
try {
var firstOrderSearch = nlapiSearchRecord("customrecord_jj_first_order_offer", null,
[
["custrecord_jj_sub_email", "is", data.email],
"AND",
["custrecord_jj_first_order_offer", "is", "T"]
],
[
new nlobjSearchColumn("name").setSort(false),
new nlobjSearchColumn("scriptid")
]
);
if (firstOrderSearch && firstOrderSearch.length && firstOrderSearch !== null) {
return { success: false, message: 'Promocode is already applied for given email' }
} else {
var firstorderRecord = nlapiCreateRecord('customrecord_jj_first_order_offer', true);
firstorderRecord.setFieldValue('custrecord_jj_sub_email', data.email);
firstorderRecord.setFieldValue('custrecord_jj_first_order_offer', 'T');
firstorderRecord.setFieldValue('name', data.email.split('@')[0]);
var recordID = nlapiSubmitRecord(firstorderRecord);
return { success: true, message: 'Promocode is applied' }
}
} catch (error) {
console.error("Error @ " , error);
}
}
})
});
suite script service controller file
define("JJ.orderoffer.orderoffer.ServiceController",
["ServiceController",'JJ.orderoffer.orderoffer'],
function(
ServiceController ,FirstOrderOffer
) {
"use strict";
return ServiceController.extend({
name: "JJ.orderoffer.orderoffer.ServiceController",
// The values in this object are the validation needed for the current service.
options: {
common: {}
},
get: function get() {
},
post: function post() {
try {
console.error('this.data',this.data);
this.data = this.request.getBody() ? JSON.parse(this.request.getBody()).data : JSON.parse('{}');
console.error('this.dataafter',this.data);
var response = FirstOrderOffer.newcustomer(this.data);
console.error('responbhgg',response);
return response
}
catch (e) {
return JSON.stringify({
success: false, message: "Error"
})
}
},
put: function put() {
// not implemented
},
delete: function() {
// not implemented
}
});
});
TPL:
<div class="promocode-container"> <div class="promocode-container-2"> <h1 class="first-order">Get 20% Off<br>Your First Order</h1> <p class="email-code">Enter your email for your code.<br> plus the latest Bombas news.</p> <div class="email-container"> <div class="email-label"></div> <input id="couponEmail" type="email" placeholder="Email address" name="email" class="inputemail" value="" required> </div> <div class="offer-button"> <a href="" > <button type="submit" class="accept-offer" data-action="ooga-booga">Get My 20% Off</button></a> </div> </div> <button type="button" class="continue-shopping-button">Continue Shopping</button> </div>