时间戳

首页 > 解决方案 > 如何使用按钮将商品添加到页面底部的购物车？

javascript - 如何使用按钮将商品添加到页面底部的购物车？

问题描述

我有一个我制作的网页，它只有一个简单的网格，上面有比萨饼和配料，网格上的每个项目下面都有一个添加到购物车的按钮。网格下方是一个购物车，基本上只有三列：项目、价格和数量。我不太确定如何使添加到购物车按钮正常工作，并且至少让他们以正确的格式添加正确的项目（项目下的项目、价格下的价格等，而不是所有这些信息都隐藏在项目下柱子。）

我对 JavaScript 的了解真的不多，所以我只是在这里做了一些试验和错误。现在我设置了第一个按钮来创建一个段落元素，该元素将是项目名称，并将其附加在项目部分下。

<body>
    <div id="container">
        <div id="header">
            <h1>  Pizza Planet  </h1>
            <script src="index.js"></script>
        </div>
        <div id="content">
            <h2>Select your items:</h2>
            <div class="wrapper">
                <div class="item" id="pizza"> Pizza <img src="https://cdn.modpizza.com/wp-content/uploads/2016/11/mod-pizza-maddy-default-e1479167621575.png" /><button class="addToCartButton" type="button" onclick="addItemToCart()">Order</button></div>
                <div class="item"> Pepperoni <img src="http://www.stickpng.com/assets/images/5c0798c72c6641059597e35e.png" /><button type>Order</button></div>
                <div class="item"> Mushrooms <img src="http://www.stickpng.com/assets/images/585ea634cb11b227491c352c.png" /><button>Order</button></div>
                <div class="item"> Onions <img src="http://www.pngnames.com/files/3/Onion-Transparent-File.png" /><button>Order</button></div>
                <div class="item"> Meatballs <img src="http://doughocracy.com/wp-content/uploads/2015/05/Meatballs-1-e1437181629229.png" /><button>Order</button></div>
                <div class="item"> Peppers <img src="https://www.actaturcica.com/wp-content/uploads/2018/05/Bell-Pepper-PNG-Image.png" /><button>Order</button></div>
                <div class="item"> Olives <img src="http://www.pngnames.com/files/3/Olives-Transparent-Background.png" /><button>Order</button></div>
                <div class="item"> Bacon <img src="https://purepng.com/public/uploads/large/purepng.com-baconfood-meat-fried-pork-cooked-941524618065kjlnp.png" /><button>Order</button></div>
                <div class="item"> Prosciutto <img src="https://i.dlpng.com/static/png/250323_thumb.png" /><button>Order</button></div>
                <div class="item"> Ham <img src="http://www.pngall.com/wp-content/uploads/2018/05/Ham-PNG.png" /><button>Order</button></div>
            </div> 
            <div class="cart">
                    <h2 class="section-header">CART</h2>
                    <div class="cart-row">
                        <span class="cart-item cart-header cart-column">ITEM</span>
                        <span class="cart-price cart-header cart-column">PRICE</span>
                        <span class="cart-quantity cart-header cart-column">QUANTITY</span>
                    </div>
                    <div class="cart-items" id="itemsList">

                    </div>
                    <div class="cart-total" id="cartTotal">
                        <strong class="cart-total-title">Total</strong>
                        <span class="cart-total-price">$0</span>
                    </div>
                    <button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
            </div>
        </div>
    </div>
</body>

这是CSS代码：

.cart {
    padding-top: 40px;
    font-family: 'Russo One', sans-serif;
}

.cart-header {
    font-weight: bold;
    font-size: 1.25em;
    color: white;
}

.cart-column {
    display: flex;
    align-items: center;
    border-bottom: 1px solid black;
    margin-right: 1.5em;
    padding-bottom: 10px;
    margin-top: 10px;
}

.cart-row {
    display: flex;
}

.cart-item {
    width: 45%;
    margin-left: 20px;
}

