Prestashop: [EPIC] Standardize breadcrumbs in Front-office

[sam-pires]

Breadcrumbs in the Front-office

Goal

The goal of this EPIC is to clarify the rule about breadcrumbs in PrestaShop Front-office and to adapt existing/add missing breadcrumbs according to it.

Why

Several issues have been opened in the previous months about breadcrumbs.
Some PRs on this topic have been submitted as well.

As of today, there is no clear rule defined about breadcrumbs in the FO. We need to define one and to implement it.

Related issues

• [x] #15440 - No breadcrumb on some important pages (like Stores, Sitemap, New Products, Best Sales, Suppliers, Cart...)
• [x] #16836 - Breadcrumb missing on my account page

Tasks

Specs

• Specs for breadcrumbs in Front-office

Implementation

Missing breadcrumbs to add:

• [ ] TBC

Existing breadcrumbs to remove:

• [ ] Breadcrumbs from CMS pages because they don't have more than 2 depths.

Existing breadcrumbs to remove when user isn't logged in:

• [ ] /index.php?controller=Identity
• [ ] /index.php?controller=OrderHistory
• [ ] /index.php?controller=CreditSlip
• [ ] /index.php?controller=Addresses

Existing breadcrumbs to modify:

• [ ] /index.php?controller=Search (product page):
  Replace 'Home > Clothes > Women > Hummingbird t-shirt'
  by Home > Search results for hummingbird > Hummingbird printed t-shirt'
• [ ] /index.php?controller=GDPR:
  Replace 'Home > Your account'
  by 'Home > Your account > GDPR - Personal data'

[ttoine]

You should maybe share that with FoP, or a Build article, and maybe see if a tweet could be useful to gather feedback.

[Hlavtox]

@sam-pires Hi Samuel, we fixed all breadcrumbs in my account section with @matks.

I will go through the last few pages tommorow (like stores, suppliers, sitemap etc.) and fix it. Then the breadcrumbs will be 100% done.

[clotairelims]

Hi

I've check all front controller. Here is my reports.

My check are for classic theme and PS branch 1.7.7

• [x] /index.php?controller=Index > homepage : breadcrumb not mandatory
• [x] /index.php?controller=Address > address edition : PR #19298
• [x] /index.php?controller=Addresses > addresses list : OK
• [x] /index.php?controller=Auth > auth log and sign in : OK
• [x] /index.php?controller=Cms > CMS page : OK
• [x] /index.php?controller=Contact > contact page : OK
• [x] /index.php?controller=Discount > discounts avalailable : OK
• [x] /index.php?controller=History > order historic : OK
• [x] /index.php?controller=Identity > : OK
• [x] /index.php?controller=MyAccount > : OK
• [x] /index.php?controller=BestSales > OK
• [x] /index.php?controller=Category > OK
• [x] /index.php?controller=Manufacturer > OK
• [x] /index.php?controller=NewProducts > OK
• [x] /index.php?controller=PricesDrop > OK
• [x] /index.php?controller=GuestTracking > OK
• [x] /index.php?controller=Search > OK
• [x] /index.php?controller=Supplier > OK
• [x] /index.php?controller=Product > OK
• [x] /index.php?controller=Password > OK
• [x] /index.php?controller=Order > "light layout" : breadcrumb not mandatory
• [x] /index.php?controller=OrderDetail > : OK
• [x] /index.php?controller=OrderSlip > OK
• [x] /index.php?controller=GetFile / ChangeCurrency / Attachment > ajax : breadcrumb not mandatory
• [x] /index.php?controller=PageNotFound > : breadcrumb not mandatory
• [x] /index.php?controller=Statistics > I don't what is this
• [x] /index.php?controller=PdfInvoice / PdfOrderReturn / PdfOrderSlip > PDF : breadcrumb not mandatory
• [x] /index.php?controller=Stores > PR #19195
• [x] /index.php?controller=Sitemap > PR #19195
• [x] /index.php?controller=Cart > cart summary PR #19298
• [x] /index.php?controller=OrderFollow > Only "Address > Your account" without the third level of the breadcrumb PR #19298
• [x] /index.php?controller=OrderReturn > PR #19298
• [x] /index.php?controller=OrderConfirmation > PR #19298

