如何在Bigcommerce主题中组合两个组件

Question

好的，我正在为一个客户编辑一个Bigcommerce主题。我对Bigcommerce没有太多的经验，只会一点点php。当前主题标题已设置，以便您可以将徽标左对齐、居中或右对齐。然后，根据徽标的位置，搜索栏和社交链接占据了其他两个空间。

也就是说，你的徽标在左边，搜索栏在中央，社交链接在右边。

客户想要添加另一个“徽标”的标题，并希望结合搜索栏和社交链接。

我正在查看标头的标记，它是这样设置的

{{#if theme_settings.logo-position '==' 'left'}}
    <div class="header-logo header-logo--{{theme_settings.logo-position}} container">
        {{> components/common/store-logo}}
        {{> components/common/quick-search}}
        {{> components/common/social-links-header}}
    </div>
{{/if}}

{{#if theme_settings.logo-position '==' 'center'}}
    <div class="header-logo header-logo--{{theme_settings.logo-position}} container">
        {{> components/common/social-links-header}}
        {{> components/common/store-logo}}
        {{> components/common/quick-search}}
    </div>
{{/if}}

{{#if theme_settings.logo-position '==' 'right'}}
    <div class="header-logo header-logo--{{theme_settings.logo-position}} container">
        {{> components/common/social-links-header}}
        {{> components/common/quick-search}}
        {{> components/common/store-logo}}
    </div>
{{/if}}

我在想，我可以使用{#if theme_settings.logo-position '==' 'left'}来设置我想要的布局，只需添加额外的徽标，并结合快速搜索和社交链接标题组件。如何组合这些组件？

Answer 1

每个组件都有一个单独的模板文件，因此您可以将第二个徽标添加到store-logo.html，然后从it search.html复制内容并将其粘贴到social-links-header.html中以组合这些元素。您还可以使用CSS来调整布局--这实际上取决于您试图实现的位置。