Question

考虑到Spartacus中标头的实现，是否有人解决或知道如何解决以下情况？

我想在标题中显示两个级别块右侧的布局，以及单个级别块左侧的布局。

考虑到头文件的Spartacus实现，我无法考虑该如何做，因为我看不到如何包装某些插槽。给定Spartacus中标头的实现，在StorefrontComponent内部，我无法使用ConfigModule.withConfig ({...}, as CmsConfig)

替换它

我了解并已经尝试过可以替换标题，以实现插座（cxOutletRef = "header"），但这无法通过SmartEdit对其进行编辑，这对我来说是不可接受的。

有什么建议吗？或可能的解决方案？

我想到的最后一个选择是，我可以从后面创建一个组件类型，然后使用"ConfigModule.withConfig ({...}, as CmsConfig)"从Angular映射它，从头开始实现“冲突的两级”块，甚至实现整个标头。

谢谢！

//////更正09/23/20 //////

插座不会阻止通过SmartEdit进行编辑。必须指出组件所对应的插槽，这很容易使用PageSlotComponent来实现。

✔示例：

<ng-template cxOutletRef="cx-header">
      <header
        cxSkipLink="cx-header"
        [cxFocus]="{ disableMouseFocus: true }"
        [class.is-expanded]="isExpanded$ | async"
        (keydown.escape)="collapseMenu()"
        (click)="collapseMenuIfClickOutside($event)"
      >
        <cx-page-slot position="MiniCart"></cx-page-slot>
      </header>
      <cx-page-slot position="BottomHeaderSlot"> </cx-page-slot>
      <cx-global-message></cx-global-message>
    </ng-template>

通过这种方式，SmartEdit允许您在相应的插槽中编辑MiniCart组件。

?错误的方式：

<ng-template cxOutletRef="cx-header">
  <header
    cxSkipLink="cx-header"
    [cxFocus]="{ disableMouseFocus: true }"
    [class.is-expanded]="isExpanded$ | async"
    (keydown.escape)="collapseMenu()"
    (click)="collapseMenuIfClickOutside($event)"
  >
    <cx-mini-cart></cx-mini-cart>
  </header>
  <cx-page-slot position="BottomHeaderSlot"> </cx-page-slot>
  <cx-global-message></cx-global-message>
</ng-template>

Answer 1

您确实可以使用自定义布局配置和其他CSS来解决此问题，但这不是必需的。我给您一些选择考虑：

选项1：更改生成的DOM

您可以按照@pwavg的建议提供自定义布局配置，甚至可以引入自定义店面组件。如果引入自定义布局配置，那么您将受到店面组件中使用的部分的限制。如果您坚持使用自定义部分（即包装搜索框，登录名，mincart和nav的元素），则需要引入自定义店面组件。这样做的缺点是您将偏离标准的Spartacus组件，这可能会导致将来缺少某些功能。

选项2：纯CSS

纯CSS解决方案是最简单的。您不需要更改任何实际的DOM，但是可以将一些自定义CSS规则应用于标准DOM。网格系统确实是为此目的而设计的。开始时有点复杂，但可以完成工作。实际上，您也可以使用flexbox实现此目的，但是您需要将徽标插槽移出flexbox流。

这是一个实际的快速且肮脏的代码段，仅演示了一些CSS规则的更改。它带有一些假设/限制，但在大多数情况下可能会很好。


header {
  cx-page-slot.SiteLogo {
    // we absolute position the logo, so it flows outside the flexbox system. this requires
    // an hard-coded top position, that might be fine, but I don't know the details. 
    position: absolute;
    top: 60px;
  }

  cx-page-slot.SearchBox {
    // align searchbox to the left, not sure if that's required, but looks better
    margin: 14px auto 14px 150px;
  }

  cx-page-slot.NavigationBar {
    margin-left: 150px;
    overflow: hidden;
  }

  // manipulate a very high logo to demonstrate this works
  cx-page-slot.SiteLogo img {
    height: 100px;
  }
}

结果（对不起，徽标;））

选项3：cx-header插座

我想说您也应该能够使用插座，因为这将使您更接近选项1（更改实际DOM）。我想不出它在SmartEdit中不起作用的原因-但很高兴知道是否是这种情况。在这种情况下，我建议您使用cx-header outletRef，以便替换整个标头。

Answer 2

我对Spartacus的经验不是很高，所以这可能不是正确的方法。只是想和你一起思考。

我认为您可以扩展您的layoutconfig并使用CSSGrid设置插槽样式。例如，您的布局可能是这样的：

  layoutSlots: {
    header: {
      lg: {
        slots: [
          'SiteLinks',
          'SiteLogin',
          'HeaderLinks',
          'SiteLogo',
          'NavigationBar',
          'SearchBox',
          'MiniCart',
          'NavigationBar2',
        ],
      },
      slots: ... (for mobile view)
    },
  },

并为插槽位置创建一个自定义的CSS网格。

如果您想拥有更多的标记控制功能，可以使用cxOutletRef将标头替换为以下内容：

<ng-template cxOutletRef="cx-header">
  <header>
    <div class="header-top">
      <cx-page-layout section="headerTop"></cx-page-layout>
    </div>

    <div class="header-bottom">
      <cx-page-layout section="headerBottom"></cx-page-layout>
    </div>
  </header>
</ng-template>

然后在配置中在headerTop和headerBottom之间划分插槽。

自定义页眉布局-Spartacus店面

2 个答案: