Jira Code: WF-3: Increase picture size on product category pages
Increase the picture size of product photos so they are larger
- Extended the facet item child view, Facet Browse view
- Override the grid, table, list view templates
//JS
_.extend(FacetsBrowseView.prototype.childViews, {
'Facets.Items': function() {
var self = this,
display_option = _.find(this.options.application.getConfig('itemsDisplayOptions'), function(option) {
return option.id === self.translator.getOptionValue('display');
});
display_option = changeFacetTemplate(display_option);
return new BackboneCollectionView({
childTemplate: display_option.template,
childView: FacetsItemCellView,
childViewOptions: {
application: this.application
},
viewsPerRow: parseInt(display_option.columns, 10),
collection: this.model.get('items'),
cellTemplate: facets_items_collection_view_cell_tpl,
rowTemplate: facets_items_collection_view_row_tpl,
template: facets_items_collection_tpl,
context: {
keywords: this.translator.getOptionValue('keywords')
}
});
function changeFacetTemplate(display_option) {
if (display_option.id == 'grid') {
display_option.template = "Facet_item_cell_grid_custom.tpl"
} else if (display_option.id == 'table') {
display_option.template = "Facet_item_cell_table_custom.tpl"
} else if (display_option.id == 'list') {
display_option.template = "Facet_item_cell_list_custom.tpl"
}
return display_option;
}
}
});
<!--Template-->
<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">
{{#if hasHoverImage}}
<a class="facets-item-cell-grid-link-image img-swap" href="{{url}}">
<img class="facets-item-cell-grid-image" src="{{resizeImage thumbnail.url 'main'}}" alt="{{thumbnail.altimagetext}}" itemprop="image"/>
<img class="facets-item-cell-grid-image" src="{{resizeImage hoverImage.url 'main'}}" alt="{{hoverImage.altimagetext}}" itemprop="image"/>
</a>
{{else}}
<a class="facets-item-cell-grid-link-image" href="{{url}}">
<img class="facets-item-cell-grid-image" src="{{resizeImage thumbnail.url 'main'}}" alt="{{thumbnail.altimagetext}}" itemprop="image"/>
</a>
{{/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 View'}}
</a>
</div>
{{/if}}
</div>
<div class="facets-item-cell-grid-details">
<a class="facets-item-cell-grid-title" href="{{url}}">
<span itemprop="name">{{name}}</span>
</a>
<div class="facets-item-cell-grid-price" data-view="ItemViews.Price"></div>
<div data-view="Cart.QuickAddToCart"></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 data-view="ItemDetails.Options"></div>
<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>