Thank You page redirect

[pkarw]

We need to add the configurable URL in module config where the user will be redirected after placing an Magento Order. It will be used to redirect back to Vue Storefront to clear the VS cart. Because it's not cleared after placing an order it's possible to use the same cart id second time - and get the nasty error instead #4 :)

[filrak]

@pkarw is it done?

[pkarw]

I'm not sure, didn't have a chance to test it yet

[Tjitse-E]

@pkarw @filrak i've just tested this and it's working. You can enter the thank you redirect url in the Magento 2 backend:

How can we clear the cart in vue storefront?

[pkarw]

It's partially done. What You need to add - is to expose the special ThankYouPage url in the vue-storefornt (adding it as a theme route or extension route) and in the component which is processing this route please add:

  rootStore.dispatch('cart/clear', {}, { root: true })
  rootStore.dispatch('cart/serverCreate', { guestCart: false }, { root: true })

in the beforeMount event handler

[Tjitse-E]

@pkarw , i've tried a custom route with the following component:

<template>
  <h1>Cart cleared</h1>
</template>

<script>
import rootStore from 'core/store'

export default {
  beforeMount () {
    rootStore.dispatch('cart/clear', {}, { root: true })
    console.log('Cart cleared')
  }
}
</script>

But this doesn't seem to work reliably. Any ideas on why the cart isn't cleared?

Ik can see that beforeMount () is triggered correctly.

By the way rootStore.dispatch('cart/serverCreate', { guestCart: false }, { root: true }) seems to double the cart quantities.

[pkarw]

It may be the case that the cart is loaded after that ... :) I mean - beforeMount is called before cart is being loaded.

Please try this method instead:

        global.$VS.db.cartsCollection.setItem('current-cart-token', '').catch((reason) => {
          console.error(reason)
        })
        global.$VS.db.cartsCollection.setItem('current-cart', null).catch((reason) => {
          console.error(reason) // it doesn't work on SSR
        }) // populate cache

[Tjitse-E]

@pkarw thanks for your suggestion! The approach suggested in your last comment works if you refresh a few times, but not if you're being redirected from Magento 2 to VS. Does this make any sense to you?

[pkarw]

OK :) Last suggestion that comes to my mind:

  mounted () {
    this.$bus.$on('cart-after-loaded', (payload) => {
    rootStore.dispatch('cart/clear', {}, { root: true })
})
  },

[Tjitse-E]

Until we have a better/cleaner solution we're now using this:

  beforeMount () {
    this.$bus.$on('application-after-loaded', (payload) => {
      if (document.getElementById('thank_you_external') != null) {
        this.clearTheCart()
      }
    })
    this.$bus.$on('cart-after-itemchanged', (payload) => {
      if (document.getElementById('thank_you_external') != null) {
        this.clearTheCart()
      }
    })
  },
  methods: {
    clearTheCart () {
      let cartItemsQuantity = this.$store.state.cart.cartItems.length
      if (cartItemsQuantity > 0) {
        rootStore.dispatch('cart/clear', {}, { root: true })
      }
    }
  }

[pkarw]

Please create a PR from it!

[Igloczek]

I did it simpler, but disabling some cart feature which behave kinda weird (in my opinion is just broken / not well made / logic is too optimistic)

My solution:

1. In config/local.json set cart.serverMergeByDefault to false
2. In custom success page Vue file add

  mounted () {
    this.$store.dispatch('cart/clear', {}, { root: true })
  }

It will unconditionaly clear the cart right after entering the success page.