Breadcrumbs dinâmicos do Shopify

{ % atribuir exclude_link = 'índice, carrinho, lista-coleções' | dividir : ',' % }
 { % seta de captura % } 
{ % seção de caso . configurações . seta % }
 { % quando "caret" % } 
< svg ária - oculto = "true" focusable = "falso" role = "apresentação" class = "ícone ícone-caret" viewBox = "0 0 10 6" style = "largura: 10px; transformar: girar (-90deg) traduzirX (2px)" > 
< preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4- 4a.5.5 0 000-.708z" fill = "currentColor" > 
</svg> _
 { % quando "emoji_arrow_1" % }
 ➡️
 { % quando "emoji_arrow_2" % }
 ➤ 
{ % quando "emoji_arrow_3" % }
 🡆
 { % quando "emoji_arrow_4" % }
 ➪ 
{ % quando "emoji_arrow_5" % }
 🢂
 { % quando "emoji_arrow_6" % }
 ▷ 
{ % quando "play_arrow" % } 
< svg xmlns = "http://www.w3.org/2000/svg" ária - oculto = "true" focusable = "false" role = "presentation" class = "icon icon-play" fill = "none" viewBox = "0 0 10 14" estilo = "largura: 8px;" >< preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M1.48177 0.814643C0.81532 0.448245 0 0.930414 0 1.69094V12.2081C0 12.991 0.858787 13.4702 1.52503 13.0592L10.5398 7.49813C11.1918 7.09588 11.1679 6.13985 10.4965 5.77075L1.48177 0.814643Z" fill = "currentColor" /></ svg > 
{ % final % }
 { % captura final % }
 <estilo> _ 
. pão ralado svg. ícone . ícone - cursor {
 largura : 10px ; 
transformar : girar ( -90deg ) traduzirX ( 2px ) ;
 }
 . migalhas de pão { 
tipo de estilo de lista : nenhum ;
 margem : 0 ;
 preenchimento : 0 ;
 }
 . migalhas de pão li { 
display : bloco embutido ;
 }
 . migalhas de pão - casa ,
 . localização atual -- link {
 posição : relativa ; 
decoração de texto : nenhuma ;
 cor : cor atual ;
 }
 . pão ralado -- home :: depois , 
. breadcrumbs -- link :: depois {
 contente : "" ;
 largura : 102 %; 
borda inferior : 1px sólido ;
 posição : absoluta ;
 inferior : 0 ;
 esquerda : - 1px ; 
opacidade : 0 ;
 }
 . breadcrumbs - home : hover : depois , 
. breadcrumbs -- link : hover :: depois de {
 opacidade : 1 ;
 } 
. breadcrumbs : not ( : last - child ) span {
 texto - sublinhado - deslocamento : 0,3rem ;
 } 
. breadcrumbs : not ( : last - child ) span : hover {
 decoração de texto : sublinhado ; 
transição : decoração de texto com facilidade de 0,2s ;
 }
 </ estilo >
 { % a menos que exclude_link contenha modelo . nome % } 
< div
 class = "breadcrumb - largura da página do contêiner"
 style = "color: {{ section.settings.text_color }} ; padding-top: {{ section.settings.padding_top }} px; padding-bottom: {{ section.settings.padding_bottom }} px;"
 > 
< nav class = "breadcrumbs" role = "navigation" aria - label = "breadcrumbs" > 
<a class = "breadcrumbs--home breadcrumbs--link" href="/pt" title = "Home" > { { seção . _ _ _ _ _ _ configurações . home_text } } </ a > 
{ { seta } }
 { % modelo de caso . nome % } 
{ % quando 'página' % } 
< span > { { página. título } } </ span >
 
{ % quando 'produto' % } 
{ % atribuir coleção_atribuída = produto. metacampos . personalizado . coleção_atribuída . valor % } 
< breadcrumb - link data - Collection = " {% if assigned_collection != blank %} true {% else %} false {% endif %} " > 
<a class = "breadcrumbs--product breadcrumbs--link" href = "{{signed_collection.url }}" > _ _ _ _ {{ assigned_collection.url }} _
 { { coleta_atribuída. título } } 
