使用 Bootstrap 构建响应式、移动优先的购物车页面

电子商务购物车页面最自然的形式是表格数据展示，列出购物者所选每项商品的标题和价格。但 HTML 表格在智能手机上可能难以阅读，使用 Bootstrap 等框架有助于改善移动端的购物体验。

在支付流程语境下，购物车页面是对购物者所有选择的汇总，也是进入结账流程前的最后一站。购物者经常在此页面查看或修改选择。

移动端友好的购物车页面

在台式机或笔记本电脑屏幕上，购物车页面通常呈现为表格形式。如下方示例所示，两件商品各占一行，每行包含五列：商品图片、标题、单价、数量及总价。

这种类表格布局在大屏上效果良好，但在智能手机上却不太适用。

购物车页面布局应适应更窄的屏幕尺寸。下方示例展示了 iPhone 6 和 Nexus 5X 的模拟效果：商品信息垂直排列，图片位于顶部，接着是标题及其他信息。

本文将介绍如何使用 Bootstrap 3 框架为 Shopify 商店构建响应式、移动优先的购物车页面。目标并非提供逐步操作指南，而是介绍 Bootstrap 及购物车页面的布局思路。

基本页面布局

本文基于 Shopify 主题背景，主布局文件 theme.liquid 已引入页面头部、页脚、CSS 和脚本。假设 Bootstrap 已包含在内，且部分截图中的头部来自单独文件。

Shopify 模板语言为 Liquid（.liquid 扩展名）。本文将使用少量 Liquid 获取商品信息，重点在于 HTML、CSS 和 Bootstrap 特定类的应用。

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="page-header">
        <h1>Your Shopping Cart <small>That little bucket of joy</small></h1>
      </div>
    </div>
  </div><!-- end .row -->
</div><!-- end .container-fluid -->

这段 HTML 设置了 Bootstrap 网格。首个 div 元素的 class 为 container-fluid，使布局充满整个宽度。

<div class=”container-fluid”> … </div>

下一个 div 元素建立了 Bootstrap 网格行，默认每行 12 列。

<div class=”container-fluid”>
  <div class="row"> … </div>
</div>

第三个 div 元素的 class 指定了网格类型及列数。Bootstrap 提供超小（xs）、小（sm）、中（md）和大（lg）四种选项。示例类 col-xs-12 表示内容在小屏尺寸下占据全部 12 列。

<div class=”container-fluid”>
  <div class="row">
    <div class="col-xs-12"> … </div>
  </div>
</div>

该行内容为页面标题：

<div class="page-header">
  <h1>Your Shopping Cart <small>That little bucket of joy</small></h1>
</div>

默认情况下，Bootstrap 将小文本设为内联样式并左对齐页面标题。针对智能手机，建议标题居中且小文本独占一行。可在样式表中添加以下 CSS 覆盖默认设置：

.page-header { text-align: center; }
.page-header small { display: block; }

Bootstrap 采用移动优先策略，因此针对移动设备的样式放在 CSS 主部分，较大屏幕的更改放在媒体查询中。虽然移动端偏好居中布局，但 Bootstrap 默认设置更适合电脑端。以下样式可在屏幕宽度 ≥768px 时撤销更改：

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .page-header { text-align: left; }
  .page-header small { display: inline; }
}

购物车表单

接下来创建新行并设置宽度为 12 列的 div 元素作为父容器，用于容纳购物车内容：

<div class="row">
  <div class="col-xs-12"> … </div>
</div>

当购物者访问购物车页面时，需提供更新选择的机会。此处使用简单 HTML 表单，变更时调用 Shopify 服务器。此表单应嵌套在上述行和 12 列元素内部：

<div class="row">
  <div class="col-xs-12">
    <form action="/cart" method="post" novalidate> ... </form>
  </div>
</div>

嵌套行与购物车产品信息

在 form 元素内部插入 Shopify Liquid 迭代标签，遍历购物车中每个产品。循环内的代码将为每个产品重复执行，当前产品称为 item：

{% for item in cart.items %}
{% endfor %}

Bootstrap 允许行列嵌套以细分页面。已在 12 列 div 中放入表单，现需细分该空间以布局产品信息：

{% for item in cart.items %}
  <div class="row cart-row">
    <div class="col-xs-12 col-sm-2">
      <div class="pull-left">
        <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0">
          <span class="glyphicon glyphicon-remove-sign" aria-hidden="true" ></span>
        </a>
      </div>
      <a href="{{ item.url | within: collections.all }}">
        <img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}" class="img-responsive" >
      </a>
    </div>
  </div><!-- end .row.cart-row -->
{% endfor %}

