省市区地址gem

Published on:

如何加入省市区(县)三级详细地址

身为一个购物网站,买家的地址,填的不详细那怎么行!东西向哪里寄呀,从实际需求出发,这应该是一个必备的功能。现在就和大家分享一下如何使用gem,完成上述功能。

一共分为四步,然后是我的一些坎坷,应该还蛮简单的的。

0.准备工作:

0.1 Gemfile

在合适的位置加上

gem 'china_city' 

别忘了bundle install

0.2 app/assets/javascripts/application.js

在合适的位置加上

//= require jquery
//= require 'china_city/jquery.china_city'

注 如果已经有//= require jquery 请不要重复加。

0.3 config/routes.rb

在合适的位置加上

mount ChinaCity::Engine => '/china_city'

这样准备工作就做好了。下面才是重头戏。

1 给order加栏位

终端运行

rails g migration add_address_to_orders

把db/migrate/xxx_add_address_to_orders.rb变成这样:

class AddAddressToOrders < ActiveRecord::Migration[5.0]
  def change
    +add_column :orders, :province, :string
    +add_column :orders, :city, :string
    +add_column :orders, :district, :string
  end
end

别忘了终端运行 rake db:migrate

2 在orders_controller 下加白名单

把app/contorllers/order_controller.rb

def order_params 
    -params.require(:order).permit(:billing_name, :billing_address, :shipping_name, :shipping_address)
    +params.require(:order).permit(:province, :city, :district, :billing_name, :billing_address, :shipping_name, :shipping_address)
  end

3.views

需要改的地方有几个

首先,我们要让顾客在checkout时把地址输进去;

app/views/carts/checkout.html.erb 中合适的位置加入:

            <div class="city-group">
              <%= f.select :province,  ChinaCity.list.unshift(["--省份--", 230000]), {}, class: "city-select "%>
              <%= f.select :city,      ChinaCity.list(f.object.province).presence || [["--城市--", 230900]],    {}, class: "city-select " %>
              <%= f.select :district,  ChinaCity.list(f.object.city).presence     || [["--地区--", 230903]],    {}, class: "city-select " %>
            </div>

然后,我们要让顾客在结账之后能看到地址;

app/views/order/show.html.erb中合适的位置加入:

                详细地址:
                <%= ChinaCity.get(@order.province) %>
                <%= ChinaCity.get(@order.city) %>
                <%= ChinaCity.get(@order.district) %>

所以的寄到邮箱的、付过款的、没付过款的、取消的order都要能看到寄送资讯
分别在:
app/views/order_mailer/apply_cancel.html.erb
app/views/order_mailer/notify_cancel.html.erb
app/views/order_mailer/notify_order.html.erb
app/views/order_mailer/notify_ship.html.erb
中合适的位置加入

    <tr>
      <td>
        <%= ChinaCity.get(@order.province) %>
        <%= ChinaCity.get(@order.city) %>
        <%= ChinaCity.get(@order.district) %>
      </td>
    </tr>

ok 大功告成啦

最终效果如下:

坎坷

过程当然也不是一帆风顺啦,

最开始想写到user中,一个user对应一个地址,

理想是美好的,现实都是白骨精!

遇到的问题,user的controller是device建立的,

rails g devise:controllers users

叫出了一大堆controller,白名单要加载哪里?

slack问助教,先不加试试,

接下来又遇到了输入地址,simple_form_for xxxx又不会写了,@user不对,@order.user也不对,又去问助教,这个是太难为人了,没做过的功能,都需要花打大量的时间,而且我越看越觉得应该加在order里!又开始了第二次尝试。

功能可以实现,有几个小细节。

如果user在输入的时候,忘记输入地址,生成的订单就会报错,解决这个问题有三个思路。

一是限制不得为空,尝试了教程中model的方法,不成,据报错显示,什么都不填的时候,传回来的不是空,而是[],所以 validates :shipping_address, presence: true就不好用呢。

二是在html加if elsif end,套用限制admin选单的方式,但好像需要跳转才能显示,又失败了。

三是设置默认值,总感觉自己用了gem比别人nb怎样,其实都是一样的,现在的默认值是我家里的地址,嘿嘿嘿,所以不细心填写的人东西都会寄到我这里,嘿嘿嘿。

还有一个问题,这个gem本来是四级级联的,省市区街道,但街道我是死活没写出来,按理来说按照下面的代码就应该成了:

 <%= f.select :street,  ChinaCity.list(f.object.district).presence     || [["--地区--", 230903]],    {}, class: "city-select " %>

但这样子只能出出区域,为啥子不出街道咧,不得其解。

and 这个gem不支持港澳台!这个gem不支持港澳台!!这个gem不支持港澳台!!!

不开心!不开心!!不开心!!!

欢迎来到大天朝我不带你玩固步自封局域网。

写了这么多希望大家来和我交流呦,厚着脸皮把所有错误、费解都扔上来了,都是为了抛砖引玉,希望大家用玉拍死我,谢谢。

PS:本贴案例用于我们的jdstore作品第四版黑暗料理模块,希望你能帮我们做下测试和提意见,如果喜欢请帮我们投上一票。谢谢你能读到最后。

这有一些其他的教程 可能对你有帮助

这可能是全栈营最详细的【带缩略图的轮播图】教程

这可能是全栈营最详细的【省市区详细地址】教程

这可能是全栈营最详细的【下拉菜单和按钮失效】解决办法]

这可能是最详细的全栈营【seed】教程

这可能是最容易出现的全栈营【七牛云上传】教程

这可能是全栈营最详细的【客服系统】教程

欢迎随时和我交流

Comments

comments powered by Disqus