如何根据 Spartacus 中的登录更改主题？

Question

我正在使用 Spartacus 开发一个 B2B 门户，多个公司可以在其中登录。我们需要根据他们登录的公司显示不同的主题 (scss)。

有人知道怎么做吗？

Answer 1

开箱即用 (OOTB)，Spartacus 不支持在运行时更改主题，并且主题也不绑定到用户配置文件。

可以在后台动态设置主题(see documentation)

Answer 2

斯巴达克斯 4.0.1

对于我来说，我只是让backoffice 和Spartacus 为我添加主题。即

从 Angular 代码中的全局配置中删除 SiteContextConfig（因此它可以从后台获取这些属性）
在后台设置您网站的主题，例如主题：“苹果”
Spartacus 会自动将主题 class 添加到您的 app-root

<app-root class="apples">

添加主题class后，我懒加载了主题css:

在 angular.json

    "styles": [
              // standard Spartacus styles
              "src/styles.scss",
              "src/styles/spartacus/page-templates/user.scss",
              "src/styles/spartacus/page-templates/product.scss",
              "src/styles/spartacus/page-templates/organization.scss",
              "src/styles/spartacus/page-templates/checkout.scss",
              // my custom themes
              {
                "input": "src/styles/spartacus/theme-apples.scss",
                "bundleName": "theme-apples",
                "inject": false
              },
              {
                "input": "src/styles/spartacus/theme-oranges.scss",
                "bundleName": "theme-oranges",
                "inject": false
              }
            ],

实施您的主题例如src/styles/spartacus/theme-apples.scss

@use 'sass:meta';

.apples {
  /* @include so all styles are wrapped inside '.apples' class */
  @include meta.load-css('theme/apples/variables');

  /* fonts */
  @include meta.load-css(
    '../../assets/HelveticNeueLTProBlk/MyFontsWebfontsKit.css'
  );

  /* layout */
  @include meta.load-css('theme/apples/page-templates/homepage');  
  @include meta.load-css('theme/apples/page-templates/product');

}

将 CSS 文件加载到您的 head 元素中。 app.component.ts

export class AppComponent implements OnInit {

  constructor(@Inject(DOCUMENT) private document: Document, @Inject(Config) public globalConfig: any) { }

  ngOnInit() {
    if(this.globalConfig.context) {
      if (this.globalConfig.context.theme) {
        this.loadStyle(this.globalConfig.context.theme[0]);
      }
    }
  }

  /* lazy load site specific theme */
  loadStyle(styleName: string) {
    const head = this.document.getElementsByTagName('head')[0];

    let themeLink = this.document.getElementById(
      'client-theme'
    ) as HTMLLinkElement;
    if (themeLink) {
      themeLink.href = styleName;
    } else {
      const style = this.document.createElement('link');
      style.id = 'site-theme';
      style.rel = 'stylesheet';
      style.href = `theme-${styleName}.css`;

      head.appendChild(style);
    }
  }
}

如何根据 Spartacus 中的登录更改主题？

How do you change the theme based on login in Spartacus?

spartacus-storefront