By

文章目录
  1. 1. 目标
  2. 2. 步骤
    1. 2.1. Step 0:建立新分支
    2. 2.2. Step 2:增加相应样式
    3. 2.3. Step 3:将变更 commit 进去 git 里面。
  3. 3. 本章详解

大家好，本系列文章主要是对我参加全栈营JDstore魔改大赛作品「季风 & MONSOON」的复盘。由于本人也是新手，文章中一定有很多幼稚的错误或代码，希望大家帮忙指出，可反馈至我的邮箱kerzzi@outlook.com，我会持续完善本系列。非常感谢。
本系列是在全栈营JDstore教程基础之上进行魔改，本系列第1-11章节为全栈营JDstore教程，请在完成全栈营JDstore教程的基础上进行测试。

目标

美化购物车界面

步骤

Step 0:建立新分支

在终端执行

checkout -b story21```。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
### Step 1:修改app/views/carts/index.html.erb
打开app/views/carts/index.html.erb,全部代码替换成如下内容
```ruby app/views/carts/index.html.erb
<div class="container">
  <div class="col-md-12">
    <h3>购物车</h3>
    <p>您的购物车目前共有
      <span class="badge" style="background-color: #77cde3;font-size:13px;vertical-align:center;">
        <%= current_cart.products.count %>
      </span>  个商品。
    </p>
    <hr>
    <div class="col-sm-8 col-md-8 padding-bottom-2x">
      <div class="shopping-cart">
        <% current_cart.cart_items.each do |cart_item| %>
          <div class="item">
            <%= link_to product_path(cart_item.product),class: "item-thumb" do %>
              <% if cart_item.product.product_images.present? %>
                <img src=<%= qiniu_image_path(cart_item.product.main_product_image.image.url) %>>
              <% else %>
                <%= image_tag("http://placehold.it/200x200&text=No Pic") %>
              <% end %>
            <% end %>
            <div class="item-details">
                <p class="item-title">
                  <%= link_to(cart_item.product.title, product_path(cart_item.product)) %>
                </p>
                <p class="item-price">
                  ¥ <%= cart_item.product.price %>
                </p>
            </div>
            <div class="count-input">
              <%= link_to("-", remove_quantity_cart_item_path(cart_item.product_id), class: "incr-btn", method: :post) %>
              <input class="quantity" type="text" value="<%= cart_item.quantity %>">
              <%= link_to("+", add_quantity_cart_item_path(cart_item.product_id), class: "incr-btn", method: :post) %>
            </div>
            <div class="row">
                <%= link_to cart_item_path(cart_item.product_id), class: "item-remove btn btn-xs  btn-danger", :data => { :confirm => "确认要将该商品移出购物车吗？" } ,method: :delete do %>
                <i class="fa fa-trash-o fa-fw"></i>
                <% end %>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  <!-- Sidebar -->
    <div class="col-md-3 col-md-offset-1 col-sm-4 padding-bottom-2x">
      <aside>
        <h3 class="toolbar-title">购物车总价:</h3>
        <h4 class="amount">¥ <%= render_cart_total_price(current_cart) %></h4>
        <p class="tips">* 确认购物商品无误后，前往结账页填写您的订单信息</p>
        <%= link_to("清空购物车", clean_carts_path, method: :delete, class: "btn btn-info btn-block", data: {confirm: "Are you sure to clean the cart?"}) %>
        <%= link_to("结帐", checkout_carts_path, method: :post, class: "btn btn-danger btn-block") %>
      </aside>
    </div>
  <!-- Sidebar -->
  </div>
</div>

Step 2:增加相应样式

打开app/assets/stylesheets/carts.scss，增加相应的样式

app/assets/stylesheets/carts.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
/* 购物车 */
.shopping-cart {
  width: 100%;
}
.shopping-cart .item {
  position: relative;
  display: table;
  width: 100%;
  padding: 0 45px 30px 0;
  border-bottom: 2px solid #ededed;
  margin-bottom: 30px;
}
.shopping-cart .item .item-thumb,
.shopping-cart .item .item-details {
  display: table-cell;
  vertical-align: top;
  text-align: left;
}
.shopping-cart .item .item-thumb {
  width: 165px;
  padding-right: 25px;
}
.shopping-cart .item .item-thumb > img {
  width: 100%;
}
.shopping-cart .item .item-title {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 12px;
}
.shopping-cart .item .item-title > a {
  color: #606060;
  text-decoration: none;
}
.shopping-cart .item .item-title > a:hover, .shopping-cart .item .item-title > a:focus {
  color: #a6a6a6;
  text-decoration: none;
}
.shopping-cart .item .item-price {
  font-size: 14px;
  color: #999;
  font-weight: 500;
}
.shopping-cart .item .item-remove {
  display: block;
  position: absolute;
  width: 30px;
  height: 28px;
  top: 28px;
  right: 0;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
}
.shopping-cart .item .item-remove > i {
  line-height: 25px;
}
.shopping-cart .btn, .shopping-cart .back-btn, .shopping-cart .done-btn, .shopping-cart .search-btn {
  margin-top: 0;
}
@media screen and (max-width: 480px) {
  .shopping-cart .item {
    padding-bottom: 20px;
  }
  .shopping-cart .item .item-thumb,
  .shopping-cart .item .item-details {
    display: block;
  }
  .shopping-cart .item .item-thumb {
    margin-bottom: 20px;
  }
}
.count-input {
  position: absolute;
  top:20px;
  left:60%;
  width: 100px;
  margin: 10px 0;
  select{
    width: 100px;
  }
}
.count-input input {
  width: 80%;
  height: 25px;
  border: 2px solid #ededed;
  border-radius: 4px;
  background: none;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.count-input input:focus {
  outline: none;
}
.count-input .incr-btn {
  display: block;
  position: absolute;
  width: 36px;
  height: 36px;
  font-size: 18px;
  color: #606060;
  font-weight: 300;
  text-align: center;
  line-height: 33px;
  text-decoration: none;
  top: -5px;
  right: 20px;
}
.count-input .incr-btn:first-child {
  right: auto;
  left: 0;
}
.amount {
  color:#ef0568;
}
.tips{
  color:gray;
  font-size: 13px;
  font-family:fantasy;
  letter-spacing: 1px;
}

Step 3:将变更 commit 进去 git 里面。

1
2
3
4
5
6
git add .
git commit -m "美化购物车界面"
git push origin story21
git checkout master
git merge story21
git push origin master

本章详解

努力更新中，上班族请理解。。。。。

文章目录
  1. 1. 目标
  2. 2. 步骤
    1. 2.1. Step 0:建立新分支
    2. 2.2. Step 2:增加相应样式
    3. 2.3. Step 3:将变更 commit 进去 git 里面。
  3. 3. 本章详解