如何自定义prestashop的布局问题
2个回答
展开全部
prestashop默认是左、中、右3栏的布局形式,这一点让很多初入门的开发者很头痛,不知道如何才 能自定义Prestashop的布局。比如,首页是三栏的布局,但在产品详细页只空出右边栏出来,用来给产品详细信息,这样的话很多时候产品图片可以更 大,更清晰,而且当属性信息比较多的时候,也不会显的那么的拥挤。
比较笨但比较容易想到的做法就是,将header.tpl和footer.tpl中的左右边栏代码段都分别复制到其它页面的头部和尾部,再在这些页面注册左右边栏的模块挂载。这是最容易想到的办法,但也是最笨的办法。那有没有比较简单而有效的办法呢。
当然是有的,对Presashop操作比较熟练的人,特别是对模块的挂载比较熟练的人,应该知道,prestashop模块可以定义例外页面(具体可去这 里查看),比较A模块挂载在左边栏,定义了一个例外页面product.php,这样的话,当浏览其它页面的时候,我们能在左边栏上看到A模块显示,但浏 览product.php页面时,A模块是不显示的。
这就给了我们一个思路,既然模块可以识别浏览的哪个页面,再根据页面来判断是否显示。那么,我们是不是同样可以识别当前浏览的页面,再决定是否显示左、右边栏呢?答案是可以的。
研究代码之后,我们发现在tpl模板文件当中,我们可以使用这样一个变量$page_name,它就是当前浏览的网页名,比如浏览首页 index.php,那么$page_name就是index,如果浏览的是分类页category.php,那么$page_name就是 category,如果浏览的是产品详细页product.php,那么$page_name就是product。
有了这个变量,我们就可以分辨出当前浏览的哪一个页面,需不需要显示边栏区域,比如我们不想在产品页显示右边栏,修改footer.tpl代码如下:
{$HOOK_RIGHT_COLUMN}
修改为
{if $page_name != ’product‘}
{$HOOK_RIGHT_COLUMN}
{/if}
这样,当我们浏览产品页是会发现右边栏没有了,但是右边栏的空间还是占用着,怎么样让中间的区域能够占用空出来的右边栏区域呢。这个时候,需要修改 prestashop的CSS文件了,但普通的修改CSS会对其它的页面也造影响,怎么样才能够不对其它的页面布局产生影响呢?答案仍然是修改刚才的代 码。
{if $page_name != ’product‘}
{$HOOK_RIGHT_COLUMN}
{else}
{/if}
判断当前页面为产品页时,加载特定的CSS文件,这个CSS文件就是专门针对当前这种布局情况而专门写的CSS修改代码。如果不是此页面,该CSS则不会调用,当然也不会对其它页面造成影响了。
比较笨但比较容易想到的做法就是,将header.tpl和footer.tpl中的左右边栏代码段都分别复制到其它页面的头部和尾部,再在这些页面注册左右边栏的模块挂载。这是最容易想到的办法,但也是最笨的办法。那有没有比较简单而有效的办法呢。
当然是有的,对Presashop操作比较熟练的人,特别是对模块的挂载比较熟练的人,应该知道,prestashop模块可以定义例外页面(具体可去这 里查看),比较A模块挂载在左边栏,定义了一个例外页面product.php,这样的话,当浏览其它页面的时候,我们能在左边栏上看到A模块显示,但浏 览product.php页面时,A模块是不显示的。
这就给了我们一个思路,既然模块可以识别浏览的哪个页面,再根据页面来判断是否显示。那么,我们是不是同样可以识别当前浏览的页面,再决定是否显示左、右边栏呢?答案是可以的。
研究代码之后,我们发现在tpl模板文件当中,我们可以使用这样一个变量$page_name,它就是当前浏览的网页名,比如浏览首页 index.php,那么$page_name就是index,如果浏览的是分类页category.php,那么$page_name就是 category,如果浏览的是产品详细页product.php,那么$page_name就是product。
有了这个变量,我们就可以分辨出当前浏览的哪一个页面,需不需要显示边栏区域,比如我们不想在产品页显示右边栏,修改footer.tpl代码如下:
{$HOOK_RIGHT_COLUMN}
修改为
{if $page_name != ’product‘}
{$HOOK_RIGHT_COLUMN}
{/if}
这样,当我们浏览产品页是会发现右边栏没有了,但是右边栏的空间还是占用着,怎么样让中间的区域能够占用空出来的右边栏区域呢。这个时候,需要修改 prestashop的CSS文件了,但普通的修改CSS会对其它的页面也造影响,怎么样才能够不对其它的页面布局产生影响呢?答案仍然是修改刚才的代 码。
{if $page_name != ’product‘}
{$HOOK_RIGHT_COLUMN}
{else}
{/if}
判断当前页面为产品页时,加载特定的CSS文件,这个CSS文件就是专门针对当前这种布局情况而专门写的CSS修改代码。如果不是此页面,该CSS则不会调用,当然也不会对其它页面造成影响了。
网易云信
2023-12-06 广告
2023-12-06 广告
UIkit是一套轻量级、模块化且易于使用的开源UI组件库,由YOOtheme团队开发。它提供了丰富的界面元素,包括按钮、表单、表格、对话框、滑块、下拉菜单、选项卡等等,适用于各种类型的网站和应用程序。UIkit还支持响应式设计,可以根据不同...
点击进入详情页
本回答由网易云信提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询