默认位置如下图,感觉不美观

调整后,如下图

打开后台产品页,找到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 调整产品详细页自定义选项或配置项的位置的更多相关文章

  1. magento在产品详细页面添加分享链接的方法

    1,在产品详细页面的对用位置加入一下代码 <div class="sharethis_box">          <?php echo $this->ge ...

  2. Flutter实战视频-移动电商-44.详细页_首屏自定义Widget编写

    44.详细页_首屏自定义Widget编写 把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建 ...

  3. Flutter实战视频-移动电商-46.详细页_自定义TabBar Widget

    46.详细页_自定义TabBar Widget 主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个 ...

  4. 品优购详情页---产品详细信息区域 iteminfo_wrap

    产品详细信息区域为整个大盒子命名为: iteminfo_wrap 1号盒子命名为:sku_name 2号盒子命名为:news 3号盒子命名为:summary step1:3个盒子搭建框架,以及完成前两 ...

  5. Flutter移动电商实战 --(46)详细页_自定义TabBar Widget

    主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个方法来接受参数,修改是左侧还是右侧选中的状态值 ...

  6. Flutter移动电商实战 --(44)详细页_首屏自定义Widget编写

    把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建页面details_top_area.da ...

  7. Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页

    在完成产品列表页前要做一些准备功夫.首先是去下载MvcPager用了为产品列表分页.下载的可能是基于MVC 2的,没关系,可以用在MVC 3上.如果有担心,下载源代码重新编译一次好了.下载后将DLL添 ...

  8. BBS - 文章详细页、点赞、踩灭

    一.文章详细页 文章详细页:1.链接:<div><h5><a href="/blog/{{ article.user.username }}/articles/ ...

  9. Flutter实战视频-移动电商-43.详细页_补充首页跳转到详细页

    43.详细页_补充首页跳转到详细页 首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.ro ...

随机推荐

  1. Android 实现异步加载图片

    麦洛开通博客以来,有一段时间没有更新博文了.主要是麦洛这段时间因项目开发实在太忙了.今天周六还在公司加班,苦逼程序猿都是这样生活的. 今天在做项目的时候,有一个实现异步加载图片的功能,虽然比较简单但还 ...

  2. 【bzoj2384】[Ceoi2011]Match 特殊匹配条件的KMP+树状数组

    题目描述 给出两个长度分别为n.m的序列A.B,求出B的所有长度为n的连续子序列(子串),满足:序列中第i小的数在序列的Ai位置. 输入 第一行包含两个整数n, m (2≤n≤m≤1000000).  ...

  3. Xcode 6.0中彻底关闭ARC

    对整个项目关闭ARCproject -> Build settings -> Apple LLVM complier 3.0 - Language -> objective-C Au ...

  4. JS调用C#中的变量

    今天早上做项目,需要使用JS来得到数据库里面表的行数.经过查找资料,知道可以使用在C#中定义一个全局变量.在JS中调用即可,自己总结一下:供日后参考; public string Str() { st ...

  5. 移动开发:美团外卖Android Lint代码检查实践

    概述 Lint是Google提供的Android静态代码检查工具,可以扫描并发现代码中潜在的问题,提醒开发人员及早修正,提高代码质量.除了Android原生提供的几百个Lint规则,还可以开发自定义L ...

  6. hdu4035 Maze 【期望dp + 数学】

    题目链接 BZOJ4035 题解 神题啊...orz 不过网上题解好难看,数学推导不写\(Latex\)怎么看..[Latex中毒晚期] 我们由题当然能很快写出\(dp\)方程 设\(f[i]\)表示 ...

  7. codeforces 1015A

    A. Points in Segments time limit per test 1 second memory limit per test 256 megabytes input standar ...

  8. 关于跨域策略文件crossdomain.xml文件--配置实例

    转载自:http://bbs.phpchina.com/blog-52440-191623.html 我一直不太明白crossdomain.xml文件是干嘛用的,今天总算比较清楚的知道了一下. 这是F ...

  9. PhoneGap之自定义插件

    PhoneGap:作为原生App,Java(这里面是指Android的)与JavaScript 的通信桥梁,使得我们的混合开发更加得心应手,我是与Android结合的混合开发. 但在这里不得不吐槽一下 ...

  10. 打砖块(codevs 1257)

    题目描述 Description 在一个凹槽中放置了n层砖块,最上面的一层有n块砖,第二层有n-1块,……最下面一层仅有一块砖.第i层的砖块从左至右编号为1,2,……i,第i层的第j块砖有一个价值a[ ...