ベンダー:スマートShopify選択肢
7000 ワード
あなたが必要とするすべて
2022年のオンライン売上高は2021年に比べて16.1 %増加すると予想されています.しかし、人の買い物では、予想される将来のために平らなままであることになっています.これは、多くのビジネスオーナーがオンライン販売の利点を活用しようとしている初めてのオンラインストアの流入につながっている.
あなた自身やクライアントのためのオンラインストアを構築するときは、オプションの増加の需要のために利用可能な茄多があります.多くのクライアントとビジネスのオーナーは、簡単に維持し、迅速に構築され、費用対効果の高いストアをしたい.このリストのすべてのボックスをチェックすることは小さな仕事でありません、そして、多くの開発者と店オーナーは自然に彼らが構築されることができる速度のためにShopifyまたはWordPressのようなモノリシックオプションの方へ引き寄せます.多くの場合、これらのオプションを使用して直面する問題は、カスタマイズが非存在または高価(プラグイン)することができますし、彼らは恒星カスタマーサービスの経験未満を作成する傾向があります.
一方で、顧客は彼らのオンラインとモバイルショッピング経験のためにこれまでより高い予想をします.普遍的な消費者は、楽で個人的であるために彼らのオンラインショッピング経験を好みます.
ヘッドレスのフロントエンドは伝統的なモノリシックプラットフォームで構築することができます、しかし、これは標準的なバックエンド機能を可能にするために高価なプラグインに依存している人をしばしば残します.他の、より新しいオプションは、しばしば高い月額料金とあなたの総売上高のパーセンテージで来ます.これは、多くの中小企業のための主要なハードルです.
私が最近、2つの前述のオプションのどちらかより良い仕事をするというオプションが最近発見されたオプションはVendure.io です.そして、それはセットアップするのが簡単で、ヘッドホン($ 5 Mo)に安いです.そして、あなたは管理ダッシュボード(咳咳WP)に圧倒された感覚について心配する必要はありません.管理者ダッシュボードは美しく、直感的で、クライアントに手を離して完璧です.ベンダーはマイケルブロムリーによって開発されて、2019年にリリースされて、ちょうどバージョン1.4をリリースしました.私はちょうどベンダーを使用し始めているが、私の目で際立ったいくつかの側面を強調しました.下に、私はまた、迅速かつ簡単に方法を開始するベンチャーを表示します.
…と組んだ
機能
カスタマイズ可能
ベンダーの
スケーラブル
-コスト効果的
-親しみやすい
午後にセットアップしやすい
ナビゲートし、事前に設定されたダッシュボード
始めましょう
ステップ5 :前提条件
タイプスクリプトの基礎理解
ノードの基本的な理解.js
グラフの基本的な理解
SQLとデータベースの基本的理解
念頭に置いておくと、これは初心者のガイドとセットアップ、それはベンダーの完全な機能に入ることはありません.入出力
・・・・・・・・・・・・・
あなたがノードの世界に新しいならば.J .
を返します.
あなたがSQLに新しいならば、Node.js.
あなたがtypescriptの世界に新しいならば、GraphQL .
・・・・・・・・・・・・・
SQL
ここで我々は行く!
ステップ1 :次のコマンドを入力します
npx @vendure/create my-app
ステップ2 :データベースを選択します.このチュートリアルではSQLiteデータベースを使用します.ステップ3 :言語を選択してください
ステップ4:サンプルデータ?はい、どうぞ
ステップ5:ユーザ名とパスワード?SuperAdmin/SuperAdminである既定の設定を使用します.これはダッシュボードで後で変更できます
ステップ6 :コマンドを実行する
cd my-app
yarn start
ステップ7:前のステップは数分かかりますので、これはストレッチを取得し、ビールコーヒーをつかむと、あなたのベンダーサーバーを設定する上で自分を祝福する良い時間ですTypeScript
素晴らしい仕事!これで次のようにアクセスできます
The Vendure Admin GraphQL API: http://localhost:3000/admin-api
The Vendure Shop GraphQL API: http://localhost:3000/shop-api
The Vendure Admin UI: http://localhost:3000/admin
しかし、それは何を意味しますか?
Admin GraphQL API: http://localhost:3000/admin-api = Store permissions
GraphQL API: http://localhost:3000/shop-api = Putting items on the shelves and general store operations
Admin UI: http://localhost:3000/admin= View from the bosses desk
(high five!)
店舗を作る
現在利用可能な2つの人気の統合があります:Vueと次
閉じるこの動画はお気に入りから削除されています
ステップ1.クッキーのためにベンダーサーバが設定されていることを確認し、ベアラートークンではないことを確認します
手順2.フォークとその後、このレポをクローン
ステップ3.NPMのインストールと作成.環境変数プロジェクトのルートのローカルファイルと次のコードを追加します
COMMERCE_PROVIDER=vendure
NEXT_PUBLIC_VENDURE_SHOP_API_URL=http://localhost:3000/shop-api
NEXT_PUBLIC_VENDURE_LOCAL_URL=/vendure-shop-api
ステップ4.TSconfigをダブルチェックしましょう.JSONファイルと正しいフレームワークが設定されていることを確認します.これは、ベンダを選択の枠組みとして表示し、「ローカル」を26行目から30行目に置き換える. "@components/*": ["components/*"],
"@commerce": ["framework/commerce"],
"@commerce/*": ["framework/commerce/*"],
"@framework": ["framework/vendure"],
"@framework/*": ["framework/vendure/*"]
ステップ5.あなたのターミナルでは、あなたの貯蔵所を始めるために、「NPM Run dev」というコマンドを入力してください今、完全に人口が格納されたストアのデモアイテムがいっぱい表示されます.前に行って、私たちのベンダーadminダッシュボードに行くことによって接続性を確認しましょう.一度署名し、製品やコレクションを追加することができます.
我々が戻って、我々の倉庫をチェックアウトするならば、我々はNavbarでリストされるどんな新しいカテゴリーも見なければなりません、そして、速い検索は着陸ページに表示されないどんな新しい製品も持ち出さなければなりません.
https://github.com/vercel/commerce
次のJS Storefrontは、Tailwind CSSがインストールされるようになります.唯一のことはあなたの個人的なタッチを追加するには左!
TA - DAは終わった
あなたがベンダーをセットアップすることについての質問があるならば、スラック・チャンネルは役に立つと知識のある人々でいっぱいです:.
Reference
この問題について(ベンダー:スマートShopify選択肢), 我々は、より多くの情報をここで見つけました https://dev.to/mematthew123/vendure-the-smart-shopify-alternative-54k4テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol