Javascript カートの合計金額（注文していない商品をマイナスしても、その商品の金額が引かれてしまう）

Question

• リスト### 前提・実現したいこと

複数商品をカートに入れた後、
”ー”ボタンを押すと商品に関係なく合計金額から値段が引かれてしまう。

ちなみにGitHubのこのデータになります↓
リンク内容
Olive.html上で、カート追加するとカートに入っていない商品の”ー”を押しても合計金額が引かれる。
加えて、もし可能であれば、チェックアウト画面に前ページのカート情報が反映されるようなコードも知りたいです。（データ上は反映されない）

例
1000円商品がカートにある
↓
カートに入っていない600円の商品の”ー”ボタンを押すと
金額が600円引かれる

コード

var total = 0;

// Dishes represents the appetizer prices only
var dish1 = 0;
var dish2 = 0;
var dish3 = 0;
var dish4 = 0;
var dish5 = 0;
var dish6 = 0;
var dish7 = 0;
var dish8 = 0;
var dish9 = 0;
var dish10 = 0;
var dish11 = 0;

// Prices for Dishes
var price1 = 1000;
var price2 = 1000;
var price3 = 1500;
var price4 = 1500;
var price5 = 650;
var price6 = 800;
var price7 = 1000;
var price8 = 800;
var price9 = 800;
var price10 = 800;
var price11 = 800;
var price12 = 0;
var price13 = 0;
var price14 = 0;


// Num represents dish numbers
function changeQuantity(amount,num)
{
  var displayDish = 0; // Represents the dish the needs to be shown

  if(num == 1)
  {
    if(dish1+amount>=0) {
      dish1+=amount;
    }
    displayDish = 1;
    updateTotal(amount,price1);
  }
  else if(num == 2)
  {
    if(dish2+amount>=0) {
      dish2+=amount;
    }
    displayDish = 2;
    updateTotal(amount,price2);
  }
  else if(num == 3)
  {
    if(dish3+amount>=0) {
      dish3+=amount;
    }
    displayDish = 3;
    updateTotal(amount,price3);
  }
  else if(num == 4)
  {
    if(dish4+amount>=0) {
      dish4+=amount;
    }
    displayDish = 4;
    updateTotal(amount,price4);
  }

  else if(num ==5)
  {
    if(dish5+amount>=0) {
      dish5+=amount;
    }
    displayDish = 5;
    updateTotal(amount,price5);
  }
  else if(num ==6)
  {
    if(dish6+amount>=0) {
      dish6+=amount;
    }
    displayDish = 6;
    updateTotal(amount,price6);
  }
  else if(num ==7)
  {
    if(dish7+amount>=0) {
      dish7+=amount;
    }
    displayDish = 7;
    updateTotal(amount,price7);
  }
  else if(num ==8)
  {
    if(dish8+amount>=0) {
      dish8+=amount;
    }
    displayDish = 8;
    updateTotal(amount,price8);
  }
  else if(num ==9)
  {
    if(dish9+amount>=9) {
      dish9+=amount;
    }
    displayDish = 9;
    updateTotal(amount,price9);
  }
  else if(num ==10)
  {
    if(dish10+amount>=10) {
      dish10+=amount;
    }
    displayDish = 10;
    updateTotal(amount,price10);
  }

  displayQuantity(displayDish);
}

function updateTotal(amount,price)
{
  if(amount == -1 && (total-price >= 0))
  {
    total-=price;
  }
  else if(amount == 1){
    total+=price;
  }

  displayTotal();
}

