jesper-herrloff/module-customer-navigation

扩展客户导航,设置如何显示导航

1.0.1 2023-12-23 12:09 UTC

This package is auto-updated.

Last update: 2024-09-23 13:54:42 UTC


README

概述

此模块向页眉中的客户导航链接添加模板。并在侧边栏中的客户账户导航链接中。

安装说明

在安装此模块之前,请注意,Magento_Customer 模块依赖于 Magento_Theme 模块,这意味着必须在安装 Magento_Customer 模块之前安装 Magento_Theme 模块。

通过 composer 安装(推荐)

在 Magento 2 根目录中运行以下命令

composer require jesper-herrloff/module-customer-navigation 
php bin/magento setup:upgrade

配置

在管理员面板中,在“商店 -> 配置 -> 客户 -> 客户导航 -> 导航设置 -> 客户账户导航”下有一个设置。此设置用于启用或禁用 JesperHerrloff_CustomerNavigation/Plugin/AccountNavigation。如果设置启用,则即使在当前链接中,侧边栏中的客户账户导航链接也将显示为链接。商店 -> 配置 -> 客户 -> 客户导航 -> 导航设置 -> 将名称添加到布局中作为链接类。此设置用于将链接的名称添加到布局中作为类。这是为了能够在链接中添加图标,例如。

如何使用

安装模块后,页眉和侧边栏中的客户导航链接将以链接的形式显示,即使它是当前链接。这是为了能够在链接中添加图标,例如。

主题扩展性

扩展 JesperHerrloff_CustomerNavigation/templates/account/link.phtml 模板。这使得在您的主题中自定义模板成为可能。

附加信息

在侧边栏和 top.links 中的链接中添加图标的示例。如果启用了“将名称添加到布局中作为链接类”的设置。

// Customer Navigation links in Customer Account sidebar
.block-collapsible-nav .nav.item .customer-account-navigation-account-link {
    // If you use svg icons
    &::before {    
        content: "";
        background-image: url('@{baseDir}Vendor_Module/icons/icon.svg');
        background-size: 16px 16px;
        background-repeat: no-repeat;
        position:relative;
        display:inline-block;
        top:2px;
        height: 16px;
        width: 16px;
        padding-right: 5px;
    }
    // If you use font icons
    &::before {    
        content: "\f007";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 16px;
        position:relative;
        display:inline-block;
        top:2px;
        height: 16px;
        width: 16px;
        padding-right: 5px;
    }
}
// Customer Navigation links in header
.header.links .nav.item .my-account-link {

    // If you use svg icons
    &::before {    
        content: "";
        background-image: url('@{baseDir}Vendor_Module/icons/icon.svg');
        background-size: 16px 16px;
        background-repeat: no-repeat;
        position:relative;
        display:inline-block;
        top:2px;
        height: 16px;
        width: 16px;
        padding-right: 5px;
    }
    // If you use font icons
    &::before {    
        content: "\f007";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 16px;
        position:relative;
        display:inline-block;
        top:2px;
        height: 16px;
        width: 16px;
        padding-right: 5px;
    }
}