[Progi1984]

@sam-pires A new PR for this EPIC : #19195

[Hlavtox]

@clotaire202 Hi, what is this page? _/index.php?controller=OrderFollow > Only "Address > Your account" without the third level of the breadcrumb_

Can you send a screenshot? :-)

[clotairelims]

@Hlavtox

Here you'll found a screenshot.

We could find after my account the third level "merchandise return"

[Hlavtox]

@clotaire202 Thanks!!! Never used this part of Prestashop.

@Progi1984 @nprokopenko202 Guys, can you add this to the breadcrumb PR? OrderFollowController 🚀

    public function getBreadcrumbLinks()
    {
        $breadcrumb = parent::getBreadcrumbLinks();

        $breadcrumb['links'][] = $this->addMyAccountToBreadcrumb();

        $breadcrumb['links'][] = [
            'title' => $this->trans('Merchandise returns', [], 'Shop.Theme.Customeraccount'),
            'url' => $this->context->link->getPageLink('order-follow'),
        ];

        return $breadcrumb;
    }

[clotairelims]

@Hlavtox

To be perfectly OK, and follow the same breadcrumb as order, we should add the return number when we

@nprokopenko202 could you please add this on PR ?

[nprokopenko202]

@nprokopenko202 could you please add this on PR ?

@clotaire202 Yes, I'll do it

[clotairelims]

@Progi1984 > Thank you !

@Hlavtox,

@nprokopenko202 and I will supply a second PR according to your suggestion and these pages:

• /index.php?controller=OrderFollow > Only "Address > Your account" without the third level of the breadcrumb
• /index.php?controller=Cart > cart summary : not defined
• /index.php?controller=PageNotFound > : not defined
• /index.php?controller=OrderReturn > : not defined
• /index.php?controller=OrderConfirmation > : not defined

@sam-pires could you please tell us if "Cart" and "Not found" pages need to have a breadcrumb according to you ?

Regards

[matks]

So great to see people contributing together on this topic 😊

[sam-pires]

hi @clotaire202,

Sorry for the delay to answer you.

@sam-pires could you please tell us if "Cart" and "Not found" pages need to have a breadcrumb according to you ?

• Cart => No breadcrumbs, as it is the beginning of the purchase funnel, there needs to be as little "distraction" as possible, and there is already a link to go back to the storefront.
• Notfound => No breadcrumbs, it is a common practice to not let breadcrumbs on this page.

Let me know if you have any other questions.

Thanks for the work on this EPIC everyone 🙂

[clotairelims]

@sam-pires last PR added cart breadcrumb into backend code. The theme could show or not the breadcrumb on cart page.

According to this previous list all breadcumb are now defined.

[matks]

@clotaire202 Big thanks to all your team for all the bug reports and bug fixes for 1.7.7 😄

If you want to chat, remember we have now a Slack https://github.com/PrestaShop/open-source/tree/master/slack

[sam-pires]

Hi @prestascott,

Can you have a look at this EPIC please? :)

[LouiseBonnard]

Hey guys, @prestascott, what's the status of this EPIC?

[prestascott]

Hi everyone!

@LouiseBonnard I updated the epic based on what we need to remove or modify. I also linked the Specs for breadcrumbs in Front-office.

Thank you everyone for your work! :)

[clotairelims]

I think we have discuss about an essential point. Your specs are good for front end (classic theme) but in back-end breadcrumb need to be available for all controller. In fact, some theme could add a breadcrumb in a CMS page witch have only 2 depths...

So @prestascott could you please tell us if this issue could be closed and if not. What can be done and send as Pull Request to close this issue. Several PR have already been merged on 1.7.8 and we don't know what's expected for now.

NB: These controllers / pages doesn't exist:
/index.php?controller=Delivery
/index.php?controller=LegalNotice
/index.php?controller=TermsAndConditionsOfUse
There are CMS page. So all breadcrumbs on CMS page should be removed ?

Could you please update you description with right data.

[prestascott]

@clotaire202 My bad, they were CMS Pages.
Yes, all breadcrumbs on CMS pages should be removed because they won't have more than 2 depths.

[clotairelims]