.cart-items {
    margin: 10px 0px 0px 20px;
    font-size: 120%;
}

.cart-price {
    width: 20%;
    font-size: 1.2em;
    color: white;
}

.cart-quantity {
    width: 35%;
}

.cart-item-title {
    color: #333;
    margin-left: .5em;
    font-size: 1.2em;
}

.cart-item-image {
    width: 75px;
    height: auto;
    border-radius: 10px;
}

.cart-row:last-child {
    border-bottom: 1px solid black;
}

.cart-row:last-child .cart-column {
    border: none;
}

.cart-total {
    text-align: end;
    margin-top: 10px;
    margin-right: 20px;
}

.cart-total-title {
    font-weight: bold;
    font-size: 1.5em;
    color: white;
    margin-right: 20px;
}

.cart-total-price {
    color: white;
    font-size: 1.1em;
}

以及简单的 JavaScript 代码：

function addItemToCart() {
    var itemInCart = document.createElement("P")
    itemInCart.innerHTML = "Pizza";
    document.getElementById("itemsList").appendChild(itemInCart);
}

当我单击比萨下的添加到购物车时，它会将比萨这个词添加到页面的购物车部分，在项目列下。所以它的工作原理就是这样。但我不相信我正在以最好的方式做到这一点。我怎样才能添加价格和数量？我愿意接受任何建议，即使这意味着彻底检修购物车以获得更好的东西。

标签： javascripthtmlcss

解决方案

当我说 Vue 允许快速原型设计时，我的意思是：

new Vue({
  el: '#pizzaShop',
  data: {
    toppings: [{
      name: 'Pepperoni',
      img: 'https://images.freshop.com/129984/d66adc5d9217bed0f60b8690535a6895_medium.png',
    }, {
      name: 'Mushrooms',
      img: 'https://freepngimage.com/content/uploads/images/t_mushrooms-1775.png',
    }, {
      name: 'Onions',
      img: 'https://www.seekpng.com/png/small/363-3630064_onion-transparent-file-onion.png',
    }, {
      name: 'Meatballs',
      img: 'https://tse1.mm.bing.net/th?id=OIP.w8H3lGeWK-y3aTrrcauC9QHaHP',
    }, {
      name: 'Peppers',
      img: 'https://www.actaturcica.com/wp-content/uploads/2018/05/Bell-Pepper-PNG-Image.png',
    }, {
      name: 'Olives',
      img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPoqKIMKjhz8trmtKJAUdMDRJKhOHJoDscP2uhef8OFMdSmzJq',
    }, {
      name: 'Bacon',
      img: 'https://purepng.com/public/uploads/large/purepng.com-baconfood-meat-fried-pork-cooked-941524618065kjlnp.png',
    }, {
      name: 'Prosciutto',
      img: 'https://i.dlpng.com/static/png/250323_thumb.png',
    }, {
      name: 'Ham',
      img: 'https://pm1.narvii.com/6726/2a17f7f63b817ecbf2772076822e8353d7d724f2v2_00.jpg',
    }],
    cart: [],
    selection: [],
    showSelection: false,
  },
  computed: {
    currentPizza() {
      return this.currency.format(this.currentPizzaPrice);
    },
    currentPizzaPrice() {
      return Math.max(this.selection.length - 2, 0) * 0.5 + 3;
    },
    currency() {
      return new Intl.NumberFormat('en-IE', {
        style: 'currency',
        currency: 'EUR',
      });
    },
    cartTotal() {
      return this.currency.format(
        this.cart.map(i => i.price).reduce((a, b) => a + b, 0)
      )
    }
  },
  methods: {
    isSelected(topping) {
      return this.selection.indexOf(topping) > -1;
    },
    toggle(topping) {
      if (this.isSelected(topping)) {
        this.selection.splice(this.selection.indexOf(topping), 1);
      } else {
        this.selection.push(topping)
      }
    },
    prettyfy(obj) {
      return JSON.stringify(obj, null, 2)
    },
    addToCart() {
      this.cart.push({
        toppings: this.toppings.filter(t => this.isSelected(t)).map(t => t.name),
        price: this.currentPizzaPrice
      });
      this.selection = [];
    },
    pizzaName(pizza) {
      return pizza.toppings.length ?
        `Pizza ${pizza.toppings.join(', ')}` :
        'Plain pizza';
    },
    deletePizza(pizza) {
      const index = this.cart.indexOf(pizza);
      if (index > -1) {
        this.cart.splice(index, 1);
      }
    }
  }
});
.toppings {
  display: flex;
  flex-wrap: wrap;
}

