「轉(zhuǎn)載」我創(chuàng)建了一個無后端的電商網(wǎng)站！

是的，我創(chuàng)建了一個沒有后端的電子商務(wù)商店（無服務(wù)器，HTML，CSS和JS），不錯，你沒有看錯！我創(chuàng)建了一個電子商務(wù)（或電子商店）網(wǎng)站，沒有一行后端編程語言。我的職業(yè)生涯曾經(jīng)是一名前端開發(fā)人員（雖然我知道后端）。因此，對于創(chuàng)建電子商務(wù)網(wǎng)站的這個新項目， 我就不想使用我常用的工具，因為它們都涉及到后端。可以使用哪些工具來創(chuàng)建電子商務(wù)網(wǎng)站？作為一個認(rèn)為PHP是最好語言的Web開發(fā)人員，我所知道的創(chuàng)建電子商店的工具是開源CMS有：Magento，Prestashop和WooCommerce。問題：它們涉及后端編程（我想在這里避免）。還有其他托管平臺，如：Shopify，SquareSpace和Wix。問題：如果添加CSS和JS庫，維護主題Theming有時會很痛苦。這就是我遇到Stripe Checkout和Stripe Orders的方式。問題：結(jié)賬很容易，但處理庫存和其他東西很麻煩。那么我最后選擇了什么？完全隨機，我在Facebook上發(fā)現(xiàn)了Snipcart！經(jīng)過一番搜索和思考，我將使用Stripe，因為他們有一個很好的文檔，幸運的是，我在閱讀一些Facebook的開發(fā)組帖子時掉在Snipcart坑。簡而言之，Snipcart有一個SDK，就像任何其他JS SDK或庫一樣。此SDK鏈接到您的Snipcart帳戶的ID，你可以在其中管理訂單，產(chǎn)品和其他內(nèi)容（運輸，稅收......！）。你只需要3件事就可以運行：1. 注冊并將SDK添加到您的網(wǎng)站。2. 他們的爬蟲必須在您的頁面上找到產(chǎn)品定義3. 在你的網(wǎng)站上隨處添加一些添加到購物車按鈕！在那里，我遇到了第一個問題。如果我使用SPA，我的產(chǎn)品將不會在頁面加載時呈現(xiàn)，除非在標(biāo)記中靜態(tài)地添加我的產(chǎn)品?，F(xiàn)在有3個選項：靜態(tài)HTML文件，SSR或Prerendering。我決定使用webpack的prerender-spa-plugin.進行預(yù)渲染：1. 對于本機JS：你可以使用任何靜態(tài)站點生成器，如Jekyll，Hugo ......2. 對于任何JS SPA：您可以使用webpack prerender-spa-plugin。好的，我們?nèi)绾卧O(shè)置一個無服務(wù)器僅有前端的電子商務(wù)網(wǎng)站？1. 首先，注冊https://snipcart.com。2. 然后，在您的帳戶中，轉(zhuǎn)到個人資料 - > api密鑰或點擊以下鏈接：https：//app.snipcart.com/dashboard/account/credentials。3. 你會看到一個代碼片段，基本上只是一些腳本標(biāo)簽鏈接到j(luò)Query的（是啊...）的Snipcart SDK與您的API密鑰。5. 在HTML中，粘貼代碼片段。7. 添加產(chǎn)品定義（ID，價格，名稱和URL是必需的）：https://docs.snipcart.com/configuration/product-definition。8.data-item-url是用來定位在本產(chǎn)品確定指標(biāo)呈現(xiàn)。在訂單的最后一步，Snipcart將驗證購物車中的產(chǎn)品是否與定義的產(chǎn)品相匹配。這是為了確保沒有人用JS 改變價格。9.添加prerender-spa-plugin以及要生成/呈現(xiàn)的URL。10.如果要在購物車中顯示商品數(shù)量，請?zhí)砑佣ㄖ婆渲?1.有兩個CSS類是必需的，它們被Snipcart用于注入相應(yīng)的數(shù)據(jù)：https://docs.snipcart.com/getting-started/the-cart ?，F(xiàn)在，一切似乎都很好，用npm run serve測試它，如果一切正常，用npm run build或yarn build構(gòu)建它。主機用什么？在console.firebase.google.com上創(chuàng)建Firebase項目。轉(zhuǎn)到菜單中的主機并按照指示進行操作。完成所有指示后，編輯firebase.json。我們將公共目錄更改為dist，但是，如果你的構(gòu)建文件夾的名稱不同，請將其重命名為構(gòu)建文件夾的任何內(nèi)容。我們添加了一些重寫以允許使用SPA（除現(xiàn)有文件或文件夾之外的所有URL都重定向到index.html，類似于Apache重寫）。就是這樣！這是我制作的電子商務(wù)網(wǎng)站：https://futari.fr。這就是我創(chuàng)建一個電子商務(wù)網(wǎng)站的方式，沒有一行后端，只有一個靜態(tài)文件托管服務(wù)（與AWS S3一樣）。

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章："「轉(zhuǎn)載」我創(chuàng)建了一個無后端的電商網(wǎng)站！"，僅為提供更多信息供用戶參考使用或為學(xué)習(xí)交流的方便。我們公司提供：網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù)，歡迎聯(lián)系我們提供您的需求。

分享名稱：「轉(zhuǎn)載」我創(chuàng)建了一個無后端的電商網(wǎng)站！
分享鏈接：http://www.bm7419.com/news23/311873.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、虛擬主機、網(wǎng)頁設(shè)計公司、響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)