簡単にショッピングカートを作る方法さてさて、唐突ですがインターネットがありとあらゆるものを取り込んだ現代、オンラインショッピング業界は以下のように高い伸び率を維持しています。電子商取引に関する市場調査)もちろんウェブ開発にもこの影響が大きくあって、実際クライアントさんから「お金」に関連する機能のご依頼も多かったりします。Vueで実装してみます。(最後に今回のソースコード一式をダウンロードできます)ぜひウェブ開発・学習の参考にしてみてくださいね。表示する(削除ができる)必要なパッケージをインストール全てをスクラッチから開発してもいいのですが、Laravelにはとても便利なLaravelShoppingcartというパッケージがあるので今回はこれをインストールして利用します。いっても、インストールはcomposer一発で完了します。5.4以下を利用している場合は、config/app.phpに以下の内容を追加する必要があります。5.6までしか対応していません。これに対するプルリクエストが出てましたのでそのうちサポートされる可能性はあります。次にconfigファイルが使えるようにしておきましょう。このconfigファイルでは、税率などを設定することができます。vendor:publishGloudemans\Shoppingcart\ShoppingcartServiceProviderに該当する番号を入力してエンターキーを押します。すると、configフォルダ内にcart.phpというファイルが作成されますので、以下2ヶ所を変更します。','],テストデータをつくる実際に開発を進めて行く前に、これから必要となってくる商品データをデータベース内につくっておきましょう。テーブル名はproductsです。DBのテーブルをつくるまず、以下のコマンドでモデル+マイグレーションを作成します。-m作成されたdatabase/migrations/****_**_**_******_create_products_table.phpを開いてSchemaを以下のように変更します。$table->timestamps();});では、以下のコマンドを実行してテーブルを作成します。migrateテーブルの中身はこうなります。JSONデータの自動変換ちなみにsizesはどのサイズが選べるかを保存するフィールドで、JSONで保管するのでtextを使っています。データ操作をする時に毎回json_encode()やjson_deocode()を実行するのはめんどうですし、忘れてしまうこともあるかもしれません。そのため、モデルapp/Product.phpの中でsizesは自動的にJSON⇔配列の変換ができるようにしておきます。$product->sizes;とすれば、変数の中には配列データが格納されることになります。Seederでテストデータを用意するまず以下のコマンドで専用のSeederを作成します。ProductsTableSeeder次に作成されたdatabase/seeds/ProductsTableSeeder.phpを開いて以下のようにコードを追加します。}}では、このSeederを同じフォルダにあるDatabaseSeeder.phpに登録してSeederを実行しましょう。--seed実行後、テーブルはこうなります。商品ページをつくるでは、好きな商品を選んでカートへ入れるページを作成していきましょう。ルーティングをつくるまずは以下のURLにアクセスできるようにルーティングを作成します。必要となるのは以下の4つです。Ajax/CartControllerそのため、routes/web.phpには以下のルーティングを追加します。ちなみにresource()を使うとindexcreatestoreeditupdatedestroyというデータ編集に必要なメソッドを一気に用意することができます。only()ではその中から必要なメソッドを指定しています。コントローラーをつくるでは、ルーティングで指定したコントローラーを以下のコマンドで作成しましょう。下2つのコマンドだけ--resourceがついているのは、こうすると一気にindexやstore、updateなどのメソッドを始めから用意してくれるからです。後で使うので、ProductControllerのindex()メソッドでは全てのデータを返すコードを追加しておきましょう。}}では、この時点でデータ取得できるか/ajax/productsにアクセスしてみます。うまくJSONでデータが表示されました。(Laravelでは、コントローラーで配列やオブジェクトをreturnすると、自動的にJSONにしてくれます。)ビューをつくるそして、実際にページ表示される部分を作ります。今回は、JavaScriptにVueとaxios、bootstrapのCSSをcdnで読み込むようにしましょう。^^b)パスはresources/views/products/index.blade.phpです。</script></body></html>やっていることは、Ajaxでデータを取得し、そのデータをv-forループでの表示。cartItemsは現在のカートの中身で、この個数を「カートの中身」として表示します。作成したビューをProductControllerで登録してアクセスしてみましょう。}}ページはこうなりました。カートへの追加機能をつくるでは、「カートへ入れる」ボタンの部分を作っていきましょう。参照したいサイズと個数にrefをつけてVueから参照できるようにします。value="0">そして、ボタンにクリックイベントでaddCart()を実行するようにします。@click="addCart(index)">カートへ入れる</button>addCart()の中身はこうなります。if(confirm('カートへ追加します。}},やっていることは、クリックイベントで取得したindexを使って該当するサイズと個数、商品のIDを取得し、AjaxでPOST送信しているだけです。リクエストが成功するとカートの中身cartItemsを更新します。送信先のAjax\CartControllerのstoreを以下のように変更しましょう。金額その他パラメータ(配列)という順番でadd()メソッドを実行するとデータをセッションに保持することができます。return部分の\Cart::content()は、カートの中身で、以下のような連想配列(オブジェクト)です。カートの一覧ページをつくるビューを追加では、次に商品が追加されたカートの中身を表示するページです。CartControllerは作成済みなので、index()を作り、ビューをresources/views/carts/index.blade.phpに追加しましょう。}}ビューの中身はこうなります。if(confirm('商品を削除します。});</script></body></html>少し長いですが、やっていることはAjaxを通して取得したカート情報を元にリストと合計金額などを表示しているだけです。Ajax部分をつくるでは、カートのAjax部分です。Ajax\CartControllerのindex()でデータ取得、destroy()でカート内容の削除するコードを追加します。カートデータを取得する部分index()の中に以下のような必要なデータを返すコードを追加します。Ajaxの通信元では結果データは使っていませんが、今後のことも考えて削除結果をreturnしています。カートページを確認するでは、カートページに必要なコードが全て揃いましたので実際に確認してみましょう。円表記で統一すべきですが、いろいろと複雑になってしまうので省略しています。これで、削除ボタンをクリックして商品を削除すると、削除後の合計金額や税などを自動的に再計算して表示させることができます。おまけちなみに商品一覧ページは、今のままではリロードされると初期状態でカートの中身(個数)を表示することができません。そのため、ページ表示されたらすぐにカートの情報を取得するメソッドを追加してmountedの中で実行するといいでしょう。this.getCarts();}今回のソースコードをダウンロードする今回の説明で紹介したソースコード一式を以下からダウンロードすることができます。LaravelShoppingCartのインストールは自分自身で行っていただく必要があります。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。