Breadcrumb Navigation beim Design New York

Hallo Zusammen

ich suche eine Möglichkeit, um mit dem Design New York das wir benutzen, die Breadcrumb Navigation einzuschalten. 

Finde aber keine Möglichkeit und wüsste auch nicht, wo ich das allenfalls manuell ändern könnte.

Kann mir Jemand bei dem Problem helfen?

Liebe Grüsse

Yann

www.moebel-peter.ch

Hallo Yann,

bitte immer von allen zu ändernden Dateien eine Sicherungskopie machen.

Des Weiteren solltest du dir für die zu ändernden Dateien Administratorrechte einräumen, damit du die die zu ändernden Dateien auch in deinem Designorder „NewYork“ speichern kannst.

Noch an etwas denken, wenn du ccml-Dateien änderst, das Siquando geschlossen sein muss.

So, nun geht’s los:

Öffne die config.ccml im Designordner „NewYork“ und füge nach den Schriften eine neue Zeile ein:

<cc:property id="design.youarehere" caption="Sie sind hier-Navigation" folder="Design" targettype="site" type="boolean" default="1">

Speichere die Änderung.

Nun öffnest du die page.ccml und fügst vor:

<cc:if cond="&page.content.caption">
<div class="sqrpara">
<h1><cc:print value="&page.content.caption"></h1>
</div>
</cc:if>

Eine neue Zeile mit:

<cc:if cond="&site.properties.design.youarehere">
<div class="sqrpara" style="margin-bottom: 20px">
<div id="sqrbreadcrumbs">
<cc:print value="&site.ressource.youarehere">:
<a href="<cc:print value="&home.url">"><cc:print value="&site.ressource.home"></a>
<cc:if cond="&page.maintopic.number">
&raquo; <a href="<cc:print value="&page.maintopic.url">"><cc:print value="&page.maintopic.caption"></a>
</cc:if>
<cc:if cond="&page.topic.number">
&raquo; <a href="<cc:print value="&page.topic.url">"><cc:print value="&page.topic.caption"></a>
</cc:if>
<cc:if cond="&page.subtopic.number">
&raquo; <a href="<cc:print value="&page.subtopic.url">"><cc:print value="&page.subtopic.caption"></a>
</cc:if>
</div>
</div>
</cc:if>

Ein. Datei Speichern.

Nun öffnest du die style_content.css und fügst an beliebiger Stelle die entsprechende StyleSheet ein:

#sqrbreadcrumbs a {
	color: <cc:print value="&usercolor.medium">;
	text-decoration: none;
}

#sqrbreadcrumbs a:hover {
	color: <cc:print value="&usercolor.dark">;
	text-decoration: none;
}

#sqrbreadcrumbs {
	/* Abstand von oben */
	margin-top: 10px;
	padding: 10px 0 0 0;
	font-size:90%;
}

Der Rest, Style ist ja fast schon selbst erklärend.

Gutes Gelingen, Data

 Ciao Tomas

hey herzlichen Dank für deine Mühe. ich werde das baldmöglichst umsetzen. Danke viel mal.

liebe Grüsse

Yann vom www.moebel-peter.ch team

 Habs nun versucht, genau Schritt für Schritt.

beim Öffnen von Shop 12, kommen nun diverse Fehlermeldungen:

Die dynamische Eigenschaft "design.footertext" wurde in der Datei NewYork mit abweichenden Parametern doppelt definiert.

In Beitrag 2 wird doch auch nirgendwo eine dynamische Eigenschaft design.footertext erwähnt! Wo hast du den denn hergeholt?

naja, nach dem Abspeichern der Dateien, habe ich das Program gestartet, dann kommt unter anderem diese Fehlermeldung die aufpopt, wenn ich auf ok klicke, geht die weg, aber da muss was nicht stimmen.

Ich denke du verwendest Windows11 und den Windows eigenen Notepad. Damit wurde nämlich dein "Problem" auch bei mir in Web 12 angezeigt obwohl ich wirklich nichts in Siquando Web geändert hatte.

Ich habe darauf hin das gratis Programm Notepad++ runtergeladen und die von Data angegebenen Änderungen damit in Web 12 gemacht, Web 12 gestartet und schon werden mir die Fehler auch nicht mehr gezeigt, stattdessen wird mir die Änderung wie gewünscht angezeigt (siehe Anhang)

Schermafbeelding 2026-07-01 180025.png

Hey Ihr seid unglaublich hier im Forum,

HERZLICHEN DANK für die schnelle Reaktion, darauf wäre ich tatsächlich NIE gekommen.

es ist wirklich bewundernswert wie hier geholfen wird.

Herzlichen Dank

LG Yann

 ich habe es nun so gemacht, hat geklappt. 
gemäss copilot, reicht es so aber als bredcrumb nicht für google, auch im search richt test wird es nicht erkannt.

habt Ihr eine Idee wieso?

Beispiel

Balkenbett Cali Carma

Ja, ich denke schon dass ich weiß warum.

