H5和门店的CSS/JS加载搬迁以及模板调用说明

来自ECJiaWiki
跳转至: 导航搜索

CSS和JS加载

创建自定义主题框架的控制器

  • 原本H5和门店的CSS和JS加载都在ecjia-touch.dwt模板文件中,如下图所示:
H5和门店的加载搬迁以及模板调用说明 01.png
  • 如果这样,目前我们就无法将对JS文件中的语言包进行升级,所以我们需要放入PHP文件中进行相对应的加载,首先我们创建一个“自定义主题框架的控制器”,如下图所示:

注:创建此类必须继承ecjia_front类

H5和门店的加载搬迁以及模板调用说明 02.png
H5和门店的加载搬迁以及模板调用说明 03.png
  • 在classes文件夹下创建ecjia_theme_controller.class.php文件【自定义主题框架的控制器】,创建成功之后,将原来模板文件中的CSS和JS使用ecjia_extra::themeUrl()方法匹配相对应的文件路径在此重新一 一进行加载。

调用自定义主题框架的控制器

  • 第1步中将创建好的文件找到入口进行调用,如下图所示:
H5和门店的加载搬迁以及模板调用说明 04.png

ecjia-touch.dwt模板调用

  • 首先需要清除原始的css和js相关加载,清理之后可以和第一步原始模板进行比对,一目了然,如下图所示:
H5和门店的加载搬迁以及模板调用说明 05.png

注:按规则写入相对应的hook标签即可。

特殊处理

当我们遇到一些js方法并不需要全局加载,我们就可以单独写入页面的footer标签,如下图所示:

  • 全局中移除
H5和门店的加载搬迁以及模板调用说明 06.png
  • 用到的模板页单独调用
H5和门店的加载搬迁以及模板调用说明 07.png