存储前端 App

Vue 2 SPA 有推车、 退出和账户页面 电子计算机加存储前端数字 :

• 与 EcomCart 财务报告和审定财务报表 EcomPassport· ;
• 准备 E-Com + REST APIs· ;
• 国际化支助· ;
• A11Y遵守;
• 由Vue CLI 4建造;

变化

安装

您可以在使用 Webpack 和浏览器等捆绑器时安装软件包并导入原始源,也可以使用 jsDelivr 或 UNPKG 等 CND 编译的装入.

它需要,但不包括 @ecomplus/utils (同级依赖),它应该在开始取出 SPA 之前用于声明存储设置,检查以下示例并编辑 $ecomConfig.set 与您的商店价值.

组件样式会按要求加载, 但是 存储前端 Twbs 样式应该事先导入用于基础UI.

带捆绑器

npm i --save @ecomplus/utils @ecomplus/storefront-app

// config.js
import { $ecomConfig } from '@ecomplus/utils'
$ecomConfig.set('store_id', 1011)
$ecomConfig.set('lang', 'pt_br')
$ecomConfig.set('currency', 'BRL')
$ecomConfig.set('country_code', 'BR')

// checkout.js
import './config.js'
import '@ecomplus/storefront-app/src/main'

@import "node_modules/@ecomplus/storefront-twbs/scss/styles";

光盘N

在下面添加脚本 </body> 在您的推车/检出页面中 :

<script src="https://cdn.jsdelivr.net/npm/@ecomplus/utils@1/dist/ecom-utils.polyfill.min.js"></script>
<script>
  $ecomConfig.set('store_id', 1011);
  $ecomConfig.set('lang', 'pt_br');
  $ecomConfig.set('currency', 'BRL');
  $ecomConfig.set('country_code', 'BR');
</script>
<script src="https://cdn.jsdelivr.net/npm/@ecomplus/storefront-app@latest/dist/lib/js/app.js"></script>

和之前的 UI 样式 </head>数字 :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ecomplus/storefront-twbs@5/dist/storefront-twbs.min.css">

使用量

你只需要一个 #storefront-app hTML 上的元素 :

<body>
  <main>
    <div id="storefront-app"></div>
  </main>
  <!-- scripts -->
</body>

样本 JSFiddle

我们建议在 /app/ 路线(例如: /app/index.html) (中文(简体) ).

操纵推车项目

您可以导入 @ecomplus/shopping-cart 在其他电子商务页面上,在将用户重定向到推车之前添加项目:

<script src="https://cdn.jsdelivr.net/npm/@ecomplus/shopping-cart@2/dist/ecom-cart.bundle.min.js"></script>
<script>
$('#buy-button').click(function () {
  // add item to cart
  ecomCart.addItem({
    product_id: '123a5432109876543210cdef',
    sku: 's-MP_2B4',
    name: 'Mens Pique Polo Shirt',
    quantity: 4,
    price: 42.9,
    picture: {
      normal: {
        url: 'https://samplecdn.x/mens-polo-350x350.webp'
      },
      zoom: {
        url: 'https://samplecdn.x/mens-polo.webp'
      }
    }
  });
  // redirect to checkout
  window.location.href = '/app/#/checkout';
})
</script>

关于更多细节和实例,请参阅 EcomCart 医生.

操纵客户账户

请参考 EcomPassport 医生.