I have product title with this standard: "Brand name - item title" and I need to transform this string like this:
Brand name
item title
So I need 2 things to handle: replace the first dash in the string with "br" and apply bold to the text before the first dash.
I have reached only the first part of the goal with this code:
<a class="product-item-link primabold-category" href="<?php echo $_product-> getProductUrl() ?>">
<?php echo str_replace(' - ', '<br />', $_helper->productAttribute($_product, $_product->getName() , 'name')); ?></a>
and this CSS:
.primabold-category::first-line { font-weight: 900; font-size: 14px; letter-spacing: 0px;}
But the result is not as expected because it "bold" only the first line, even if the text before the dash is on two lines..
Here a real title example:
POLO RALPH LAUREN - Camicia donna in Oxford azzurro
expected result:
POLO RALPH LAUREN
Camicia donna in Oxford azzurro
As you can see from the picture, when I'm on mobile view, "lauren" is on the second line and it's not bold :(
--> I have found a javascript that suits the expected result:
<a class="ProductList-title primabold-category" style="font-weight: 100;">Polo ralph lauren - T-shirt oudspeaker</a> <script> function changeBrandName() { var prodList = document.querySelectorAll("a.primabold-category"); for (var i = 0; i < prodList.length; i++) { var text = prodList[i].innerText; var index = text.indexOf('-'); var lower = text.substring(0, index); var higher = text.substring(index + 1); prodList[i].innerHTML = lower.bold() + '<br />' + higher; } } changeBrandName(); </script>
BUT javascript is not fired anytime the layered navigation load new lines of products, so I think that using PHP would be the perfect solution, if possibile.
` …? (And remove the CSS again, `::first-line` won’t work properly for your purposes, if you can not force the first part to be on one single line in the first place.) – 04FS Sep 28 '20 at 12:32