Weil die Tags <nav>, <ol>, <ul> und <li> für die Navigation fehlen, bzw. nicht verwendet wurden, Beispiel:

<nav id="breadcrumb" aria-label="Sie sind hier">
 <ol>
  <li><a href="/">Startseite</a></li>
  <li><a href="/unterseite1/">Unterseite1</a></li> 
  <li><a href="/unterseite1/weitereseite/">WeitereSeite</a></li>
	<li><a href="/unterseite1/weitereseite/nocheineseite/">NochEineSeite</a></li>
  <li><strong>Breadcrumbsnavigation</strong></li>
 </ol>
</nav>

Das ist nur ein Beispiel und soll NICHT den Code ersetzen, also nicht so verwenden.

Hi Thomas

gibt es eine möglichkeit das anzupassen, damit es für Google dann auch sinn macht?

Eigentlich schon erstaunlich, das diese Funktion nicht fix im Program integriert ist.

LG Yann

Hallo Yänn,

natürlich kann man den Code im Beitrag #2, der in die Datei page.ccml kopiert wird entspechend anpassen bzw. ergänzen, wenn sich die Zeit findet dies zu tun. Bin gerade unterwegs und hab gerade kein Zugriff auf die Software bzw Design.

Die Erstellung der Seite ist davon abhängig, was und wie das Design (in diesm Fall in der page.ccml) programmiert ist, die Software macht also das was im jeweiligen Design steht und nicht allgemein das Programm für alle Design. Nicht in alle Design macht so ein Breadcrumb-Navigation Sinn oder ist nicht gewollt. Heißt also du musst das umgekehr betrachten, eher erstaunlich, dass dies nicht im Design umgesetzt worden ist.

 Hey Thomas

dankeschön, ja pressiert nicht, bin jetzt dann so oder so ein paar Tage auch nicht am PC.
man verucht halt so gut wie möglich Google zu gefallen

Liebe Grüsse

Yann

Hier mal mein Beispiel als Vorschlag, man kann ja gestalterisch alles Mögliche machen, aber ich haben mich einigermaßen an die Vorgabenlinie von Data gehalten, jedoch "class" anstatt "id" verwendet. Somit kannst du auch beides gerne direkt auf einer Seite unabhängig voneinander vergleichen und kommemn sich nicht in die Quere.

Datei: config.ccml -> ändert sich nichts:

<cc:property id="design.youarehere" caption="Sie sind hier-Navigation" folder="Design" targettype="site" type="boolean" default="1">

Datei: page.ccml ersetzen durch (oder zum Vergleich darüber oder darunter ergänzen):

<cc:if cond="&site.properties.design.youarehere">
<div class="sqrpara" style="margin-bottom: 20px">
<nav class="breadcrumbs">
<cc:print value="&site.ressource.youarehere">:
<ol>
<li><a href="<cc:print value="&home.url">"><cc:print value="&site.ressource.home"></a></li>
<cc:if cond="&page.maintopic.number">
&raquo; <li><a href="<cc:print value="&page.maintopic.url">"><cc:print value="&page.maintopic.caption"></a></li>
</cc:if>
<cc:if cond="&page.topic.number">
&raquo; <li><a href="<cc:print value="&page.topic.url">"><cc:print value="&page.topic.caption"></a></li>
</cc:if>
<cc:if cond="&page.subtopic.number">
&raquo; <li><a href="<cc:print value="&page.subtopic.url">"><cc:print value="&page.subtopic.caption"></a></li>
</cc:if>
</ol>
</nav>
</div>
</cc:if>

Datei: style_content.css ersetzen durch (oder zum Vergleich darüber oder darunter ergänzen):

.breadcrumbs {
 color: <cc:print value="&usercolor.dark">;
}

.breadcrumbs > ol {
 display: inline-flex;
 list-style: none;
 color: <cc:print value="&usercolor.dark">;
}

.breadcrumbs ol > li {
 margin-right: 2px;
 margin-left: 2px;
}

.breadcrumbs ol > li + li {
 margin-right: 2px;
 margin-left: 2px;
}

.breadcrumbs ol > li a[href] {
 text-decoration: none;
 position: relative;
 color: <cc:print value="&usercolor.dark">;
}

.breadcrumbs ol > li a[href]:hover,
.breadcrumbs ol > li a[href]:focus {
 color: <cc:print value="&usercolor.medium">;
}

Ich habe die Farben "medium" und "dark" umgedreht, aber wenn es dir anders herum besser gefällt, dann kannst diese auch wieder zurückwechseln.

Natürlich kann man gestalterisch auch im "style_content.css" weiters erweitern, aber eine "Breadcrumbs-Navigation" sollte so einfach und verständlich wie möglich sein, vor allem für Google.
Hoffe Google gefällt das besser, habs jetzt dahingegend nicht getestet, sondern nur an die html Vorgaben von Google gehalten.

Hey Thomas

DANKE.

Werde es Testen wenn ich wieder um Büro bin.

Falls du mal in der Nähe Zofingen/CH bist, komm gerne auf ein Kaffee vorbei.

Lg Yann