「从零开始做购物网站」第26章 实作商品社交分享功能

文章目录

1. 1. 目标
2. 2. 步骤
   1. 2.1. Step 0:
   2. 2.2. Step 1:
   3. 2.3. Step 7:修改app/assets/stylesheets/application.scss
   4. 2.4. Step 8:修改app/views/products/show.html.erb
   5. 2.5. Step 9:新增config/initializers/social_share_button.rb
   6. 2.6. Step 10:将变更 commit 进去 git 里面。
3. 3. 本章详解

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

目标

实作商品社交分享功能

步骤

Step 0:

git checkout -b story18

Step 1:

打开Gemfile

Gemfile

gem 'paperclip-qiniu'
# or get the latest version
# gem 'paperclip-qiniu', :git => "git://github.com/lidaobing/paperclip-qiniu"
+ gem 'social-share-button'

group :development, :test do

执行

install```。

### Step 6:修改app/assets/javascripts/application.js
打开app/assets/javascripts/application.js，增加如下代码
```ruby app/assets/javascripts/application.js
  //= require bootstrap/modal
+ //= require social-share-button
+ //= require social-share-button/wechat
  //= require_tree .

Step 7:修改app/assets/stylesheets/application.scss

打开app/assets/stylesheets/application.scss，增加如下样式

app/assets/stylesheets/application.scss

@import "bootstrap-sprockets";
  @import "bootstrap";
  @import "font-awesome";
 
 +@import "social-share-button";
 
  .....
  .....
+/****** 分享按钮样式 ******/
 +$size: 24px;
 +
 +.social-share-button {
 +  .ssb-icon {
 +    background-size: $size $size;
 +    height: $size;
 +    width: $size;
 +  }
 +}
 +/****** 完成分享按钮样式 ******/

Step 8:修改app/views/products/show.html.erb

打开app/views/products/show.html.erb

app/views/products/show.html.erb

      <h4><span class="msrp">原价: ¥<%= @product.msrp %></span></h4>
       <h3><strong>现价: ¥<%= @product.price %></strong> </h3>
       <p>购买: <input type="text" name="quantity" value="1" />件</p>
+      <%= social_share_button_tag(@product.title) %><!-- 社交分享 -->
 
       <%= link_to like_product_path(@product), method: :put do %>
         <div class="pi-thumbs-up">

Step 9:新增config/initializers/social_share_button.rb

执行

config/initializers/social_share_button.rb```

打开config/initializers/social_share_button.rb，全部代码如下
```ruby config/initializers/social_share_button.rb
SocialShareButton.configure do |config|
  config.allow_sites = %w(weibo qq wechat douban twitter facebook)
end

你可以修改成你希望分享的社交网站，具体参考：https://github.com/huacnlee/social-share-button

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

git add .
git commit -m "完成商品的社交分享功能"
git push origin story18
git checkout master
git merge story18
git push origin master

本章详解

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