how does magento generate the content of store link (block name=store.links )in the mobile view

Question

in file /vendor/magento/theme-frontend-blank/Magento_Theme/layout/default.xml, there is a block name store.links nested inside navigation.sections, which is used for the mobile view to show those account links. Can any one tell me how does those links are generated?

I have this question because I wrapped the header.links (account links) into my new block and move it from its original place of header.panel into header-wrapper (the one container the logo and search box originally). After changes, i noticed those links which should show under the navigation.sections ( tab name = Account), are not more showing. Any idea or direction i have to look in? thanks in advance.

Answer 1

here is my answer and hope can be a little help for those who are new to magento2.

//vendor/magento/theme-frontend-blank/web/js/theme.js

there is a line

$('.panel.header> .header.links').clone().appendTo('#store\.links');

if .header.links is moved to block other than .panel.header or even is wrapped in a new div, the above line is required to be updated to. for my case, it should be like

$('.header.content>.star-customer-login-links> .header.links').clone().appendTo('#store\.links');

This is the solution for this issue. but there may be another place have to be updated too. it's

/vendor/magento/theme-frontend-blank/web/js/navigation-menu.js

• LucScu: thx very much, you SAVE ME! in my magento 2.0.2 the line is $('.panel.header > .header.links').clone().appendTo('#store\\.links');. Do you know why they use \\? I understood that it was a javascript trick, but i searched always for "store.links"! :(
• Nero: sorry, i don't know the purpose of double backward slash neither. Btw, there are double slash in my 2.0.4 installation. it's the copy and paste mistake in my answer.
• Sejal Shah: This works when user is not logged in. But breaks after logging in. Anything I am missing? I did change in the navigation-menu.js but no luck. Can you please tell me the exact place to change the class?
• P. Kouvarakis: @LucScu: #store.links is an element id. However in a CSS selector the dot (.) is used to denote a class selector. If you were to write #store.links in CSS you would select an element with id store and a class links. Instead you want an element with id store.links so the selector would be #store\.links (i.e. the dot is escaped). Since this selector is inside a javascript string literal and backslash is a special character for javascript, it has to be escaped as well, thus the double backslash.
• LucScu: Thx you very much, is it clear