此代码块需注意以下几点：

首先，div 行有额外类 cart-row，用于添加自定义样式和覆盖规则：

<div class="row cart-row">

其次，下一个 div 元素有两个列类。通过 Bootstrap 类告诉浏览器：屏幕宽度 <768px 时内容填满 12 列；≥768px（sm 网格）时仅占用 2 列：

<div class="col-xs-12 col-sm-2">

在该 div 元素内部，有一个移除当前商品的小链接及产品图片。Liquid 承担主要工作。注意图片具有 img-responsive 类，这是 Bootstrap 类，用于调整图片大小防止溢出父元素。

此外，在样式表中添加了三个自定义 CSS 声明。第一个调整行的边距和内边距，覆盖 Bootstrap 默认值；第三个样式确保父元素比全尺寸图像更宽时，响应式图像居中显示：

.cart-row { margin: 10px 0; padding: 10px 0; border-bottom: 1px solid #e1e1e1; }
.cart-row div { text-align: center; }
.cart-row img.img-responsive { margin: 0 auto; }

查看目前的购物车页面，每个项目都显示了相对较大的产品图片：

下一部分标记将添加产品名称、颜色和尺寸。该 div 元素再次具有两列规范：屏幕宽度 <768px 时标题占据全部 12 列；更大屏幕上仅填充 4 列：

<div class="col-xs-12 col-sm-4">
  <h3><a href="{{ item.url }}">{{ item.product.title }}</a></h3>
  {% unless item.variant.title contains 'Default' %}
    {{ item.variant.title }}
  {% endunless %}
</div>

这段 Liquid 标记添加了产品 URL、标题和变体标题（本例中为尺寸和颜色信息）：

此后只需简单添加区块，网格中每个区块包含购物车某产品的部分信息。

接下来的区块显示产品单价。注意它在最小屏幕上占据 5 列，较大屏幕上占据 2 列。Liquid 获取价格（以美分存储）并转换为美元格式：

<div class="col-xs-5 col-sm-2">
  <h3 class="h3-price">
    {{ item.price | money }}
  </h3>
  <small>each</small>
</div>

希望价格以特殊字体显示，因此使用了自定义 h3-price 类。引用样式声明如下：

.h3-price {
  color: rgb(20, 80, 150);
  font-family: 'Oxygen Mono', monospace;
}

Oxygen Mono 是 Google Fonts 提供的免费字体。

Shopify 支持 Sass（CSS 预处理器），可使用变量表示字体颜色和字体族。实际 SCSS 代码如下（所见为 CSS 处理后结果）：

@import 'https://fonts.googleapis.com/css?family=Oxygen+Mono';
$sweet-blue-primary: rgb(20, 80, 150);
$sweet-monospaced: 'Oxygen Mono', monospace;

.h3-price {
  color: $sweet-blue-primary;
  font-family: $sweet-monospaced;
}

下一部分添加所选数量信息。此区块遵循相同模式，但使用了表单输入元素：

<div class="col-xs-7 col-sm-2">
  <div class="form-group">
    <input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" class="cart-qty-input" >
    <small>quantity</small>
  </div>
</div>

包裹此区块的 div 在超小屏幕上占据 7 列，与占据 5 列的单价 div 结合刚好填满 12 列；较大屏幕上数量输入框占据 2 列。

注意：form-group 类是 Bootstrap 内置的，为输入框提供基本样式。cart-qty-input 是自定义类，覆盖部分默认 Bootstrap 样式并添加个人样式。字体族变量是 Sass CSS 的另一个示例，需要 Sass 预处理器：

.cart-qty-input {
  font-size: 1em;
  font-family: $sweet-monospaced;
  margin-top: 10px;
  padding: 10px;
  width: 95%;
  border: 1px solid black;
}

最后一个区块显示给定产品的总价。此处无新内容：

<div class="col-xs-12 col-sm-2">
  <h3 class="h3-price">
    {{ item.line_price | money }}
  </h3>
  <small>item total</small>
</div>

总结

仅使用少量 HTML 和 CSS，并在 Bootstrap 帮助下，即可创建外观良好的购物车页面：小型移动屏幕上垂直显示产品信息，相对较大屏幕上则像表格一样布局。