質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

434閲覧

jQueryで作ったカートに特定の商品を入れると特定の商品が値引きになる処理

kaya_

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/02/16 09:29

https://studio-key.com/1792.html
上記のURLの方法で簡易カートを作成しました。
ここに、特定の商品1(A、B、C...)と特定の商品2(D、E、F...)を同時にカートに入れた場合
特定の商品2が特定の商品1の数だけ値引きになるという処理を加えたいです。

例)
【商品一覧】
(果物)
りんご:300円
みかん:400円
ぶどう:500円

(入れ物)
かご:300円
かご2:400円
かご3:500円
※果物を注文で400円以下の入れ物が100円引き


【カートの表示例1】りんご×1:300円、みかん×2:800円 合計1,100円
【カートの表示例2】かご×1:300円 合計300円
【カートの表示例3】りんご×1:300円、かご2×1:300円 合計600円
【カートの表示例4】りんご×1:300円、かご×1:200円、かご2×1:400円 合計900円
【カートの表示例5】りんご×1:300円、みかん×1:400円、かご×1:200円、かご2×1:300円 合計1,200円

html

1 <!-- カートの中身と合計 --> 2 <div id="cart_detail"> 3 <div id="close_cart"> 4 <span class="glyphicon glyphicon-remove" title="閉じる"></span> 5 </div> 6 <div id="goods_list"></div> 7 <div id="go_cart"> 8 <a href="#" class="btn btn-warning btn-sm">お客様情報の入力へ <span class="glyphicon glyphicon-chevron-right"></span></a> 9 </div> 10 </div> 11 12 <form id="form" name="form" method="post" action="cart.php" target="blank"> 13 <input type="hidden" id="data" name="data" value="" /> 14 </form> 15 16 17 <!-- contents --> 18 <div class="padding20"> 19 20 <div class="container form-inline"> 21 <div class="row"> 22 <div class="col-sm-3"> 23 <div class="goods"> 24 <!-- goods ========================= --> 25 <dl> 26 <dd>りんご 金額:300円</dd> 27 <dd> 28 <select class="form-control input-sm items" id="goods1"> 29 <option>1</option> 30 <option>2</option> 31 <option>3</option> 32 <option>4</option> 33 <option>5</option> 34 </select> 35 <button type="button" class="btn btn-default btn-sm add_goods" title="カートに追加" 36 data-name ="りんご" 37 data-kakaku ="300" 38 data-number ="item001" 39 data-id ="#goods1"> 40 <span class="glyphicon glyphicon-shopping-cart"></span> 41 <span class="glyphicon glyphicon-chevron-right"></span> 42 </button> 43 </dd> 44 </dl> 45 <!-- /end goods ========================= --> 46 </div> 47 </div> 48 <div class="col-sm-3"> 49 <div class="goods"> 50 <!-- goods ========================= --> 51 <dl> 52 <dd>みかん 金額:400円</dd> 53 <dd> 54 <select class="form-control input-sm items" id="goods2"> 55 <option>1</option> 56 <option>2</option> 57 <option>3</option> 58 <option>4</option> 59 <option>5</option> 60 </select> 61 <button type="button" class="btn btn-default btn-sm add_goods" title="カートに追加" 62 data-name ="みかん" 63 data-kakaku ="400" 64 data-number ="item002" 65 data-id ="#goods2"> 66 <span class="glyphicon glyphicon-shopping-cart"></span> 67 <span class="glyphicon glyphicon-chevron-right"></span> 68 </button> 69 </dd> 70 </dl> 71 <!-- /end goods ========================= --> 72 </div> 73 </div> 74 <div class="col-sm-3"> 75 <div class="goods"> 76 <!-- goods ========================= --> 77 <dl> 78 <dd>ぶどう 金額:500円</dd> 79 <dd> 80 <select class="form-control input-sm items" id="goods3"> 81 <option>1</option> 82 <option>2</option> 83 <option>3</option> 84 <option>4</option> 85 <option>5</option> 86 </select> 87 <button type="button" class="btn btn-default btn-sm add_goods" title="カートに追加" 88 data-name ="ぶどう" 89 data-kakaku ="500" 90 data-number ="item003" 91 data-id ="#goods3"> 92 <span class="glyphicon glyphicon-shopping-cart"></span> 93 <span class="glyphicon glyphicon-chevron-right"></span> 94 </button> 95 </dd> 96 </dl> 97 <!-- /end goods ========================= --> 98 </div> 99 </div> 100 <div class="col-sm-3"> 101 <div class="goods"> 102 <!-- goods ========================= --> 103 <dl> 104 <dd>かご 金額:300円</dd> 105 <dd> 106 <select class="form-control input-sm items" id="goods4"> 107 <option>1</option> 108 <option>2</option> 109 <option>3</option> 110 <option>4</option> 111 <option>5</option> 112 </select> 113 <button type="button" class="btn btn-default btn-sm add_goods" title="カートに追加" 114 data-name ="かご" 115 data-kakaku ="300" 116 data-number ="item004" 117 data-id ="#goods4"> 118 <span class="glyphicon glyphicon-shopping-cart"></span> 119 <span class="glyphicon glyphicon-chevron-right"></span> 120 </button> 121 </dd> 122 </dl> 123 <!-- /end goods ========================= --> 124 </div> 125 </div> 126 <div class="col-sm-3"> 127 <div class="goods"> 128 <!-- goods ========================= --> 129 <dl> 130 <dd>かご2 金額:400円</dd> 131 <dd> 132 <select class="form-control input-sm items" id="goods5"> 133 <option>1</option> 134 <option>2</option> 135 <option>3</option> 136 <option>4</option> 137 <option>5</option> 138 </select> 139 <button type="button" class="btn btn-default btn-sm add_goods" title="カートに追加" 140 data-name ="かご2" 141 data-kakaku ="400" 142 data-number ="item005" 143 data-id ="#goods5"> 144 <span class="glyphicon glyphicon-shopping-cart"></span> 145 <span class="glyphicon glyphicon-chevron-right"></span> 146 </button> 147 </dd> 148 </dl> 149 <!-- /end goods ========================= --> 150 </div> 151 </div> 152 <div class="col-sm-3"> 153 <div class="goods"> 154 <!-- goods ========================= --> 155 <dl> 156 <dd>かご3 金額:500円</dd> 157 <dd> 158 <select class="form-control input-sm items" id="goods6"> 159 <option>1</option> 160 <option>2</option> 161 <option>3</option> 162 <option>4</option> 163 <option>5</option> 164 </select> 165 <button type="button" class="btn btn-default btn-sm add_goods" title="カートに追加" 166 data-name ="かご3" 167 data-kakaku ="500" 168 data-number ="item006" 169 data-id ="#goods6"> 170 <span class="glyphicon glyphicon-shopping-cart"></span> 171 <span class="glyphicon glyphicon-chevron-right"></span> 172 </button> 173 </dd> 174 </dl> 175 <!-- /end goods ========================= --> 176 </div> 177 </div> 178 </div> 179 </div> 180 181 </div><!-- /contents -->