</a> _
 { { seta } }
 < script id = "breadcrumb_obj" type = "application/ld+json" > 
{
 { % para coleção em coleções % }
 " {{collection.handle}} " :
 { 
"nome" : " {{ collection.title }} " ,
 "url" : " {{collection.url}} "
 } 
{ % a menos que forloop. último % } , { % endunless % } 
{ % fim para % }
 }
 </roteiro> _
 </ localização atual - link > 
< span > { { produto. título } } </ span >
 
{ % quando 'coleção' % } 
< span > { { coleção. título } } </ span >
 
{ % quando 'artigo' % } 
<a href = "{{ blog.url }} " class = "breadcrumbs--product breadcrumbs--link" title = "{{ blog.title }} " > _ {{ blog.url }} _ _ _ _ {{ blog.title }} _ 
{ { -blogue . título - } }
 </a> _ 
{ { seta - } } 
< span > { { artigo. título } } </ span >
 { % final % } 
</nav> _
 </div> _ _
 { % sem fim % }
 <roteiro> _
 classe BreadcrumbLink estende HTMLElement { 
construtor ( ) {
 super ( ) ;
 esse . link anterior = documento. referenciador ; 
esse . obj = isso . querySelector ( "#breadcrumb_obj" ) . texto interno ; 
esse . analisadoObj = JSON. analisar ( este.obj ) ; _ 
esse . atualizarLink ( ) ;
 }
 atualizarLink ( ) { 
if ( este . prevLink . inclui ( 'coleções' ) ) { 
const paramLink = isto . anteriorLink . dividir ( "?" ) [ 0 ] ; 
const _handle = paramLink. dividir ( "/" ) ;
 console. log ( "manuseio" , _handle ) 
const identificador = _handle [ _handle. comprimento - 1 ] ; 
const colObj = this . analisadoObj [ identificador ] 
const produto = isto . querySelector ( '.breadcrumbs--produto' ) 
const urlParams = novo URLSearchParams ( este . prevLink ) 
produtos. href = isto . link anterior ;
 produtos. innerHTML = colObj. nome ;
 } outro { 
console. log ( este . conjunto de dados . coleção ) 
if ( este . conjunto de dados . coleção == 'falso' ) { 
esse . estilo . exibir = 'nenhum'
 }
 }
 }
 } 
elementos personalizados. define ( 'breadcrumb-link' , BreadcrumbLink ) ;
 </roteiro> _
 { % esquema % }
 { 
"name" : "Seção de localização atual" ,
 "configurações" : [
 {
 "tipo" : "cor" , 
"id" : "text_color" ,
 "padrão" : "#000" ,
 "label" : "Cor do texto"
 } , 
{
 "tipo" : "texto" ,
 "id" : "home_texto" ,
 "label" : "Texto inicial" , 
"default" : "🏠 Página inicial" ,
 "info" : "Você pode usar emoji com texto"
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "padding_top" ,
 "min" : 0 , 
"máximo" : 100 ,
 " passo 2 ,
 "unidade" : "px" , 
"label" : "Preenchimento superior" ,
 "padrão" : 36
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "padding_bottom" ,
 "min" : 0 , 
"máximo" : 100 ,
 " passo 2 ,
 "unidade" : "px" , 
"label" : "Preenchimento inferior" ,
 "padrão" : 36
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "seta" ,
 "opções" : [
 { 
"valor" : "caret" ,
 "rótulo" : "Seta"
 } ,
 { 
"valor" : "emoji_arrow_1" ,
 "rótulo" : "Seta 1"
 } ,
 { 
"valor" : "emoji_arrow_2" ,
 "rótulo" : "Seta 2"
 } ,
 { 
"valor" : "emoji_arrow_3" ,
 "rótulo" : "Seta 3"
 } ,
 { 
"valor" : "emoji_arrow_4" ,
 "rótulo" : "Seta 4"
 } ,
 { 
"valor" : "emoji_arrow_5" ,
 "rótulo" : "Seta 5"
 } ,
 { 
"valor" : "emoji_arrow_6" ,
 "rótulo" : "Seta 6"
 } ,
 { 
"valor" : "play_arrow" ,
 "rótulo" : "Seta 7"
 }
 ] , 
"padrão" : "caret" ,
 "label" : "Estilo de seta" ,
 "info" : "A seta pode aparecer de forma diferente dependendo do dispositivo"
 } 
] ,
 "predefinições" : [
 {
 "name" : "Seção de localização atual"
 }
 ]
 } 
{ % termina o esquema % }