PHP Classes

File: resources/assets/js/views/Checkout.vue

Recommend this page to a friend!
  Classes of Hillary Kollan  >  Laravel eCommerce with Vue.js  >  resources/assets/js/views/Checkout.vue  >  Download  
File: resources/assets/js/views/Checkout.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel eCommerce with Vue.js
Implementation of an interactive eCommerce site
Author: By
Last change:
Date: 1 year ago
Size: 6,633 bytes
 

Contents

Class file image Download
<template> <div class="container"> <div class="row"> <div class="col-md-8 offset-md-2"> <div class="order-box"> <img :src="product.image" :alt="product.name"> <h2 class="title" v-html="product.name"></h2> <p class="small-text text-muted float-left" >$ {{product.price}}</p> <p class="small-text text-muted float-right">Available Units: {{product.units}}</p> <br> <hr> <label class="row"><span class="col-md-2 float-left">Quantity: </span><input type="number" name="units" min="1" :max="product.units" class="col-md-2 float-left" v-model="quantity" @change="checkUnits"></label> </div> <br> <div> <div v-if="!isLoggedIn"> <h2>You need to login to continue</h2> <button class="col-md-4 btn btn-primary float-left" @click="login">Login</button> <button class="col-md-4 btn btn-danger float-right" @click="register">Create an account</button> </div> <div v-if="isLoggedIn"> <label class='control-label'>Card Number</label> <input autocomplete='off' class='form-control card-number' size='20' type='text' v-model="card_no"> </div> </div> <div class='form-row'> <div class='col-xs-4 form-group cvc required'> <label class='control-label'>CVV</label> <input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text' v-model="cvvNumber"> </div> <div class='col-xs-4 form-group expiration required'> <label class='control-label'>Expiration</label> <input class='form-control card-expiry-month' placeholder='MM' size='4' type='text' v-model="ccExpiryMonth"> </div> <div class='col-xs-4 form-group expiration required'> <label class='control-label'>Year</label> <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text' v-model="ccExpiryYear"> </div> </div> <div class="row"> <label for="address" class="col-md-3 col-form-label">Delivery Address</label> <div class="col-md-9"> <input id="address" type="text" class="form-control" v-model="address" required> </div> </div> <br> <button class="col-md-4 btn btn-sm btn-success float-right" v-if="isLoggedIn" @click="placeOrder">Order</button> </div> </div> </div> </template> <style scoped> .small-text { font-size: 18px; } .order-box { border: 1px solid #cccccc; padding: 10px 15px; } .title { font-size: 36px; } </style> <script> export default { props : ['pid'], data(){ return { address : "", amount:"", card_no:"", cvvNumber:"", ccExpiryMonth:"", ccExpiryYear:"", quantity : 1, isLoggedIn : null, product : [] } }, mounted() { this.isLoggedIn = localStorage.getItem('sellify.jwt') != null }, beforeMount() { fetch(`/api/products/${this.pid}`).then(response => response.json()).then(response => this.product = response.data); if (localStorage.getItem('sellify.jwt') != null) { this.user = JSON.parse(localStorage.getItem('sellify.user')); } }, methods : { login() { this.$router.push({name: 'login', params: {nextUrl: this.$route.fullPath}}) }, register() { this.$router.push({name: 'register', params: {nextUrl: this.$route.fullPath}}) }, payWithStripe(order){ let headers = { "Content-Type":"application/json", "Authorization":"Bearer " + localStorage.getItem('sellify.jwt') }; let data = { "amount":this.product.price * this.quantity, "card_no":this.card_no, "cvvNumber":this.cvvNumber, "ccExpiryMonth":this.ccExpiryMonth, "ccExpiryYear":this.ccExpiryYear, "order_id":order }; fetch('api/payments/stripe', { method: "POST", body: JSON.stringify(data), headers:headers } ).then(response => response.json()).then(response => { console.log(response); return true; }) }, placeOrder(e) { e.preventDefault(); let headers = { "Content-Type":"application/json", "Authorization":"Bearer " + localStorage.getItem('sellify.jwt') }; let address = this.address; let product_id = this.product.id; let quantity = this.quantity; let user_id = this.user.id; let data = { "address": address, "quantity":quantity, "product_id":product_id, "user_id":user_id }; fetch('api/orders', { method: "POST", body: JSON.stringify(data), headers:headers } ).then(response => response.json()).then(response => { console.log(response); //pay with stripe this.payWithStripe( response.data.id); //this.$router.push('/confirmation') }) }, checkUnits(e){ if (this.quantity > this.product.units) { this.quantity = this.product.units } } } } </script>