.toppings>* {
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 170px;
  border: 2px solid transparent;
  border-radius: 4px;
}

.toppings>* .btn:focus {
  box-shadow: none;
}

.toppings>*:hover {
  border: 2px solid #eee;
}

.toppings>* img {
  max-height: 100px;
  max-width: 100px;
  width: auto;
  margin: auto;
}

.col-sm-12>img {
  width: calc(100% - 30px);
  margin: 0 auto;
}

.cart-contents li span:first-child {
  flex-grow: 1;
}

.cart-contents li span:nth-child(2) {
  font-weight: bold;
}

.cart-contents li code:last-child {
  font-size: 2.4rem;
  line-height: 1rem;
  cursor: pointer;
  font-weight: 100;
  font-family: inherit;
}
<link href="http://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" rel="stylesheet" />
<script src="http://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="http://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="pizzaShop">
  <b-container>
    <b-row>
      <b-col>
        <h1 class="text-center my-5">Make your own pizza</h1>
      </b-col>
    </b-row>
    <b-row>
      <b-col lg="4" md="4" sm="12">
        <img src="https://cdn.modpizza.com/wp-content/uploads/2016/11/mod-pizza-maddy-default-e1479167621575.png" />
        <b-row>
          <b-col>
            <ol class="cart-contents mt-3">
              <li v-for="pizza in cart">
                <div class="d-flex">
                  <span v-text="pizzaName(pizza)"></span>
                  <span v-text="currency.format(pizza.price)" class="mx-2"></span>
                  <code v-html="`&times;`" @click.prevent="deletePizza(pizza)"></code>
                </div>
              </li>
            </ol>
            <h4 class="text-center">Cart total: {{cartTotal}}</h4>
            <code class="text-center d-block">[2 ingredients included for each pizza]</code>
            <ul>
              <li v-for="item in selection">{{item.name}}</li>
            </ul>
          </b-col>
        </b-row>
      </b-col>
      <b-col lg="6" md="8" sm="12" class="offset-lg-1">
        <b-row class="toppings">
          <b-col v-for="topping in toppings" sm="4" col class="py-3" @click="toggle(topping)">
            <img :src="topping.img" />
            <h5>{{ topping.name }}</h5>
            <b-btn :variant="isSelected(topping) ? 'outline-secondary': 'danger'" size="sm" v-text="isSelected(topping) ? 'Remove' : 'Add'" class="border-transparent"></b-btn>
          </b-col>
        </b-row>
        <b-row>
          <b-col sm="8" md="6" lg="6" class="offset-lg-3 offset-md-3 offset-sm-2">
            <b-btn variant="info" class="btn-block my-5" @click.prevent="addToCart()">Add to cart ({{currentPizza}})</b-btn>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
    <b-row class="mb-5">
      <b-col>
        <pre>// selection: 
{{prettyfy(selection)}}</pre>
        <pre>// cart: 
{{prettyfy(cart)}}</pre>
      </b-col>
    </b-row>
  </b-container>
</div>

您的一些图像被堆栈阻止，所以我使用了其他图像。
我已经在jsFiddle上写了这个（为了 SCSS 支持）。

推荐阅读