ショッピングカートの作り方。おすすめのソースコードも紹介します

2021年4月20日

ネットショップを運営するためには、お客さんが商品を購入するためのショッピングカートの導入が必須です。しかし、ネットショップを自作する場合、どのようにショッピングカートを組み込めばよいか分からないという方もいらっしゃるでしょう。

そこで、この記事では、ネットショップ初心者でも挑戦しやすいショッピングカートの作り方と、無料で使えるショッピングカートのソースコードを解説します。

ショッピングカートは欠かせない

昨今では、ネットで買い物をする際は、ショッピングカートを利用するのが当たり前になっています。それほど、ショッピングカートはネットショップにとって欠かせない機能なのです。

ショッピングカートが分かりずらいとお客さんは離脱してしまう

ショッピングカートが使いずらいと、お客さんはすぐに離脱してしまいます。そうならないように、ネットショップを開設する際は、ショッピングカートにもこだわる必要があります。

ショッピングカートがネットショップ成功の鍵

ネットショップを成功させるには、お客さんが商品を購入しやすいサイト作りを心がける必要があります。

ネットショップを開設する段階で使いやすくて成約率の高いショッピングカートを作っておけば、ネットショップを成功へ導くことができるでしょう。

ショッピングカートの作り方

ショッピングカートは、HTMLとCSS、そしてJavaScriptを駆使すれば作ることができます。

ここからは、ショッピングカート作りにおけるHTMLとCSS、JavaScriptの役割を解説します。プログラミングを学習する際の参考になさってください。

HTML

HTMLは、Webサイトの骨組みとなる部分を制作するための言語です。ショッピングカートも基本となる骨組みが必要なので、最初はHTMLで作っていくことになります。

と言っても、実はショッピングカートの中身はとても単純で、必要な要素は以下の5種類だけです。

・お気に入り追加ボタンと商品削除ボタン
・商品名と商品説明文
・商品画像
・購入個数の調整ボタン
・合計金額

これらをHTMLで作っていきます。

CSS

CSSは、ショッピングカートの見た目を整える際に用いる言語です。

ショッピングカートの見た目が分かりにくいと、お客さんは購入まで進んでくれません。そのため、分かりやすいショッピングカートをCSSで作る必要があります。

JavaScript

JavaScriptは、お客さんのWebブラウザとネットショップ側とのやりとりをスムーズに行うために必要な言語です。例えば、お客さんが商品を購入する際に住所を入力し忘れた際に、エラーメッセージを表示させるのもJavaScriptの役割です。

シンプルなショッピングカートに最適なjQuery

ショッピングカートを作る際は、jQueryを利用するとより簡単に設計できるようになります。jQueryはJavaScriptライブラリのひとつで、jQueryを使えばJavaScriptを使用したアプリケーションがより書きやすくなります。

シンプルなショッピングカートの例

jQueryは、シンプルなショッピングカートを作りたい方におすすめです。jQueryを使えば、以下のようなショッピングカートを作ることができます。

参考：STUDIO KEY iQuery　シンプルショッピングカート

無料で利用できるショッピングカートのソースコード

ショッピングカートは自分でイチから作ることもできますが、プログラミング初心者にとっては難易度が高めです。

そこで、手軽に利用できる無料のショッピングカートのソースコードをご紹介します。

シンプルさが魅力のショッピングカート

「Flat Cart」は、シンプルで見やすさバツグンのデザインが魅力のショッピングカートです。

左側から、商品画像、商品名、商品価格、数量、消費税、合計数量が記載されています。

購入する商品の数量を設定したら、上下に配置されている「Update cart」ボタンをクリックすることで、次のページに進む仕組みになっています。シンプルな設計なので、英語のままでも分かりやすいですよね。

もちろん、自分のネットショップに導入する際は日本語に変換して使用できます。その他、カラーもネットショップのデザインに合わせて変更していくと良いでしょう。

参考：Flat Cart

プロモーションコードを入力できるショッピングカート

縦方向に並んだシンプルな印象の「Responsive Table-less Shopping Cart」は、名前の通りテーブルを使用していないショッピングカートです。

スッキリとした見た目が特徴で、どこかクラシカルな印象のフォントが使用されています。

カート内には、商品画像、品番、商品名、数量、価格、合計金額が記載されています。さらに、在庫がある場合は「IN STOCK」、在庫がない場合は「OUT OF STOCK」と表示される仕組みになっています。

商品の購入をやめたい時は、右側の×印で商品を削除できます。また、一番下にある「Have A Promo Code?」には、クーポンやプロモーションコードを入力できます。

参考：Responsive Table-less Shopping Cart

商品画像がスクロールするショッピングカート

「Delicious Shopping Cart」は、その名前の通り、美味しそうなデザインが魅力のショッピングカートです。

表示画面は小さくても、ショッピングカートに入れた商品画像がスクロールして表示されるため、視覚的に見やすいのが特徴です。

