Hallo Karl
[...]
Wen das stört, der kann das mit etwas CSS ganz individuell für seinen Shop lösen.
[...]
Also das Problem mit den springenden TOP-Artikel und Bestseller Slidern habe ich jetzt ein wenig genauer angeschaut, und bin zum Schluss gekommen, dass es nur mit CSS und oder dem Smarty truncate-Modifier nicht befriedigend zu lösen ist.
Mit CSS gibt es eigentlich nur die Lösung mit "text-overflow: ellipsis;" das funktioniert aber, wie noRiddle schon schrieb, nur einzeilig, und den Smarty truncate-Modifier kann man nicht gut einsetzen weil man einen Text damit nur auf eine bestimmte Zeichenzahl kürzen kann, die Boxen (Cards) aber variabel in der Breite sind, näheres siehe Bilder.
[ Für Gäste sind keine Dateianhänge sichtbar ]
[ Für Gäste sind keine Dateianhänge sichtbar ]
Hier mein JavaScript (jQuery) Lösungsvorschlag:
Am Ende der Datei templates\bootstrap4\javascript\general_bottom.js.php fogenden Code einfügen.
<script>
//Codebasis -> https://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide
(function($) {
'use strict';
$.fn.ellipsis = function()
{
return this.each(function()
{
var el = $(this),
lh = parseInt(el.css('line-height')),
attr = el.attr('data-lines'),
lines = (typeof attr !== typeof undefined && attr !== false) ? el.attr('data-lines') : '1',
text = el.html();
el.css({'height': (lh * lines) + 5, 'overflow': 'hidden'});
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(el.width())
.height('auto')
;
el.after(t);
function height() { return t.height() > el.height(); };
if (height()) { el.attr('title', text) }
while (text.length > 0 && height())
{
text = text.substr(0, text.length - 1);
t.html(text + '<span style="color:red;">...</span>');
}
el.html(t.html());
t.remove();
});
};
})(jQuery);
$(document).ready(function() {
$("#topCarousel .lb_title, #bsCarousel .lb_title").ellipsis();
$("#topCarousel, #bsCarousel").on('slid.bs.carousel', function ()
{
$("#topCarousel .lb_title, #bsCarousel .lb_title").ellipsis();
})
});
</script>
Dann in der Datei \templates\bootstrap4\module\new_products_default.html ca. Zeile 38 folgenden Code
<h2 class="lb_title lead text-secondary mt-1 mb-0">{$box_data.PRODUCTS_NAME}</h2>
mit diesem ersetzen
<h2 class="lb_title lead text-secondary mt-1 mb-0" data-lines="2">{$box_data.PRODUCTS_NAME}</h2>
und in der Datei templates\bootstrap4\boxes\box_best_sellers.html ca. Zeile 33 folgenden Code
<div class="lb_title lead text-secondary mt-1 mb-0">{$box_data.PRODUCTS_NAME}</div>
mit diesem erstzen.
<div class="lb_title lead text-secondary mt-1 mb-0" data-lines="2">{$box_data.PRODUCTS_NAME}</div>
Die Zahl im Attribut "data-lines" legt die Zeilenanzahl für den Produktnamen fest. Wer also in seinem Shop generell längere Produktnamen verwendet gibt dort eine 2 oder eine 3 ein, wer generell kurzen Produktnamen verwedet eine 1.
PS:
Getestet habe ich mit IE11, Edge, Chrom, Firefox und Opera auf Windows10 Desktop,
und hier ist der Code eingebaut ->
https://hpzeller.com/modified2050/Gruss
Hanspeter
