PLP Image Resize

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>

Leave a comment

Your email address will not be published. Required fields are marked *