我创建了一个无后端的电商网站!

banq 18-09-13
         

是的,我创建了一个没有后端的电子商务商店(无服务器,HTML,CSS和JS),不错,你没有看错!我创建了一个电子商务(或电子商店)网站,没有一行后端编程语言。

我的职业生涯曾经是一名前端开发人员(虽然我知道后端)。因此,对于创建电子商务网站的这个新项目, 我就不想使用我常用的工具,因为它们都涉及到后端。

可以使用哪些工具来创建电子商务网站?
作为一个认为PHP是最好语言的Web开发人员,我所知道的创建电子商店的工具是开源CMS有:Magento,Prestashop和WooCommerce。

问题:它们涉及后端编程(我想在这里避免)。

还有其他托管平台,如:Shopify,SquareSpace和Wix。

问题:如果添加CSS和JS库,维护主题Theming有时会很痛苦。

我想知道:是否有某种API链接到平台来处理这个问题?这样,我可以专注于前端(我想使用Vue)。

这就是我遇到Stripe Checkout和Stripe Orders的方式。

问题:结账很容易,但处理库存和其他东西很麻烦。

那么我最后选择了什么?

完全随机,我在Facebook上发现了Snipcart!

经过一番搜索和思考,我将使用Stripe,因为他们有一个很好的文档,幸运的是,我在阅读一些Facebook的开发组帖子时掉在Snipcart坑。

简而言之,Snipcart有一个SDK,就像任何其他JS SDK或库一样。此SDK链接到您的Snipcart帐户的ID,你可以在其中管理订单,产品和其他内容(运输,税收......!)。

你只需要3件事就可以运行:

1. 注册并将SDK添加到您的网站。
2. 他们的爬虫必须在您的页面上找到产品定义
3. 在你的网站上随处添加一些“添加到购物车”按钮!

我决定用Vue制作SPA并在Firebase托管上托管它(它是免费的!)。

在那里,我遇到了第一个问题。如果我使用SPA,我的产品将不会在页面加载时呈现,除非在标记中静态地添加我的产品。

现在有3个选项:静态HTML文件,SSR或Prerendering。
我决定使用webpack的prerender-spa-plugin.进行预渲染:

1. 对于本机JS:你可以使用任何静态站点生成器,如Jekyll,Hugo ......
2. 对于任何JS SPA:您可以使用webpack prerender-spa-plugin。
3. 对于Vue,如果你知道Nuxt:你可以使用nuxt generate CLI命令。

好的,我们如何设置一个无服务器仅有前端的电子商务网站?

/!\ 重要的是,我将Vue用于我的项目,但它适用于任何框架,甚至没有框架。

1. 首先,注册https://snipcart.com。
2. 然后,在您的帐户中,转到个人资料 - > api密钥或点击以下链接:https://app.snipcart.com/dashboard/account/credentials。
3. 你会看到一个代码片段,基本上只是一些脚本标签链接到jQuery的(是啊...)的Snipcart SDK与您的API密钥。
4. 现在,使用CLI 3创建您的Vue项目(推荐)。
5. 在HTML中,粘贴代码片段。
6. 创建Vue实例并将其链接到路由器(vue-router)。
7. 添加产品定义(ID,价格,名称和URL是必需的):https://docs.snipcart.com/configuration/product-definition。

8.data-item-url是用来定位在本产品确定指标呈现。在订单的最后一步,Snipcart将验证购物车中的产品是否与定义的产品相匹配。这是为了确保没有人用JS 改变价格。
9.添加prerender-spa-plugin以及要生成/呈现的URL。
10.如果要在购物车中显示商品数量,请添加定制配置
11.有两个CSS类是必需的,它们被Snipcart用于注入相应的数据:https://docs.snipcart.com/getting-started/the-cart 。

现在,一切似乎都很好,用npm run serve测试它,如果一切正常,用npm run build或yarn build构建它。

主机用什么?在console.firebase.google.com上创建Firebase项目。转到菜单中的主机并按照指示进行操作。完成所有指示后,编辑firebase.json。

我们将公共目录更改为dist,但是,如果你的构建文件夹的名称不同,请将其重命名为构建文件夹的任何内容。

我们添加了一些重写以允许使用SPA(除现有文件或文件夹之外的所有URL都重定向到index.html,类似于Apache重写)。

就是这样!这是我制作的电子商务网站:https://futari.fr。

这就是我创建一个电子商务网站的方式,没有一行后端,只有一个静态文件托管服务(与AWS S3一样)。

Yes, I created an e-commerce shop with no backend

         

4