SnipcartとTakeshapeでJamstackの上でecommerceサイトを構築する方法
我々のステップバイステップガイドに従って、30分以内に自分の店を作成します
新しいクライアントがドアに入って、オンラインストアを求めるとき、あなたはあなたのクライアントのために着陸ページとマーケティングウェブサイトを作るために、Jamstackを使っていると言います.Jamstackサイトがこれを運ぶことができる方法が、ありません?悪い!
実際には、それがeCommerceサイトの構築に来ると、Jamstackはビートすることはできません.eコマース事業では、変換の最適化が成功するために必要であり、あなたの変換率を高めるための最良の方法の一つは、燃えるような高速で、お客様の製品と一緒にスケールのウェブサイトを持っていることです.
インstudy run on cart abandonment タミーEvertsから、彼女は「最大の転換を最大にするために見つけました、注文ページを確認するために着陸ページからの取引のすべてのページは、そうしなければなりません...」秒単位ですべてのページを提供する任意のデータベース駆動サイトの高い順序ですが、それはCDNから提供されている静的サイトのための簡単な妙技です!
さらに、多くの電子商取引プラットフォームは独自のウェブサイトビルダーに結び付けられたデータ管理の独自のスタイルを持っています、そして、これらのサイトはJamstackで得られるものよりずっと遅いです.
代わりに、独自のニーズに合わせて調整することができますし、グローバルCDNに展開するヘッドレスCMSを使用して、高速で安定したサイトを取得する最良の方法ですし、よく変換します.しかし、どのように、あなたはショッピングカート、クレジットカード処理と注文取扱いのような機能を提供しますか?
エンターSnipcart , Jamstackのためのecommerceソリューション!
彼らはフロントエンドの種類を使用しないか、またはどのように在庫を管理する気にしないので、SnipcartはJamstackのeコマースに適しています.ユーザーが“カートに追加”ボタンをクリックすると、データはsnipcartのJavaScript SDKに渡され、残りはそれらによって処理されます!彼らは、ショッピングカートとチェックアウトの流れを提供します注文を処理するダッシュボード、放棄カート、および顧客データ;とより強力なアプリケーションのAPI.
一緒にタケシとスニーカーを使うこと
このデモでは、我々はTeceshapeのCMSと静的サイトジェネレータを使用して、お客様のサイトを構築するために使用してください.そして、我々は30分以下でそれをすべてします!
ブライアン彼の経験は、takeshapeとスニペットを接続します.どのように彼はすべてが一緒に収まるかを考え出してください!
まず、TAKESHAPEの“Shape Shop”のサンプルプロジェクトをコピーして、スクリプトをスクリプトに埋め込むことでSnipCartをインストールすることで、eコマースサイトを作成します.それから、我々はSnipcartで働くために「カートに加える」ボタンを変更して、いくつかの追加分野でTAKEHAPEで我々の製品をアップデートします.最後に、我々の新しいサイトをテストします.
サンプルプロジェクトを作成します
Takeshapeを使用してあなたの初めての場合は、必要がありますsign up for a free account . 次に、Shapes Shopテンプレートを使用して新しいプロジェクトを作成し、Githubからスタータープロジェクトをクローンします
git clone https://github.com/takeshape/takeshape-samples.git takeshape-samples && cd takeshape-samples/shape-shop
プロジェクトにsnipcartをインストールします
したら、サンプルストアを持っていると実行している、それはsnipcartアカウントを設定する時間です.
アフターユーsign up for a free Snipcart account , 次のカートにアクセスできる任意のページにCSSファイル、スクリプトタグ、および追加のdivを含める必要がありますtheir basic installation instructions .
あなたのナビゲーションでショッピングカートへのリンクを含める場合は、おそらくこれはあなたのサイト上のほとんどのページである可能性が高くなります.それで、我々はTsueshapeプロジェクトのデフォルトレイアウトにSnipcartのコードを加えます.
シェイプショッププロジェクトでは
layouts/default.html . snipcartのcssファイルは<head> 他のCSSリンクの後の要素<link rel="stylesheet" href="/stylesheets/base.css"/>
<link rel="stylesheet" href="/stylesheets/feature.css"/>
<link rel="stylesheet" href="/stylesheets/footer.css"/>
<link rel="stylesheet" href="/stylesheets/header.css"/>
<link rel="stylesheet" href="/stylesheets/hero.css"/>
<link rel="stylesheet" href="/stylesheets/pagination.css"/>
<link rel="stylesheet" href="/stylesheets/products.css"/>
<link rel="stylesheet" href="/stylesheets/thumb.css"/>
<!-- Snipcart CSS file goes here -->
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.11/default/snipcart.css" />
div 直前</body> タグ<script src="/javascripts/main.js"></script>
<!-- Snipcart div and JS here -->
<div hidden id="snipcart" data-api-key="{{YOUR-SNIPCART-API-KEY}}"></div>
<script src="https://cdn.snipcart.com/themes/v3.0.11/default/snipcart.js"></script>
</body>
{{YOUR-SNIPCART-API-KEY}} SnipCartからAPIキーを使用しますAccount → API Keys . 私たちは“テスト”モードでは、我々は後で購入フローを確認するために偽のクレジットカード番号を使用できるようになります起動します.
今、我々は任意のページ上のsnipcartのHTML APIへのアクセスを持っている.
SnipCartの“カートに追加”ボタンを使用します
次は、私たちの
pages/product/individual.html SnipCartの“カートに追加”ボタンを追加するテンプレート.SnipCartは、HTMLとしてページのカートボタンを見つけることを期待します
<button> タグの代わりに<a> タグは、我々の最初の変更です.我々は、形状ショップが付属するアンカーを交換します.<button class="button snipcart-add-item">
Add to cart
</button>
button クラスはスタイリング用であり、シェイプショップ用のデフォルトCSSに組み込まれています.The snipcart-add-item クラスはSnipCartのJavaScriptに製品情報がある場合、およびカートに項目を追加するときにキーです.ここから、我々はボタンを介して追加の製品の詳細を追加する必要がありますdata attributes 我々のtakeshapeデータからいろいろな変数で.
Shape Shopテンプレートには、この作品を作るために必要なフィールドのほとんどを持つ「製品」コンテンツタイプが付属しています.データは、Takeshapeから取得されます
data/product.graphql ファイルと「製品」変数としてテンプレートに提供されます.ここで私たちのボタンは、そのデータを追加する必要がありますが追加されます.
<button class="button snipcart-add-item"
data-item-id="{{ product.name }}"
data-item-price="{{ product.price }}"
data-item-url="{{ product | route('product') }}"
data-item-description="{{ product.description }}"
data-item-image="{{ product.image.path | image }}"
data-item-name="{{ product.name }}">
Add to cart
</button>
最初に
data-item-id は、おそらく名前文字列からキーを付けてはいけません.これを修正するには、ユニークなSKU番号をお勧めします.ほとんどのお店は在庫管理システムに組み込まれています.我々は、我々のCMSにこの分野を加える必要があります.他の潜在的な問題は、価格は常に同じです.我々のデータでは、我々はすでに「販売価格」を持っています私たちは、商品が販売されているかどうか、我々は常に正しい価格をsnipcart渡すことを確認する必要があります.
Takeshapeであなたの製品にSkuフィールドを加えてください
最初に、我々はTakeShapeのプロジェクトに行って、SkUで新しいフィールドを加えるために製品内容タイプを編集する必要があります.この「sku number」または「id」を呼び出すことができます.必ずフィールドの名前に注意してください.
変更内容をcontent typeに保存し、新しいフィールドを
data/product.graphql :query {
getProductList(sort: [{field: "_enabledAt", order: "desc"}]) {
total
items {
_contentTypeName
_enabledAt
name
skuNumber
...
}
}
}
/pages/product/individual.html . 製品がSKUを持っていない場合、条件付きでテンプレートに追加できます.data-item-id="{{ product.skuNumber if product.skuNumber else product.name }}"
data-item-price="{{ product.salePrice if product.salePrice else product.price }}"
サイトのテスト
ローカルで動作している間、我々は“場所の順序”ボタンに到達するまでチェックアウトフローをテストすることができます.その後、Snipcartは、製品情報をチェックするローカルサイトをクロールすることができなくなります.これはsecurity feature 誰かがDevToolsで価格を変更しないでくださいし、あなたのサイトで安いものを購入することを確認してください!
あなたのサイトライブを取得するにはTakeShape’s 1-click Netlify integration ビルドして展開します.Snipcartもガイドがありますsetting up ngrok to make local URLs accessible to their service .
あなたが既にライブサイトで働いているならば、あなたはそうすることができますset up a branch-based URL in Netlify あなたの新しい支店をプッシュし、そこを表示します.
あなたの背中Snipcart account settings , あなたのライブショップのドメイン名を追加する必要があります.「ストア構成」セクションで"Domains & URLs" と適切な情報をそこに追加します.Live URLにあなたのサイトを公開すると、SnipCartは、“Add to Cart”ボタンのデータセットに基づいてドメインで見つけた製品をCMSの「製品」セクションに追加することがわかります.
最後に、チェックアウトフロー(ライブまたはローカル)のテストモードで完了すると、これらの偽のクレジットカードの資格情報を提供することができます
4242 4242 4242 424212312/25 , 例えば.ここからどこへ行くか
この記事は、ちょうどスニーカーとタケシが一緒にすることができるものの表面を掻きました.カスタム製品のオプションを作成し、ストアのメールを管理し、さらにあなたのヘッダーにカートの情報を追加することができます!あなたがデータ、サイト、および他のすべてを制御するので、あなたはコントロールを持っています.
Reference
この問題について(SnipcartとTakeshapeでJamstackの上でecommerceサイトを構築する方法), 我々は、より多くの情報をここで見つけました https://dev.to/takeshape/how-to-build-an-ecommerce-site-on-the-jamstack-with-snipcart-and-takeshape-3ha3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol