var ResourceService     = require("services/ResourceService");
var ModalService        = require("services/ModalService");

Vue.component("add-item-to-basket-overlay", {

    props: [
        "basketAddInformation",
        "template"
    ],

    data: function()
    {
        return {
            basketItem: {currentBasketItem: { }},
            timeToClose: 0,
            price: 0,
            currency: ""
        };
    },

    created: function()
    {
        this.$options.template = this.template;
    },

    ready: function()
    {
        ResourceService.bind("basketItem", this);
    },

    watch: {
        basketItem: function()
        {
            if (this.basketAddInformation == "overlay")
            {
                ModalService.findModal(document.getElementById("add-item-to-basket-overlay")).show();
            }
            else if (Object.keys(this.basketItem.currentBasketItem).length != 0)
            {
                setTimeout(function()
                {
                    $("body").toggleClass("open-right");
                }, 1);
            }
        }
    },

    methods: {

        /**
         * check if current basket object exist and start rendering
         */
        startRendering: function()
        {
            var render = Object.keys(this.basketItem.currentBasketItem).length != 0;

            if (render)
            {
                this.startCounter();
            }

            this.setPriceFromData();

            return render;
        },

        setPriceFromData: function()
        {
            if (this.basketItem.currentBasketItem.calculatedPrices)
            {
                this.price = this.basketItem.currentBasketItem.calculatedPrices.default.price;
                this.currency = this.basketItem.currentBasketItem.calculatedPrices.default.currency;
            }
        },

        /**
         * @returns {string}
         */
        getImage: function()
        {
            var path = "";

            for (var i = 0; i < this.basketItem.currentBasketItem.variationImageList.length; i++)
            {
                if (this.basketItem.currentBasketItem.variationImageList[i].path !== "")
                {
                    path = this.basketItem.currentBasketItem.variationImageList[i].path;
                }
            }

            return "/" + path;
        },

        startCounter: function()
        {
            this.timeToClose = 10;

            var timerVar = setInterval(countTimer, 1000);

            var self = this;

            function countTimer()
            {
                self.timeToClose -= 1;

                if (self.timeToClose === 0)
                {
                    ModalService.findModal(document.getElementById("add-item-to-basket-overlay")).hide();

                    clearInterval(timerVar);
                }
            }
        }
    },

    computed:
    {
        /**
         * returns itemData.texts[0]
         */
        texts: function()
        {
            return this.basketItem.currentBasketItem.texts;
        },

        imageUrl: function()
        {
            var img = this.$options.filters.itemImages(this.basketItem.currentBasketItem.images, "urlPreview")[0];

            return img.url;
        }
    }
});

@@ -1,11 +1,13 @@
-var
+const
  Resourc
@@ -58,19 +58,21 @@
 vice%22);%0A
-var
+const
  ModalSe
@@ -248,26 +248,16 @@
     data
-: function
 ()%0A    %7B
@@ -429,26 +429,16 @@
  created
-: function
 ()%0A    %7B
@@ -503,26 +503,16 @@
    ready
-: function
 ()%0A    %7B
@@ -601,26 +601,16 @@
 sketItem
-: function
 ()%0A     
@@ -1193,26 +1193,16 @@
 endering
-: function
 ()%0A     
@@ -1218,19 +1218,21 @@
         
-var
+const
  render 
@@ -1485,26 +1485,16 @@
 FromData
-: function
 ()%0A     
@@ -1871,26 +1871,16 @@
 getImage
-: function
 ()%0A     
@@ -1896,19 +1896,19 @@
         
-var
+let
  path = 
@@ -1929,19 +1929,19 @@
    for (
-var
+let
  i = 0; 
@@ -2316,26 +2316,16 @@
 tCounter
-: function
 ()%0A     
@@ -2377,19 +2377,21 @@
         
-var
+const
  timerVa
@@ -2410,91 +2410,13 @@
 val(
-countTimer, 1000);%0A%0A            var self = this;%0A%0A            function countTimer()
+() =%3E
 %0A   
@@ -2442,20 +2442,20 @@
         
-self
+this
 .timeToC
@@ -2490,12 +2490,12 @@
 if (
-self
+this
 .tim
@@ -2703,32 +2703,40 @@
  %7D%0A            %7D
+, 1000);
 %0A        %7D%0A    %7D
@@ -2832,26 +2832,16 @@
    texts
-: function
 ()%0A     
@@ -2937,18 +2937,8 @@
 eUrl
-: function
 ()%0A 
@@ -2958,19 +2958,21 @@
         
-var
+const
  img = t

UPDATE sneaky es6