外有很多開源商城系統，對于做外貿電子商城系統是絕對的很好的開源系統，想做外貿開源網店系統的站長們，不用發愁了，下面所說的英文開源網店系統總有一款適合您，仔細研究下。
1. Magento (免費) http://www.magentocommerce.com/
Magento設計得非常靈活，具有模塊化架構體系和豐富的功能。易于與第三方應用系統無縫集成。Magento在設計上，考慮相當全面，以模塊化架構體系，讓應用組合變得相當靈活，功能也相當豐富。
Magento開源網店系統的特點主要分以下幾大類： 網站管理 促銷和工具、 國際化支持 、SEO搜索引擎優化 、結賬方式、 運輸快遞、 支付方式、 客戶服務、 用戶帳戶 目錄管理、 目錄瀏覽 、產品展示、 分析和報表。
Magento是一套專業開源的電子商務系統。Magento獲得過sourceforge的2008年最佳新項目獎。你只需要看一下 Magent 的客戶列表就能意識到這是一款多么優秀的開源軟件。Samsung、The North Face、Stussy 和 Nespresso 都使用它來提供他們的在線商店。它被3萬商家使用，是世界上增長最快的電子商務平臺。企業版需要付費，包含了大量非常有用的功能，不過社區版本，開發者定制版本，可以免費下載使用。
2. osCommerce (免費) http://www.oscommerce.com/
osCommerce是一套國際著名的電子商務系統，極好的穩定性和運行速度受到世界各國使用者的青睞.
項目開始于2000年的三月由德國團隊開發，其發布至今超過213,100個在線購物網站在使用該osCommerce系統。其火熱的開發社區。各國程序員提供的擴展模塊超過5,500個，數量還在不斷增加中。
osCommerce 遵循通用公共許可證完全免費，可以很好地迎合大多數人的需要。一點都不令人吃驚，考慮到它那么容易的安裝和運行，所以它非常流行。其良好的兼容性和擴展性使osCommerce受到國際上幾乎所有Lunix類主機商的支持，部分主機管理平臺如:“cPanel”等將其作為默認的安裝包只要在主機管理中稍點鼠標就能實現其基本功能的安裝。
3. OpenCart (免費) http://www.opencart.com/
OpenCart是國外著名的開源電子商務網站系統，由英國人Daniel一人獨立開發，其社區非常活躍，由各國網友翻譯出來的語言包已經達到18種，其中包括中文，俄文，法文，西班牙文，德文，日文等等。 國內使用Opencart程序的外貿朋友很少，基本都是Zencart。
OpenCart的優勢在于前臺界面的設計非常適合歐美購物者的瀏覽習慣：簡潔，直觀，唯美！
后臺也非常的簡潔明了，而且功能強大，對于初學者來說非常容易上手，對于大多數經驗豐富的網店經營者來說，OpenCart的后臺管理功能也基本能滿足其需求。OpenCart可以說是最適合國內用戶建設外貿網店的程序！
OpenCart 不僅有著漂亮的外觀，而且還有很強的擴展性。你可以創建無限多的分類、出售無限多的商品、接受多種貨幣、使用多語言，以及從20種支付方式和8種運送方式 中進行選擇。它既對用戶友好，也對搜索引擎友好，所以能讓你在 Google 更突出。顧客可以為出售的商品評價和評分。它不如 osCommerce 流行，所以幫助和指導不容易找到，不過看起來很好看。
4. Spree Commerce (免費) http://spreecommerce.com/
Spree 是一款開源的電子商務平臺，由 Ruby on Rails 開發。使用 Spree 的擴展系統，你就可以定制自己的店鋪并讓你從競爭者中脫穎而出。許多有用的功能，包括支持超過50種支付接口、單獨頁面結賬和自定義稅項邏輯，可以節省客 戶的時間和勞動。它還內置了 Google Analytics 分析。
5. PrestaShop (免費) http://www.prestashop.com/
PrestaShop 是另一款健壯的專業級電子商務解決方案，可以下載、安裝并免費使用。在末端，你可以使用一個全功能的后臺辦公應用程序實時管理在線商務（包括庫存、訂單、運送和客戶）。客戶的付款可以使用最新的安全技術直接發送到你的商業銀行賬戶。
PrestaShop是一款針對web2.0設計的全功能、跨平臺的購物車套件，能夠部署在支持PHP5的服務器端。PrestaShop具有良好的自定義性，安裝方便，且體積非常輕巧，整個程序只有大約6M。PrestaShop的后臺以電子商務模式設計，功能強大。
6. VirtueMart (免費) http://virtuemart.net/
VirtueMart站在巨人Joomla http://joomla.org/的肩膀上，系統擴展性極強。
Joomla不是幾個人或十幾個人開發的軟件，而是全球幾十萬人參加的一場浩浩蕩蕩的運動。Joomla是目前世界上最流行的網站框架，見extensions.joomla.org，有幾千個擴展。