@prestascott But a CMS page can have a category. In this case, we can consider there are more than 2 depths, can't we ?

[Hlavtox]

@prestascott @clotaire202 @LouiseBonnard

Personally, I would keep breadcrumbs everywhere for consistency. It does not hurt if the user knows that he is on the second level, does it?

Only thing I would change is the breadcrumbs in checkout. They would look better as several bigger colorful steps. (Cart > Checkout > Confirmation)

[clotairelims]

I'm agree with @Hlavtox

Breadcrumbs available everywhere. Each theme can choose if he want to show or remove breadcrumb.

[prestascott]

@clotaire202 @Hlavtox I don’t get the point to show breadcrumb if there is only 2 levels. Previous level will always be the homepage no matter what so if users are in another page than the homepage, they’re obviously at least on the level 2. They already know that and they don’t need breadcrumbs for this.

It's a decision made from the product and the ux team with @sam-pires and @TristanLDD.

Also, we can still keep consistency by removing all breadcrumbs with 2 levels and display breadcrumbs from 3 levels. If a CMS page have a category then yes, it’s useful to display the breadcrumbs because there is at least 3 depths.

Classic Theme won’t display breadcrumbs with 2 levels but we must give the possibility to themes to choose if they want to show or remove breadcrumbs.

This isn’t a breadcrumb in checkout but a stepper, can you create an issue for this please?

[NeOMakinG]

I'm not a part of the product team, but my opinion on this subject is the same as @Hlavtox, I think keeping breadcrumb everywhere is better to keep some consistency, also if a theme wants to remove breadcrumbs everywhere (which will be a bad idea to my opinion) or remove breadcrumb on a specific page, they should be able too.

I think we should not take such a decision for every theme developers, they needs to take their own decision on this topic, trust me, on hundreds of websites I've done, there are many behavior on this part depending of a lot of things related to the subject and design of the website.

And the most correct thing to provide from my opinion is just a "breadcrumb everywhere" behavior, while every developers will custom this as they want

In term of UX, having a link to the home page which implicitly contains the "home" keyword can help people not used to IT to navigate to the home, while some websites aiming a different public can choose to remove it as they know they aim something different

[clotairelims]

@NeOMakinG Do you think as PrestaShop Developer that a new configuration in config.yml of the theme could help us to configure witch page has a breadcrumb ?
With a config.yml configuration, @prestascott will supply default value (best UX practice) for the classic theme, and merchants (and developers and agences) could manage breadcrumb display.

[NeOMakinG]

That could be an idea, but I'm not sure this is the right choice at all and if this is the best practice, we should speak about it with @PrestaShop/prestashop-maintainers

[Hlavtox]

@prestascott @NeOMakinG @clotaire202

I don’t get the point to show breadcrumb if there is only 2 levels. Previous level will always be the homepage no matter what so if users are in another page than the homepage, they’re obviously at least on the level 2. They already know that and they don’t need breadcrumbs for this.

But the point is, they don't know that they are on the second level and the previous level is the homepage. They come to your website the same as to 20 another ones, when searching for the product they want.

As @NeOMakinG said, you must provide as many ways for user to navigate as you can. Some users still don't understand that logo = homepage.

Aaaand I think it hurts nothing to have the breadcrumbs there, there would be 20px of space saving, but I think it does not matter on CMS and my account pages. If PS team wants to have to be so top-notch in the UI, I think there are areas that need 100000x more work, like unusable BO on anything other than desktop... :-)

---

But of course, all of this is just my opinion, but I'm talking to you from a point of running an successful ecommerce store from 2006 and one of the most mentioned things in our reviews are "store is easy to navigate", "You have the website as clear as possible for me, it is very easy to orientate and search on them." and positives like this.

[micka-fdz]

Hello. Any news about breadcrumb remove when there are more than 2 depths?

I agree with @Hlavtox and @NeOMakinG, we need to keep breadcrumb everywhere.
Some users/merchants don't have reflex to click on the logo to back to homepage.

Please consider our arguments.

[prestascott]

Hello everyone,

Ok, I see. It seems that you really want to show breadcrumbs no matter how many levels there are.
Then I consider your arguments and I decide to leave them as you want since it's not an issue. :)

I updated the specs.