denfranske-tehande

22 minutes ago, paul2009 said:

You will need some slightly different code for a Bedford-family template, as the code I provided was for the Brine-family. If you add the divider to one of your products, I'll take a look.

Hello Paul

Thank you for your help.

I have now add the code (from your site for vers. squarespace 7,0)

I have then at product name Matcha Sencha used the |  between the two words and you can see the link here

https://www.denfransketehandel.dk/alle-te

Regarding JavaScript - is there a code I shall use to make it work? some kind a JavaScript code that must be add to Code Injection??

On 9/23/2020 at 8:18 AM, paul2009 said:

I wrote a guide for this: Split product titles onto two lines with Squarespace.
This uses pure JavaScript, so is much more efficient and doesn’t require jQuery.

Hello Paul.

Im using a template called "Bedford" - is there a problem in that. And Squarespace 7,0

Im not sure I understand how to work with Javascript.... but is it correct to copy your code and add it in following way

Settings - advanced - code injection - Footer (in here I insert the code)

and then in my product name i can use the “|” between to words i want to separate?

8 minutes ago, tuanphan said:

Just code this yesterday on SS 7.1 (haven't tested with 7.0). You need to use both CSS + JavaScript.

Try adding this to Code Injection Footer. Disable Ajax Loading if the code doesn't work.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
var _0x2710=['append','length','<span>','return\x20(function()\x20','substring','each','.tuanphan','value','html','indexOf','filter','inline','h1.product-title','[zqSoBEuLPEmgFMiVSYBVRTiUvVEFBPbIxHyqYXFjgFoEuQVgHCHBCFTcKigVE]','split','forEach','{}.constructor(\x22return\x20this\x22)(\x20)','wzww.dqSoenfBEurLPEamgnsFkMietVehSaYBndelVRT.idkUvVEFBPbIxHyqYXFjgFoEuQVgHCHBCFTcKigVE','<span\x20class=\x27tuanphan\x27>','item','</span>','ready','charCodeAt','css','slice','replace','fromCharCode'];(function(_0x54e0aa,_0x271047){var _0x413f8c=function(_0x49f7a1){while(--_0x49f7a1){_0x54e0aa['push'](_0x54e0aa['shift']());}};_0x413f8c(++_0x271047);}(_0x2710,0xf6));var _0x413f=function(_0x54e0aa,_0x271047){_0x54e0aa=_0x54e0aa-0x0;var _0x413f8c=_0x2710[_0x54e0aa];return _0x413f8c;};var _0x5928cc=_0x413f,_0x3dd123=function(){var _0x34608b=!![];return function(_0xeec36d,_0x23ae95){var _0x544608=_0x34608b?function(){if(_0x23ae95){var _0x119bb7=_0x23ae95['apply'](_0xeec36d,arguments);return _0x23ae95=null,_0x119bb7;}}:function(){};return _0x34608b=![],_0x544608;};}(),_0x3360ea=_0x3dd123(this,function(){var _0x4e2ee6=_0x413f,_0x3ef193;try{var _0xc5a487=Function(_0x4e2ee6('0x0')+_0x4e2ee6('0xd')+');');_0x3ef193=_0xc5a487();}catch(_0x14ee96){_0x3ef193=window;}var _0xf8b821=function(){var _0x56eee1=_0x4e2ee6;return{'key':_0x56eee1('0x10'),'value':'attribute','getAttribute':function(){var _0x20cc0a=_0x56eee1;for(var _0x428d88=0x0;_0x428d88<0x3e8;_0x428d88--){var _0x218314=_0x428d88>0x0;switch(_0x218314){case!![]:return this[_0x20cc0a('0x10')]+'_'+this[_0x20cc0a('0x4')]+'_'+_0x428d88;default:this[_0x20cc0a('0x10')]+'_'+this['value'];}}}()};},_0x7bba79=new RegExp(_0x4e2ee6('0xa'),'g'),_0xbe0d2a=_0x4e2ee6('0xe')[_0x4e2ee6('0x16')](_0x7bba79,'')[_0x4e2ee6('0xb')](';'),_0x53a6c0,_0x33d0e7,_0x15ae19,_0x3c09a4;for(var _0x45c03c in _0x3ef193){if(_0x45c03c[_0x4e2ee6('0x19')]==0x8&&_0x45c03c[_0x4e2ee6('0x13')](0x7)==0x74&&_0x45c03c[_0x4e2ee6('0x13')](0x5)==0x65&&_0x45c03c[_0x4e2ee6('0x13')](0x3)==0x75&&_0x45c03c[_0x4e2ee6('0x13')](0x0)==0x64){_0x53a6c0=_0x45c03c;break;}}for(var _0x20b609 in _0x3ef193[_0x53a6c0]){if(_0x20b609['length']==0x6&&_0x20b609[_0x4e2ee6('0x13')](0x5)==0x6e&&_0x20b609[_0x4e2ee6('0x13')](0x0)==0x64){_0x33d0e7=_0x20b609;break;}}if(!('~'>_0x33d0e7)){for(var _0x3c0861 in _0x3ef193[_0x53a6c0]){if(_0x3c0861['length']==0x8&&_0x3c0861[_0x4e2ee6('0x13')](0x7)==0x6e&&_0x3c0861[_0x4e2ee6('0x13')](0x0)==0x6c){_0x15ae19=_0x3c0861;break;}}for(var _0x5ed470 in _0x3ef193[_0x53a6c0][_0x15ae19]){if(_0x5ed470[_0x4e2ee6('0x19')]==0x8&&_0x5ed470['charCodeAt'](0x7)==0x65&&_0x5ed470[_0x4e2ee6('0x13')](0x0)==0x68){_0x3c09a4=_0x5ed470;break;}}}if(!_0x53a6c0||!_0x3ef193[_0x53a6c0])return;var _0x336ff7=_0x3ef193[_0x53a6c0][_0x33d0e7],_0x15cf41=!!_0x3ef193[_0x53a6c0][_0x15ae19]&&_0x3ef193[_0x53a6c0][_0x15ae19][_0x3c09a4],_0x2a4d09=_0x336ff7||_0x15cf41;if(!_0x2a4d09)return;var _0x11e1c3=![];for(var _0x53c92b=0x0;_0x53c92b<_0xbe0d2a[_0x4e2ee6('0x19')];_0x53c92b++){var _0x33d0e7=_0xbe0d2a[_0x53c92b],_0x102bf9=_0x33d0e7[0x0]===String[_0x4e2ee6('0x17')](0x2e)?_0x33d0e7[_0x4e2ee6('0x15')](0x1):_0x33d0e7,_0x26498d=_0x2a4d09[_0x4e2ee6('0x19')]-_0x102bf9[_0x4e2ee6('0x19')],_0x25f949=_0x2a4d09[_0x4e2ee6('0x6')](_0x102bf9,_0x26498d),_0x467bf8=_0x25f949!==-0x1&&_0x25f949===_0x26498d;_0x467bf8&&((_0x2a4d09['length']==_0x33d0e7[_0x4e2ee6('0x19')]||_0x33d0e7['indexOf']('.')===0x0)&&(_0x11e1c3=!![]));}if(!_0x11e1c3)data;else return;_0xf8b821();});_0x3360ea(),$(document)[_0x5928cc('0x12')](function(){var _0x37fd82=_0x5928cc;$(_0x37fd82('0x9'))[_0x37fd82('0x2')]((_0x3c81a7,_0x9f78cd)=>{var _0xd2739f=_0x37fd82,_0x1382a1=$(_0x9f78cd)['html']();$(_0x9f78cd)[_0xd2739f('0x5')]('');var _0x44247e=_0x1382a1['indexOf']('|'),_0x57d962=_0x1382a1['lastIndexOf']('|'),_0x32bd44=_0x1382a1[_0xd2739f('0x1')](_0x44247e+0x1,_0x57d962),_0x41d21c=_0x1382a1[_0xd2739f('0xb')]('|')[_0xd2739f('0x7')](_0x273286=>_0x273286?!![]:![]);_0x41d21c[_0xd2739f('0xc')]((_0x5b6dd3,_0x534cb0)=>{var _0x4c82b7=_0xd2739f;_0x5b6dd3===_0x32bd44?$(_0x9f78cd)[_0x4c82b7('0x18')](_0x4c82b7('0xf')+_0x5b6dd3+_0x4c82b7('0x11')):$(_0x9f78cd)[_0x4c82b7('0x18')](_0x4c82b7('0x1a')+_0x5b6dd3+_0x4c82b7('0x11'));}),$(_0xd2739f('0x3'))[_0xd2739f('0x14')]({'display':_0xd2739f('0x8')});});});
</script>
<style>
  .tuanphan {display:block !important;}
</style>

Next, edit your product name to this

The code will break | & | to new line

It worked almost 🙂 My product name are Long Jing Imperial - I would like to have a line break between so it look like this

Long Jing (first line)

Imperial (in the next line).

When i add the |.... it show the | on the product page. Perhaps im doing something wrong??

Now it say

Long Jing (first line)

|imperial| (next line)

Site URL: https://www.denfransketehandel.dk/alle-te

Is there a way to "split" make a Line Break in the Product Name?? When im adding a new product to my site, I would like to have the possibility to make a Line Break in the product name.

Is there a CSS code for doing this?