Product title formatting issue.

Site URL: http://www.parade-books.com

Hi,

I am having some trouble with my product title consistency.

On the main page my product titles show perfectly with the formatting used but when the item is clicked the text changes to one long line and doesn't take into account the line breaks. Is there a way to keep the formatting like the main page?

See screen shots for a clearer explanation.

Here is the formatting used in the product page

Liz Johnson Artur<br>
<I>Liz Johnson Artur</I><br>
1st Edition, 2016<br>
Bierke

Here is the url and pass:

http://www.parade-books.com

huglin

Thank you 

1 hour ago, bigrick said:

I am having some trouble with my product title consistency.

On the main page my product titles show perfectly with the formatting used but when the item is clicked the text changes to one long line and doesn't take into account the line breaks. Is there a way to keep the formatting like the main page?

This appears to be a new bug. But the issue is the opposite of what you want!

If everything were working correctly, you would not be able to add HTML to Product Titles. It would normally be stripped out when you save the product, but this is not currently working on Squarespace 7.0. This means that the HTML formatting is wrongly appearing on the Product List page. It should be like Product Detail page.

Oh I see, interesting.

Is there a way to make this work at all? Would there be a css code for it?

Thanks

CSS can't do that kind of formatting.

Javascript can be used to reformat the text. You'd need to establish a pattern that the code can then parse into the final format you want. For example in the title of the product you could do something like...

Liz Johnson Artur, Liz Johnson Artur, 1st Edition, 2016, Bierke

If the established pattern can always be followed then the code should be pretty easy to write to reformat the title. If the pattern can't always be followed then things get more complex.

Do you think this pattern reformatting would work for your needs?

7 hours ago, bigrick said:

Is there a way to make this work at all?

I provided a solution in the guide below. It uses JavaScript and follows a pattern, almost exactly like creedon described above.

https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71

Thanks so much, super helpful.

It's worked perfectly for the product page but the | show up on the main page now, see screen shot. 

Is there a way to remove the |'s on the main page too?

Thanks so much.

On 3/2/2021 at 9:53 PM, bigrick said:

Thanks so much, super helpful.

It's worked perfectly for the product page but the | show up on the main page now, see screen shot. 

Is there a way to remove the |'s on the main page too?

Thanks so much.

Hi. Have you solved this yet?

No, I can't find a way to remove the lines from the main page....

Is there some slight issue with the code?

On 3/2/2021 at 2:53 PM, bigrick said:

Is there a way to remove the |'s on the main page too?

Hey @bigrick. Squarespace changed the classes (again!) since my guide was written. If you change the sfProdListTitle line at the beginning of the code to the following (see below), it should work as expected.

var sfProdListTitle = '.ProductList h1.ProductList-title';

I'll update the guide for the benefit of others.

Ah brilliant! THANK YOU SO MUCH!