123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- <template>
- <article class="product">
- <header>
- <h1 v-html="product.title" />
- </header>
- <section class="content">
- <div class="description" v-html="product.field_description" />
- <span class="price">{{ product.price__number }}</span>
- </section>
- <aside v-if="!isAdherent">
- <input
- v-if="product.field_multiple"
- v-model="quantity"
- placeholder="quantity"
- type="text"
- name="quantity"
- value="1"
- />
- <button
- type="button"
- name="addtocart"
- @click.stop="checkaddtocart"
- >
- Commander
- </button>
- </aside>
- <Modal
- v-if="showLoginModal"
- @close="closeModal"
- :styles="{width:'500px', height:'100%'}"
- >
- <h2>Please login or register before continue.</h2>
- <LoginRegister @onLogedIn="onLogedIn" @onRegistered="onRegistered" />
- </Modal>
- </article>
- </template>
- <script>
- import { REST } from 'vuejs/api/rest-axios'
- import router from 'vuejs/route'
- import { mapState, mapActions } from 'vuex'
- import Modal from 'vuejs/components/Helper/Modal'
- import LoginRegister from 'vuejs/components/Helper/LoginRegister'
- let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
- export default {
- name: "Product",
- router,
- props: ['product'],
- data(){
- return {
- quantity: 1,
- showLoginModal:false
- }
- },
- computed: {
- ...mapState({
- isloggedin: state => state.User.isloggedin,
- isAdherent: state => state.User.isAdherent,
- csrftoken: state => state.User.csrftoken
- })
- },
- methods:{
- // ...mapActions({
- // userLogin: 'User/userLogin'
- // }),
- closeModal () {
- this.showLoginModal = false;
- },
- checkaddtocart() {
- console.log('checkaddtocart');
- if(!this.isloggedin){
- // show popup for login or register
- // login or register event will be catched by onLogedin or onRegistered
- this.showLoginModal = true
- }else{
- // if already logedin directly goes to cart operations
- this.addtocart()
- }
- },
- // event bubbled from modal login form
- onLogedIn () {
- console.log('Product: onLogedIn');
- this.addtocart()
- },
- // event bubbled from modal register form
- onRegistered () {
- console.log('Product: onRegistered');
- this.addtocart()
- },
- getCarts () {
- // this is bugging on stage
- return REST.get(`/cart?_format=json`, {}, {'X-CSRF-Token':this.csrftoken})
- // .then(({ data }) => {
- // console.log('current user carts: data', data)
- // })
- .catch(( error ) => {
- console.warn('Issue with get cart', error)
- Promise.reject(error)
- })
- },
- deleteCart (order_id) {
- console.log('deleting cart ', order_id);
- return REST.delete(`/cart/${order_id}/items?_format=json`)
- .then(({ data }) => {
- console.log(`product cart ${order_id} deleted: data`, data)
- })
- .catch(( error ) => {
- console.warn(`Issue with cart ${order_id} deleting`, error)
- Promise.reject(error)
- })
- },
- clearCarts (data) {
- let promises = [];
- // clear each cart as a promise
- for (var i = 0; i < data.length; i++) {
- promises.push(this.deleteCart(data[i].order_id))
- }
- // return all the promises as one
- return Promise.all(promises)
- },
- addtocart () {
- console.log("addtocart")
- this.getCarts()
- .then(({data}) => {
- console.log('current user carts: data', data)
- this.clearCarts(data)
- .then(() => {
- console.log('all carts cleared');
- // fill the cart with new product
- REST.post(`/cart/add?_format=json`, [{
- "purchased_entity_type": "commerce_product_variation",
- "purchased_entity_id": this.product.variation_id,
- "quantity": this.quantity
- }])
- .then(({ data }) => {
- console.log('product added to cart: data', data)
- this.closeModal()
- // redirect to /cart
- // window.location.href = "/cart"
- // TODO: redirect to checkout instead of cart
- window.location.href = `/checkout/${data[0].order_id}/order_information`
- })
- .catch(( error ) => {
- console.warn('Issue with product add to cart', error)
- Promise.reject(error)
- })
- })
- })
- }
- },
- components: {
- Modal,
- LoginRegister
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|