整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

移动端购物商城商品详情页布局设计及调用数据显示

移动端购物商城商品详情页布局设计及调用数据显示

过首页、商品列表页等可以进入商品的详情页。在GoodsController.class.php控制器类文件中新增detail()方法,实现代码如下:

在View/Goods模版目录下新增detail.html文件,HTML结构代码如下:

底部购买和加入购物车按钮样式定义代码如下:

.goods_buy_bar {

width: 16rem;

position: fixed;

z-index: 999;

bottom: 0;

left: 0;

width: 100%;

height: 2rem;

padding: 0 0.75rem;

border-top: 1px solid #ccc;

background: #fff;

}

.goods_buy_btn {

display: block;

border: 1px solid red;

line-height: 1.7rem;

height: 1.7rem;

text-align: center;

font-size: 0.7rem;

border-radius: 0.2rem;

margin-top: 0.05rem;

float: left;

}

.buy_now {

background: #fff;

width: 10rem;

}

.buy_car {

width: 4rem;

margin-left: 0.3rem;

color: white;

background: red;

}

body {

background: #eee;

}

商品详情样式定义代码如下:

.goods_detail {

width: 16rem;

}

.goods_detail .goods_img img {

width: 16rem;

height: 12rem;

}

.goods_detail .goods_price {

border-bottom: 1px solid #eee;

line-height: 1.5rem;

padding: 0.5rem;

color: #999;

font-size: 0.8rem;

background: #fff;

}

.goods_detail .goods_price span {

color: red;

font-size: 1rem;

}

.goods_title {

padding: 0.5rem;

display: block;

font-size: 0.8rem;

color: #000;

font-weight: blod;

background: #fff;

}

.goods_info {

padding: 0.5rem;

margin-top: 0.2rem;

margin-bottom: 0.2rem;

background: #fff;

color: #999;

font-size: 0.7rem;

}

.goods_content {

width: 16rem;

margin-top: 0.2rem;

background: #fff;

font-size: 0.7rem;

}

除了商品基本信息的展示,页面底部还提供了“立即购买”和“购物车”按钮。用户点击“立即购买”按钮可以把当前的商品加入购物车,而点击“购物车”按钮则会进入购物车商品管理界面。商品详情页完成效果如图所示。

为全球地产、工程、建材、家具家居、设备、设计全产业链O2O产业互联网平台,BuildMost邀请全球买家入驻,共享全球产品设备、设计服务资源。

这是一份BuildMost中文站手机网页版的买家发布产品需求、查看报价操作指南,欢迎查阅。

平台网址:

https://www.buildmost.cn


如何发布产品需求?

买家可以在BuildMost中文站发布公开产品需求(公布在需求大厅,接受平台所有产品供应商提交产品报价),也可以主动搜寻到心仪供应商或心仪产品后,在供应商主页或产品详情页发起定向产品需求(针对特定产品供应商发起询价)。


① 公开产品需求

第 1 步

点击首页上方“发布需求”按钮,选择“发布产品需求”

第 2 步

根据页面提示,选择或输入贸易类型、购买用途、报价次数、需求名称等信息,并添加需求产品、附件,最后点击“发布”

提示:表单中,标*的为必填项。

提示:您可以在“需求产品”处点击“添加一个分类”,向多种产品询价;表单中,标*的为必填项。


② 定向产品需求

第 1 步

点击首页上方“产品及产品供应商”按钮或底部“产品”按钮,选择产品类目。

第 2 步

点击顶部“供应商”“产品”按钮,可切换查看,选择心仪产品供应商或产品。

利用筛选搜索功能,可以更快找到心仪产品供应商或产品。

您也可以在首页查看平台推荐产品,或使用主页搜索功能,更快找到心仪供应商或产品。

第 3 步

选择心仪产品供应商,点击进入主页,可通过右上角小飞机按钮定向询价。

或选择心仪产品,查看产品详情后,通过底部“定向询价”按钮发起询盘。

第 4 步

根据页面提示完善您的产品需求,最后点击“发布”

提示:表单中,标*的为必填项。


如何查看产品报价、联系产品供应商?

方法一:

第 1 步

登录账户,点击右下角“我的BM”,再点击“新报价”

第 2 步

点击报价的产品供应商名称,可以查看联系方式;继续点击产品清单的产品,可以查看报价。

您也可以在新报价列表直接点击对话图标,通过即时留言系统联系供应商。

方法二:

第 1 步

登录账户,点击右下角“我的BM”,再点击“产品需求”

第 2 步

在需求列表中找到想要查看的产品需求,点击查看报价详情。

提示:您可以通过右上角“筛选”功能精准定位产品需求。

第 3 步

在报价清单中,您可以点击查看报价供应商的联系方式和报价详情,或直接发起对话。

方法三:

第 1 步

点击首页顶部“产品及产品供应商”或底部“产品”按钮,选择产品类目。

第 2 步

找到心仪产品供应商,点击进入主页,从简介中申请查看联系方式。

第 3 步

填写合作申请并提交,供应商将收到系统消息。若对方同意,您可以获取供应商联系方式。

立和使用列表

定义列表

<dl></dl>列表标签定义列表;
<dt>定义列表标题;
<dd>定义列表内容;

说明:

1. dt和dd对应着的, 一个dt可以对应着多个dd;

2. dd完全是为了dt服务的, 对标题进行描述;

实例:

<dl>
<dt>标题1</dt><dd>内容11</dd><dd>内容12</dd>
<dt>标题2</dt><dd>内容21</dd><dd>内容22</dd>
</dl>


有序列表(unordered list)

<ol></ol> 列表标签定义一个标有数字的列表;

<ol type="value"></ol>

1 默认值。数字有序列表。(1、2、3、4)

a 按字母顺序排列的有序列表,小写。(a、b、c、d)

A 按字母顺序排列的有序列表,大写。(A、B、C、D)

i 罗马字母,小写。(i, ii, iii, iv)

I 罗马字母,大写。(I, II, III, IV)

<ol>
<li>联系人:</li>xxx
<li>联系地址:</li>北京市丰台区
<li>邮政编码:</li>100036
</ol>


无序列表(ordered list)

<ul></ul> 列表标签定义一个标有圆点的列表;

<ul type="value"></ul>

disc 默认值,实心圆。

circle 空心圆。

square 实心方块。

<ul>
<li></li>
<li></li>
<li></li>
</ul>


目录列表 所有主流浏览器都支持 <dir> 标签。。

<dir></dir>标签定义目录列表。

<dir>
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</dir>

菜单列表 目前所有主流浏览器都不支持 <menu> 标签。

<menu></menu>标签可定义一个菜单列表。

<menu>
<li>html</li>
<li>xhtml</li>
</menu>

在实际工作中, 它的用途较少, 大部分我们还是用ul;

另外还可以使用:

<div align=""></div>分区标签,用来排版大块HTML段落,也用于格式化表