function displayQuantity(num)
{

  if(num === 1)
  {
    document.getElementById("quantity1-1").innerHTML = dish1.toString();
    document.getElementById("quantity1-2").innerHTML = dish1.toString();
    if(dish1 === 0)
    {
      document.getElementById("check1").style.display = 'none';
    }
    else{
      document.getElementById("check1").style.display = 'block';
    }
  }
  else if(num == 2)
  {
    document.getElementById("quantity2-1").innerHTML = dish2.toString();
    document.getElementById("quantity2-2").innerHTML = dish2.toString();
    if(dish2 === 0)
    {
      document.getElementById("check2").style.display = 'none';
    }
    else{
      document.getElementById("check2").style.display = 'block';
    }
  }
  else if(num == 3)
  {
    document.getElementById("quantity3-1").innerHTML = dish3.toString();
    document.getElementById("quantity3-2").innerHTML = dish3.toString();
    if(dish3 === 0)
    {
      document.getElementById("check3").style.display = 'none';
    }
    else{
      document.getElementById("check3").style.display = 'block';
    }
  }
  else if(num == 4)
  {
    document.getElementById("quantity4-1").innerHTML = dish4.toString();
    document.getElementById("quantity4-2").innerHTML = dish4.toString();
    if(dish4 === 0)
    {
      document.getElementById("check4").style.display = 'none';
    }
    else{
      document.getElementById("check4").style.display = 'block';
    }
  }
  else if(num == 5)
  {
    document.getElementById("quantity5-1").innerHTML = dish5.toString();
    document.getElementById("quantity5-2").innerHTML = dish5.toString();
    if(dish5 === 0)
    {
      document.getElementById("check5").style.display = 'none';
    }
    else{
      document.getElementById("check5").style.display = 'block';
    }
  }
  else if(num == 6)
  {
    document.getElementById("quantity6-1").innerHTML = dish6.toString();
    document.getElementById("quantity6-2").innerHTML = dish6.toString();
    if(dish6 === 0)
    {
      document.getElementById("check6").style.display = 'none';
    }
    else{
      document.getElementById("check6").style.display = 'block';
    }
  }
  else if(num == 7)
  {
    document.getElementById("quantity7-1").innerHTML = dish7.toString();
    document.getElementById("quantity7-2").innerHTML = dish7.toString();
    if(dish7 === 0)
    {
      document.getElementById("check7").style.display = 'none';
    }
    else{
      document.getElementById("check7").style.display = 'block';
    }
  }
  else if(num == 8)
  {
    document.getElementById("quantity8-1").innerHTML = dish8.toString();
    document.getElementById("quantity8-2").innerHTML = dish8.toString();
    if(dish8 === 0)
    {
      document.getElementById("check8").style.display = 'none';
    }
    else{
      document.getElementById("check8").style.display = 'block';
    }
  }
  else if(num == 9)
  {
    document.getElementById("quantity9-1").innerHTML = dish9.toString();
    document.getElementById("quantity9-2").innerHTML = dish9.toString();
    if(dish9 === 0)
    {
      document.getElementById("check9").style.display = 'none';
    }
    else{
      document.getElementById("check9").style.display = 'block';
    }
  }
  else if(num == 10)
  {
    document.getElementById("quantity10-1").innerHTML = dish10.toString();
    document.getElementById("quantity10-2").innerHTML = dish10.toString();
    if(dish10 === 0)
    {
      document.getElementById("check10").style.display = 'none';
    }
    else{
      document.getElementById("check10").style.display = 'block';
    }
  }

}

function displayTotal()
{
  var result = Math.round(total*100) / 100;
  result = result.toFixed(2);

  document.getElementById("total").innerHTML = result.toString();
}

その他のページが必要な際はご連絡ください。

お手数おかけいたしますが、
よろしくお願いいたします。

Comments

[Jon_do]

状況がこちらでも再現できるコードが必須です。

Answer 1

10000文字超えてたのでcodepenに上げました。
https://codepen.io/nanasido/pen/abmRjzo

考え方
単純に注文数が0の時に−ボタンが押せなければよい。
cssで最初から-ボタンを押せなくする。
jsで
＋ボタンを押したら-ボタンを押せるようにする。
注文数が1の時、-ボタンを押したら-ボタンを押せなくする。

htmlの記述はolive.html
cssの記述はolive.css
jsの記述はmenu.jsにそれぞれ対応してます。

チェックアウト画面に前ページのカート情報が反映されるようなコード

これはおそらく、メニューを切り替えた場合、+ボタンを押しても反映されないということを言っていると予測し
5番目のメニュー
Main Courseの
Lasagna Classico これだけ反映されるようにしました。
他のメニューも追加したいのであれば
5番目のメニューを参考にhtml,css,jsをそれぞれ記述してください。

Comments

[Brisk]

jon_doさん

ご回答ありがとうございます！

なるほど！
発想の転換には頭が回りませんでした。。。

感謝です！

ちなみに、
①商品追加ページ→②チェックアウト画面→①商品追加ページ（前ページに戻る）
と、情報がリセットされてしまうのですが
①の情報を保存しておく場合もjsで記述可能でしょうか。
もしくはその他の言語を使う必要がございまうでしょうか。

[Brisk]

>>チェックアウト画面に前ページのカート情報が反映されるようなコード
に関して、私の言葉足らずで申し訳ございません。

-- 内容 --
olive.html上、右手の”Continue”を押すと
チェックアウトページに飛ぶのですが、
前ページのカート情報が反映されません。

前ページのカート情報を次ページのチェックアウト画面に反映することは
jsで実現可能でしょうか。

お手数おかいたしますが、
アドバイスいただけますと幸いです。

[Jon_do]

出来ますが、今回のようなecサイトはサーバーサイドで動かす言語(phpなど)が必要で、セキュリティーも考慮する必要があり面倒なのでshopifyなどを使うのがおすすめです。

[Brisk]

なるほど。
やはり他言語使用が必要なんですね。
当方かなりの素人のため、勉強になりました。

ちなみにクレジットカード等の個人情報を
上記サイトを用いて扱う予定は今のところありません。

チェックアウト情報が、指定メール送られるのみの使用にしたい場合、
簡易的なPHPを用いての実現可能でしょうか。

[Jon_do]

可能です。今回の機能ならほぼphpで作ったほうが無難なような気がします

[Brisk]

なるほど！
ちょっと設計し直してみます！

お忙しいところ
色々とありがとうございます！