在 Magento 2 中添加自定义链接到顶部链接

本文将介绍如何在 Magento 2 中添加自定义链接到顶部链接。这将使您能够在 Magento 2 的顶部链接列表中添加自己的链接，以便您的客户能够快速访问您的重要页面，如联系页面、退货政策页面等。

步骤 1：创建后台配置选项

首先，我们需要创建后台配置选项以存储我们添加的链接。为了做到这一点，我们需要在我们的主题中创建一个 system.xml 文件。在这个文件中，我们将添加一个输入字段来允许我们输入自定义链接的路径和标题。以下是一个示例 system.xml 文件：

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <section id="custom_links" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Custom Links</label>
            <tab>general</tab>
            <resource>Magento_Config::config</resource>
            <group id="links" translate="label" type="text" sortOrder="99" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Links</label>
                <field id="link_1" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Link 1</label>
                </field>
                <field id="link_2" translate="label" type="text" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Link 2</label>
                </field>
                <field id="link_3" translate="label" type="text" sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Link 3</label>
                </field>
            </group>
        </section>
    </system>
</config>

请注意，对于每个链接，我们创建了一个 field 标记，并为每个链接分配了一个唯一的 ID。这些 ID 将用于从后台配置中读取我们添加的链接。

步骤 2：将链接添加到顶部链接

一旦我们有了后台配置选项，我们可以使用以下代码将我们的链接添加到顶部链接：

<referenceBlock name="top.links">
    <block class="Magento\Framework\View\Element\Html\Link\Current" name="link-1">
        <arguments>
            <argument name="label" xsi:type="string">Link 1</argument>
            <argument name="path" xsi:type="string">/some/link</argument>
        </arguments>
    </block>
    <block class="Magento\Framework\View\Element\Html\Link\Current" name="link-2">
        <arguments>
            <argument name="label" xsi:type="string">Link 2</argument>
            <argument name="path" xsi:type="string">/some/other/link</argument>
        </arguments>
    </block>
    <block class="Magento\Framework\View\Element\Html\Link\Current" name="link-3">
        <arguments>
            <argument name="label" xsi:type="string">Link 3</argument>
            <argument name="path" xsi:type="string">/yet/another/link</argument>
        </arguments>
    </block>
</referenceBlock>

注意，我们使用 Magento\Framework\View\Element\Html\Link\Current 类来创建我们的链接。我们还需要为每个链接指定一个唯一的名称（如 "link-1"）。这些名称将用于在 CSS 中为链接提供样式。

步骤 3：从后台配置中读取链接

最后，我们需要从后台配置中读取我们添加的链接，并将它们添加到顶部链接中。以下是一个示例代码，用于执行此操作：

$links = [];

for ($i = 1; $i <= 3; $i++) {
    $linkPath = $this->scopeConfig->getValue("custom_links/links/link_{$i}", ScopeInterface::SCOPE_STORE);
    $linkLabel = "Link {$i}";

    if ($linkPath) {
        $links[] = [
            'label' => $linkLabel,
            'url' => $linkPath,
            'class' => 'link-' . $i
        ];
    }
}

$topLinksBlock = $layout->getBlock('top.links');
$topLinksBlock->addLinks($links);

请注意，我们首先循环遍历链接，检查每个链接的路径是否在后台配置中设置。如果链接存在，则将其添加到 $links 数组中。最后，我们从布局中获取 top.links 块，并将链接添加到其中。

结论

完成此操作后，您的自定义链接将显示在 Magento 2 主题中的顶部链接列表中。这使得您的客户可以快速访问您的重要页面，从而提高了用户体验。