Seite 1 von 1

[3.2] Latte - Counter Badge

Verfasst: 27.06.2019 19:38
von Neverlands
Hallo,

ich verwende das Theme Latte.
Forum: Pendragon

Ich möchte für einen Navigations-Tab einen Counter anzeigen, der genauso wie z.B. der Private Messages Counter aussehen soll:
[ externes Bild ]

Die Zahl (".bubble" Span) für den Counter lade ich über die overall_header.html von einer, in das Forum integrierten Software EQDKP-PLUS, in den ".counter.auction-count" Span der navbar_header.html:

Code: Alles auswählen

<script> 
	$(function (){
	  $(".auction-count").load("/eqdkp_plus/Guildbank.html .bubble");
	});
</script>
So sieht das Ergebnis der navbar_header.html aus:

Code: Alles auswählen

<li class="tab auktionen responsive-hide non-zero selected" data-responsive-class="small-icon icon-gavel" data-select-match="auktionen" data-responsive-index="-1">
	<a class="nav-link" href="/auktionen">Auktionen</a>
	<strong>
		<span class="counter auction-count"><span class="bubble">1</span></span>
		<span class="arrow"></span>
	</strong>
</li>
Leider wird der Counter auf diese Weise auch dann angezeigt, wenn die Zahl 0 ist.

Meine Frage ist, wie ich für die jeweilige Zahl aus dem ".bubble" Span eine "Variable" erstellen kann, die ich konform zu {PRIVATE_MESSAGE_COUNT} verwenden könnte:
navbar_header.html

Code: Alles auswählen

<li class="tab pm<!-- IF PRIVATE_MESSAGE_COUNT > 0 --> non-zero<!-- ENDIF -->" data-skip-responsive="true" data-select-match="pm">
	<a class="nav-link" href="{U_PRIVATEMSGS}" role="menuitem">{L_PRIVATE_MESSAGES}</a>
	<strong>
		<span class="counter">{PRIVATE_MESSAGE_COUNT}</span>
		<span class="arrow"></span>
	</strong>
</li>
Also beispielsweise so:

Code: Alles auswählen

<li class="tab auktionen responsive-hide<!-- IF AUCTION_COUNT > 0 --> non-zero<!-- ENDIF --> selected" data-responsive-class="small-icon icon-gavel" data-select-match="auktionen" data-responsive-index="-1">
	<a class="nav-link" href="/auktionen">Auktionen</a>
	<strong>
		<span class="counter auction-count"><span class="bubble">{AUCTION_COUNT}</span></span>
		<span class="arrow"></span>
	</strong>
</li>
Ich habe es auch schon mit JS in der overall_header.html versucht (".non-zero" Klasse entfernen, wenn ".bubble" Zahl = 0) aber das funktioniert nur mit fiddle, nicht im Forum selbst:

Code: Alles auswählen

<script> 
$( document ).ready(function() {
	var value = document.getElementsByClassName("bubble").innerHTML == "0";
		if (!value) {
			alert( "Test ist mindestens 1" );
		$('li.auktionen').removeAttr("title");
		} else {
			alert( "Count value is 0!" );
			$('li.auktionen > strong').remove();
			$('li.auktionen').removeClass('non-zero').removeAttr("title");
	}
});
</script>
oder

Code: Alles auswählen

<script> 
$( document ).ready(function() {
	var value = $('.bubble').text() == "0";
		if (!value) {
			alert( "Test ist mindestens 1" );
		$('li.auktionen').removeAttr("title");
		} else {
			alert( "Count value is 0!" );
			$('li.auktionen > strong').remove();
			$('li.auktionen').removeClass('non-zero').removeAttr("title");
	}
});
</script>
Leider bin ich kein Profi und stehe nun komplett an. Habt ihr einen Tip für mich?

Liebe Grüße,
Neverlands