How to use style on input field in Demandware? - templates

I want to append an image in input field in Demandware...
I am wondering to use style on Demandware's isinputfield tag, can i acheive this in Demandware Templates like on this tag
isinputfield formfield="${pdict.CurrentForms.helloform.nickname}" type="input"
Much Appreciated!

isinputfield is a custom ISML tag, implemented in template
{cartridge_name}/cartridge/templates/default/util/inputfield.isml
You can use the parameter rowClass to specify a CSS class for the surrounding div (you can actually see the code that uses this parameter in the template mentioned above)
e.g.
<isinputfield
formfield="${pdict.CurrentForms.giftcert.purchase.from}"
rowClass="label-above"
type="input" />
After that you would need to provide a CSS styling for the class you have applied.

Related

how to remove html tags in django template on browser while showing to user

As shown in figure i used {{options|safe}} for rendering options in my django 3.0 polls application even though it is rendering like that and i don't know how to remove the tags from rendered string, thanks for help in advance
regarding tag error
To remove tags, I would recommend using Mozilla's bleach library.
In order to remove tags only in the front-end, not the data itself, you can easily create a custom template filter and clean the tags inside it.
Another cool idea would be to have list of enabled HTML tags that can be used (like making text bold with <b>...</b>) and then render the input as a valid html:
{{ options|remove_tags|safe }}
Example for a custom template filter:
#register.filter
def remove_tags(value):
return bleach.clean(value, tags=["b", "i"])

Add list view to Fluid template

I've built a custom extension which displays comments for a page.
But, of course, I want to have the comments section on every page. Is there a way to add it into the Fluid template so that I won't have to add it to every single page?
Looking for something like this:
<f:blabla.bla extension="tx_comment" action="list"/>
You don't need to create your own viewhelper for this. You can use the VHS extension and use render.request
<v:render.request action="[string|NULL]" controller="[string|NULL]" extensionName="[string|NULL]" pluginName="[string|NULL]" vendorName="[string|NULL]" arguments="{foo: 'bar'}" onError="NULL" graceful="1">
<!-- tag content - may be ignored! -->
</v:render.request>
https://fluidtypo3.org/viewhelpers/vhs/master/Render/RequestViewHelper.html

how to use custom templates for same classes in field plugin, grails

For example I have 2 class:
Person {
String name
String descriptionOfPerson
}
Company {
String name
String descriptionOfCompany
}
Normally, fields plugin will use the same template /_fields/string/_field.gsp for all of them.
But I want to use /_fields/string/_field.gsp template for String name and /_fields/ckeditor/_field.gsp (to render ckeditor) for descriptionOfPerson and descriptionOfCompany
Is it possible to do like that? And how ?
As far as I know the plugin and it's documentation this is not possible without modifications on your side.
The default order in which the plugin searches for the templates is:
grails-app/views/controllerName/actionName/propertyName/
grails-app/views/controllerName/actionName/propertyType/
grails-app/views/controllerName/actionName/ (not applicable here)
grails-app/views/controllerName/propertyName/
grails-app/views/controllerName/propertyType/ (not applicable here)
grails-app/views/controllerName/ (not applicable here)
grails-app/views/_fields/class/propertyName/
grails-app/views/_fields/superclass/propertyName/
grails-app/views/_fields/associationType/ (not applicable here)
grails-app/views/_fields/propertyType/
grails-app/views/_fields/propertySuperclass/ (not applicable here)
grails-app/views/_fields/default/
Neither is there a possibility to pass a custom template, nor to distinguish between between the property name when the template is found via the property's class.
However, there are some possibilities to realize your case.
A) Template condition
You could include a condition into the /_fields/string/_field.gsp template and make use of the provided template parameters, such as:
<g:if test="${property == 'descriptionOfPerson' || property == 'descriptionOfCompany' }">
<!-- render your ckeditor here or include another template via g:render -->
</g:if>
<g:else>
<!-- render your normal input here or include another template via g:render -->
</g:else>
B) Template for each controller property
for instance:
grails-app/views/_fields/person/description/ and
grails-app/views/_fields/company/description/.
Both templates could include another template via g:render, being place at grails-app/views/_fields/ckeditor/
Applying this to your example, you could place the template in any of the bold paths and it would be preferred to the /_fields/string/_field.gsp template.
Personally I would stick with B), which allows a more fine-grained control and is easier to understand for others that are not familiar with your code. I would also rename both of your fields to description. As always, this decision depends on your complete application and its overall complexity.
The default rendering mechanism of the fields plugin (without using the override template stuff) uses the widget constraint of grails to render a textarea instead of a <input type="text" /> (as you see in the source of the fields plugin).
With an unobtrusive javascript library (ckeditor seems to have these capabilities as described in their dev guide), that replaces a <textarea> with something more exciting, the only thing you have to do is the following:
Person {
String name
String descriptionOfPerson
static constraints = {
descriptionOfPerson widget: 'textarea'
}
}
Company {
String name
String descriptionOfCompany
static constraints = {
descriptionOfCompany widget: 'textarea'
}
}
At least now (2 years after initial post) I found 2 working solutions for me:
(1) specify for every field I want to have wysiwyg editor functionality a sub-folder in views (like grails-app/views/myDomainObject/myWysiwygField/_wrapper.gsp) with the following content:
<div class="fieldcontain${required ? ' required' : ''}">
<label for="${property}">${label}<g:if test="${required}"> <span class="required-indicator">*</span></g:if></label>
<ckeditor:config var="toolbar_Mytoolbar">
[
[ 'Undo', 'Redo', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList']
]
</ckeditor:config>
<ckeditor:editor name="${property}" width="40%" toolbar="Mytoolbar">${value}</ckeditor:editor> <!-- toolbar="Basic" -->
</div>
(2) declare the wysiwyg fields as textarea
static constraints = {
myWysiwygField widget: "textarea"
}
and define (once) grails-app/views/_fields/textarea/_wrapper.gsp with the same content than above.
So the first one is more fine-granular while the second one is more appealing for simpler problems.

Mezzanine: Editable tag inside header/footer template

I want to be able to use {% editable something %} inside of a layout template or a template that is included in various pages. For example a company slogan in the header or a text inside of page_menu.
I want to edit the value only on one place of administration (I don't want to have it duplicated over all pages models).
What is the best way to do this?
As commented above, the something arg can be any model instance - so all you'll need it a template tag or possibly context processor for getting the instance into every template, then voila.

How can I add the filename of each used templates and includes in freemarker templates as HTML comments?

Is there a way to configure freemarker so that the Freemarker template engine automatically inserts the name of the current template as an HTML comment?
Example HTML output I would like to see:
<!-- template file: main.ftl -->
normal template code of the file main.ftl
<!-- template file: myinclude.ftl -->
This is the code from myinclude.ftl
I would like to use such functionality for debugging purposes only so that it is easier to find out which HTML fragments where rendered in which template.
Any hints?
You could write a TemplateLoader implementation that just delegates to another TemplateLoader (to the one that you are using when not in debug-mode), but captures the stream that it returns, and inserts the HTML comment after the <#ftl ...> directive. (But don't add line-break to the comment, or else it will offset the line number in error messages; use ${'\n'}<!-- ... -->${'\n'} instead.)