Jira code : BTN-613
For cricket and Balaji site, added image change on the product list page, so when we hover on an image in PLP page, another image is shown.
Javascript:
/*
© 2017 NetSuite Inc.
User may not copy, modify, distribute, or re-bundle or otherwise make available this code;
provided, however, if you are an authorized user with a NetSuite account or log-in, you
may use this code subject to the terms that govern your access and use.
*/
// @module Facets
define(
'Facets.ItemCell.View'
, [
'ProductLine.Stock.View'
, 'Product.Model'
, 'GlobalViews.StarRating.View'
, 'Cart.QuickAddToCart.View'
, 'ProductViews.Option.View'
, 'ProductLine.StockDescription.View'
, 'SC.Configuration'
, 'Utils'
, 'Backbone'
, 'Backbone.CompositeView'
, 'Backbone.CollectionView'
, 'underscore'
]
, function (
ProductLineStockView
, ProductModel
, GlobalViewsStarRating
, CartQuickAddToCartView
, ProductViewsOptionView
, ProductLineStockDescriptionView
, Configuration
, Utils
, Backbone
, BackboneCompositeView
, BackboneCollectionView
, _
)
{
'use strict';
// @class Facets.ItemCell.View @extends Backbone.View
return Backbone.View.extend({
//@method initialize Override default method to convert this View into Composite
//@param {Facets.ItemCell.View.Initialize.Options} options
//@return {Void}
initialize: function ()
{
BackboneCompositeView.add(this);
}
, childViews: {
'ItemViews.Stock': function ()
{
return new ProductLineStockView({
model: this.model
});
}
, 'GlobalViews.StarRating': function()
{
return new GlobalViewsStarRating({
model: this.model
, showRatingCount: false
, queryOptions: Utils.parseUrlOptions(location.href)
});
}
, 'ItemDetails.Options': function()
{
var options_configuration = Configuration.get('ItemOptions.optionsConfiguration', []);
return new BackboneCollectionView({
collection: _.filter(this.model.get('options').sortBy('index'), function (option)
{
var option_configuration = _.findWhere(options_configuration, {cartOptionId: option.get('cartOptionId')});
return option_configuration && option_configuration.showSelectorInList;
})
, childView: ProductViewsOptionView
, viewsPerRow: 1
, childViewOptions: {
item: this.model
, templateName: 'facetCell'
, showLink: true
, hideLabel: true
, showSmall: true
}
});
}
, 'Cart.QuickAddToCart': function ()
{
var product = new ProductModel({
item: this.model
, quantity: this.model.get('_minimumQuantity', true)
});
return new CartQuickAddToCartView({
model: product
, application: this.options.application
});
}
, 'StockDescription': function ()
{
return new ProductLineStockDescriptionView({
model: this.model
});
}
}
// @method getContext @returns {Facets.ItemCell.View.Context}
, getContext: function ()
{
//@class Facets.ItemCell.View.Context
return {
// @property {String} itemId
itemId: this.model.get('_id')
// @property {String} name
, name: this.model.get('_name')
// @property {String} url
, url: this.model.get('_url')
//@property {String} sku
, sku: this.model.getSku()
// @property {Boolean} isEnvironmentBrowser
, isEnvironmentBrowser: SC.ENVIRONMENT.jsEnvironment === 'browser' && !SC.ENVIRONMENT.isTouchEnabled
// @property {ImageContainer} thumbnail
, thumbnail: this.model.getThumbnail()
// @property {Boolean} itemIsNavigable
, itemIsNavigable: !_.isUndefined(this.options.itemIsNavigable) ? !!this.options.itemIsNavigable : true
//TODO MOVE THIS TO THE PRODUCT REVIEWS MODULE
//@property {Boolean} showRating
, showRating: SC.ENVIRONMENT.REVIEWS_CONFIG && SC.ENVIRONMENT.REVIEWS_CONFIG.enabled
// @property {Number} rating
, rating: this.model.get('_rating')
//TODO RE-DESIGN THIS CODE (IT IS USED BY GOOGLE TAG MANAGER!)
//@property {String} track_productlist_list
, track_productlist_list: this.model.get('track_productlist_list')
//@property {String} track_productlist_position
, track_productlist_position: this.model.get('track_productlist_position')
//@property {String} track_productlist_category
, track_productlist_category: this.model.get('track_productlist_category')
//@property {String} image on hover
, hoverimage: this.model.get('custitem_jj_btn_image_onhover')
};
//@class Facets.ItemCell.View
}
});
});
//@class Facets.ItemCell.View.Initialize.Options
//@property {Item.Model} model
//@property {ApplicationSkeleton} application
//@property {Boolean?} itemIsNavigable
Template
{{!
© 2017 NetSuite Inc.
User may not copy, modify, distribute, or re-bundle or otherwise make available this code;
provided, however, if you are an authorized user with a NetSuite account or log-in, you
may use this code subject to the terms that govern your access and use.
}}
<div class="facets-item-cell-grid" data-type="item" data-item-id="{{itemId}}" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Product" data-track-productlist-list="{{track_productlist_list}}" data-track-productlist-category="{{track_productlist_category}}" data-track-productlist-position="{{track_productlist_position}}" data-sku="{{sku}}">
<meta itemprop="url" content="{{url}}"/>
<div class="facets-item-cell-grid-image-wrapper">
<!-- addition START BADGES -->
{{#if badge}}
{{{ badge }}}
{{/if}}
<!-- addition END BADGES -->
<a class="facets-item-cell-grid-link-image" href="{{url}}">
{{#if hoverimage}}
<img class="facets-item-cell-grid-image" id="hoverimageid{{sku}}" src="{{resizeImage thumbnail.url 'thumbnail'}}" alt="{{thumbnail.altimagetext}}" onmouseover='this.src="https://www.cricket.balajiwireless.com{{hoverimage}}"' onmouseout='this.src = "{{resizeImage thumbnail.url "thumbnail"}}"'
itemprop="image"/>
{{else}}
<img class="facets-item-cell-grid-image" id="hoverimageid{{sku}}" src="{{resizeImage thumbnail.url 'thumbnail'}}" alt="{{thumbnail.altimagetext}}" itemprop="image"/>
{{/if}}
</a>
{{#if glassBadge}}
{{{ glassBadge }}}
{{/if}}
{{#if isEnvironmentBrowser}}
<div class="facets-item-cell-grid-quick-view-wrapper">
<a href="{{url}}" class="facets-item-cell-grid-quick-view-link" data-toggle="show-in-modal">
<i class="facets-item-cell-grid-quick-view-icon"></i>
{{translate 'Quick Add'}}
</a>
</div>
{{/if}}
</div>
<div class="facets-item-cell-grid-details">
<div class="sku-facet-cont">
<span class="item-details-sku">
{{translate 'SKU:'}}
</span>
<span class="item-details-sku-value" itemprop="sku">
{{sku}}
</span>
</div>
<h2 class="facets-item-cell-grid-title">
<a class="facets-item-title" href="{{url}}">
<span itemprop="name">{{name}}</span>
</a>
</h2>
<!-- approve price starts -->
<div class="hide_pricing">
<!-- approve price ends -->
<div class="facets-item-cell-grid-price" data-view="ItemViews.Price"></div>
<div class="facets-item-cell-grid-price">
<div data-view="ItemDetails.Options"></div>
<div class="cells-item-price">
<div data-view="Cart.QuickAddToCart"></div>
</div>
</div>
<!-- approve price -->
</div>
<div class="product-views-price-login-to-see-prices-highlighted wait_for_hide_price">
<p class="product-views-price-message wait_for_hide_price"> AWAITING APPROVAL </p>
</div>
<!-- approve price ends -->
<!--Color Options for Facet Search -->
<div data-view="Product.Color.Options"></div>
{{#if showRating}}
<div class="facets-item-cell-grid-rating" itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating" data-view="GlobalViews.StarRating">
</div>
{{/if}}
<div class="facets-item-cell-grid-stock">
<div data-view="ItemViews.Stock" class="facets-item-cell-grid-stock-message"></div>
</div>
<!-- <div data-view="StockDescription"></div> -->
</div>
</div>
<script>
try {
checkPricingVisibility();
} catch (err) {
//console.log(err);
}
</script>
{{!----
Use the following context variables when customizing this template:
itemId (Number)
name (String)
url (String)
sku (String)
isEnvironmentBrowser (Boolean)
thumbnail (Object)
thumbnail.url (String)
thumbnail.altimagetext (String)
itemIsNavigable (Boolean)
showRating (Boolean)
rating (Number)
hoverimage (object)
----}}