Loading...
Area: Optimizely B2B Commerce

Theme updates for brands and product lines in Classic

Recommended reading 

In addition to enabling brands and product lines functionality, you also need to update your theme and do some storefront work in the following areas.

Brands Page

When you enable Brands functionality, this adds a Brands menu item the main navigation and creates the Brands page, which is an alphabetical list of all brands with assigned products.

Brands Detail Pages

When you click a brand name from the Brands page or from a Product detail page, you view a brand-specific page that consists of widgets related to brands:

  • Brand Categories - allows you to view all categories for specific brand
  • Brand Container - container (allowed only for Brand Detail Pages)
  • Brand Content - can be placed into Brand Container (allowed only for Brand Detail Pages)
  • Brand Image - can be placed into Brand Container (allowed only for Brand Detail Pages)
  • Brand Logo - can be placed into Brand Container (allowed only for Brand Detail Pages)
  • Product Lines - allows you to view Brand Product Lines (allowed only for Brand Detail Pages)
  • Shop All Products - navigates to Product list page specific for brand (allowed only for Brand Detail Pages)
  • Visit Brand Website - navigates into link form Brand entity (allowed only for Brand Detail Pages)

Search Results/Product List Pages

Brand and Product Line attributes appear in the filter panel.

Search Autocomplete

When customers search for products, the Autocomplete box shows Brands and Product Line information.

List of Updated Files

You may still want to do a file compare, as updates to this functionality is ongoing and may impact additional files.

/Themes/Responsive/Scripts/Brands:

  • insite.brand-categories.controller.ts*
  • insite.brand-container.controller.ts*
  • insite.brand-content.controller.ts*
  • insite.brand-image.controller.ts*
  • insite.brand-list.controller.ts*
  • insite.brand-logo.controller.ts*
  • insite.brand.directives.ts*
  • insite.brand.service.ts*
  • insite.product-lines.controller.ts*
  • insite.shop-all-products.controller.ts*
  • insite.visit-brand-website.controller.ts*

/Themes/Responsive/Scripts/Catalog:

  • insite.category-left-nav.controller.ts
  • insite.category-left-nav.directive.ts
  • insite.compare-products.controller.ts
  • insite.frequently-purchased.controller.ts
  • insite.product-carousel.controller.ts
  • insite.product-detail.controller.ts
  • insite.product-list.controller.ts
  • insite.product-search.controller.ts
  • insite.product.service.ts
  • insite.search.service.ts

/Themes/Responsive/Scripts/QuickOrder:

  • insite.quick-order-page.controller.ts
  • insite.quick-order.controller.ts

/Themes/Responsive/Styles:

  • template/ma-brand-categories.scss
  • template/ma-brand-details.scss
  • template/ma-brands.scss
  • template/ma-product-lines.scss
  • base.scss

New scss files:

  • /Themes/Responsive/theme.json
  • /Themes/Responsive/Views/Directives:
  • Brands/ProductBrand.cshtml*
  • Cart/CartLines.cshtml
  • Catalog/CrossSellCarousel.cshtml
  • Rfq/ProposedDetailsGrid.cshtml
  • Rfq/RequestedDetailsGrid.cshtml

/Themes/Responsive/Views/Widgets:

  • BrandCategories/Standard.cshtml*
  • BrandContainer/Standard.cshtml*
  • BrandContent/Standard.cshtml*
  • BrandImage/Standard.cshtml*
  • BrandLogo/Standard.cshtml*
  • BrandsView/Standard.cshtml*
  • Carousel/Standard.cshtml
  • HeaderView/Standard.cshtml
  • InvoiceDetailView/Standard.cshtml
  • JobQuoteDetailsView/Standard.cshtml
  • MyListDetailView/Standard.cshtml
  • OrderDetailView/Standard.cshtml
  • ProductCarousel/Standard.cshtml
  • ProductComparisonView/Standard.cshtml
  • ProductDetailView/Standard.cshtml
  • ProductLines/Standard.cshtml*
  • ProductListView/B2C.cshtml
  • ProductListView/Standard.cshtml
  • QuickOrderView/Standard.cshtml
  • RequisitionView/Standard.cshtml
  • RfqQuoteDetailsView/Standard.cshtml
  • ShopAllProducts/Standard.cshtml*
  • VisitBrandWebsite/Standard.cshtml*
  • /Views/Shared/_MainLayout.cshtml

*These are new files added for brands and product lines functionality.

Do you find this information helpful? Please log in to provide feedback.

Last updated: Dec 11, 2020

Recommended reading