外有很多开源商城系统，对于做外贸电子商城系统是绝对的很好的开源系统，想做外贸开源网店系统的站长们，不用发愁了，下面所说的英文开源网店系统总有一款适合您，仔细研究下。
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），原理分析：

父组件比较简单，主要用来调用子组件。