Joomla有不少購物系統的擴展，VirtueMart是其中最強大的一個，流行度遠遠超過其它競爭對手，并在2009年6月被評為用戶最喜歡的 10 個 Joomla 擴展之首。VirtueMart和Joomla一樣，完全免費。用VirtueMart做網店，意味著你進入了Joomla的大家庭，你開始熟悉Joomla，以后有可能低成本整合Joomla的其他擴展，以應對不斷變化的電子商務的挑戰。
7. Ubercart (免費) http://www.ubercart.org/
Ubercart是用來建立電子商務網站的,它是Drupal http://drupal.org/的一個模塊,一個后起之秀吧,現在用它的人不多. Ubercart和Oscommerce有一點點淵源,或者說是里面的許多東西,都是從那里直接繼承過來的. Oscommerce像Drupal一樣,是自己領域的開源軟件的領頭羊,我不知道Ubercart的作者是不是Oscommerce的核心開發人員,但 是絕對是一個讀過Oscommerce源代碼,建過n多個Oscommerce相關的網站,擴展過Oscommerce的各種功能的高級程序員了。
Ubercart 專門設計用來銷售比如文件下載、活動注冊、站點訪問通行證和活動票據，而不是實體產品。像 VirtueMart 需要集成到 Joomla! 中使用，Ubercart 必須集成到 Drupal 中使用。選用理想的模塊和主題，Drupal 用戶會覺得很舒服，不過如果不是 Drupal 用戶，我建議還是選擇一個更直接的平臺。
8. Zeuscart (免費) http://www.zeuscart.com/
Zeuscart 最好的是它的用戶界面，非常的豐富、迷人、用戶友好，并且跟大多數的開源界面相比不那么令人討厭。專門為中小企業設計，用戶可以創建最 SEO 友好的鏈接、禮品卡、折扣、電郵模板以及分級定價，這樣大宗訂單就可以得到降價。
9. Afcommerce (免費) http://www.afcommerce.com/
如果想讓你的電子商務平臺非常非常簡單，那么 Afcommerce 或許是你的選擇。它外觀并不很好看，不管是對顧客還是用戶，不過卻可以很快上手，對于新手來說很很理想。它有一個快速的單獨結賬頁面、顧客幫助彈出窗口，并且顧客賬戶可以通過訂單自動生成。
10. Zen Cart (免費) http://www.zen-cart.com/
ZenCart是一個免費、界面友好，開放式源碼的購物車軟件。該軟件由一些銷售商、程序員、設計師和顧問們共同開發，目的就是用戶能建立風格不同的電子商務系統。現有的一些解決方案過重于編程，而不是著眼于客戶的需求。ZenCart把銷售商和購物者的需求放在第一位。ZenCart便于安裝、便于定制并且便于管理，Zen Cart 對那些想要一個直觀的電子商務平臺不用忙亂的人很適合。它帶有一個新聞管理器、折扣優惠、電子禮券以及其他你期望的基礎功能。用戶可以可以利用大量插件中 的大多數來定制他們的店鋪，讓他們的管理體驗更加容易。然而太多的插件，使得界面變得相當凌亂，是這個平臺的劣勢。
11. SimpleCart js (免費) http://simplecartjs.com/
SimpleCart(js) 2.0 不僅支持 Paypal 付款，還支持 Google Checkout。你可以在購物車中添加增加、減少和移除按鈕，你也可以重新排列項目、改變 HTML 標簽，以及一切來來呈現心目中的購物車。不需要數據庫，不需要辯稱，也不需要頭疼。一個不到 20kb 簡單的 javascript 購物車，幾分鐘就可以安裝好。這輕量、快速、簡單易用并且完全可定制，你所需要知道的僅僅是基礎的 HTML。
12. Tomato Cart (免費) http://www.tomatocart.com/
TomoatoCart 是新一代的開源購物車解決方案。它是從 osCommerce 3 獨立出來的一個分支。隨著網絡應用變得越來越精細，現代 web 2.0 技術例如 Ajax 和富因特網應用提供了顯著的可用性提高并使得與網絡接kou-jiao互變得更快更有效。
13. CubeCart (免費) http://www.cubecart.com/
CubeCart 非常棒。它可以非常好的集成到各種網站，更具顧客立場的觀點看起來也很專業。CubeCart 3 是免費的，CubeCart 4 高級平臺要 110 英鎊。這兩者有一些顯著的不同：CubeCart 3 有3款皮膚，CubeCart 4 有5款；CubeCart 3 付款步驟有4步，CubeCart 4 只有兩步；CubeCart 3 中用戶注冊是強制性的，而 CubeCart 4 中是可選的等等。如果要長期使用我推薦購買 CubeCart 4，不過在此之前建議先試試 CubeCart 3 看看是否喜歡它的感覺。
14.StoreSprite (免費) http://www.storesprite.com/
盡管實現了完全免費，StoreSprite 提供的許多功能只能在一些付費和更流行的平臺找到。這些包括顧客忠誠度、顧客評分和評論、狀態提醒、訂單跟蹤、特價商品、暢銷商品和客戶賬戶等。這款平臺 的主要缺點是你的店鋪會帶有可見的 StoreSprite 版權事項，除非你花錢購買移除。
15.RokQuickCart (免費) http://www.rockettheme.com/extensions-joomla/rokquickcart
RokQuickCart 是 Joomla http://joomla.org/! 上一款非常非常簡單的購物車。盡管它很簡單，這既是一種幫助也是一種障礙，因此它可以在幾分鐘內建立，不過卻缺少其他平臺的一些功能，例如，它僅接受通過 Paypal 和 Google Checkout 付款。已經說過，他一般你看起來不錯，而且產品圖片展示讓人印象深刻。

