How to access resource file (css, js files from themes folder) and get link from FTL?
I have a "Neon - Bootstrap Admin" theme ( https://themeforest.net/item/neon-bootstrap-admin-theme/6434477 ). It is my duty to integrate this bootstrap theme into Ofbiz 11/16/02. I tried for 3 days but I am stuck.
This is my complete source code: https://gitlab.com/Donhu/ofbiz
I created a new theme called "BOOTSTRAP" based on the "TOMAHAWK" theme.
I don't know how to access static resource files (css, js, image)
I'll add more information at https://gitlab.com/Donhu/ofbiz/blob/master/framework/common/config/CommonEntityLabels.xml https://gitlab.com/Donhu/ofbiz/tree/master/themes/bootstrap ( first step, I cloned from TOMAHAWK).
These files ( https://gitlab.com/Donhu/ofbiz/tree/master/themes/bootstrap/webapp/bootstrap/assets ) belong to the "Neon - Bootstrap Admin Theme". I dont know how to access, how to get relative links and put inside FTL file (ex: https://gitlab.com/Donhu/ofbiz/blob/master/themes/bootstrap/template/Header.ftl#L47 Current, it is does not work)
<#if layoutSettings.VT_HDR_JAVASCRIPT?has_content>
<#list layoutSettings.VT_HDR_JAVASCRIPT as javaScript>
<script src="<@ofbizContentUrl>${StringUtil.wrapString(javaScript)}</@ofbizContentUrl>" type="text/javascript"></script>
</#list>
</#if>
My question is, how to access static files from custom theme folder, put it in FTL file?
source to share
File paths to theme resources are stored in theme data, for example:
<VisualThemeResource visualThemeId="TOMAHAWK" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/images/jquery/plugins/asmselect/jquery.asmselect-1.0.4a-beta.js" sequenceId="05"/>
<VisualThemeResource visualThemeId="TOMAHAWK" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/images/jquery/plugins/datetimepicker/jquery-ui-timepicker-addon.min-1.4.3.js" sequenceId="07"/>
<VisualThemeResource visualThemeId="TOMAHAWK" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/images/jquery/plugins/fjTimer/jquerytimer-min.js" sequenceId="09"/>
<VisualThemeResource visualThemeId="TOMAHAWK" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/images/jquery/plugins/jquery.maskedinput-1.3.1.min.js" sequenceId="10"/>
<VisualThemeResource visualThemeId="TOMAHAWK" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/images/jquery/plugins/jeditable/jquery.jeditable.js" sequenceId="11"/>
<VisualThemeResource visualThemeId="TOMAHAWK" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/images/jquery/plugins/validate/jquery.validate.min.js" sequenceId="12"/>
In this case, all Javascript resources for the header are stored under the same resourceTypeEnumId with different sequenceIds to control the load sequence.
Then you can access these resources in your ftl templates, like Header.ftl in the Tomahawk theme:
<#if layoutSettings.VT_HDR_JAVASCRIPT?has_content>
<#list layoutSettings.VT_HDR_JAVASCRIPT as javaScript>
<script src="<@ofbizContentUrl>${StringUtil.wrapString(javaScript)}</@ofbizContentUrl>" type="text/javascript"></script>
</#list>
</#if>
They appear in the header as follows:
<script src="/images/jquery/plugins/asmselect/jquery.asmselect-1.0.4a-beta.js" type="text/javascript"></script>
<script src="/images/jquery/plugins/datetimepicker/jquery-ui-timepicker-addon.min-1.4.3.js" type="text/javascript"></script>
<script src="/images/jquery/plugins/fjTimer/jquerytimer-min.js" type="text/javascript"></script>
<script src="/images/jquery/plugins/jquery.maskedinput-1.3.1.min.js" type="text/javascript"></script>
<script src="/images/jquery/plugins/jeditable/jquery.jeditable.js" type="text/javascript"></script>
<script src="/images/jquery/plugins/validate/jquery.validate.min.js" type="text/javascript"></script>
Resource sources should be stored in / themes / theme -name / webapp / theme-name / subfolders folder like / images, / css, etc. You can of course specify a different subfolder layout and change the VisualThemeResource entries accordingly.
If there is no VISUAL_THEME UserPreference user entry for the current user, the default theme is taken from the general.properties file. You can set a new default theme here:
VISUAL_THEME=TOMAHAWK
source to share