Light

vtex-apps / breadcrumb Goto Github PK

View Code? Open in Web Editor NEW

0.0 49.0 12.0 862 KB

Breadcrumb App

JavaScript 10.05% TypeScript 88.95% Shell 1.00%

vtex-io srv-store-framework xp-developer store-framework hacktoberfest

breadcrumb's Introduction

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Breadcrumb

The VTEX BreadCrumb is a navigation scheme that shows a user's browsing history up to their current location in your store.

Configuration

Import the breadcrumb's app to your theme's dependencies in the manifest.json, for example:

  dependencies: {
    "vtex.breadcrumb": "1.x"
  }

Add the breadcrumb block to the Product template. For example:

 "breadcrumb": {
    "props": {
      "showOnMobile": true
    }
  },

Prop name	Type	Description	Default value
`showOnMobile`	`Boolean`	It determines whether Breadcrumb should also be displayed on mobile	`false`
`homeIconSize`	`Number`	Controls the `size` property of `IconHome`	`26`
`caretIconSize`	`Number`	Controls the `size` property of `IconCaret`	`8`

⚠️ The product's categories should appear as an array in one of this two formats:

categories = ['/Eletronics/', '/Eletronics/Computers']

categories = ['eletronics', 'eletronics-computers']

Add the breadcrumb.search block to the Search template. For example:

 "breadcrumb.search": {
    "props": {
      "showOnMobile": true
    }
  },

Prop name	Type	Description	Default value
`showOnMobile`	`Boolean`	It determines whether Breadcrumb should also be displayed on mobile	`false`
`homeIconSize`	`Number`	Controls the `size` property of `IconHome`	`26`
`caretIconSize`	`Number`	Controls the `size` property of `IconCaret`	`8`

ℹ️ The breadcrumb.search block is specific for the Breadcrumb inside the search result page.

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
`container`
`link`
`arrow`
`homeLink`
`termArrow`

Contributors ✨

Thanks goes to these wonderful people:

This project follows the all-contributors specification. Contributions of any kind welcome!

breadcrumb's People

Contributors

Watchers

Forkers

grupo-exito-ecommerce nicolaregattieri tfg-labs auchanromania khrizzcristian trikatechnologies iamuddeshya sonomamarket eduardopatrick stellassantos luis-otavio syatt-io

breadcrumb's Issues

Search terms break characters in breadcrumb on page load. ( departament )

Expected Behavior

When filtering for a term, breadcrumb should not have character breaks when reloading the page.

Current Behavior

When accessing the department : "infantil" using the render-runtime, then filtering by "idade" for instace "0 a 4 anos", the text that comes in the breadcrumbs works correctly, but when reloading the filtered page, the breadcrumb gets special characters, probably because of the white spaces between the letters.

Steps to Reproduce (for bugs)

Go to https://newbalance.myvtex.com
Choose the department : "infantil" , then filter by "idade"
Wait for the page to finish loading, then reload it
The breadcrumb will be broken with special characters.

bug - >

https://ibb.co/KrKccHw
https://ibb.co/619Ct7P

Your Environment

Windows 7
Chrome 75

Breadcrumb links rendered incorrectly

While navigating the site on worldshopping.myvtex.com we're seeing an issue when the user clicks on the breadcrumbs. Using the navigation menu the URLs for the departments/categories are correct. If I use the breadcrumbs to navigate the URL for the department are incorrect.

Expected Behavior

The breadcrumb links rendered should be department/category links.

Current Behavior

The breadcrumb links render a label-specific link, including spaces.

Steps to Reproduce (for bugs)

Navigate to a PDP.
Click any breadcrumb link.

Context

One of our SIs has reported this issue affecting a theme they are building. I'm opening up an issue for them since I was able to reproduce the issue on our internal demo environment.

Separator Icon missing customization

There is no option to change icon from caret arrow to anything else. How do i change this?

Expected Behavior

A prop should exist, "separatorIcon": ["text", "icon", "custom"]

Current Behavior

no option of changing

Context

My client wants dash instead of arrow.

Slugs 404 with '/d' on breadcrumb loading

Describe the bug
The breadcrumb initially appears with category slugs ending in '/d'. When the page finishes loading, these slugs are removed, but Google can still read these links.

To Reproduce
Steps to reproduce the behavior:

Go to '...'
Click 'Stop Load' when the breadcrumb is long
See the error

Expected behavior: The breadcrumb should remain consistent before and after loading.

Screenshots

Desktop environment:

Device: Laptop Lenovo
OS: Windows 11
Browser: Google Chrome

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.