例簡介

本實例介紹利用Vue實現購物車組件，頂部可以切換標簽“全部”、“好評”和“買過”的數據，標簽“全部”下還可以切換不同分類顯示商品；也可對商品進行加減，并進行跨標簽和跨分類的最終價合計；

最終效果：

實現過程

一、子組件代碼如下（shoppingCart.vue），原理分析：

1、切換標簽函數toggleType，點擊時，賦值this.currentIndex = index，同時利用計算屬性更新menu的值，從而實現切換標簽數據的功能；而this.menuTypeIndex = 0為了解決從多分類到少分類切換報錯的問題；

2、切換分類函數toggleGoods，點擊時，賦值this.menuTypeIndex = index，同時利用計算屬性更新goods的值，從而實現切換分類數據功能；

3、添加函數clickAdd，每次點擊時，數量加1，同時利用JQ實現一個商品圖片從上往下掉落到配送員箱子的過程；然后箱子的數字加1，并增加原價、優惠價和配送費用等；

4、減少函數clickMinus，每次點擊時，數量減1，同時減少原價、優惠價和配送費用等。

<template>
  <div class="sc-box">
    <div class="sc-type">
      <ul>
        <li :class="{active:currentIndex === index}" v-for="(item, index) in goodsList" :key="index" data-index="index" @click="toggleType(index)">{{item.type}}</li>
      </ul>
    </div>
    <div class="sc-content">
      <div class="sc-leftMenu" v-if="menu.length > 1">
        <ul>
          <li :class="{active:menuTypeIndex === index}" v-for="(item, index) in menu" :key="index" data-index="index" @click="toggleGoods(index)">{{item.menuType}}</li>
        </ul>
      </div>
      <div class="sc-goods">
        <ul>
          <li v-for="(item, index) in goods" :key="index" data-index="index">
            <img :class="'goods-image'+index" :src="item.imgSrc" alt="" />
            <div class="goods-mes">
              <div class="goods-name">{{item.name}}</div>
              <div class="goods-description">{{item.description}}</div>
              <div class="goods-price"><span>￥</span>{{item.price}}<span class="originalPrice">￥{{item.originalPrice}}</span></div>
              <div class="goods-buttons">
                <span class="button minus" @click="clickMinus(index)" v-if="item.number !== 0"><img src="../assets/images/shoppingCart/minus.png" alt="" /></span>
                <span class="number" v-if="item.number !== 0">{{item.number}}</span>
                <span class="button add" @click="clickAdd(index)"><img src="../assets/images/shoppingCart/add.png" alt="" /></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="sc-operation">
      <div class="sc-contact">
        <img src="../assets/images/shoppingCart/contact.png" alt="" />
        <span>聯系商家</span>
      </div>
      <div class="sc-deliveryMes">
        <div class="deliveryNumber"><img src="../assets/images/shoppingCart/delivery.png" alt="" /><span v-if="count!==0">{{count}}</span></div>
        <div class="priceMes">
          <div class="totalPrice">￥{{totalPrice}}<span>￥{{originalTotalPrice}}</span></div>
          <div class="deliveryMes">另需配送費￥{{totalDeliveryCost}}<span v-if="totalDeliveryCost !== 0">￥{{totalOriginalDeliveryCost}}</span> 支持自取</div>
        </div>
      </div>
      <div class="sc-pay" @click="clickPay">去結算</div>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
