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

调整后,如下图

打开后台产品页,找到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. Python数据分析(二)pandas缺失值处理

    import pandas as pd import numpy as np df = pd.DataFrame(np.random.randn(5, 3), index=['a', 'c', 'e' ...

  2. SRM707 div1 MultiplyAddPuzzle

    题目大意:给定4个数,s,t,a,b 每次可以将s加a或者乘b,问最少多少次可以得到t 做法:考虑最后的形式,肯定是s*b^n + a*f(b),f(b)是关于b的多项式 那么b乘多少次实际上是可以知 ...

  3. [洛谷P3803] 【模板】多项式乘法(FFT, NTT)

    题目大意:$FFT$,给你两个多项式,请输出乘起来后的多项式. 题解:$FFT$,由于给的$n$不是很大,也可以用$NTT$做 卡点:无 C++ Code:  FFT: #include <cs ...

  4. 【BZOJ 3123】 [Sdoi2013]森林 主席树启发式合并

    我们直接按父子关系建主席树,然后记录倍增方便以后求LCA,同时用并查集维护根节点,而且还要记录根节点对应的size,用来对其启发式合并,然后每当我们合并的时候我们都要暴力拆小的一部分重复以上部分,总时 ...

  5. malloc calloc realloc

    三个函数的申明分别是: void* realloc(void* ptr, unsigned newsize); void* malloc(unsigned size); void* calloc(si ...

  6. 从零开始学习MXnet(二)之dataiter

    MXnet的设计结构是C++做后端运算,python.R等做前端来使用,这样既兼顾了效率,又让使用者方便了很多,完整的使用MXnet训练自己的数据集需要了解几个方面.今天我们先谈一谈Data iter ...

  7. codeforces902B. Coloring a Tree

    B. Coloring a Tree 题目链接: https://codeforces.com/contest/902/problem/B 题意:给你一颗树,原先是没有颜色的,需要你给树填色成指定的样 ...

  8. 自定义orderBy字母函数

    orderedUsers: function () { var arr = this.users; for (var i = 0; i < arr.length - 1; i++) { for ...

  9. 在Debian9安装node和npm

    这学期又快结束了,坐在每天面对的电脑面,本着整理资料.更换心情的目的,我重装了一下自己的debian.下面就将自己安装node的过程进行记录与分享. node的官网:https://nodejs.or ...

  10. 一些常用的css片段

    1. 单行文字溢出时省略号 .test{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 2. 多行文字溢出时省略号 .t ...