今回はlaravel8を使用してamazonを真似たサイトkauzonを制作してみました。
使用ライブラリは、laravel-breeze,jquery,ratyjs,swiperjs,tailwind,stripe,ajaxです。
ユーザー登録は適当なメールアドレスパスワードでも登録していただいて大丈夫です。（登録メールアドレスに確認のメールが行く設定にはしていません）
ログインユーザーは
test1@test.com
testuser1
と同じ形式で5番まで準備しています。ぜひ利用してください。
決済の際のテストカード番号は424242424242です
検索機能では入力するたびに候補を表示したかったのでajaxをつかいフォーカスしたときはランダムなカテゴリーを10件取得し、文字を入力したときはあいまい検索で候補が取得できるようにしました。
検索結果がないときは見つかりませんでしたのページに遷移し、見つかれば商品詳細ページに遷移します。検索結果を遷移先ページにも表示したいのでredirectする際にsessionとして$requestの検索結果をviewに送りsessionがある場合は表示するようにしました。
関係ない単語まで取得されてしまう場合もあるのでもっと詳しい検索の仕方が見つかり次第変更していきたい
セール開催や特別なイベントのページは作成できていないのでindexに飛びます
商品詳細ページでは商品情報のほかにreviewのrelationで取得しviewからmodelの関数を呼び出して、商品の評価数と、評価平均を表示しています。
下のレビュ一覧はajaxで取得しておりselectを変更すると表示条件にそった内容にsortされます。
カート機能はlaravelとの情報のやり取りがしやすいようにcookieで実装しました。
カートに商品を入れた後に追加でカートに入れるを押すと加算される仕組みにしたのですが、
１度に購入できる数を越しても増やせるようになってしまっているので、エラーを表示するようにし、決済の画面に遷移する前にもカートに入っている数が上限の数を超えていないかの関数を作り超えていればサーバーからエラーを返す処理を作っていきたいと思っています。
今すぐ買うではstripeを使って決済画面を導入しました。
dbの商品情報と選択された個数で決済します。
カートから買った時と今すぐ買うで買った商品の決済後ページは変えることができたのですが、webhookの設定がうまくできておらず、getで来た時にカートを削除するようにしましたが問題が多いので、webhookを使ってできるようにしできしだい購入履歴ページを作成します。
レビュー書き込みでは同じ人が複数書き込みできないように、以前にレビューを書き込んでいないかを調べて書き込んでいれば編集ができるように、書き込んでいれば新規レビューができるようにしています。
削除機能もつけれるようにするかも考えています。（完全削除ではなくflagで管理）
カート画面では商品情報（review数と平均も）を表示し、右側の小計 レジに進むの数はajaxで取得しカートから削除数量変更してもリロードされずに変更されるようにしています。
ホームのこれにも注目は２カテゴリーの中から毎回ランダムで10件分表示しています。
dbのカテゴリーテーブルは商品と多対多のrelationでつないでいて１商品に複数のカテゴリーを割り当てることができるのでかぶった商品が表示されることがあります。
件数が１０件ないものだと見栄えが悪いので数が増えたらカテゴリーの商品が10件以上あるもののみを取得できるようにし、読み込みごとにランダムで取得するのをやめて１日に一度のみランダムで取得にしてcacheで表示して２度目以降はcacheが残っている間は読み込みを早くするなどしていきたい
各カテゴリ一覧では多対多のrelationを使ったデータをcollectionで取得できなかったので、取得したデータをcollectionに変換してpaginateで表示しました。
モバイル版のレスポンシブ化がまだできていないのと、controllerにすべての処理を書いてしまっているのでmodel,repository,serviceの勉強はしたので少しずつ処理を分けて、レスポンシブ化するかreact-nativeの勉強もしているのでreact-nativeで作成するかしていきたいと思っています。
dockerで環境構築したのでdockerでdumpファイルを作成しサーバーにコピーしてdbを作成しました。
サーバーのphpが8.1でlaravel8のphp使用できるバージョンが8.0までと思っていたのですが、なぜかサーバーに問題なくアップできてしまったので理由を調べていきたいと思いました。
kagoyavpsでサーバーを借りているので、サーバーにdockerを立ててssl化してアクセスできるようにする勉強もします。
検索に出ないようにrobots.txtで出ないようにしました。
