How to extend the Grid, List, and Table Facet templates in SCA

The template for Facet view in PLP page can be updated as shown below.

  • Extend the facet item child view in Facet Browse view.
  • Override the grid, table, list view templates.

 _.extend(FacetsBrowseView.prototype.childViews, {

          ‘Facets.Items’: function () {

            var self = this;

            var display_option = _.find(this.itemsDisplayOptions, function (option) {

              return option.id === (self.translator.getOptionValue(‘display’) ? self.translator.getOptionValue(‘display’) : self.translator.options.display);

            });

            display_option = changeFacetTemplate(display_option);

            FacetsItemsCollectionView = FacetsItemsCollectionView.FacetsItemsCollectionView ? FacetsItemsCollectionView.FacetsItemsCollectionView : FacetsItemsCollectionView;

            return new FacetsItemsCollectionView({

              application: this.application,

              keywords: this.translator.getOptionValue(‘keywords’),

              collection: this.model.get(‘items’).models,

              viewsPerRow: parseInt(display_option.columns, 10),

              cellViewTemplate: display_option.template

            });

            function changeFacetTemplate(display_option) {

              if (display_option.id == “grid”) {

                display_option.template = ‘JJ_Facet_item_cell_grid_custom.tpl’

              } else if (display_option.id == “table”) {

                display_option.template = ‘JJ_Facet_item_cell_tabel_custom.tpl’

              } else if (display_option.id == “list”) {

                display_option.template = ‘JJ_Facet_item_cell_list_custom.tpl’

              }

              return display_option;

            }

          }

        });

Leave a comment

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