javaScript

1$(function() { 2 var goods = new Object(); 3 4 /* 5 * ボタンクリックで処理を開始 6 */ 7 $(document).on('click',".add_goods",function(){ 8 var data = $(this).data(); //ボタンに定義されているデータ 9 var quantity = $(data.id).val(); //選択した数量 10 var sub_total = data.kakaku * quantity; //単価 * 数量 11 12 //オブジェクトを定義 13 goods[data.number] = new Object(); //同じ商品を初期化 14 goods[data.number] = { 15 'name':data.name 16 ,'kakaku':data.kakaku 17 ,'quantity':quantity 18 ,'sub_total':sub_total 19 }; 20 21 cart_open(); 22 }); 23 24 /* 25 * カートの中身のHTMLを作る 26 */ 27 var cart_open = function(){ 28 $("#goods_list").html(''); 29 30 var html = '<ul>'; 31 var key; 32 var total = 0; 33 for (key in goods){ 34 html += '<li>'+goods[key].name+' 個数:'+goods[key].quantity+' &nbsp;&nbsp;'+comma( goods[key].sub_total )+'円</li>'; 35 total += goods[key].sub_total; 36 } 37 html += '</ul>'; 38 html += '<div id="total">合計:'+comma( total )+'円</div>'; 39 40 //オブジェクトなのでそのままではPOSTの出来ないためJSON形式にする 41 var data = JSON.stringify(goods); 42 43 $("#goods_list").html(html); //上部カートにHTMLを挿入 44 $("#cart_detail").show(); //カートを開く 45 $("#data").val(data); //POST[data]にカートの中身をセット 46 47 } 48 49 /* 50 * フォームをPOSTする 51 */ 52 $(document).on('click',"#go_cart a",function(){ 53 document.form.submit(); 54 }); 55 56 /* 57 * カートを閉じる 58 */ 59 $(document).on('click',"#close_cart span",function(){ 60 $("#cart_detail").hide(); 61 }); 62 63}); 64 65/* 66 * 3桁ごとにカンマ 67 */ 68 function comma(num) { 69 return num.toString().replace( /([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,' ); 70 }

上記のコードに
data-id:#goods1~3がカートに入った数だけdata-id:#goods4~6のdata.kakakuが任意の数マイナスでカートに表示、合計金額に計算される
ようにコードを追加すれば良いのかな?と思うのですが、そのコードの書き方が検索してみたのですが分からずご教授頂きたいです。

jQueryやJavaScriptについて初心者のため的外れな事を書いておりましたら申し訳ございません。
何卒宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cerfweb

2019/02/16 11:47

ひとつお尋ねしますが、JavaScriptの練習として書かれているコードでしょうか、実際に運用することを前提とした開発でしょうか。
kaya_

2019/02/16 22:53

返信が遅くなり申し訳ございません。 実際に運用します。ただ、カートの見た目(goods_list)が表示されるのがゴールで、(お客様情報の入力へ)ボタンは実装しません。 よろしくお願い致します。
cerfweb

2019/02/17 08:11

実際に運用するとう前提であれば、JavaScriptのみで実装するというのはセキュリティ上、よろしくないと思います。 通常カート機能はPHPやJavaなどサーバ上で動くプログラムの方で送信されてきた値をチェックしますが、その過程がないとブラウザ上でユーザーが勝手に価格を変えて送信したりということも起こりますのでいろいろと面倒が起こりがちです。 また、もしJavaScriptとバックエンド両方で値の計算をする場合、バックエンドで計算した値をAjaxなどで受けて表示する方式にしないと、後々ルールの変更をしたい場合両方の計算式をいじらないといけなくなり、メンテナンス上も効率が悪くなります。 従って、JavaScriptの練習としてあれこれ考えるのは勉強になると思いますが、実際の運用を前提とする場合はやめた方がよろしいかと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問