Streaming live at 10am (PST)

Double curly braces in custom code

I have this custom code that I want to embed on some Webflow pages, it is basically a modified Shopify BuyButton code.

When I try to run it directly on a browser it’s working just fine, but on Webflow I encounter a problem :

In several occasions I have double curly braces between to call classes names that were defined in another script (stored somewhere else and called in that one). Like this :

"templates": {
          "engraving":'<div><label for="product_note4" class="{{data.classes.product.productNoteLabel}}">Gravur</label><input maxlength="9" id="product_note4" data-propertyName="Engraving" class="{{data.classes.product.productNote}}" type="text" aria-label="Note" value="{{data.productNote}}" data-element="product.noteInput"></input></div>'

In this, productNoteLabel and productNote are defined in the external script.

However it seems that double curly braces are not allowed/properly processed by the code editor, as they always appear marked in red.

And when publishing the changes, opening the page, and checking the source, the class name is completely missing and the input is just a simple empty box (instead of being of the externally defined class) :

<div><label for="product_note4" class="">Gravur</label><input maxlength="9" id="product_note4" data-propertyname="Engraving" class="" type="text" aria-label="Note" value="" data-element="product.noteInput"></div>

Now, when adding a collection field through the webflow editor then copy-pasting the code to a text editor, the collection field looks like this

'{{wf {&quot;path&quot;:&quot;brand:shopify-store-link&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}'

Could it be that the syntax "{{xyzxyzxyz}}" is reserved for webflow fields, and thus deemed invalid by the editor?


Try to use escape HTML (**No way to test if this solve your problem)

Escapes or unescapes an HTML file removing traces of offending characters that could be wrongfully interpreted as markup.

"templates": {
"engraving": "&lt;div&gt;&lt;label for=&quot;product_note4&quot; class=&quot;{{data.classes.product.productNoteLabel}}&quot;&gt;Gravur&lt;/label&gt;&lt;input maxlength=&quot;9&quot; id=&quot;product_note4&quot; data-propertyName=&quot;Engraving&quot; class=&quot;{{data.classes.product.productNote}}&quot; type=&quot;text&quot; aria-label=&quot;Note&quot; value=&quot;{{data.productNote}}&quot; data-element=&quot;product.noteInput&quot;&gt;&lt;/input&gt;&lt;/div&gt;"
1 Like

So escaping the character like this worked : "\{\{xyzxyzxyz}}"
The braces are correctly handled.