商品画像右上の数量を設定すると自動的に商品価格も切り替わるので、合計金額を確認しながら買う商品の個数を決定できます。商品画像下側には、商品金額の合計と消費税、送料が表示され、一番下でトータルの利用金額を確認できます。

購入する際の「Get them !」というボタンと前のページに戻る際の「←Return to shop」というボタンをクリックするとポコンッと動くところに製作者のこだわりが感じられますね。

参考：Delicious Shopping Cart

商品説明文も記載されるショッピングカート

シンプルなショッピングカートを探しているなら「Responsive Shopping Cart」がおすすめです。

左から、商品画像、商品名、商品説明文、価格、数量、金額が表示されています。このショッピングカートの特徴は、商品名の下に説明文が表示される点です。「やっぱり購入をやめようかな」と思っている人も説明文を読むことで、「これなら買おう」と思い直す可能性があります。

また、商品の数量を変更すると、自動的に下の金額が更新されるのもポイントです。お客さんは、下に表示された商品の合計金額と消費税、送料、トータルの費用を確認しながら商品を購入することができます。

商品をキャンセルしたい場合は、「Remove」で簡単に削除できます。

参考：Responsive Shopping Cart

モノクロでシンプルなショッピングカート

モノクロのシンプルなデザインが特徴のショッピングカートが「Responsive jQuery Shopping Basket」です。

一番上にプロモーションコードを入力するスペースがあります。商品欄には、商品画像、商品名、選択したカラーまたはサイズ、商品コード、価格、数量、合計金額が表示されています。

商品のカラーやサイズが表示されるので、お客さんは購入へ進む前にカラーやサイズの間違いに気づくことができます。また、商品画像サイズが120×166で固定されているのもポイントです。

参考：Responsive jQuery Shopping Basket

カラーとサイズを確認できるショッピングカート

商品画像を大きく表示できるショッピングカートの中では、「Shopping cart」がおすすめです。

商品画像が大きいので、インテリア雑貨や家具を取扱うネットショップのショッピングカートに最適です。

商品画像の右側には、商品名と商品説明文が表示されています。その下に、商品の単価と合計金額が表示される仕組みとなっています。カラーとサイズを選べる商品の場合は、一番右側の箇所で選んだカラーとサイズが確認できます。

参考：Shopping cart

お気に入り商品と比較できるショッピングカート

Alexさん制作の「Shopping cart」は、お気に入りに追加した商品を確認しながら購入する商品を決められるショッピングカートです。

購入画面とお気に入りページが横一列に並ぶので、自分が過去にお気に入りに追加した商品を見ながら、どれを購入しようか吟味できるのがメリットです。

ショッピングカートには商品名と金額が表示されるようになっています。また、トータルの金額は一番上で確認できます。

参考：Alexのショッピングカート

商品ページと一体化したショッピングカート

商品ページを見ながら気になる商品をカートに入れられるショッピングカートが「Sliding Shopping Cart & Store」です。

商品ページとショッピングカートが一体になっており、商品ページで商品を確認しながら気に入った商品をカートへ追加できます。追加した商品は右上にある「Cart」をクリックすると確認できます。

ショッピングカートで数量を変更すると、自動的に商品金額も変更される仕様になっています。

参考：Sliding Shopping Cart & Store

商品を簡単に取り消せるショッピングカート

jQueryではなく、Zeptoを使用してもシンプルなショッピングカートが作成できます。例えば、Bart Veneman氏のショッピングカートは、シンプルで見やすいのが魅力です。

商品が縦一列にならび、それぞれの商品欄に商品画像、商品名、商品説明文、商品金額が表示されます。商品の数量をプラスとマイナスを押すだけで簡単に変更できるのもポイントです。

商品を取り消したい場合は、商品金額の上にマウスカーソルを持っていくと表示される「Remove」をクリックすれば簡単に取り消せます。

参考：Bart Veneman氏のショッピングカート

自動的に合計金額が更新されるショッピングカート

視覚的に分かりやすいショッピングカートが希望なら「VueJS 2 Simple Shopping cart」がおすすめです。

商品画像、商品名、商品金額、数量のみで構成されたシンプルなショッピングカートなので、誰でも見やすいのが特徴です。商品の数量を変更すると、自動的にカート内の数量と金額も更新されていきます。

商品の購入をキャンセルする場合は、右側のゴミ箱アイコンをクリックするだけなので簡単ですよ。

参考：VueJS 2 Simple Shopping cart

月額サービスに最適なショッピングカート

商品やサービスを利用する際、「規約に同意する」というチェックボタンをよく見かけますよね。「Responsive Shopping Cart」では、規約に同意したお客さんだけが購入ページに進めるようになっています。

ショッピングカート内の各商品には、商品アイコンと商品名、月ごとの更新料が記載されています。商品を購入しない場合は「REMOVE」ボタンで削除できます。サンプルのように、規約ありきの月額サービスを提供したい場合に最適なショッピングカートです。