THR-109
Displaying the ENQUIRE WITH US button in the category page of selected commerce categories based on the value of the custom commerce category record named “ENQUIRE ENABLED” checkbox. If this checkbox is checked, then we will display a section with the button “ENQUIRE WITH US” that will navigate to the get in touch page of corresponding website. In this case, subcategories and items in that commerce category will not be displayed on the category page. The category with enquire button should not have the possibility to navigate to the Product List page and Product detail page. If this checkbox is not checked, then the category page will be displayed as by default.
An extension is developed to perform this functionality and the value custom commerce category is obtained using search in suite script. The code is below
Entry point file : JJ.THREnquiry.THREnquiry.js
define(
'JJ.THREnquiry.THREnquiry', [
'JJ.THREnquiry.THREnquiry.View', 'JJ.THREnquiry.THREnquiry.Model', 'Facets.Browse.View', 'underscore'
],
function (
THREnquiryView, Model, FacetsBrowseView, _
) {
'use strict';
return {
mountToApp: function mountToApp(container) {
var plp = container.getComponent('PLP');
var title, ISENQUIRY, isenquiry;
if (plp) {
plp.addChildView('Facet.Enquiry', function () {
return new THREnquiryView({
container: container
});
});
}
_.extend(FacetsBrowseView.prototype, {
initialize:_.wrap(FacetsBrowseView.prototype.initialize,
function wrappedInitialize(fn, options) {
var intial = fn.apply(this, _.toArray(arguments).slice(1));
var self = this;
//console.log("this", this);
var url = window.location.href
var title = url.substring(url.lastIndexOf('/') + 1);
title = title.split('?')[0];
//console.log('term', title);
if (title === "search") {
ISENQUIRY = false;
options.isenquiry = ISENQUIRY;
} else {
var model = new Model();
var promise = jQuery.Deferred();
model.fetch({
data: {
title: title
}
}).done(function () {
//console.log('modelnew', model);
promise.resolve();
if (model.attributes.condition == "T") {
ISENQUIRY = true;
} else {
ISENQUIRY = false;
}
options.isenquiry = ISENQUIRY;
self.render(options);
});
}
})
});
_.extend(FacetsBrowseView.prototype, {
getContext: _.wrap(FacetsBrowseView.prototype.getContext, function (fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
context.isenquiry = this.options.isenquiry;
//console.log("context.isenquiry", context.isenquiry);
return context;
})
});
}
};
});Suite Script files
JJ.THREnquiry.THREnquiry.ServiceController
define("JJ.THREnquiry.THREnquiry.ServiceController", ["ServiceController", "JJ.THREnquiry.THREnquiry"], function(
ServiceController, THREnquiry
) {
"use strict";
return ServiceController.extend({
name: "JJ.THREnquiry.THREnquiry.ServiceController",
// The values in this object are the validation needed for the current service.
options: {
common: {}
},
get: function get() {
console.log("suitescript sruthy");
var name = request.getParameter('title');
console.log("name", name);
var valuestored = THREnquiry.Search(name);
console.log("DEBUG1", JSON.parse(valuestored));
console.log("DEBUG3", valuestored);
return valuestored;
},
post: function post() {
// not implemented
},
put: function put() {
// not implemented
},
delete: function() {
// not implemented
}
});
});
JJ.THREnquiry.THREnquiry
// JJ.THREnquiry.THREnquiry.js
// Load all your starter dependencies in backend for your extension here
// ----------------
define('JJ.THREnquiry.THREnquiry'
, [
'JJ.THREnquiry.THREnquiry.ServiceController', 'SC.Model', 'underscore'
]
, function (
THREnquiryServiceController, SCModel, _
)
{
'use strict';
return SCModel.extend({
name: 'JJ.THREnquiry.THREnquiry',
Search: function (name) {
console.log("inside suitescript function");
try {
var SearchList = []
var category = name;
console.log("category", category);
var enquirysearch = nlapiSearchRecord("commercecategory", null,
[
["urlfragment","is", category],
],
[
new nlobjSearchColumn("custrecord2")
]
);
for (var j = 0; j < enquirysearch.length; j++) {
SearchList[j]={
condition:enquirysearch[j].getValue('custrecord2')
}
}
var result = SearchList[0];
var results = JSON.stringify(result)
console.log("DEBUG3", JSON.stringify(result));
return results;
} catch (e) {
// statements
console.error('update-error', e);
return {
status: 500,
code: 'ERR_FORM',
message: 'There was an error, please try again later'
}
}
}
});
});Template file
<section class="threnquiry-info-card">
<center>
<div class="enquiry-label-modal">
<br>
<a href="/get-in-touch " class="enquiry-label-modal-button">
ENQUIRE WITH US</a>
</div>
</center>
</section>
Sass file
.threnquiry-info-card {
@extend .info-card;
border: none;
background-color: #11C6b6;
height: 100px;
}
.enquiry-label-modal-button {
width: 100%;
font-weight: 600;
margin-top: 15px;
border: 1px solid #11c6b6;
text-align: center;
padding-top: 15px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 15px;
background-color: white;
}facets-facet-browse.tpl
<section class="facets-facet-browse">
<div data-cms-area="item_list_banner" data-cms-area-filters="page_type"></div>
{{#if showResults}}
<div class="facets-facet-browse-content">
<div class="facets-facet-browse-facets" data-action="pushable" data-id="product-search-facets">
<div data-cms-area="facet_navigation_top" data-cms-area-filters="page_type"></div>
{{#if isCategory}}
<div data-view="Facets.CategorySidebar" class="facets-facet-browse-facets-sidebar"></div>
{{/if}}
<div data-view="Facets.FacetedNavigation" data-exclude-facets="commercecategoryname,category"></div>
<div data-cms-area="facet_navigation_bottom" data-cms-area-filters="page_type"></div>
</div>
<!--
Sample of how to add a particular facet into the HTML. It is important to specify the data-facet-id="<facet id>"
properly <div data-view="Facets.FacetedNavigation.Item" data-facet-id="custitem1"></div>
-->
<div class="facets-facet-browse-results">
{{#if isCategory}}
<div class="facets-facet-browse-category">
<div data-view="Facets.Browse.CategoryHeading"> </div>
{{#if isenquiry}}
<div data-view="Facet.Enquiry"></div>
{{else}}
<div data-view="Facets.CategoryCells"></div>
{{/if}}
</div>
{{/if}}
<header class="facets-facet-browse-header">
{{#if showItems}}
<h1 class="facets-facet-browse-title" data-quantity="{{total}}">
{{#if keywords}}
{{#if isTotalProductsOne}}
{{translate '1 Result for <span class="facets-facet-browse-title-alt">$(0)</span>' keywords}}
{{else}}
{{translate '$(0) Results for <span class="facets-facet-browse-title-alt">$(1)</span>' total keywords}}
{{/if}}
{{else}}
{{#if isTotalProductsOne}}
{{translate '1 Product'}}
{{else}}
{{translate '$(0) Products' total}}
{{/if}}
{{/if}}
</h1>
<nav class="facets-facet-browse-list-header">
<div class="facets-facet-browse-list-header-actions" data-view="Facets.ItemListDisplaySelector"></div>
<div class="facets-facet-browse-list-header-expander">
<button class="facets-facet-browse-list-header-expander-button collapsed" data-toggle="collapse" data-target="#list-header-filters" aria-expanded="true" aria-controls="list-header-filters">
{{translate 'Sort & Filter'}}
<i class="facets-facet-browse-list-header-expander-icon"></i>
</button>
</div>
<div class="facets-facet-browse-list-header-filters collapse" id="list-header-filters">
<div class="facets-facet-browse-list-header-filters-wrapper">
<div class="facets-facet-browse-list-header-filters-row">
<div class="facets-facet-browse-list-header-filter-column" data-view="Facets.ItemListShowSelector">
</div>
<div class="facets-facet-browse-list-header-filter-column" data-view="Facets.ItemListSortSelector">
</div>
{{#if hasItemsAndFacets}}
<div class="facets-facet-browse-list-header-filter-column">
<button class="facets-facet-browse-list-header-filter-facets" data-type="sc-pusher" data-target="product-search-facets">
{{translate 'Narrow By'}}
<i class="facets-facet-browse-list-header-filter-facets-icon"></i>
</button>
</div>
{{/if}}
</div>
</div>
</div>
</nav>
{{/if}}
</header>
<meta itemprop="name" content="{{title}}"/>
<div data-cms-area="facets_facet_browse_cms_area_1" data-cms-area-filters="page_type"></div>
<div id="banner-section-top" class="content-banner banner-section-top" data-cms-area="item_list_banner_top" data-cms-area-filters="path"></div>
{{#if showItems}}
<div class="facets-facet-browse-narrowedby" data-view="Facets.FacetsDisplay"></div>
{{#if isEmptyList}}
<div data-view="Facets.Items.Empty"></div>
{{else}}
<div class="facets-facet-browse-items" data-view="Facets.Items"></div>
{{/if}}
{{/if}}
</div>
<div class="facets-facet-browse-pagination" data-view="GlobalViews.Pagination"></div>
</div>
<div class="facets-facet-browse-cms-area-2" data-cms-area="facets_facet_browse_cms_area_2" data-cms-area-filters="page_type"></div>
{{else}}
<div class="facets-facet-browse-empty-items" data-view="Facets.Items.Empty"></div>
{{/if}}
<div id="banner-section-bottom" class="content-banner banner-section-bottom facets-facet-browse-banner-section-bottom" data-cms-area="item_list_banner_bottom" data-cms-area-filters="page_type"></div>
</section>
{{!----
Use the following context variables when customizing this template:
total (Number)
isTotalProductsOne (Boolean)
title (String)
hasItemsAndFacets (Boolean)
collapseHeader (Boolean)
keywords (undefined)
showResults (Boolean)
isEmptyList (Boolean)
isCategory (Boolean)
showItems (Number)
----}}