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 ...
随机推荐
- QT启动一个工程
功能描述: 模拟如下页面. 当输入一个字符串时打开对应的应用程序. 实现方法: 1. 建立工程 2. 界面编辑: 3. 在test1.h中添加slot声明 4. test1.cpp中添加slot定义 ...
- 算法(10)Subarray Sum Equals K
题目:在数组中找到一个子数组,让子数组的和是k. 思路:先发发牢骚,这两天做题是卡到不行哇,前一个题折腾了三天,这个题上午又被卡住,一气之下,中午睡觉,下午去了趟公司,竟然把namespace和cgr ...
- input只改变光标的颜色 不改变字的颜色
color: red; text-shadow: 0px 0px 0px #000; -webkit-text-fill-color: transparent;把这些放到input里文字通过阴影实现 ...
- [洛谷P4940]Portal2
题目大意:维护两个栈,几个操作: $PUSH\;x\;num:$把$num$压入栈$x$ $POP\;x:$弹出栈$x$栈顶元素 $ADD\;x:$取出两个栈栈顶,把相加值压入栈$x$ $SUB\;x ...
- 第116讲 boost::algorithm::string之替换和删除
http://www.360doc.com/content/16/0523/18/29304643_561672752.shtml
- CSS中background-position使用技巧
一.background-position:left top; 背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏.等同于 background-position:0,0;也等同 ...
- 关于跨域策略文件crossdomain.xml文件--配置实例
转载自:http://bbs.phpchina.com/blog-52440-191623.html 我一直不太明白crossdomain.xml文件是干嘛用的,今天总算比较清楚的知道了一下. 这是F ...
- ICE学习笔记一----运行官方的java版demo程序
建议新手和我一样,从官网下载英文文档,开个有道词典,慢慢啃. 官方文档下载: http://download.csdn.net/detail/xiong_mao_1/6300631 程序代码就不说了, ...
- iOS12、iOS11、iOS10、iOS9常见适配
作者:花丶满楼 链接:https://juejin.im/post/5c49a7d0518825254e4d46fc 一.iOS12(Xcode10) 1.1.升级Xcode10后项目报错 不允许多个 ...
- centos网络配置之桥接模式
一:前沿 来这家公司好久了,都没有开始写博客,都是积累着,都没有去写,今天实在是天激动了,我的虚拟机在配置好了之后折腾了一天都没有折腾出来可以上网,今天来了继续折腾,然后我该ip,改连接方式,我擦,终 ...