「转载」我创建了一个无后端的电商网站!

2024-01-03    分类: 网站建设

是的,我创建了一个没有后端的电子商务商店(无服务器,HTML,CSS和JS),不错,你没有看错!我创建了一个电子商务(或电子商店)网站,没有一行后端编程语言。我的职业生涯曾经是一名前端开发人员(虽然我知道后端)。因此,对于创建电子商务网站的这个新项目, 我就不想使用我常用的工具,因为它们都涉及到后端。可以使用哪些工具来创建电子商务网站?作为一个认为PHP是最好语言的Web开发人员,我所知道的创建电子商店的工具是开源CMS有:Magento,Prestashop和WooCommerce。问题:它们涉及后端编程(我想在这里避免)。还有其他托管平台,如:Shopify,SquareSpace和Wix。问题:如果添加CSS和JS库,维护主题Theming有时会很痛苦。这就是我遇到Stripe Checkout和Stripe Orders的方式。问题:结账很容易,但处理库存和其他东西很麻烦。那么我最后选择了什么?完全随机,我在Facebook上发现了Snipcart!经过一番搜索和思考,我将使用Stripe,因为他们有一个很好的文档,幸运的是,我在阅读一些Facebook的开发组帖子时掉在Snipcart坑。简而言之,Snipcart有一个SDK,就像任何其他JS SDK或库一样。此SDK链接到您的Snipcart帐户的ID,你可以在其中管理订单,产品和其他内容(运输,税收......!)。你只需要3件事就可以运行:1. 注册并将SDK添加到您的网站。2. 他们的爬虫必须在您的页面上找到产品定义3. 在你的网站上随处添加一些添加到购物车按钮!在那里,我遇到了第一个问题。如果我使用SPA,我的产品将不会在页面加载时呈现,除非在标记中静态地添加我的产品。现在有3个选项:静态HTML文件,SSR或Prerendering。我决定使用webpack的prerender-spa-plugin.进行预渲染:1. 对于本机JS:你可以使用任何静态站点生成器,如Jekyll,Hugo ......2. 对于任何JS SPA:您可以使用webpack prerender-spa-plugin。好的,我们如何设置一个无服务器仅有前端的电子商务网站?1. 首先,注册https://snipcart.com。2. 然后,在您的帐户中,转到个人资料 - > api密钥或点击以下链接:https://app.snipcart.com/dashboard/account/credentials。3. 你会看到一个代码片段,基本上只是一些脚本标签链接到jQuery的(是啊...)的Snipcart SDK与您的API密钥。5. 在HTML中,粘贴代码片段。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一样)。

非常感谢您读完创新互联的这篇文章:"「转载」我创建了一个无后端的电商网站!",仅为提供更多信息供用户参考使用或为学习交流的方便。我们公司提供:网站建设、网站制作、官网建设、SEO优化、小程序制作等服务,欢迎联系我们提供您的需求。

分享名称:「转载」我创建了一个无后端的电商网站!
分享链接:https://www.cdcxhl.com/news23/311873.html

成都网站建设公司_创新互联,为您提供微信公众号虚拟主机网页设计公司响应式网站静态网站全网营销推广

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设