How to add new icon on 'sidemenu' of customer/account page .

[prashant2408]

Where these sidemenu icons(address,reviews) is located in Bagisto ?
How can I add new icon there for MLM class ?

resources/themes/velocity/views/customers/account/partials/sidemenu.blade.php [Image]

resources/themes/velocity/views/customers/account/partials/sidemenu.blade.php

<div class="customer-sidebar row no-margin no-padding">
  <div class="account-details col-12">
    <div class="customer-name col-12 text-uppercase">
      {{ substr(auth('customer')->user()->first_name, 0, 1) }}
    </div>
    <div class="col-12 customer-name-text text-capitalize text-break">{{ auth('customer')->user()->first_name . ' ' . auth('customer')->user()->last_name}}</div>
    <div class="customer-email col-12 text-break">{{ auth('customer')->user()->email }}</div>
  </div>
  @php
  // dd($menu);
  @endphp
  @foreach ($menu->items as $menuItem)
  <ul type="none" class="navigation">
    {{-- rearrange menu items --}}
    @php
    $subMenuCollection = [];

    $showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;

    $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;

    try {
    $subMenuCollection['profile'] = $menuItem['children']['profile'];
    $subMenuCollection['orders'] = $menuItem['children']['orders'];
    $subMenuCollection['downloadables'] = $menuItem['children']['downloadables'];

    if ($showWishlist) {
    $subMenuCollection['wishlist'] = $menuItem['children']['wishlist'];
    }

    if ($showCompare) {
    $subMenuCollection['compare'] = $menuItem['children']['compare'];
    }

    $subMenuCollection['reviews'] = $menuItem['children']['reviews'];
    $subMenuCollection['address'] = $menuItem['children']['address'];

    unset(
    $menuItem['children']['profile'],
    $menuItem['children']['orders'],
    $menuItem['children']['downloadables'],
    $menuItem['children']['wishlist'],
    $menuItem['children']['compare'],
    $menuItem['children']['reviews'],
    $menuItem['children']['address']
    );

    foreach ($menuItem['children'] as $key => $remainingChildren) {
    $subMenuCollection[$key] = $remainingChildren;
    }
    } catch (\Exception $exception) {
    $subMenuCollection = $menuItem['children'];
    }
    @endphp
    @php
    // dd($subMenuCollection);
    @endphp

    @foreach ($subMenuCollection as $index => $subMenuItem)
    <li class="{{ $menu->getActive($subMenuItem) }}" title="{{ trans($subMenuItem['name']) }}">
      <a class="unset fw6 full-width" href="{{ $subMenuItem['url'] }}">
        <i class="icon {{ $index }} text-down-3"></i>
        <span>{{ trans($subMenuItem['name']) }}<span>
            <i class="rango-arrow-right float-right text-down-3"></i>
      </a>
    </li>
    @endforeach
  </ul>
  @endforeach
</div>

@push('css')
<style type="text/css">
  .main-content-wrapper {
    margin-bottom: 0px;
    min-height: 100vh;
  }

</style>
@endpush

packages/Webkul/Shop/src/Config/menu.php

<?php

return [
    [
        'key'   => 'account',
        'name'  => 'shop::app.layouts.my-account',
        'route' => 'customer.profile.index',
        'sort'  => 1,
    ], [
        'key'   => 'account.profile',
        'name'  => 'shop::app.layouts.profile',
        'route' => 'customer.profile.index',
        'sort'  => 1,
    ], [
        'key'   => 'account.address',
        'name'  => 'shop::app.layouts.address',
        'route' => 'customer.address.index',
        'sort'  => 2,
    ], [
        'key'   => 'account.reviews',
        'name'  => 'shop::app.layouts.reviews',
        'route' => 'customer.reviews.index',
        'sort'  => 3,
    ], [
        'key'   => 'account.wishlist',
        'name'  => 'shop::app.layouts.wishlist',
        'route' => 'customer.wishlist.index',
        'sort'  => 4,
    ], [
        'key'   => 'account.compare',
        'name'  => 'shop::app.customer.compare.text',
        'route' => 'velocity.customer.product.compare',
        'sort'  => 5,
    ], [
        'key'   => 'account.orders',
        'name'  => 'shop::app.layouts.orders',
        'route' => 'customer.orders.index',
        'sort'  => 6,
    ], [
        'key'   => 'account.downloadables',
        'name'  => 'shop::app.layouts.downloadable-products',
        'route' => 'customer.downloadable_products.index',
        'sort'  => 7,
    ],
    [
        'key'   => 'account.MLM',
        'name'  => 'shop::app.layouts.MLM',
        'route' => 'customer.MLM.index',
        'sort'  => 8,
    ]
];

[devansh-webkul]

Hi @prashant2408,

Hi,

Please check this path packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss. Line number is about 802, you will see these classes,

i {
&.icon {
@extend .rango-default;

font-size: 18px;
padding-right: 5px;

&.profile::before {
content: "\E995";
}

&.address::before {
content: "\e949";
}

&.reviews::before {
content: "\e97d";
}

&.wishlist::before {
content: "\e93e";
}

&.orders::before {
content: "\e931";
}

&.downloadables::before {
content: "\e926";
}

&.compare::before {
content: "\e93b";
}
}
}

Just register your icon here.

And make sure you compile you assets and publish your pakage.

[mreduar]

This is not as easy as it sounds because the icons were hardcoded in the packages\Webkul\Velocity\src\Resources\views\shop\customers\account\partials\sidemenu.blade.php
Therefore I think that if you want to add a new icon you have to hardcode it too.

For example the downloadables icon is placed here as index. And that is the name of the icon.

My concern has always been that when bagisto is updated all these changes I made to the webkul components will be lost.

Any suggestions?

[devansh-webkul]

No need. Just follow the same steps which I mentioned above.

And if so still problem persists then you can do your changes in the published files rather than the package and it won't break.