export default {
  props: {},
  data() {
    return {
      currentIndex: 0, // 當前類型index
      menuTypeIndex: 0, // 左邊菜單index
      goodsList: [{ // 整個商品數據
          type: '全部',
          menu: [{
            menuType: '推薦',
            goods: [{
                name: '排骨飯套餐',
                imgSrc: require('../assets/images/shoppingCart/timg1.jpg'),
                description: '物美價廉',
                price: 15.50,
                originalPrice: 25.36,
                number: 0,
                deliveryCost: 1,
                originalDeliveryCost: 2,
              },
              {
                name: '宮保雞丁套餐',
                imgSrc: require('../assets/images/shoppingCart/timg2.jpg'),
                description: '物美價廉',
                price: 5.50,
                originalPrice: 25.36,
                number: 0,
                deliveryCost: 2,
                originalDeliveryCost: 4,
              }
            ]
          }, {
            menuType: '折扣',
            goods: [{
              name: '排骨飯套餐',
              imgSrc: require('../assets/images/shoppingCart/timg1.jpg'),
              description: '物美價廉',
              price: 15.50,
              originalPrice: 25.36,
              number: 0,
              deliveryCost: 1,
              originalDeliveryCost: 2,
            }]
          }]
        },
        {
          type: '好評',
          menu: [{
            menuType: '推薦',
            goods: [{
              name: '排骨飯套餐',
              imgSrc: require('../assets/images/shoppingCart/timg1.jpg'),
              description: '物美價廉',
              price: 15.50,
              originalPrice: 25.36,
              number: 0,
              deliveryCost: 1,
              originalDeliveryCost: 2,
            }]
          }]
        },
        {
          type: '買過',
          menu: [{
            menuType: '推薦',
            goods: [{
                name: '排骨飯套餐',
                imgSrc: require('../assets/images/shoppingCart/timg1.jpg'),
                description: '物美價廉',
                price: 15.50,
                originalPrice: 25.36,
                number: 0,
                deliveryCost: 1,
                originalDeliveryCost: 2,
              },
              {
                name: '宮保雞丁套餐',
                imgSrc: require('../assets/images/shoppingCart/timg2.jpg'),
                description: '物美價廉',
                price: 5.50,
                originalPrice: 25.36,
                number: 0,
                deliveryCost: 2,
                originalDeliveryCost: 4,
              }
            ]
          }]
        }
      ],
      count: 0, // 總數量
      originalTotalPrice: 0, // 原總價
      totalPrice: 0, // 總價
      totalDeliveryCost: 0, // 優惠后總運費
      totalOriginalDeliveryCost: 0, // 總運費
      flag: true // 用來判斷是否執行動畫
    }
  },
  mounted() {},
  computed: {
    menu() {
      return this.goodsList[this.currentIndex].menu;
    },
    goods() {
      return this.menu[this.menuTypeIndex].goods;
    }
  },
  methods: {
    toggleType(index) {
      this.currentIndex = index;
      this.menuTypeIndex = 0; // 默認menu第一個，解決非第一個切換時報錯
    },
    toggleGoods(index) {
      this.menuTypeIndex = index;
    },
    clickMinus(index) {
      this.goods[index].number -= 1;
      this.count -= 1;
      // 價格變化
      this.originalTotalPrice -= parseFloat(this.goods[index].originalPrice); // 原總價增加
      this.totalPrice -= parseFloat(this.goods[index].price); // 優惠總價增加
      this.totalDeliveryCost -= this.goods[index].deliveryCost; // 優惠總配送費增加
      this.totalOriginalDeliveryCost -= this.goods[index].originalDeliveryCost; // 優惠總配送費增加
    },
    clickAdd(index) {
      if (this.flag) {
        this.flag = false;
        this.goods[index].number += 1;


        let that = this;
        // 動畫跳動效果
        let count = that.count + 1;
        let originalTotalPrice = parseFloat(that.originalTotalPrice) + parseFloat(that.goods[index].originalPrice); // 原總價增加
        let totalPrice = parseFloat(that.totalPrice) + parseFloat(that.goods[index].price); // 優惠總價增加
        let totalDeliveryCost = that.totalDeliveryCost + that.goods[index].deliveryCost; // 優惠總配送費增加
        let totalOriginalDeliveryCost = that.totalOriginalDeliveryCost + that.goods[index].originalDeliveryCost; // 優惠總配送費增加
        let $initImg = $('.goods-image' + index); // 被復制的圖片對象
        let $targetLocation = $('.deliveryNumber img'); // 目標購物車的圖片對象
        let $moveImg = $initImg.clone().css({ // 生成點擊添加行的圖片副本，并變成圓形
          'position': 'absolute',
          'z-index': 99,
          'width': $initImg.width() * 0.5,
          'height': $initImg.height() * 0.5,
          'border-radius': '50%'
        }).css($initImg.offset()).appendTo('body'); // 并把位移到圖片位置且添加到body
        $moveImg
          .animate({ // 先勻速向左上
            left: $initImg.offset().left - 30,
            top: $initImg.offset().top - 50
          }, 200, 'linear')
          .animate({ // 然后慢慢移到目標位置
            left: $targetLocation.offset().left + $targetLocation.width() - $moveImg.width() * 1.5,
            top: $targetLocation.offset().top + $targetLocation.height() - $moveImg.height() * 1.5
          }, 600, () => {
            $moveImg.fadeOut(100, () => { // 最后慢慢消失
              $moveImg.detach(); // 刪除掉移動對象$moveImg
              that.count = count;
              // 價格變化
              that.originalTotalPrice = originalTotalPrice.toFixed(2);
              that.totalPrice = totalPrice.toFixed(2);
              that.totalDeliveryCost = totalDeliveryCost;
              that.totalOriginalDeliveryCost = totalOriginalDeliveryCost;


              this.flag = true;
            });
          })
      };
    },
    clickPay() {
      console.log(this.totalPrice, this.totalDeliveryCost);
    }
  }
}
</script>
<style lang="less" scoped>
.sc-box {
  position: relative;
  margin: 20px;
  width: 375px;
  height: 667px;
  background-color: #fff;


  .sc-type {
    li {
      display: inline-block;
      background-color: #f5f5f5;
      color: #616161;
      margin-right: 10px;
      height: 32px;
      line-height: 32px;
      width: 80px;
      text-align: center;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;


      &.active {
        background-image: linear-gradient(to right, #fedb39, #febb2e);
        color: #000;
        font-weight: bold;
      }
    }
  }


  .sc-content {
    margin-top: 30px;
    height: 546px;
    display: flex;
    overflow-y: auto;


    .sc-leftMenu {
      height: 100%;
      width: 80px;
      text-align: center;
      background-color: #f5f9fc;
      color: #616161;


      li {
        cursor: pointer;
        transition: all 0.3s;
        height: 50px;
        line-height: 50px;


        &.active {
          background-color: #fff;
          font-weight: bold;
          color: #000;
        }
      }
    }


    .sc-goods {
      margin: 0 10px;
      width: 100%;


      li {
        position: relative;
        display: flex;
        margin-bottom: 15px;


        img {
          width: 70px;
          height: 70px;
          border-radius: 8px;
        }


        .goods-mes {
          margin-left: 8px;


          .goods-name {
            font-size: 16px;
            font-weight: bold;
          }


          .goods-description {
            margin-top: 6px;
            color: #616161;
            font-size: 12px;
          }


          .goods-price {
            margin-top: 10px;
            color: #ff6262;
            font-size: 16px;


            span {
              font-size: 12px;


              &.originalPrice {
                color: #b4b4b4;
                margin-left: 4px;
                text-decoration: line-through;
              }
            }
          }


          .goods-buttons {
            position: absolute;
            bottom: 0;
            right: 0;


            .button {
              display: inline-block;
              width: 20px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              border-radius: 50%;
              cursor: pointer;


              img {
                width: 10px;
                height: 10px;
              }
            }


            .minus {
              border: 1px solid #d0d0d0;
            }


            .number {
              display: inline-block;
              margin: 0 5px;
            }


            .add {
              background-image: linear-gradient(to right, #fedb39, #febb2e);
            }
          }
        }
      }
    }
  }


  .sc-operation {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 12px;
    color: #949494;
    display: flex;


    .sc-contact {
      display: flex;
      flex-direction: column;
      padding: 10px 10px 10px 15px;
      background-color: #000;
      border-top-left-radius: 30px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 30px;


      img {
        width: 20px;
        height: 20px;
        margin: 0 auto 3px;
      }
    }


    .sc-deliveryMes {
      margin-left: 3px;
      padding-right: 15px;
      background-color: #000;
      display: flex;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      align-items: center;


      .deliveryNumber {
        position: relative;


        img {
          position: absolute;
          top: -58px;
          left: -18px;
          width: 100px;
          height: 100px;
        }


        span {
          display: inline-block;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-radius: 50%;
          background-color: #ff6262;
          color: #fff;
          position: absolute;
          left: 35px;
          top: 0;
        }
      }


      .priceMes {
        margin-left: 66px;


        .totalPrice {
          color: #fff;
          font-size: 16px;
          margin-bottom: 3px;


          span {
            color: #949494;
            margin-left: 3px;
            font-size: 12px;
            text-decoration: line-through;
          }
        }


        .deliveryMes {
          span {
            text-decoration: line-through;
            margin: 0 6px 0 3px;
          }
        }
      }
    }


    .sc-pay {
      font-size: 14px;
      font-weight: bold;
      color: #000;
      line-height: 59px;
      flex: 1;
      text-align: center;
      background-image: linear-gradient(to right, #fedb39, #febb2e);
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      cursor: pointer;
    }
  }
}
</style>

二、父組件代碼如下（shoppingCartPage.vue），原理分析：

父組件比較簡單，主要用來調用子組件。