magento 调整产品详细页自定义选项或配置项的位置
默认位置如下图,感觉不美观
调整后,如下图
打开后台产品页,找到Design下的Display product options in属性,可以看到两个选项:Product Info Column和Block after Info Column,其中默认选中的是Block after Info Column,从字面意思就可以理解,Options的内容默认是显示产品信息的下方,如果把该产品的Display product options in属性设置为Product Info Column,前台就会看到第二张图片的效果。也就是说,Magento系统本身就为这一块提供了两种显示位置,通过修改后台的属性值可以选择使用哪种位置,不过问题来了,如果我希望所有产品的Options内容默认都显示在Product Info Column,而不用所有产品一个个打开去改属性,那就需要修改代码来实现了。
打开产品页的主模板文件view.phtml,可以看到两端类似的代码,第一个如下
<?php if ($_product->isSaleable() && $this->hasOptions()): ?>
<?php if ($container1_html = $this->getChildChildHtml('container1', '', true, true)): ?>
<div class="container1-wrapper"><?php echo $container1_html; ?></div>
<?php endif; ?>
<?php endif;?>
第二个
<?php if ($_product->isSaleable() && $this->hasOptions()): ?>
<?php if ($container2_html = $this->getChildChildHtml('container2', '', true, true)): ?>
<div class="box-additional <?php echo $grid['cont2Col']; ?>">
<div class="container2-wrapper"><?php echo $container2_html; ?></div>
</div>
<?php endif; ?>
<?php endif; ?>
这两段就分别是Product Info Column和Block after Info Column两个位置,从代码在view.phtml里的位置就可以看出,后台默认是Block after Info Column的情况下,信息会显示在container2里。现在剪切container2这段代码,把它放到和container1同一个位置,这样,产品新加完默认情况下Options就会显示在第二张图片显示的位置了,模板文件里最后的代码如下:
<?php if ($_product->isSaleable() && $this->hasOptions()): ?>
<?php if ($container1_html = $this->getChildChildHtml('container1', '', true, true)): ?>
<div class="container1-wrapper"><?php echo $container1_html; ?></div>
<?php endif; ?>
<?php endif;?>
<?php if ($_product->isSaleable() && $this->hasOptions()): ?>
<?php if ($container2_html = $this->getChildChildHtml('container2', '', true, true)): ?>
<div class="box-additional <?php echo $grid['cont2Col']; ?>">
<div class="container2-wrapper"><?php echo $container2_html; ?></div>
</div>
<?php endif; ?>
<?php endif; ?>
magento 调整产品详细页自定义选项或配置项的位置的更多相关文章
- magento在产品详细页面添加分享链接的方法
1,在产品详细页面的对用位置加入一下代码 <div class="sharethis_box"> <?php echo $this->ge ...
- Flutter实战视频-移动电商-44.详细页_首屏自定义Widget编写
44.详细页_首屏自定义Widget编写 把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建 ...
- Flutter实战视频-移动电商-46.详细页_自定义TabBar Widget
46.详细页_自定义TabBar Widget 主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个 ...
- 品优购详情页---产品详细信息区域 iteminfo_wrap
产品详细信息区域为整个大盒子命名为: iteminfo_wrap 1号盒子命名为:sku_name 2号盒子命名为:news 3号盒子命名为:summary step1:3个盒子搭建框架,以及完成前两 ...
- Flutter移动电商实战 --(46)详细页_自定义TabBar Widget
主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个方法来接受参数,修改是左侧还是右侧选中的状态值 ...
- Flutter移动电商实战 --(44)详细页_首屏自定义Widget编写
把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建页面details_top_area.da ...
- Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页
在完成产品列表页前要做一些准备功夫.首先是去下载MvcPager用了为产品列表分页.下载的可能是基于MVC 2的,没关系,可以用在MVC 3上.如果有担心,下载源代码重新编译一次好了.下载后将DLL添 ...
- BBS - 文章详细页、点赞、踩灭
一.文章详细页 文章详细页:1.链接:<div><h5><a href="/blog/{{ article.user.username }}/articles/ ...
- Flutter实战视频-移动电商-43.详细页_补充首页跳转到详细页
43.详细页_补充首页跳转到详细页 首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.ro ...
随机推荐
- Nginx 学习笔记之安装篇
在windows下安装Nginx其实非常简单,只需如下几个步骤: 1. 在Nginx官网下载相应版本的安装程序,上面有最新版.稳定版等各种版本,正式运营的项目建议下载最新的稳定版 2.将下载后的压缩包 ...
- [LG1886]滑动窗口 单调队列
---题面--- 题解: 观察数据范围,这应该是一个复杂度O(n)的题.以最大值为例,考虑单调队列,维护一个单调递减的队列.从前向后扫,每次答案取队首,如果后面进入的比前面大,那么就弹出前面的数,因为 ...
- OI中组合数的若干求法与CRT
OI中组合数的若干求法与CRT 只是下决心整理一下子呢~ 说明:本篇文章采用\(\binom{a}{b}\)而不是\(C_{a}^b\),以\(p\)指代模数,\(fac_i\)指代\(i!\),\( ...
- BZOJ 2707: [SDOI2012]走迷宫 拓扑+高斯消元+期望概率dp+Tarjan
先Tarjan缩点 强连通分量里用高斯消元外面直接转移 注意删掉终点出边和拓扑 #include<cstdio> #include<cstring> #include<a ...
- 用JQuery的$.getJSON发起跨域Ajax请求
jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数.原型如下: jQuery.getJSON( url, [data], [callba ...
- C语言的getopt
By francis_hao Jul 5,2017 getopt:分析命令行选项 概述 #include <unistd.h>int getopt(int argc, char ...
- Spring validation 后端校验【转】
本文来自 下一秒升华 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/u013815546/article/details/77248003?utm_source=co ...
- [hdu 1398]简单dp
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1398 看到网上的题解都是说母函数……为什么我觉得就是一个dp就好了,dp[i][j]表示只用前i种硬币 ...
- HDU4725:The Shortest Path in Nya Graph(最短路)
The Shortest Path in Nya Graph Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- AnnotationConfigApplicationContext.的用法的核心代码
public static void main(String[] args) {ApplicationContext ctx = new AnnotationConfigApplicationCont ...