diff --git a/packages/Webkul/Admin/src/Resources/views/users/roles/create.blade.php b/packages/Webkul/Admin/src/Resources/views/users/roles/create.blade.php
index 5c5ea2334..975797a26 100644
--- a/packages/Webkul/Admin/src/Resources/views/users/roles/create.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/users/roles/create.blade.php
@@ -28,13 +28,15 @@
                         <div slot="body">
                             <div class="control-group" :class="[errors.has('name') ? 'has-error' : '']">
                                 <label for="name" class="required">{{ __('admin::app.users.roles.name') }}</label>
-                                <input type="text" v-validate="'required'" class="control" id="email" name="name"/>
+                                <input type="text" v-validate="'required'" class="control" id="email" name="name" value="{{ old('name') }}"/>
                                 <span class="control-error" v-if="errors.has('name')">@{{ errors.first('name') }}</span>
                             </div>
 
                             <div class="control-group">
                                 <label for="description">{{ __('admin::app.users.roles.description') }}</label>
-                                <textarea class="control" id="description" name="description"></textarea>
+                                <textarea class="control" id="description" name="description">
+                                    {{ old('description') }}
+                                </textarea>
                             </div>
                         </div>
                     </accordian>
diff --git a/packages/Webkul/Admin/src/Resources/views/users/roles/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/users/roles/edit.blade.php
index 9c2d7200d..76f11b906 100644
--- a/packages/Webkul/Admin/src/Resources/views/users/roles/edit.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/users/roles/edit.blade.php
@@ -30,13 +30,15 @@
                         <div slot="body">
                             <div class="control-group" :class="[errors.has('name') ? 'has-error' : '']">
                                 <label for="name" class="required">{{ __('admin::app.users.roles.name') }}</label>
-                                <input type="text" v-validate="'required'" class="control" id="email" name="name" value="{{ $role->name }}"/>
+                                <input type="text" v-validate="'required'" class="control" id="name" name="name" value="{{ old('name') ?: $role->name }}"/>
                                 <span class="control-error" v-if="errors.has('name')">@{{ errors.first('name') }}</span>
                             </div>
 
                             <div class="control-group">
                                 <label for="description">{{ __('admin::app.users.roles.description') }}</label>
-                                <textarea class="control" id="description" name="description">{{ $role->description }}</textarea>
+                                <textarea class="control" id="description" name="description">
+                                    {{ old('description') ?: $role->description }}
+                                </textarea>
                             </div>
                         </div>
                     </accordian>
diff --git a/packages/Webkul/Shop/src/Http/routes.php b/packages/Webkul/Shop/src/Http/routes.php
index 4e2c6fc38..58d2c1c90 100644
--- a/packages/Webkul/Shop/src/Http/routes.php
+++ b/packages/Webkul/Shop/src/Http/routes.php
@@ -9,4 +9,9 @@ Route::group(['middleware' => ['web']], function () {
     Route::get('/categories/{slug}', 'Webkul\Shop\Http\Controllers\CategoryController@index')->defaults('_config', [
         'view' => 'shop::products.index'
     ]);
+
+    Route::view('/cart', 'shop::store.product.view.cart.index');
+
+    Route::view('/products/{slug}', 'shop::store.product.details.index');
+
 });
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index a438068c1..5b9425167 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -870,3 +870,619 @@ section.slider-block {
     //edit form ends
 }
 //account ends here
+
+
+
+
+//customers page css ends here
+
+// product pages css starts here
+
+section.product-detail, section.product-review {
+    font-size: 16px;
+    color: $product-font-color;
+
+    div.category-breadcrumbs {
+        display: inline;
+    }
+
+    div.layouter {
+        display:flex;
+        flex-flow: row;
+        margin-top: 21px;
+
+        .mixed-group {
+
+            .single-image {
+                padding: 2px;
+
+                img {
+                    height: 280px;
+                    width: 280px;
+                }
+            }
+
+            .details {
+
+                .product-name {
+                    margin-top: 20px;
+                    font-size: 24px;
+                    margin-bottom: 20px;
+                }
+
+                .price {
+                    margin-bottom: 14px;
+
+                    .main-price {
+                        font-size: 24px;
+                        color: $product-price-color;
+                    }
+
+                    .real-price {
+                        color: $real-price;
+                        text-decoration-line: line-through;
+                    }
+                }
+            }
+        }
+
+        .rating-reviews {
+            margin-top: 30px;
+
+            .title-inline {
+                display: inline-flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 20px;
+                width: 100%;
+
+                button {
+                    float: right;
+                    border-radius: 0px !important;
+                }
+            }
+
+            .overall {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                height: 150px;
+
+                .left-side {
+                    margin-bottom: 20px;
+
+                    .number{
+                        font-size: 34px;
+                    }
+                }
+
+                .right-side {
+                    display: block;
+
+                    .rater {
+                        display: inline-flex;
+                        align-items: center;
+
+                        .star {
+                            width: 50px;
+                            height: 20px;
+                            padding: 1px;
+                            margin-right: 8px;
+                        }
+
+                        .line-bar {
+                            height: 4px;
+                            width: 158px;
+                            margin-right: 12px;
+                            background: $bar-color;
+
+                            .line-value {
+                                height: 4px;
+                                width: 100px;
+                                background-color: $dark-blue-shade;
+                            }
+                        }
+                    }
+                }
+
+            }
+
+            .reviews {
+                margin-top: 34px;
+                margin-bottom: 90px;
+
+                .review {
+                    margin-bottom: 25px;
+
+                    .title {
+                        margin-bottom: 5px;
+                    }
+
+                    .stars {
+                        margin-bottom: 15px;
+                    }
+                    .message {
+                        margin-bottom: 10px;
+                    }
+                }
+                .view-all {
+                    margin-top:15px;
+                    color: $logo-color;
+                    margin-bottom:15px;
+                }
+            }
+        }
+
+        div.product-image-group {
+            display:flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            margin-right: 2.5%;
+
+            .side-group {
+                display: flex;
+                flex-direction: column;
+                margin-right: 4px;
+            }
+
+            .product-hero-image {
+                display: block;
+                position: relative;
+
+                .wishlist {
+                    position: absolute;
+                    top: 10px;
+                    right: 12px;
+                }
+
+                .share {
+                    position: absolute;
+                    top: 10px;
+                    right: 45px;
+                }
+            }
+        }
+
+        .details {
+
+            .product-heading {
+                font-size: 24px;
+                color: $product-font-color;
+                margin-bottom: 14px;
+            }
+
+            .rating {
+                color: $product-font-color;
+                margin-bottom: 14px;
+            }
+
+            .price {
+                margin-bottom: 14px;
+
+                .main-price {
+                    font-size: 24px;
+                    color: $product-price-color;
+                }
+            }
+
+            .stock-status {
+                margin-bottom: 14px;
+            }
+
+            .description {
+                margin-bottom: 14px;
+            }
+
+            hr{
+                border-top: 1px solid $horizontal-rule-color;
+                margin-bottom: 17px;
+            }
+
+            .attributes {
+                display: block;
+                width: 100%;
+
+                .attribute {
+                    height: 39px;
+                    margin-bottom: 20px;
+
+                    .title {
+                        float: left;
+                        height: 100%;
+                        min-width: 130px;
+                        padding-top: 9px;
+                    }
+
+                    .values {
+                        display: inline-flex;
+
+                        .colors {
+                            margin-right:5px;
+                        }
+                        .colors:last-child {
+                            margin-right: 0;
+                        }
+
+                        .red {
+                            height: 37px;
+                            width: 37px;
+                            background: red;
+                            border: 1px solid $border-color;
+                            border-radius:  2px;
+                        }
+
+                        .blue {
+                            height: 37px;
+                            width: 37px;
+                            background: blue;
+                            border: 1px solid $border-color;
+                            border-radius:  2px;
+                        }
+
+                        .green {
+                            height: 37px;
+                            width: 37px;
+                            background: green;
+                            border: 1px solid $border-color;
+                            border-radius:  2px;
+                        }
+
+                        .size {
+                            margin-right:5px;
+                            line-height: 38px;
+                            height: 37px;
+                            width: 60px;
+                            border: 1px solid $border-color;
+                            border-radius:  2px;
+                            text-align: center;
+                            vertical-align: middle;
+                        }
+                        .size:last-child {
+                            margin-right: 0;
+                        }
+
+                        .quantity {
+                            .values {
+                                .control {
+                                    height: 37px !important;
+                                    width: 30px !important;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .full-description {
+                font-size: 16px;
+            }
+
+            .full-specification{
+
+            }
+
+            .rating-reviews {
+                margin-top: 30px;
+
+                .title{
+                    margin-bottom: 15px;
+                }
+
+                .overall {
+
+                    .number{
+                        font-size: 34px;
+                    }
+
+                    button {
+                        float: right;
+                        border-radius: 0px !important;
+                    }
+
+                    margin-bottom: 5px;
+                }
+
+                .reviews {
+                    margin-top: 34px;
+                    margin-bottom: 80px;
+
+                    .review {
+                        margin-bottom: 25px;
+
+                        .stars {
+                            margin-bottom: 15px;
+                        }
+                        .message {
+                            margin-bottom: 10px;
+                        }
+                    }
+                    .view-all {
+                        margin-top:15px;
+                        color: $logo-color;
+                        margin-bottom:15px;
+                    }
+                }
+            }
+        }
+
+    }
+
+    // .related-products-wrapper {
+    //     margin-bottom: 80px;
+
+    //     .title{
+    //         margin-bottom: 22px;
+    //         text-align: center;
+    //     }
+
+    //     .horizontal-rule {
+    //         height: 1px;
+    //         background: $horizontal-rule-color;
+    //         width: 148px;
+    //         margin-bottom: 24px;
+    //         margin-left:auto;
+    //         margin-right:auto;
+    //     }
+
+    //     .related-products {
+    //         display: grid;
+    //         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    //         grid-gap: 10px;
+    //     }
+
+    // }
+}
+
+/* cart pages and elements css begins here */
+
+section.cart {
+    color: $product-font-color;
+    font-size: 16px;
+    margin-bottom: 80px;
+
+    .title {
+        font-size: 24px;
+    }
+
+    .cart-content {
+        margin-top: 21px;
+        padding: 1px;
+        display: flex;
+        flex-direction: row;
+
+        .left-side {
+            width: 68.6%;
+            margin-right: 2.4%;
+
+            .item {
+                padding: 1.1%;
+                margin-bottom: 20px;
+                display: flex;
+                flex-direction: row;
+
+                .item-image {
+                    height: 160px;
+                    width: 160px;
+                }
+
+                .item-details {
+                    display: flex;
+                    flex-direction: column;
+
+                    .item-title {
+                        font-size: 18px;
+                        margin-bottom: 10px;
+                    }
+
+                    .price {
+                        margin-bottom: 10px;
+
+                        .main-price {
+                            font-size: 18px;
+                            margin-right: 4px;
+                        }
+
+                        .real-price {
+                            margin-right: 4px;
+                            text-decoration-line: line-through;
+                        }
+
+                        .discount {
+                            color: $product-price-color;
+                        }
+                    }
+
+                    .summary {
+                        margin-bottom: 17px;
+                    }
+
+                    .misc {
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: flex-start;
+
+                        div.qty-text {
+                            color: $gray-shade;
+                            margin-right: 10px;
+                        }
+
+                        div.box {
+                            height: 38px;
+                            width: 60px;
+                            text-align: center;
+                            line-height: 38px;
+                            border: 1px solid $border-color;
+                            border-radius: 3px;
+                            margin-right: 30px;
+                        }
+
+                        .remove {
+                            color: $dark-blue-shade;
+                            margin-right: 30px;
+                        }
+
+                        .towishlist {
+                            color : $dark-blue-shade;
+                        }
+
+                    }
+                }
+            }
+
+            .misc-controls {
+                float: right;
+
+                span {
+                    margin-right: 15px;
+                }
+
+                button {
+                    border-radius: 0px;
+                }
+            }
+        }
+
+        .right-side {
+            width: 29%;
+            display: block;
+
+            .price-section {
+                width: 100%;
+                padding: 10px 10px 18px 18px;
+                margin-bottom: 20px;
+
+                .title {
+                    font-size: 16px;
+                    font-weight: bold;
+                    padding-bottom: 8px;
+                    margin-bottom: 10px;
+                }
+
+                .all-item-details {
+                    margin-bottom: 17px;
+
+                    .item-details {
+                        margin-bottom: 10px;
+
+                        .name {
+                        }
+
+                        .price {
+                            float: right;
+                        }
+                    }
+                }
+                .horizontal-rule {
+                    width: 100%;
+                    height: 1px;
+                    vertical-align: middle;
+                    background: #e8e8e8;
+                }
+
+                .total-details {
+                    margin-top: 10px;
+
+                    .amount {
+                        float: right;
+                    }
+                }
+            }
+
+            .coupon-section {
+                padding: 10px 10px 18px 18px;
+
+                .title {
+                    font-size: 16px;
+                    font-weight: bold;
+                    margin-bottom: 10px;
+                }
+
+                .control-group {
+                    margin-bottom: 12px !important;
+
+                    input.coupon-input::-moz-placeholder {
+                        font-family: "montserrat", sans-serif;
+                        font-size: 16px;
+                        color: $product-font-color;
+                    }
+
+                    input.coupon-input::-webkit-input-placeholder {
+                        font-family: "montserrat", sans-serif;
+                        font-size: 16px;
+                        color: $product-font-color;
+                    }
+
+                }
+
+                button {
+                    margin-bottom: 10px;
+                    background-color: $color-black;
+                    border-radius: 0px;
+                }
+
+                .coupon-details {
+
+                    .coupon {
+                        margin-bottom: 8px;
+
+                        .discount {
+                            float: right;
+                        }
+                    }
+                }
+
+                .horizontal-rule {
+                    width: 100%;
+                    height: 1px;
+                    vertical-align: middle;
+                    background: #e8e8e8;
+                    margin-bottom: 9px;
+                }
+
+                .after-coupon-amount {
+
+                    .name {
+                        font-weight: bold;
+                    }
+
+                    .amount {
+                        float: right;
+                        font-weight: bold;
+                    }
+
+                }
+
+            }
+
+        }
+    }
+
+}
+
+.related-products-wrapper {
+    margin-bottom: 80px;
+
+    .title{
+        margin-bottom: 22px;
+        font-size: 18px;
+        color: $product-font-color;
+        text-align: center;
+    }
+
+    .horizontal-rule {
+        height: 1px;
+        background: $horizontal-rule-color;
+        width: 148px;
+        margin-bottom: 24px;
+        margin-left:auto;
+        margin-right:auto;
+    }
+
+    .related-products {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        grid-gap: 10px;
+    }
+
+}
diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
index 0d54952ce..858add8ec 100644
--- a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
@@ -6,7 +6,7 @@
 
             <ul class="logo-container">
                 <li>
-                    <a href="{{ route('store.home') }}">
+                    <a href="">
                         <img class="logo" src="vendor/webkul/shop/assets/images/logo.svg" />
                     </a>
                 </li>
diff --git a/packages/Webkul/Shop/src/Resources/views/store/product/details/index.blade.php b/packages/Webkul/Shop/src/Resources/views/store/product/details/index.blade.php
index a6cb6d97e..1a96fb00c 100644
--- a/packages/Webkul/Shop/src/Resources/views/store/product/details/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/store/product/details/index.blade.php
@@ -11,16 +11,16 @@
             <div class="product-image-group">
 
                 <div class="side-group">
-                    <img src="{{ asset('vendor/webkul/shop/assets/images/jeans.jpg') }}" />
-                    <img src="{{ asset('vendor/webkul/shop/assets/images/jeans.jpg') }}" />
-                    <img src="{{ asset('vendor/webkul/shop/assets/images/jeans.jpg') }}" />
-                    <img src="{{ asset('vendor/webkul/shop/assets/images/jeans.jpg') }}" />
+                    <img src="{{ bagisto_asset('images/jeans.jpg') }}" />
+                    <img src="{{ bagisto_asset('images/jeans.jpg') }}" />
+                    <img src="{{ bagisto_asset('images/jeans.jpg') }}" />
+                    <img src="{{ bagisto_asset('images/jeans.jpg') }}" />
                 </div>
 
                 <div class="product-hero-image">
-                    <img src="{{ asset('vendor/webkul/shop/assets/images/jeans_big.jpg') }}" />
-                    <img class="wishlist" src="{{ asset('vendor/webkul/shop/assets/images/wish.svg') }}" />
-                    <img class="share" src="{{ asset('vendor/webkul/shop/assets/images/icon-share.svg') }}" />
+                    <img src="{{ bagisto_asset('images/jeans_big.jpg') }}" />
+                    <img class="wishlist" src="{{ bagisto_asset('images/wish.svg') }}" />
+                    <img class="share" src="{{ bagisto_asset('images/icon-share.svg') }}" />
                 </div>
 
             </div>
@@ -31,7 +31,7 @@
                     <span>Rainbow creation Embroidered</span>
                 </div>
                 <div class="rating">
-                    <img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
+                    <img src="{{ bagisto_asset('images/5star.svg') }}" />
                     75 Ratings & 11 Reviews
                 </div>
                 <div class="price">
@@ -113,7 +113,7 @@
                             4.3
                         </span>
                         <span class="stars">
-                            <img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
+                            <img src="{{ bagisto_asset('images/5star.svg') }}" />
                         </span>
 
                         <button class="btn btn-md btn-primary">Write Review</button>
@@ -128,7 +128,7 @@
                                 Awesome
                             </div>
                             <div class="stars">
-                                <img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
+                                <img src="{{ bagisto_asset('images/5star.svg') }}" />
                             </div>
                             <div class="message">
                                 NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers
@@ -147,7 +147,7 @@
                                 Awesome
                             </div>
                             <div class="stars">
-                                <img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
+                                <img src="{{ bagisto_asset('images/5star.svg') }}" />
                             </div>
                             <div class="message">
                                 NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers
@@ -166,7 +166,7 @@
                                 Awesome
                             </div>
                             <div class="stars">
-                                <img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
+                                <img src="{{ bagisto_asset('images/5star.svg') }}" />
                             </div>
                             <div class="message">
                                 NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers
@@ -189,96 +189,96 @@
 
         <div class="related-products-wrapper">
 
-            <div class="title">
-                We found other products you might like!
+        <div class="title">
+            We found other products you might like!
+        </div>
+
+        <div class="horizontal-rule"></div>
+
+        <div class="related-products">
+
+            <div class="product-card">
+                <div class="product-image">
+                    <img src="{{ bagisto_asset('images/grid.png') }}" />
+                </div>
+                <div class="product-name">
+                    <span>Red Black Tees</span>
+                </div>
+                <div class="product-price">
+                    <span>$65.00</span>
+                </div>
+                <div class="product-ratings">
+                    <span>
+                        <img src="{{ bagisto_asset('images/5star.svg') }}" />
+                    </span>
+                </div>
+                <div class="cart-fav-seg">
+                    <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
+                    <span><img src="{{ bagisto_asset('images/wishadd.svg') }}" /></span>
+                </div>
             </div>
-
-            <div class="horizontal-rule"></div>
-
-            <div class="related-products">
-
-                <div class="product-card">
-                    <div class="product-image">
-                        <img src="vendor/webkul/shop/assets/images/grid.png" />
-                    </div>
-                    <div class="product-name">
-                        <span>Red Black Tees</span>
-                    </div>
-                    <div class="product-price">
-                        <span>$65.00</span>
-                    </div>
-                    <div class="product-ratings">
-                        <span>
-                            <img src="vendor/webkul/shop/assets/images/5star.svg" />
-                        </span>
-                    </div>
-                    <div class="cart-fav-seg">
-                        <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
-                        <span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
-                    </div>
+            <div class="product-card">
+                <div class="product-image">
+                    <img src="{{ bagisto_asset('images/grid.png') }}" />
                 </div>
-                <div class="product-card">
-                    <div class="product-image">
-                        <img src="vendor/webkul/shop/assets/images/grid.png" />
-                    </div>
-                    <div class="product-name">
-                        <span>Red Black Tees</span>
-                    </div>
-                    <div class="product-price">
-                        <span>$65.00</span>
-                    </div>
-                    <div class="product-ratings">
-                        <span>
-                            <img src="vendor/webkul/shop/assets/images/5star.svg" />
-                        </span>
-                    </div>
-                    <div class="cart-fav-seg">
-                        <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
-                        <span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
-                    </div>
+                <div class="product-name">
+                    <span>Red Black Tees</span>
                 </div>
-                <div class="product-card">
-                    <div class="product-image">
-                        <img src="vendor/webkul/shop/assets/images/grid.png" />
-                    </div>
-                    <div class="product-name">
-                        <span>Red Black Tees</span>
-                    </div>
-                    <div class="product-price">
-                        <span>$65.00</span>
-                    </div>
-                    <div class="product-ratings">
-                        <span>
-                            <img src="vendor/webkul/shop/assets/images/5star.svg" />
-                        </span>
-                    </div>
-                    <div class="cart-fav-seg">
-                        <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
-                        <span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
-                    </div>
+                <div class="product-price">
+                    <span>$65.00</span>
                 </div>
-                <div class="product-card">
-                    <div class="product-image">
-                        <img src="vendor/webkul/shop/assets/images/grid.png" />
-                    </div>
-                    <div class="product-name">
-                        <span>Red Black Tees</span>
-                    </div>
-                    <div class="product-price">
-                        <span>$65.00</span>
-                    </div>
-                    <div class="product-ratings">
-                        <span>
-                            <img src="vendor/webkul/shop/assets/images/5star.svg" />
-                        </span>
-                    </div>
-                    <div class="cart-fav-seg">
-                        <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
-                        <span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
-                    </div>
+                <div class="product-ratings">
+                    <span>
+                        <img src="{{ bagisto_asset('images/5star.svg') }}" />
+                    </span>
+                </div>
+                <div class="cart-fav-seg">
+                    <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
+                    <span><img src="{{ bagisto_asset('images/wishadd.svg') }}" /></span>
+                </div>
+            </div>
+            <div class="product-card">
+                <div class="product-image">
+                    <img src="{{ bagisto_asset('images/grid.png') }}" />
+                </div>
+                <div class="product-name">
+                    <span>Red Black Tees</span>
+                </div>
+                <div class="product-price">
+                    <span>$65.00</span>
+                </div>
+                <div class="product-ratings">
+                    <span>
+                        <img src="{{ bagisto_asset('images/5star.svg') }}" />
+                    </span>
+                </div>
+                <div class="cart-fav-seg">
+                    <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
+                    <span><img src="{{ bagisto_asset('images/wishadd.svg') }}" /></span>
+                </div>
+            </div>
+            <div class="product-card">
+                <div class="product-image">
+                    <img src="{{ bagisto_asset('images/grid.png') }}" />
+                </div>
+                <div class="product-name">
+                    <span>Red Black Tees</span>
+                </div>
+                <div class="product-price">
+                    <span>$65.00</span>
+                </div>
+                <div class="product-ratings">
+                    <span>
+                        <img src="{{ bagisto_asset('images/5star.svg') }}" />
+                    </span>
+                </div>
+                <div class="cart-fav-seg">
+                    <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
+                    <span><img src="{{ bagisto_asset('images/wishadd.svg') }}" /></span>
                 </div>
             </div>
         </div>
+    </div>
 
 
     </section>
diff --git a/packages/Webkul/Shop/src/Resources/views/store/product/view/cart/index.blade.php b/packages/Webkul/Shop/src/Resources/views/store/product/view/cart/index.blade.php
index 9642e995a..35ee21cef 100644
--- a/packages/Webkul/Shop/src/Resources/views/store/product/view/cart/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/store/product/view/cart/index.blade.php
@@ -10,7 +10,7 @@
             <div class="left-side">
 
                 <div class="item">
-                    <img class="item-image" src="{{ asset('vendor/webkul/shop/assets/images/jeans_big.jpg') }}" />
+                    <img class="item-image" src="{{ bagisto_asset('images/jeans_big.jpg') }}" />
 
                     <div class="item-details">
 
@@ -44,7 +44,7 @@
 
                 </div>
                 <div class="item">
-                    <img class="item-image" src="{{ asset('vendor/webkul/shop/assets/images/jeans_big.jpg') }}" />
+                    <img class="item-image" src="{{ bagisto_asset('images/jeans_big.jpg') }}" />
 
                     <div class="item-details">
 
@@ -164,7 +164,7 @@
 
             <div class="product-card">
                 <div class="product-image">
-                    <img src="vendor/webkul/shop/assets/images/grid.png" />
+                    <img src="{{ bagisto_asset('images/grid.png') }}" />
                 </div>
                 <div class="product-name">
                     <span>Red Black Tees</span>
@@ -174,17 +174,17 @@
                 </div>
                 <div class="product-ratings">
                     <span>
-                        <img src="vendor/webkul/shop/assets/images/5star.svg" />
+                        <img src="{{ bagisto_asset('images/5star.svg') }}" />
                     </span>
                 </div>
                 <div class="cart-fav-seg">
                     <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
-                    <span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
+                    <span><img src="{{ bagisto_asset('images/wishadd.svg') }}" /></span>
                 </div>
             </div>
             <div class="product-card">
                 <div class="product-image">
-                    <img src="vendor/webkul/shop/assets/images/grid.png" />
+                    <img src="{{ bagisto_asset('images/grid.png') }}" />
                 </div>
                 <div class="product-name">
                     <span>Red Black Tees</span>
@@ -194,17 +194,17 @@
                 </div>
                 <div class="product-ratings">
                     <span>
-                        <img src="vendor/webkul/shop/assets/images/5star.svg" />
+                        <img src="{{ bagisto_asset('images/5star.svg') }}" />
                     </span>
                 </div>
                 <div class="cart-fav-seg">
                     <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
-                    <span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
+                    <span><img src="{{ bagisto_asset('images/wishadd.svg') }}" /></span>
                 </div>
             </div>
             <div class="product-card">
                 <div class="product-image">
-                    <img src="vendor/webkul/shop/assets/images/grid.png" />
+                    <img src="{{ bagisto_asset('images/grid.png') }}" />
                 </div>
                 <div class="product-name">
                     <span>Red Black Tees</span>
@@ -214,17 +214,17 @@
                 </div>
                 <div class="product-ratings">
                     <span>
-                        <img src="vendor/webkul/shop/assets/images/5star.svg" />
+                        <img src="{{ bagisto_asset('images/5star.svg') }}" />
                     </span>
                 </div>
                 <div class="cart-fav-seg">
                     <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
-                    <span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
+                    <span><img src="{{ bagisto_asset('images/wishadd.svg') }}" /></span>
                 </div>
             </div>
             <div class="product-card">
                 <div class="product-image">
-                    <img src="vendor/webkul/shop/assets/images/grid.png" />
+                    <img src="{{ bagisto_asset('images/grid.png') }}" />
                 </div>
                 <div class="product-name">
                     <span>Red Black Tees</span>
@@ -234,12 +234,12 @@
                 </div>
                 <div class="product-ratings">
                     <span>
-                        <img src="vendor/webkul/shop/assets/images/5star.svg" />
+                        <img src="{{ bagisto_asset('images/5star.svg') }}" />
                     </span>
                 </div>
                 <div class="cart-fav-seg">
                     <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
-                    <span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
+                    <span><img src="{{ bagisto_asset('images/wishadd.svg') }}" /></span>
                 </div>
             </div>
         </div>
diff --git a/packages/Webkul/Ui/src/DataGrid/ProductGrid.php b/packages/Webkul/Ui/src/DataGrid/ProductGrid.php
index 564f39669..2bbd665e0 100644
--- a/packages/Webkul/Ui/src/DataGrid/ProductGrid.php
+++ b/packages/Webkul/Ui/src/DataGrid/ProductGrid.php
@@ -189,7 +189,7 @@ class ProductGrid
 
     public function __construct(AttributeRepository $attributes) {
 
-        $this->channel = request()->get('channel') ?: channel()->getChannel();
+        $this->channel = request()->get('channel') ?: core()->getCurrentChannelCode();
         $this->locale = request()->get('locale') ?: app()->getLocale();
         $this->attributes = $attributes;
 
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php
index 2a43676ef..05417c7df 100644
--- a/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/table/default.blade.php
@@ -132,9 +132,11 @@
                     <td class="">{!! $column->render($result) !!}</td>
                 @endforeach
 
+                @if(isset($attribute_columns))
                 @foreach ($attribute_columns as $atc)
                     <td>{{ $result->{$atc} }}</td>
                 @endforeach
+                @endif
 
                 <td class="action">
                     @foreach($actions as $action)
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index 6d8e1c2dd..21951f975 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -91,7 +91,7 @@ body {
   font-size: 14px;
 }
 
-.header .header-top div.left-content ul.search-container li.search-group .q-c {
+.header .header-top div.left-content ul.search-container li.search-group .search-icon-wrapper {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   height: 38px;
@@ -101,7 +101,7 @@ body {
   border-bottom-right-radius: 3px;
 }
 
-.header .header-top div.left-content ul.search-container li.search-group .q-c .search-icon {
+.header .header-top div.left-content ul.search-container li.search-group .search-icon-wrapper .search-icon {
   margin-top: 4px;
   margin-left: 4px;
   height: 24px;
@@ -159,11 +159,11 @@ body {
   margin-top: 10px;
 }
 
-.header .header-top div.right-content ul.product-dropdown-container {
+.header .header-top div.right-content ul.cart-dropdown {
   float: right;
 }
 
-.header .header-top div.right-content ul.product-dropdown-container li.product-dropdown {
+.header .header-top div.right-content ul.cart-dropdown li.cart-summary {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -174,24 +174,24 @@ body {
   margin-left: 14px;
 }
 
-.header .header-top div.right-content ul.product-dropdown-container li.product-dropdown .cart-icon {
+.header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart-icon {
   margin: 0;
   height: 24px;
   width: 24px;
   margin-right: 8px;
 }
 
-.header .header-top div.right-content ul.product-dropdown-container li.product-dropdown .cart {
+.header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart {
   padding-top: 3px;
   padding-right: 5px;
 }
 
-.header .header-top div.right-content ul.product-dropdown-container li.product-dropdown .cart .cart-count {
+.header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart .cart-count {
   color: #0031f0;
   padding-right: 3px;
 }
 
-.header .header-top div.right-content ul.product-dropdown-container li.product-dropdown .icon.arrow-down-icon {
+.header .header-top div.right-content ul.cart-dropdown li.cart-summary .icon.arrow-down-icon {
   margin-top: 10px;
 }
 
@@ -347,39 +347,76 @@ body {
   right: 10px;
 }
 
-.slider-block {
+section.slider-block {
   display: block;
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
   margin-bottom: 5%;
 }
 
-.slider-block .slider-content ul.slider-images li img {
-  width: 100%;
+section.slider-block div.slider-content {
+  width: 80%;
   height: 500px;
-  -o-object-fit: fill;
-     object-fit: fill;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.slider-block .slider-content ul.slider-images .slider-control {
-  display: inline-block;
-  vertical-align: middle;
+section.slider-block div.slider-content ul.slider-images li {
   position: absolute;
-  right: 10%;
-  margin-top: -60px;
-  margin-right: 10px;
+  visibility: hidden;
 }
 
-.slider-block .slider-content ul.slider-images .slider-control .dark-left-icon {
-  background-color: white;
+section.slider-block div.slider-content ul.slider-images li.show {
+  display: block;
+  visibility: visible;
+  width: 80%;
+  -webkit-animation-name: example;
+          animation-name: example;
+  -webkit-animation-duration: 4s;
+          animation-duration: 4s;
+}
+
+@-webkit-keyframes example {
+  0% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes example {
+  0% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+section.slider-block div.slider-content ul.slider-images li img {
+  height: 500px;
+  width: 100%;
+}
+
+section.slider-block div.slider-content div.slider-control {
+  display: block;
+  position: absolute;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  bottom: 2%;
+  right: 11%;
+}
+
+section.slider-block div.slider-content div.slider-control .dark-left-icon {
+  background-color: #ffffff;
   height: 48px;
   width: 48px;
   max-height: 100%;
   max-width: 100%;
 }
 
-.slider-block .slider-content ul.slider-images .slider-control .light-right-icon {
+section.slider-block div.slider-content div.slider-control .light-right-icon {
   background-color: black;
   height: 48px;
   width: 48px;
@@ -647,7 +684,7 @@ body {
 }
 
 .footer {
-  background-color: #ffffff;
+  background-color: #f2f2f2;
   padding-left: 10%;
   padding-right: 10%;
 }
@@ -938,3 +975,618 @@ body {
   font-family: "Montserrat", sans-serif;
   width: 100%;
 }
+
+section.product-detail, section.product-review {
+  font-size: 16px;
+  color: #242424;
+}
+
+section.product-detail div.category-breadcrumbs, section.product-review div.category-breadcrumbs {
+  display: inline;
+}
+
+section.product-detail div.layouter, section.product-review div.layouter {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: row;
+          flex-flow: row;
+  margin-top: 21px;
+}
+
+section.product-detail div.layouter .mixed-group .single-image, section.product-review div.layouter .mixed-group .single-image {
+  padding: 2px;
+}
+
+section.product-detail div.layouter .mixed-group .single-image img, section.product-review div.layouter .mixed-group .single-image img {
+  height: 280px;
+  width: 280px;
+}
+
+section.product-detail div.layouter .mixed-group .details .product-name, section.product-review div.layouter .mixed-group .details .product-name {
+  margin-top: 20px;
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+section.product-detail div.layouter .mixed-group .details .price, section.product-review div.layouter .mixed-group .details .price {
+  margin-bottom: 14px;
+}
+
+section.product-detail div.layouter .mixed-group .details .price .main-price, section.product-review div.layouter .mixed-group .details .price .main-price {
+  font-size: 24px;
+  color: #FF6472;
+}
+
+section.product-detail div.layouter .mixed-group .details .price .real-price, section.product-review div.layouter .mixed-group .details .price .real-price {
+  color: #A5A5A5;
+  -webkit-text-decoration-line: line-through;
+          text-decoration-line: line-through;
+}
+
+section.product-detail div.layouter .rating-reviews, section.product-review div.layouter .rating-reviews {
+  margin-top: 30px;
+}
+
+section.product-detail div.layouter .rating-reviews .title-inline, section.product-review div.layouter .rating-reviews .title-inline {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+section.product-detail div.layouter .rating-reviews .title-inline button, section.product-review div.layouter .rating-reviews .title-inline button {
+  float: right;
+  border-radius: 0px !important;
+}
+
+section.product-detail div.layouter .rating-reviews .overall, section.product-review div.layouter .rating-reviews .overall {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  height: 150px;
+}
+
+section.product-detail div.layouter .rating-reviews .overall .left-side, section.product-review div.layouter .rating-reviews .overall .left-side {
+  margin-bottom: 20px;
+}
+
+section.product-detail div.layouter .rating-reviews .overall .left-side .number, section.product-review div.layouter .rating-reviews .overall .left-side .number {
+  font-size: 34px;
+}
+
+section.product-detail div.layouter .rating-reviews .overall .right-side, section.product-review div.layouter .rating-reviews .overall .right-side {
+  display: block;
+}
+
+section.product-detail div.layouter .rating-reviews .overall .right-side .rater, section.product-review div.layouter .rating-reviews .overall .right-side .rater {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+section.product-detail div.layouter .rating-reviews .overall .right-side .rater .star, section.product-review div.layouter .rating-reviews .overall .right-side .rater .star {
+  width: 50px;
+  height: 20px;
+  padding: 1px;
+  margin-right: 8px;
+}
+
+section.product-detail div.layouter .rating-reviews .overall .right-side .rater .line-bar, section.product-review div.layouter .rating-reviews .overall .right-side .rater .line-bar {
+  height: 4px;
+  width: 158px;
+  margin-right: 12px;
+  background: #D8D8D8;
+}
+
+section.product-detail div.layouter .rating-reviews .overall .right-side .rater .line-bar .line-value, section.product-review div.layouter .rating-reviews .overall .right-side .rater .line-bar .line-value {
+  height: 4px;
+  width: 100px;
+  background-color: #0031F0;
+}
+
+section.product-detail div.layouter .rating-reviews .reviews, section.product-review div.layouter .rating-reviews .reviews {
+  margin-top: 34px;
+  margin-bottom: 90px;
+}
+
+section.product-detail div.layouter .rating-reviews .reviews .review, section.product-review div.layouter .rating-reviews .reviews .review {
+  margin-bottom: 25px;
+}
+
+section.product-detail div.layouter .rating-reviews .reviews .review .title, section.product-review div.layouter .rating-reviews .reviews .review .title {
+  margin-bottom: 5px;
+}
+
+section.product-detail div.layouter .rating-reviews .reviews .review .stars, section.product-review div.layouter .rating-reviews .reviews .review .stars {
+  margin-bottom: 15px;
+}
+
+section.product-detail div.layouter .rating-reviews .reviews .review .message, section.product-review div.layouter .rating-reviews .reviews .review .message {
+  margin-bottom: 10px;
+}
+
+section.product-detail div.layouter .rating-reviews .reviews .view-all, section.product-review div.layouter .rating-reviews .reviews .view-all {
+  margin-top: 15px;
+  color: #0031f0;
+  margin-bottom: 15px;
+}
+
+section.product-detail div.layouter div.product-image-group, section.product-review div.layouter div.product-image-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  margin-right: 2.5%;
+}
+
+section.product-detail div.layouter div.product-image-group .side-group, section.product-review div.layouter div.product-image-group .side-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  margin-right: 4px;
+}
+
+section.product-detail div.layouter div.product-image-group .product-hero-image, section.product-review div.layouter div.product-image-group .product-hero-image {
+  display: block;
+  position: relative;
+}
+
+section.product-detail div.layouter div.product-image-group .product-hero-image .wishlist, section.product-review div.layouter div.product-image-group .product-hero-image .wishlist {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+}
+
+section.product-detail div.layouter div.product-image-group .product-hero-image .share, section.product-review div.layouter div.product-image-group .product-hero-image .share {
+  position: absolute;
+  top: 10px;
+  right: 45px;
+}
+
+section.product-detail div.layouter .details .product-heading, section.product-review div.layouter .details .product-heading {
+  font-size: 24px;
+  color: #242424;
+  margin-bottom: 14px;
+}
+
+section.product-detail div.layouter .details .rating, section.product-review div.layouter .details .rating {
+  color: #242424;
+  margin-bottom: 14px;
+}
+
+section.product-detail div.layouter .details .price, section.product-review div.layouter .details .price {
+  margin-bottom: 14px;
+}
+
+section.product-detail div.layouter .details .price .main-price, section.product-review div.layouter .details .price .main-price {
+  font-size: 24px;
+  color: #FF6472;
+}
+
+section.product-detail div.layouter .details .stock-status, section.product-review div.layouter .details .stock-status {
+  margin-bottom: 14px;
+}
+
+section.product-detail div.layouter .details .description, section.product-review div.layouter .details .description {
+  margin-bottom: 14px;
+}
+
+section.product-detail div.layouter .details hr, section.product-review div.layouter .details hr {
+  border-top: 1px solid #E8E8E8;
+  margin-bottom: 17px;
+}
+
+section.product-detail div.layouter .details .attributes, section.product-review div.layouter .details .attributes {
+  display: block;
+  width: 100%;
+}
+
+section.product-detail div.layouter .details .attributes .attribute, section.product-review div.layouter .details .attributes .attribute {
+  height: 39px;
+  margin-bottom: 20px;
+}
+
+section.product-detail div.layouter .details .attributes .attribute .title, section.product-review div.layouter .details .attributes .attribute .title {
+  float: left;
+  height: 100%;
+  min-width: 130px;
+  padding-top: 9px;
+}
+
+section.product-detail div.layouter .details .attributes .attribute .values, section.product-review div.layouter .details .attributes .attribute .values {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+section.product-detail div.layouter .details .attributes .attribute .values .colors, section.product-review div.layouter .details .attributes .attribute .values .colors {
+  margin-right: 5px;
+}
+
+section.product-detail div.layouter .details .attributes .attribute .values .colors:last-child, section.product-review div.layouter .details .attributes .attribute .values .colors:last-child {
+  margin-right: 0;
+}
+
+section.product-detail div.layouter .details .attributes .attribute .values .red, section.product-review div.layouter .details .attributes .attribute .values .red {
+  height: 37px;
+  width: 37px;
+  background: red;
+  border: 1px solid #c7c7c7;
+  border-radius: 2px;
+}
+
+section.product-detail div.layouter .details .attributes .attribute .values .blue, section.product-review div.layouter .details .attributes .attribute .values .blue {
+  height: 37px;
+  width: 37px;
+  background: blue;
+  border: 1px solid #c7c7c7;
+  border-radius: 2px;
+}
+
+section.product-detail div.layouter .details .attributes .attribute .values .green, section.product-review div.layouter .details .attributes .attribute .values .green {
+  height: 37px;
+  width: 37px;
+  background: green;
+  border: 1px solid #c7c7c7;
+  border-radius: 2px;
+}
+
+section.product-detail div.layouter .details .attributes .attribute .values .size, section.product-review div.layouter .details .attributes .attribute .values .size {
+  margin-right: 5px;
+  line-height: 38px;
+  height: 37px;
+  width: 60px;
+  border: 1px solid #c7c7c7;
+  border-radius: 2px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+section.product-detail div.layouter .details .attributes .attribute .values .size:last-child, section.product-review div.layouter .details .attributes .attribute .values .size:last-child {
+  margin-right: 0;
+}
+
+section.product-detail div.layouter .details .attributes .attribute .values .quantity .values .control, section.product-review div.layouter .details .attributes .attribute .values .quantity .values .control {
+  height: 37px !important;
+  width: 30px !important;
+}
+
+section.product-detail div.layouter .details .full-description, section.product-review div.layouter .details .full-description {
+  font-size: 16px;
+}
+
+section.product-detail div.layouter .details .rating-reviews, section.product-review div.layouter .details .rating-reviews {
+  margin-top: 30px;
+}
+
+section.product-detail div.layouter .details .rating-reviews .title, section.product-review div.layouter .details .rating-reviews .title {
+  margin-bottom: 15px;
+}
+
+section.product-detail div.layouter .details .rating-reviews .overall, section.product-review div.layouter .details .rating-reviews .overall {
+  margin-bottom: 5px;
+}
+
+section.product-detail div.layouter .details .rating-reviews .overall .number, section.product-review div.layouter .details .rating-reviews .overall .number {
+  font-size: 34px;
+}
+
+section.product-detail div.layouter .details .rating-reviews .overall button, section.product-review div.layouter .details .rating-reviews .overall button {
+  float: right;
+  border-radius: 0px !important;
+}
+
+section.product-detail div.layouter .details .rating-reviews .reviews, section.product-review div.layouter .details .rating-reviews .reviews {
+  margin-top: 34px;
+  margin-bottom: 80px;
+}
+
+section.product-detail div.layouter .details .rating-reviews .reviews .review, section.product-review div.layouter .details .rating-reviews .reviews .review {
+  margin-bottom: 25px;
+}
+
+section.product-detail div.layouter .details .rating-reviews .reviews .review .stars, section.product-review div.layouter .details .rating-reviews .reviews .review .stars {
+  margin-bottom: 15px;
+}
+
+section.product-detail div.layouter .details .rating-reviews .reviews .review .message, section.product-review div.layouter .details .rating-reviews .reviews .review .message {
+  margin-bottom: 10px;
+}
+
+section.product-detail div.layouter .details .rating-reviews .reviews .view-all, section.product-review div.layouter .details .rating-reviews .reviews .view-all {
+  margin-top: 15px;
+  color: #0031f0;
+  margin-bottom: 15px;
+}
+
+/* cart pages and elements css begins here */
+section.cart {
+  color: #242424;
+  font-size: 16px;
+  margin-bottom: 80px;
+}
+
+section.cart .title {
+  font-size: 24px;
+}
+
+section.cart .cart-content {
+  margin-top: 21px;
+  padding: 1px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+section.cart .cart-content .left-side {
+  width: 68.6%;
+  margin-right: 2.4%;
+}
+
+section.cart .cart-content .left-side .item {
+  padding: 1.1%;
+  margin-bottom: 20px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+section.cart .cart-content .left-side .item .item-image {
+  height: 160px;
+  width: 160px;
+}
+
+section.cart .cart-content .left-side .item .item-details {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+section.cart .cart-content .left-side .item .item-details .item-title {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+section.cart .cart-content .left-side .item .item-details .price {
+  margin-bottom: 10px;
+}
+
+section.cart .cart-content .left-side .item .item-details .price .main-price {
+  font-size: 18px;
+  margin-right: 4px;
+}
+
+section.cart .cart-content .left-side .item .item-details .price .real-price {
+  margin-right: 4px;
+  -webkit-text-decoration-line: line-through;
+          text-decoration-line: line-through;
+}
+
+section.cart .cart-content .left-side .item .item-details .price .discount {
+  color: #FF6472;
+}
+
+section.cart .cart-content .left-side .item .item-details .summary {
+  margin-bottom: 17px;
+}
+
+section.cart .cart-content .left-side .item .item-details .misc {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+}
+
+section.cart .cart-content .left-side .item .item-details .misc div.qty-text {
+  color: #5E5E5E;
+  margin-right: 10px;
+}
+
+section.cart .cart-content .left-side .item .item-details .misc div.box {
+  height: 38px;
+  width: 60px;
+  text-align: center;
+  line-height: 38px;
+  border: 1px solid #c7c7c7;
+  border-radius: 3px;
+  margin-right: 30px;
+}
+
+section.cart .cart-content .left-side .item .item-details .misc .remove {
+  color: #0031F0;
+  margin-right: 30px;
+}
+
+section.cart .cart-content .left-side .item .item-details .misc .towishlist {
+  color: #0031F0;
+}
+
+section.cart .cart-content .left-side .misc-controls {
+  float: right;
+}
+
+section.cart .cart-content .left-side .misc-controls span {
+  margin-right: 15px;
+}
+
+section.cart .cart-content .left-side .misc-controls button {
+  border-radius: 0px;
+}
+
+section.cart .cart-content .right-side {
+  width: 29%;
+  display: block;
+}
+
+section.cart .cart-content .right-side .price-section {
+  width: 100%;
+  padding: 10px 10px 18px 18px;
+  margin-bottom: 20px;
+}
+
+section.cart .cart-content .right-side .price-section .title {
+  font-size: 16px;
+  font-weight: bold;
+  padding-bottom: 8px;
+  margin-bottom: 10px;
+}
+
+section.cart .cart-content .right-side .price-section .all-item-details {
+  margin-bottom: 17px;
+}
+
+section.cart .cart-content .right-side .price-section .all-item-details .item-details {
+  margin-bottom: 10px;
+}
+
+section.cart .cart-content .right-side .price-section .all-item-details .item-details .price {
+  float: right;
+}
+
+section.cart .cart-content .right-side .price-section .horizontal-rule {
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+section.cart .cart-content .right-side .price-section .total-details {
+  margin-top: 10px;
+}
+
+section.cart .cart-content .right-side .price-section .total-details .amount {
+  float: right;
+}
+
+section.cart .cart-content .right-side .coupon-section {
+  padding: 10px 10px 18px 18px;
+}
+
+section.cart .cart-content .right-side .coupon-section .title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+section.cart .cart-content .right-side .coupon-section .control-group {
+  margin-bottom: 12px !important;
+}
+
+section.cart .cart-content .right-side .coupon-section .control-group input.coupon-input::-moz-placeholder {
+  font-family: "montserrat", sans-serif;
+  font-size: 16px;
+  color: #242424;
+}
+
+section.cart .cart-content .right-side .coupon-section .control-group input.coupon-input::-webkit-input-placeholder {
+  font-family: "montserrat", sans-serif;
+  font-size: 16px;
+  color: #242424;
+}
+
+section.cart .cart-content .right-side .coupon-section button {
+  margin-bottom: 10px;
+  background-color: black;
+  border-radius: 0px;
+}
+
+section.cart .cart-content .right-side .coupon-section .coupon-details .coupon {
+  margin-bottom: 8px;
+}
+
+section.cart .cart-content .right-side .coupon-section .coupon-details .coupon .discount {
+  float: right;
+}
+
+section.cart .cart-content .right-side .coupon-section .horizontal-rule {
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+  margin-bottom: 9px;
+}
+
+section.cart .cart-content .right-side .coupon-section .after-coupon-amount .name {
+  font-weight: bold;
+}
+
+section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amount {
+  float: right;
+  font-weight: bold;
+}
+
+.related-products-wrapper {
+  margin-bottom: 80px;
+}
+
+.related-products-wrapper .title {
+  margin-bottom: 22px;
+  font-size: 18px;
+  color: #242424;
+  text-align: center;
+}
+
+.related-products-wrapper .horizontal-rule {
+  height: 1px;
+  background: #E8E8E8;
+  width: 148px;
+  margin-bottom: 24px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.related-products-wrapper .related-products {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: 10px;
+}
diff --git a/public/themes/default/assets/images/404-image.svg b/public/themes/default/assets/images/404-image.svg
new file mode 100644
index 000000000..8b7106715
--- /dev/null
+++ b/public/themes/default/assets/images/404-image.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="254px" height="236px" viewBox="0 0 254 236" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>404-image</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
+        <g id="404-page" transform="translate(-960.000000, -288.000000)">
+            <g id="404-image" transform="translate(961.000000, 289.000000)">
+                <polyline id="Path-3" stroke="#242424" stroke-width="3" points="0.626953125 0.990234375 34.3359375 26.4658203 34.6796875 73.1640625 34.3359375 186.773437 160.960938 215.992187 210.71875 130.375 34.3359375 72.71875"></polyline>
+                <g id="Group" transform="translate(46.000000, 190.000000)" fill="#FFFFFF" stroke="#242424" stroke-width="3">
+                    <circle id="Oval" cx="22.5" cy="22.5" r="21"></circle>
+                    <circle id="Oval" cx="23" cy="23" r="5.5"></circle>
+                </g>
+                <g id="Group" transform="translate(208.000000, 163.000000)" fill="#FFFFFF" stroke="#242424" stroke-width="3">
+                    <circle id="Oval" cx="22.5" cy="22.5" r="21"></circle>
+                    <circle id="Oval" cx="23" cy="23" r="5.5"></circle>
+                </g>
+                <path d="M178,205 L182,205 L182,208 L178,208 L178,205 Z M185,205 L206,205 L206,208 L185,208 L185,205 Z" id="Combined-Shape" fill="#242424" transform="translate(192.000000, 206.500000) rotate(-23.000000) translate(-192.000000, -206.500000) "></path>
+                <path d="M172.473165,218.350993 L176.473165,218.350993 L176.473165,221.350993 L172.473165,221.350993 L172.473165,218.350993 Z M179.473165,218.350993 L200.473165,218.350993 L200.473165,221.350993 L179.473165,221.350993 L179.473165,218.350993 Z" id="Combined-Shape" fill="#242424" transform="translate(186.473165, 219.850993) rotate(-23.000000) translate(-186.473165, -219.850993) "></path>
+                <path d="M198.610065,126.237911 L222.219028,78.9333292 L163.963322,59.4411726 L147.719875,109.950161 L198.610065,126.237911 Z" id="Path-4" stroke="#242424" stroke-width="3"></path>
+                <polyline id="Path-5" stroke="#242424" stroke-width="3" points="131.557617 105.489258 134.746094 71.9423828 157.437808 79.0096878"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/themes/default/assets/images/4star.svg b/public/themes/default/assets/images/4star.svg
new file mode 100644
index 000000000..1c962e2da
--- /dev/null
+++ b/public/themes/default/assets/images/4star.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="106px" height="16px" viewBox="0 0 106 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>Star-4</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Star-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Star" fill="#242424" points="8.41169779 13.2668737 3.21298265 16 4.2058489 10.2111456 2.29816166e-14 6.11145618 5.81234022 5.26687371 8.41169779 0 11.0110554 5.26687371 16.8233956 6.11145618 12.6175467 10.2111456 13.6104129 16"></polygon>
+        <polygon id="Star" fill="#242424" points="31.4116978 13.2668737 26.2129827 16 27.2058489 10.2111456 23 6.11145618 28.8123402 5.26687371 31.4116978 0 34.0110554 5.26687371 39.8233956 6.11145618 35.6175467 10.2111456 36.6104129 16"></polygon>
+        <polygon id="Star" fill="#242424" points="53.4116978 13.2668737 48.2129827 16 49.2058489 10.2111456 45 6.11145618 50.8123402 5.26687371 53.4116978 0 56.0110554 5.26687371 61.8233956 6.11145618 57.6175467 10.2111456 58.6104129 16"></polygon>
+        <polygon id="Star" fill="#242424" points="75.4116978 13.2668737 70.2129827 16 71.2058489 10.2111456 67 6.11145618 72.8123402 5.26687371 75.4116978 0 78.0110554 5.26687371 83.8233956 6.11145618 79.6175467 10.2111456 80.6104129 16"></polygon>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/themes/default/assets/images/icon-grid-view.svg b/public/themes/default/assets/images/icon-grid-view.svg
new file mode 100644
index 000000000..2412dfbb6
--- /dev/null
+++ b/public/themes/default/assets/images/icon-grid-view.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-grid-view</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Category" transform="translate(-918.000000, -652.000000)" fill="#242424">
+            <g id="icon-grid-view" transform="translate(918.000000, 652.000000)">
+                <rect id="1" x="0" y="0" width="10" height="10"></rect>
+                <rect id="2" x="0" y="14" width="10" height="10"></rect>
+                <rect id="3" x="14" y="0" width="10" height="10"></rect>
+                <rect id="4" x="14" y="14" width="10" height="10"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/themes/default/assets/images/icon-list-view.svg b/public/themes/default/assets/images/icon-list-view.svg
new file mode 100644
index 000000000..e6df3dc85
--- /dev/null
+++ b/public/themes/default/assets/images/icon-list-view.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-list-view</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Category" transform="translate(-952.000000, -652.000000)" fill="#242424">
+            <g id="icon-list-view" transform="translate(952.000000, 652.000000)">
+                <rect id="4" x="0" y="0" width="10" height="10"></rect>
+                <rect id="4" x="0" y="14" width="10" height="10"></rect>
+                <rect id="Rectangle-4" x="12" y="0" width="12" height="3"></rect>
+                <rect id="Rectangle-4-Copy" x="12" y="5" width="10" height="3"></rect>
+                <rect id="Rectangle-4" x="12" y="14" width="12" height="3"></rect>
+                <rect id="Rectangle-4-Copy" x="12" y="19" width="10" height="3"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/themes/default/assets/images/icon-share.svg b/public/themes/default/assets/images/icon-share.svg
new file mode 100644
index 000000000..4e3860f01
--- /dev/null
+++ b/public/themes/default/assets/images/icon-share.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-share</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="icon-share" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M17.6017572,10.3626848 L17.6017572,8.97307668 L17.7423684,8.6716255 C18.0755216,7.95739026 18.7398682,7.5 19.5457911,7.5 C20.1894353,7.5 20.7487974,7.78098589 21.2150301,8.2450489 L25.7080449,12.7380637 L26.4358083,14.1586418 L25.673421,15.4378805 L25.5412491,15.5700523 L21.4220501,19.6885211 C20.7714032,20.3058878 20.2492699,20.6394498 19.5457911,20.6394498 C18.4975787,20.6394498 17.9427193,19.9473628 17.6730945,19.0185829 L17.6136225,18.8137191 L17.6136225,17.7824848 L17.0348214,17.7824848 C14.7402618,18.0465879 13.3365725,18.4574553 12.9871802,18.8050312 C12.8906505,18.901059 12.7357942,19.3763592 12.6365699,20.1145364 C12.6079463,20.3274811 12.5836405,20.5556138 12.5597427,20.8255333 C12.5451306,20.9905732 12.4990927,21.5648652 12.5023767,21.5251552 C12.4357011,22.3313848 12.3949365,22.6163508 12.2061579,22.9983804 C11.452927,24.5226869 9.71842249,24.8652049 8.74190088,23.2916804 C8.3315068,22.6303892 8.01010578,21.536647 7.69057879,19.8821889 C7.45964356,18.6864444 7.38096076,16.8312152 7.7443344,15.6617817 C8.1616307,14.3188106 8.80512846,13.2419676 9.75271558,12.4112199 C11.2470104,11.1011747 13.3610793,10.4388485 16.0925932,10.3626848 L17.6017572,10.3626848 Z" id="Path-4" stroke="#242424" stroke-width="3"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/themes/default/assets/images/jeans.jpg b/public/themes/default/assets/images/jeans.jpg
new file mode 100644
index 000000000..bd57eca44
Binary files /dev/null and b/public/themes/default/assets/images/jeans.jpg differ
diff --git a/public/themes/default/assets/images/jeans_big.jpg b/public/themes/default/assets/images/jeans_big.jpg
new file mode 100644
index 000000000..6d636e5bf
Binary files /dev/null and b/public/themes/default/assets/images/jeans_big.jpg differ
diff --git a/public/themes/default/assets/js/shop.js b/public/themes/default/assets/js/shop.js
index 2901608f3..af136c26b 100644
--- a/public/themes/default/assets/js/shop.js
+++ b/public/themes/default/assets/js/shop.js
@@ -204,7 +204,7 @@ module.exports = function normalizeComponent (
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(3);
-module.exports = __webpack_require__(20);
+module.exports = __webpack_require__(25);
 
 
 /***/ }),
@@ -222,7 +222,7 @@ Vue.use(VeeValidate);
 Vue.component("category-nav", __webpack_require__(10));
 Vue.component("category-item", __webpack_require__(13));
 Vue.component("image-slider", __webpack_require__(16));
-Vue.component("vue-slider", __webpack_require__(19));
+Vue.component("vue-slider", __webpack_require__(24));
 
 $(document).ready(function () {
 
@@ -29323,15 +29323,19 @@ if (false) {
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
+function injectStyle (ssrContext) {
+  if (disposed) return
+  __webpack_require__(17)
+}
 var normalizeComponent = __webpack_require__(1)
 /* script */
-var __vue_script__ = __webpack_require__(17)
+var __vue_script__ = __webpack_require__(22)
 /* template */
-var __vue_template__ = __webpack_require__(18)
+var __vue_template__ = __webpack_require__(23)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
-var __vue_styles__ = null
+var __vue_styles__ = injectStyle
 /* scopeId */
 var __vue_scopeId__ = null
 /* moduleIdentifier (server only) */
@@ -29344,7 +29348,7 @@ var Component = normalizeComponent(
   __vue_scopeId__,
   __vue_module_identifier__
 )
-Component.options.__file = "src/Resources/assets/js/components/imageSlider.vue"
+Component.options.__file = "src/Resources/assets/js/components/image-slider.vue"
 
 /* hot reload */
 if (false) {(function () {
@@ -29353,9 +29357,9 @@ if (false) {(function () {
   if (!hotAPI.compatible) return
   module.hot.accept()
   if (!module.hot.data) {
-    hotAPI.createRecord("data-v-0b7d2080", Component.options)
+    hotAPI.createRecord("data-v-74f1fa5f", Component.options)
   } else {
-    hotAPI.reload("data-v-0b7d2080", Component.options)
+    hotAPI.reload("data-v-74f1fa5f", Component.options)
   }
   module.hot.dispose(function (data) {
     disposed = true
@@ -29367,6 +29371,389 @@ module.exports = Component.exports
 
 /***/ }),
 /* 17 */
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(18);
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var update = __webpack_require__(20)("b16cefe6", content, false, {});
+// Hot Module Replacement
+if(false) {
+ // When the styles change, update the <style> tags
+ if(!content.locals) {
+   module.hot.accept("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-74f1fa5f\",\"scoped\":false,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./image-slider.vue", function() {
+     var newContent = require("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-74f1fa5f\",\"scoped\":false,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./image-slider.vue");
+     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+     update(newContent);
+   });
+ }
+ // When the module is disposed, remove the <style> tags
+ module.hot.dispose(function() { update(); });
+}
+
+/***/ }),
+/* 18 */
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(19)(false);
+// imports
+
+
+// module
+exports.push([module.i, "\n.slide-enter-active {\n\n    -webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);\n\n    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);\n}\n.slide-leave-active {\n\n    -webkit-transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n\n    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n.slide-enter, .slide-leave-to {\n\n    -webkit-transform: scaleY(0) translateZ(0);\n    transform: scaleY(0) translateZ(0);\n    opacity: 0;\n}\n\n", ""]);
+
+// exports
+
+
+/***/ }),
+/* 19 */
+/***/ (function(module, exports) {
+
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Tobias Koppers @sokra
+*/
+// css base code, injected by the css-loader
+module.exports = function(useSourceMap) {
+	var list = [];
+
+	// return the list of modules as css string
+	list.toString = function toString() {
+		return this.map(function (item) {
+			var content = cssWithMappingToString(item, useSourceMap);
+			if(item[2]) {
+				return "@media " + item[2] + "{" + content + "}";
+			} else {
+				return content;
+			}
+		}).join("");
+	};
+
+	// import a list of modules into the list
+	list.i = function(modules, mediaQuery) {
+		if(typeof modules === "string")
+			modules = [[null, modules, ""]];
+		var alreadyImportedModules = {};
+		for(var i = 0; i < this.length; i++) {
+			var id = this[i][0];
+			if(typeof id === "number")
+				alreadyImportedModules[id] = true;
+		}
+		for(i = 0; i < modules.length; i++) {
+			var item = modules[i];
+			// skip already imported module
+			// this implementation is not 100% perfect for weird media query combinations
+			//  when a module is imported multiple times with different media queries.
+			//  I hope this will never occur (Hey this way we have smaller bundles)
+			if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
+				if(mediaQuery && !item[2]) {
+					item[2] = mediaQuery;
+				} else if(mediaQuery) {
+					item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
+				}
+				list.push(item);
+			}
+		}
+	};
+	return list;
+};
+
+function cssWithMappingToString(item, useSourceMap) {
+	var content = item[1] || '';
+	var cssMapping = item[3];
+	if (!cssMapping) {
+		return content;
+	}
+
+	if (useSourceMap && typeof btoa === 'function') {
+		var sourceMapping = toComment(cssMapping);
+		var sourceURLs = cssMapping.sources.map(function (source) {
+			return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
+		});
+
+		return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
+	}
+
+	return [content].join('\n');
+}
+
+// Adapted from convert-source-map (MIT)
+function toComment(sourceMap) {
+	// eslint-disable-next-line no-undef
+	var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
+	var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
+
+	return '/*# ' + data + ' */';
+}
+
+
+/***/ }),
+/* 20 */
+/***/ (function(module, exports, __webpack_require__) {
+
+/*
+  MIT License http://www.opensource.org/licenses/mit-license.php
+  Author Tobias Koppers @sokra
+  Modified by Evan You @yyx990803
+*/
+
+var hasDocument = typeof document !== 'undefined'
+
+if (typeof DEBUG !== 'undefined' && DEBUG) {
+  if (!hasDocument) {
+    throw new Error(
+    'vue-style-loader cannot be used in a non-browser environment. ' +
+    "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
+  ) }
+}
+
+var listToStyles = __webpack_require__(21)
+
+/*
+type StyleObject = {
+  id: number;
+  parts: Array<StyleObjectPart>
+}
+
+type StyleObjectPart = {
+  css: string;
+  media: string;
+  sourceMap: ?string
+}
+*/
+
+var stylesInDom = {/*
+  [id: number]: {
+    id: number,
+    refs: number,
+    parts: Array<(obj?: StyleObjectPart) => void>
+  }
+*/}
+
+var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
+var singletonElement = null
+var singletonCounter = 0
+var isProduction = false
+var noop = function () {}
+var options = null
+var ssrIdKey = 'data-vue-ssr-id'
+
+// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
+// tags it will allow on a page
+var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
+
+module.exports = function (parentId, list, _isProduction, _options) {
+  isProduction = _isProduction
+
+  options = _options || {}
+
+  var styles = listToStyles(parentId, list)
+  addStylesToDom(styles)
+
+  return function update (newList) {
+    var mayRemove = []
+    for (var i = 0; i < styles.length; i++) {
+      var item = styles[i]
+      var domStyle = stylesInDom[item.id]
+      domStyle.refs--
+      mayRemove.push(domStyle)
+    }
+    if (newList) {
+      styles = listToStyles(parentId, newList)
+      addStylesToDom(styles)
+    } else {
+      styles = []
+    }
+    for (var i = 0; i < mayRemove.length; i++) {
+      var domStyle = mayRemove[i]
+      if (domStyle.refs === 0) {
+        for (var j = 0; j < domStyle.parts.length; j++) {
+          domStyle.parts[j]()
+        }
+        delete stylesInDom[domStyle.id]
+      }
+    }
+  }
+}
+
+function addStylesToDom (styles /* Array<StyleObject> */) {
+  for (var i = 0; i < styles.length; i++) {
+    var item = styles[i]
+    var domStyle = stylesInDom[item.id]
+    if (domStyle) {
+      domStyle.refs++
+      for (var j = 0; j < domStyle.parts.length; j++) {
+        domStyle.parts[j](item.parts[j])
+      }
+      for (; j < item.parts.length; j++) {
+        domStyle.parts.push(addStyle(item.parts[j]))
+      }
+      if (domStyle.parts.length > item.parts.length) {
+        domStyle.parts.length = item.parts.length
+      }
+    } else {
+      var parts = []
+      for (var j = 0; j < item.parts.length; j++) {
+        parts.push(addStyle(item.parts[j]))
+      }
+      stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
+    }
+  }
+}
+
+function createStyleElement () {
+  var styleElement = document.createElement('style')
+  styleElement.type = 'text/css'
+  head.appendChild(styleElement)
+  return styleElement
+}
+
+function addStyle (obj /* StyleObjectPart */) {
+  var update, remove
+  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
+
+  if (styleElement) {
+    if (isProduction) {
+      // has SSR styles and in production mode.
+      // simply do nothing.
+      return noop
+    } else {
+      // has SSR styles but in dev mode.
+      // for some reason Chrome can't handle source map in server-rendered
+      // style tags - source maps in <style> only works if the style tag is
+      // created and inserted dynamically. So we remove the server rendered
+      // styles and inject new ones.
+      styleElement.parentNode.removeChild(styleElement)
+    }
+  }
+
+  if (isOldIE) {
+    // use singleton mode for IE9.
+    var styleIndex = singletonCounter++
+    styleElement = singletonElement || (singletonElement = createStyleElement())
+    update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
+    remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
+  } else {
+    // use multi-style-tag mode in all other cases
+    styleElement = createStyleElement()
+    update = applyToTag.bind(null, styleElement)
+    remove = function () {
+      styleElement.parentNode.removeChild(styleElement)
+    }
+  }
+
+  update(obj)
+
+  return function updateStyle (newObj /* StyleObjectPart */) {
+    if (newObj) {
+      if (newObj.css === obj.css &&
+          newObj.media === obj.media &&
+          newObj.sourceMap === obj.sourceMap) {
+        return
+      }
+      update(obj = newObj)
+    } else {
+      remove()
+    }
+  }
+}
+
+var replaceText = (function () {
+  var textStore = []
+
+  return function (index, replacement) {
+    textStore[index] = replacement
+    return textStore.filter(Boolean).join('\n')
+  }
+})()
+
+function applyToSingletonTag (styleElement, index, remove, obj) {
+  var css = remove ? '' : obj.css
+
+  if (styleElement.styleSheet) {
+    styleElement.styleSheet.cssText = replaceText(index, css)
+  } else {
+    var cssNode = document.createTextNode(css)
+    var childNodes = styleElement.childNodes
+    if (childNodes[index]) styleElement.removeChild(childNodes[index])
+    if (childNodes.length) {
+      styleElement.insertBefore(cssNode, childNodes[index])
+    } else {
+      styleElement.appendChild(cssNode)
+    }
+  }
+}
+
+function applyToTag (styleElement, obj) {
+  var css = obj.css
+  var media = obj.media
+  var sourceMap = obj.sourceMap
+
+  if (media) {
+    styleElement.setAttribute('media', media)
+  }
+  if (options.ssrId) {
+    styleElement.setAttribute(ssrIdKey, obj.id)
+  }
+
+  if (sourceMap) {
+    // https://developer.chrome.com/devtools/docs/javascript-debugging
+    // this makes source maps inside style tags work properly in Chrome
+    css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
+    // http://stackoverflow.com/a/26603875
+    css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
+  }
+
+  if (styleElement.styleSheet) {
+    styleElement.styleSheet.cssText = css
+  } else {
+    while (styleElement.firstChild) {
+      styleElement.removeChild(styleElement.firstChild)
+    }
+    styleElement.appendChild(document.createTextNode(css))
+  }
+}
+
+
+/***/ }),
+/* 21 */
+/***/ (function(module, exports) {
+
+/**
+ * Translates the list format produced by css-loader into something
+ * easier to manipulate.
+ */
+module.exports = function listToStyles (parentId, list) {
+  var styles = []
+  var newStyles = {}
+  for (var i = 0; i < list.length; i++) {
+    var item = list[i]
+    var id = item[0]
+    var css = item[1]
+    var media = item[2]
+    var sourceMap = item[3]
+    var part = {
+      id: parentId + ':' + i,
+      css: css,
+      media: media,
+      sourceMap: sourceMap
+    }
+    if (!newStyles[id]) {
+      styles.push(newStyles[id] = { id: id, parts: [part] })
+    } else {
+      newStyles[id].parts.push(part)
+    }
+  }
+  return styles
+}
+
+
+/***/ }),
+/* 22 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -29385,101 +29772,127 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
 
-  props: {
-    slides: {
-      type: Array,
-      required: true,
-      default: function _default() {
-        return [];
-      }
+    props: {
+        slides: {
+            type: Array,
+            required: true,
+            default: function _default() {
+                return [];
+            }
+        }
+    },
+
+    data: function data() {
+
+        return {
+            images: [],
+            currentIndex: -1,
+            content: [],
+            current: false,
+            images_loaded: false
+
+        };
+    },
+
+    mounted: function mounted() {
+        this.getProps();
+    },
+
+
+    methods: {
+        getProps: function getProps() {
+            this.setProps();
+        },
+        setProps: function setProps() {
+
+            var this_this = this;
+            this.slides.forEach(function (slider) {
+                this_this.images.push(slider.path);
+            });
+            this.currentIndex = 0;
+
+            if (this.images.length == 0) {
+                this.images.push = "vendor/webkul/shop/assets/images/banner.png";
+            } else {
+                this.images_loaded = true;
+            }
+        },
+
+
+        changeIndexLeft: function changeIndexLeft() {
+
+            if (this.currentIndex > 0) {
+
+                this.currentIndex--;
+            } else if (this.currentIndex == 0) {
+
+                this.currentIndex = this.images.length - 1;
+            }
+        },
+        changeIndexRight: function changeIndexRight() {
+
+            if (this.currentIndex < this.images.length - 1) {
+
+                this.currentIndex++;
+            } else if (this.currentIndex == this.images.length - 1) {
+
+                this.currentIndex = 0;
+            }
+        }
     }
-  },
-
-  data: function data() {
-
-    return {
-      images: [
-        // "vendor/webkul/shop/assets/images/banner.png"
-      ],
-      currentIndex: 0,
-      content: []
-
-    };
-  },
-
-  mounted: function mounted() {
-    this.getProps();
-  },
-
-
-  methods: {
-    getProps: function getProps() {
-      this.setProps();
-    },
-    setProps: function setProps() {
-      for (var i = 0; i < this.slides.length; i++) {
-        this.images.push(this.slides[i].path);
-        this.content.push(this.slides[i].content);
-      }
-      if ($('.show-content').html(this.content[0])) console.log('content pushed');else console.log('cannot push');
-    },
-
-
-    changeIndexLeft: function changeIndexLeft() {
-      if (this.currentIndex > 0) {
-        this.currentIndex--;
-        if ($('.show-content').html(this.content[this.currentIndex])) console.log('content pushed');else console.log('cannot push');
-      } else if (this.currentIndex == 0) {
-        this.currentIndex = this.images.length - 1;
-        if ($('.show-content').html(this.content[this.currentIndex])) console.log('content pushed');else console.log('cannot push');
-      }
-    },
-    changeIndexRight: function changeIndexRight() {
-      if (this.currentIndex < this.images.length - 1) {
-        this.currentIndex++;
-        if ($('.show-content').html(this.content[this.currentIndex])) console.log('content pushed');else console.log('cannot push');
-      } else if (this.currentIndex == this.images.length - 1) {
-        this.currentIndex = 0;
-        if ($('.show-content').html(this.content[this.currentIndex])) console.log('content pushed');else console.log('cannot push');
-      }
-    }
-  }
 });
 
 /***/ }),
-/* 18 */
+/* 23 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
-  return _c("div", { staticClass: "slider-content" }, [
-    _c("ul", { staticClass: "slider-images" }, [
-      _c("li", [
-        _c("img", {
-          staticClass: "slider-item",
-          attrs: { src: _vm.images[_vm.currentIndex] }
-        }),
-        _vm._v(" "),
-        _c("div", { staticClass: "show-content" })
-      ]),
-      _vm._v(" "),
-      _c("div", { staticClass: "slider-control" }, [
-        _c("span", {
-          staticClass: "icon dark-left-icon slider-left",
-          on: { click: _vm.changeIndexLeft }
-        }),
-        _vm._v(" "),
-        _c("span", {
-          staticClass: "icon light-right-icon slider-right",
-          on: { click: _vm.changeIndexRight }
-        })
-      ])
-    ])
+  return _c("transition", { attrs: { name: "slide" } }, [
+    _vm.images.length > 0
+      ? _c("div", { staticClass: "slider-content" }, [
+          _c(
+            "ul",
+            { staticClass: "slider-images" },
+            _vm._l(_vm.images, function(image, index) {
+              return _c(
+                "li",
+                { key: index, class: { show: index == _vm.currentIndex } },
+                [
+                  _c("img", {
+                    staticClass: "slider-item",
+                    attrs: { src: image }
+                  })
+                ]
+              )
+            })
+          ),
+          _vm._v(" "),
+          _vm.images_loaded
+            ? _c("div", { staticClass: "slider-control" }, [
+                _c("span", {
+                  staticClass: "icon dark-left-icon slider-left",
+                  on: { click: _vm.changeIndexLeft }
+                }),
+                _vm._v(" "),
+                _c("span", {
+                  staticClass: "icon light-right-icon slider-right",
+                  on: { click: _vm.changeIndexRight }
+                })
+              ])
+            : _vm._e()
+        ])
+      : _vm._e()
   ])
 }
 var staticRenderFns = []
@@ -29488,18 +29901,18 @@ module.exports = { render: render, staticRenderFns: staticRenderFns }
 if (false) {
   module.hot.accept()
   if (module.hot.data) {
-    require("vue-hot-reload-api")      .rerender("data-v-0b7d2080", module.exports)
+    require("vue-hot-reload-api")      .rerender("data-v-74f1fa5f", module.exports)
   }
 }
 
 /***/ }),
-/* 19 */
+/* 24 */
 /***/ (function(module, exports, __webpack_require__) {
 
 !function(t,e){ true?module.exports=e():"function"==typeof define&&define.amd?define("vue-slider-component",[],e):"object"==typeof exports?exports["vue-slider-component"]=e():t["vue-slider-component"]=e()}(this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var r=i[s]={i:s,l:!1,exports:{}};return t[s].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=2)}([function(t,e,i){i(7);var s=i(5)(i(1),i(6),null,null);t.exports=s.exports},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=function(){var t="undefined"!=typeof window?window.devicePixelRatio||1:1;return function(e){return Math.round(e*t)/t}}();e.default={name:"VueSliderComponent",props:{width:{type:[Number,String],default:"auto"},height:{type:[Number,String],default:6},data:{type:Array,default:null},dotSize:{type:Number,default:16},dotWidth:{type:Number,required:!1},dotHeight:{type:Number,required:!1},min:{type:Number,default:0},max:{type:Number,default:100},interval:{type:Number,default:1},show:{type:Boolean,default:!0},disabled:{type:[Boolean,Array],default:!1},piecewise:{type:Boolean,default:!1},tooltip:{type:[String,Boolean],default:"always"},eventType:{type:String,default:"auto"},direction:{type:String,default:"horizontal"},reverse:{type:Boolean,default:!1},lazy:{type:Boolean,default:!1},clickable:{type:Boolean,default:!0},speed:{type:Number,default:.5},realTime:{type:Boolean,default:!1},stopPropagation:{type:Boolean,default:!1},value:{type:[String,Number,Array,Object],default:0},piecewiseLabel:{type:Boolean,default:!1},debug:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},processDragable:{type:Boolean,default:!1},useKeyboard:{type:Boolean,default:!1},actionsKeyboard:{type:Array,default:function(){return[function(t){return t-1},function(t){return t+1}]}},tooltipMerge:{type:Boolean,default:!0},sliderStyle:[Array,Object,Function],focusStyle:[Array,Object,Function],tooltipDir:[Array,String],formatter:[String,Function],mergeFormatter:[String,Function],piecewiseStyle:Object,disabledStyle:Object,piecewiseActiveStyle:Object,processStyle:Object,bgStyle:Object,tooltipStyle:[Array,Object,Function],disabledDotStyle:[Array,Object,Function],labelStyle:Object,labelActiveStyle:Object},data:function(){return{flag:!1,keydownFlag:null,focusFlag:!1,processFlag:!1,processSign:null,size:0,fixedValue:0,focusSlider:0,currentValue:0,currentSlider:0,isComponentExists:!0,isMounted:!1}},computed:{dotWidthVal:function(){return"number"==typeof this.dotWidth?this.dotWidth:this.dotSize},dotHeightVal:function(){return"number"==typeof this.dotHeight?this.dotHeight:this.dotSize},flowDirection:function(){return"vue-slider-"+this.direction+(this.reverse?"-reverse":"")},tooltipMergedPosition:function(){if(!this.isMounted)return{};var t=this.tooltipDirection[0];if(this.$refs.dot0){if("vertical"===this.direction){var e={};return e[t]="-"+(this.dotHeightVal/2-this.width/2+9)+"px",e}var i={};return i[t]="-"+(this.dotWidthVal/2-this.height/2+9)+"px",i.left="50%",i}},tooltipDirection:function(){var t=this.tooltipDir||("vertical"===this.direction?"left":"top");return Array.isArray(t)?this.isRange?t:t[1]:this.isRange?[t,t]:t},tooltipStatus:function(){return"hover"===this.tooltip&&this.flag?"vue-slider-always":this.tooltip?"vue-slider-"+this.tooltip:""},tooltipClass:function(){return["vue-slider-tooltip-"+this.tooltipDirection,"vue-slider-tooltip"]},disabledArray:function(){return Array.isArray(this.disabled)?this.disabled:[this.disabled,this.disabled]},boolDisabled:function(){return this.disabledArray.every(function(t){return!0===t})},isDisabled:function(){return"none"===this.eventType||this.boolDisabled},disabledClass:function(){return this.boolDisabled?"vue-slider-disabled":""},stateClass:function(){return{"vue-slider-state-process-drag":this.processFlag,"vue-slider-state-drag":this.flag&&!this.processFlag&&!this.keydownFlag,"vue-slider-state-focus":this.focusFlag}},isRange:function(){return Array.isArray(this.value)},slider:function(){return this.isRange?[this.$refs.dot0,this.$refs.dot1]:this.$refs.dot},minimum:function(){return this.data?0:this.min},val:{get:function(){return this.data?this.isRange?[this.data[this.currentValue[0]],this.data[this.currentValue[1]]]:this.data[this.currentValue]:this.currentValue},set:function(t){if(this.data)if(this.isRange){var e=this.data.indexOf(t[0]),i=this.data.indexOf(t[1]);e>-1&&i>-1&&(this.currentValue=[e,i])}else{var s=this.data.indexOf(t);s>-1&&(this.currentValue=s)}else this.currentValue=t}},currentIndex:function(){return this.isRange?this.data?this.currentValue:[this.getIndexByValue(this.currentValue[0]),this.getIndexByValue(this.currentValue[1])]:this.getIndexByValue(this.currentValue)},indexRange:function(){return this.isRange?this.currentIndex:[0,this.currentIndex]},maximum:function(){return this.data?this.data.length-1:this.max},multiple:function(){var t=(""+this.interval).split(".")[1];return t?Math.pow(10,t.length):1},spacing:function(){return this.data?1:this.interval},total:function(){return this.data?this.data.length-1:(Math.floor((this.maximum-this.minimum)*this.multiple)%(this.interval*this.multiple)!=0&&this.printError("Prop[interval] is illegal, Please make sure that the interval can be divisible"),(this.maximum-this.minimum)/this.interval)},gap:function(){return this.size/this.total},position:function(){return this.isRange?[(this.currentValue[0]-this.minimum)/this.spacing*this.gap,(this.currentValue[1]-this.minimum)/this.spacing*this.gap]:(this.currentValue-this.minimum)/this.spacing*this.gap},limit:function(){return this.isRange?this.fixed?[[0,(this.total-this.fixedValue)*this.gap],[this.fixedValue*this.gap,this.size]]:[[0,this.position[1]],[this.position[0],this.size]]:[0,this.size]},valueLimit:function(){return this.isRange?this.fixed?[[this.minimum,this.maximum-this.fixedValue*(this.spacing*this.multiple)/this.multiple],[this.minimum+this.fixedValue*(this.spacing*this.multiple)/this.multiple,this.maximum]]:[[this.minimum,this.currentValue[1]],[this.currentValue[0],this.maximum]]:[this.minimum,this.maximum]},idleSlider:function(){return 0===this.currentSlider?1:0},wrapStyles:function(){return"vertical"===this.direction?{height:"number"==typeof this.height?this.height+"px":this.height,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}:{width:"number"==typeof this.width?this.width+"px":this.width,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}},sliderStyles:function(){return Array.isArray(this.sliderStyle)?this.isRange?this.sliderStyle:this.sliderStyle[1]:"function"==typeof this.sliderStyle?this.sliderStyle(this.val,this.currentIndex):this.isRange?[this.sliderStyle,this.sliderStyle]:this.sliderStyle},focusStyles:function(){return Array.isArray(this.focusStyle)?this.isRange?this.focusStyle:this.focusStyle[1]:"function"==typeof this.focusStyle?this.focusStyle(this.val,this.currentIndex):this.isRange?[this.focusStyle,this.focusStyle]:this.focusStyle},disabledDotStyles:function(){var t=this.disabledDotStyle;if(Array.isArray(t))return t;if("function"==typeof t){var e=t(this.val,this.currentIndex);return Array.isArray(e)?e:[e,e]}return t?[t,t]:[{backgroundColor:"#ccc"},{backgroundColor:"#ccc"}]},tooltipStyles:function(){return Array.isArray(this.tooltipStyle)?this.isRange?this.tooltipStyle:this.tooltipStyle[1]:"function"==typeof this.tooltipStyle?this.tooltipStyle(this.val,this.currentIndex):this.isRange?[this.tooltipStyle,this.tooltipStyle]:this.tooltipStyle},elemStyles:function(){return"vertical"===this.direction?{width:this.width+"px",height:"100%"}:{height:this.height+"px"}},dotStyles:function(){return"vertical"===this.direction?{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",left:-(this.dotWidthVal-this.width)/2+"px"}:{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",top:-(this.dotHeightVal-this.height)/2+"px"}},piecewiseDotStyle:function(){return"vertical"===this.direction?{width:this.width+"px",height:this.width+"px"}:{width:this.height+"px",height:this.height+"px"}},piecewiseDotWrap:function(){if(!this.piecewise&&!this.piecewiseLabel)return!1;for(var t=[],e=0;e<=this.total;e++){var i="vertical"===this.direction?{bottom:this.gap*e-this.width/2+"px",left:0}:{left:this.gap*e-this.height/2+"px",top:0},s=this.reverse?this.total-e:e,r=this.data?this.data[s]:this.spacing*s+this.min;t.push({style:i,label:this.formatter?this.formatting(r):r,inRange:s>=this.indexRange[0]&&s<=this.indexRange[1]})}return t}},watch:{value:function(t){this.flag||this.setValue(t,!0)},max:function(t){if(t<this.min)return this.printError("The maximum value can not be less than the minimum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},min:function(t){if(t>this.max)return this.printError("The minimum value can not be greater than the maximum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},show:function(t){var e=this;t&&!this.size&&this.$nextTick(function(){e.refresh()})},fixed:function(){this.computedFixedValue()}},methods:{bindEvents:function(){document.addEventListener("touchmove",this.moving,{passive:!1}),document.addEventListener("touchend",this.moveEnd,{passive:!1}),document.addEventListener("mousedown",this.blurSlider),document.addEventListener("mousemove",this.moving),document.addEventListener("mouseup",this.moveEnd),document.addEventListener("mouseleave",this.moveEnd),document.addEventListener("keydown",this.handleKeydown),document.addEventListener("keyup",this.handleKeyup),window.addEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.addEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.addEventListener("transitionend",this.handleOverlapTooltip))},unbindEvents:function(){document.removeEventListener("touchmove",this.moving),document.removeEventListener("touchend",this.moveEnd),document.removeEventListener("mousedown",this.blurSlider),document.removeEventListener("mousemove",this.moving),document.removeEventListener("mouseup",this.moveEnd),document.removeEventListener("mouseleave",this.moveEnd),document.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("keyup",this.handleKeyup),window.removeEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.removeEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.removeEventListener("transitionend",this.handleOverlapTooltip))},handleKeydown:function(t){if(!this.useKeyboard||!this.focusFlag)return!1;switch(t.keyCode){case 37:case 40:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[0]);break;case 38:case 39:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[1])}},handleKeyup:function(){this.keydownFlag&&(this.keydownFlag=!1,this.flag=!1)},changeFocusSlider:function(t){var e=this;if(this.isRange){var i=this.currentIndex.map(function(i,s){if(s===e.focusSlider||e.fixed){var r=t(i),o=e.fixed?e.valueLimit[s]:[0,e.total];if(r<=o[1]&&r>=o[0])return r}return i});i[0]>i[1]&&(this.focusSlider=0===this.focusSlider?1:0,i=i.reverse()),this.setIndex(i)}else this.setIndex(t(this.currentIndex))},blurSlider:function(t){var e=this.isRange?this.$refs["dot"+this.focusSlider]:this.$refs.dot;if(!e||e===t.target)return!1;this.focusFlag=!1},formatting:function(t){return"string"==typeof this.formatter?this.formatter.replace(/\{value\}/,t):this.formatter(t)},mergeFormatting:function(t,e){return"string"==typeof this.mergeFormatter?this.mergeFormatter.replace(/\{(value1|value2)\}/g,function(i,s){return"value1"===s?t:e}):this.mergeFormatter(t,e)},getPos:function(t){return this.realTime&&this.getStaticData(),"vertical"===this.direction?this.reverse?t.pageY-this.offset:this.size-(t.pageY-this.offset):this.reverse?this.size-(t.clientX-this.offset):t.clientX-this.offset},processClick:function(t){this.fixed&&t.stopPropagation()},wrapClick:function(t){var e=this;if(this.isDisabled||!this.clickable||this.processFlag)return!1;var i=this.getPos(t);if(this.isRange)if(this.disabledArray.every(function(t){return!1===t}))this.currentSlider=i>(this.position[1]-this.position[0])/2+this.position[0]?1:0;else if(this.disabledArray[0]){if(i<this.position[0])return!1;this.currentSlider=1}else if(this.disabledArray[1]){if(i>this.position[1])return!1;this.currentSlider=0}if(this.disabledArray[this.currentSlider])return!1;if(this.setValueOnPos(i),this.isRange&&this.tooltipMerge){var s=setInterval(function(){return e.handleOverlapTooltip()},16.7);setTimeout(function(){return window.clearInterval(s)},1e3*this.speed)}},moveStart:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments[2];if(this.disabledArray[e])return!1;if(this.stopPropagation&&t.stopPropagation(),this.isRange&&(this.currentSlider=e,i)){if(!this.processDragable)return!1;this.processFlag=!0,this.processSign={pos:this.position,start:this.getPos(t.targetTouches&&t.targetTouches[0]?t.targetTouches[0]:t)}}!i&&this.useKeyboard&&(this.focusFlag=!0,this.focusSlider=e),this.flag=!0,this.$emit("drag-start",this)},moving:function(t){if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;t.preventDefault(),t.targetTouches&&t.targetTouches[0]&&(t=t.targetTouches[0]),this.processFlag?(this.currentSlider=0,this.setValueOnPos(this.processSign.pos[0]+this.getPos(t)-this.processSign.start,!0),this.currentSlider=1,this.setValueOnPos(this.processSign.pos[1]+this.getPos(t)-this.processSign.start,!0)):this.setValueOnPos(this.getPos(t),!0),this.isRange&&this.tooltipMerge&&this.handleOverlapTooltip()},moveEnd:function(t){var e=this;if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;this.$emit("drag-end",this),this.lazy&&this.isDiff(this.val,this.value)&&this.syncValue(),this.flag=!1,window.setTimeout(function(){e.processFlag=!1},0),this.setPosition()},setValueOnPos:function(t,e){var i=this.isRange?this.limit[this.currentSlider]:this.limit,s=this.isRange?this.valueLimit[this.currentSlider]:this.valueLimit;if(t>=i[0]&&t<=i[1]){this.setTransform(t);var r=this.getValueByIndex(Math.round(t/this.gap));this.setCurrentValue(r,e),this.isRange&&this.fixed&&(this.setTransform(t+this.fixedValue*this.gap*(0===this.currentSlider?1:-1),!0),this.setCurrentValue((r*this.multiple+this.fixedValue*this.spacing*this.multiple*(0===this.currentSlider?1:-1))/this.multiple,e,!0))}else t<i[0]?(this.setTransform(i[0]),this.setCurrentValue(s[0]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][0],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][0],e,!0)):this.fixed||this.disabledArray[0]||1!==this.currentSlider||(this.focusSlider=0,this.currentSlider=0)):(this.setTransform(i[1]),this.setCurrentValue(s[1]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][1],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][1],e,!0)):this.fixed||this.disabledArray[1]||0!==this.currentSlider||(this.focusSlider=1,this.currentSlider=1))},isDiff:function(t,e){return Object.prototype.toString.call(t)!==Object.prototype.toString.call(e)||(Array.isArray(t)&&t.length===e.length?t.some(function(t,i){return t!==e[i]}):t!==e)},setCurrentValue:function(t,e,i){var s=i?this.idleSlider:this.currentSlider;if(t<this.minimum||t>this.maximum)return!1;this.isRange?this.isDiff(this.currentValue[s],t)&&(this.currentValue.splice(s,1,t),this.lazy&&this.flag||this.syncValue()):this.isDiff(this.currentValue,t)&&(this.currentValue=t,this.lazy&&this.flag||this.syncValue()),e||this.setPosition()},getValueByIndex:function(t){return(this.spacing*this.multiple*t+this.minimum*this.multiple)/this.multiple},getIndexByValue:function(t){return Math.round((t-this.minimum)*this.multiple)/(this.spacing*this.multiple)},setIndex:function(t){if(Array.isArray(t)&&this.isRange){var e=void 0;e=this.data?[this.data[t[0]],this.data[t[1]]]:[this.getValueByIndex(t[0]),this.getValueByIndex(t[1])],this.setValue(e)}else t=this.getValueByIndex(t),this.isRange&&(this.currentSlider=t>(this.currentValue[1]-this.currentValue[0])/2+this.currentValue[0]?1:0),this.setCurrentValue(t)},setValue:function(t,e,i){var s=this;if(this.isDiff(this.val,t)){var r=this.limitValue(t);this.val=this.isRange?r.concat():r,this.computedFixedValue(),this.syncValue(e)}this.$nextTick(function(){return s.setPosition(i)})},computedFixedValue:function(){if(!this.fixed)return this.fixedValue=0,!1;this.fixedValue=this.currentIndex[1]-this.currentIndex[0]},setPosition:function(t){this.flag||this.setTransitionTime(void 0===t?this.speed:t),this.isRange?(this.setTransform(this.position[0],1===this.currentSlider),this.setTransform(this.position[1],0===this.currentSlider)):this.setTransform(this.position),this.flag||this.setTransitionTime(0)},setTransform:function(t,e){var i=e?this.idleSlider:this.currentSlider,r=s(("vertical"===this.direction?this.dotHeightVal/2-t:t-this.dotWidthVal/2)*(this.reverse?-1:1)),o="vertical"===this.direction?"translateY("+r+"px)":"translateX("+r+"px)",n=this.fixed?this.fixedValue*this.gap+"px":(0===i?this.position[1]-t:t-this.position[0])+"px",l=this.fixed?(0===i?t:t-this.fixedValue*this.gap)+"px":(0===i?t:this.position[0])+"px";this.isRange?(this.slider[i].style.transform=o,this.slider[i].style.WebkitTransform=o,this.slider[i].style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=n,this.$refs.process.style[this.reverse?"top":"bottom"]=l):(this.$refs.process.style.width=n,this.$refs.process.style[this.reverse?"right":"left"]=l)):(this.slider.style.transform=o,this.slider.style.WebkitTransform=o,this.slider.style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=t+"px",this.$refs.process.style[this.reverse?"top":"bottom"]=0):(this.$refs.process.style.width=t+"px",this.$refs.process.style[this.reverse?"right":"left"]=0))},setTransitionTime:function(t){if(t||this.$refs.process.offsetWidth,this.isRange){for(var e=0;e<this.slider.length;e++)this.slider[e].style.transitionDuration=t+"s",this.slider[e].style.WebkitTransitionDuration=t+"s";this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"}else this.slider.style.transitionDuration=t+"s",this.slider.style.WebkitTransitionDuration=t+"s",this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"},limitValue:function(t){var e=this;if(this.data)return t;var i=function(i){return i<e.min?(e.printError("The value of the slider is "+t+", the minimum value is "+e.min+", the value of this slider can not be less than the minimum value"),e.min):i>e.max?(e.printError("The value of the slider is "+t+", the maximum value is "+e.max+", the value of this slider can not be greater than the maximum value"),e.max):i};return this.isRange?t.map(function(t){return i(t)}):i(t)},syncValue:function(t){var e=this.isRange?this.val.concat():this.val;this.$emit("input",e),t||this.$emit("callback",e)},getValue:function(){return this.val},getIndex:function(){return this.currentIndex},getStaticData:function(){this.$refs.elem&&(this.size="vertical"===this.direction?this.$refs.elem.offsetHeight:this.$refs.elem.offsetWidth,this.offset="vertical"===this.direction?this.$refs.elem.getBoundingClientRect().top+window.pageYOffset||document.documentElement.scrollTop:this.$refs.elem.getBoundingClientRect().left)},refresh:function(){this.$refs.elem&&(this.getStaticData(),this.computedFixedValue(),this.setPosition())},printError:function(t){this.debug&&console.error("[VueSlider error]: "+t)},handleOverlapTooltip:function(){var t=this.tooltipDirection[0]===this.tooltipDirection[1];if(this.isRange&&t){var e=this.reverse?this.$refs.tooltip1:this.$refs.tooltip0,i=this.reverse?this.$refs.tooltip0:this.$refs.tooltip1,s=e.getBoundingClientRect().right,r=i.getBoundingClientRect().left,o=e.getBoundingClientRect().y,n=i.getBoundingClientRect().y+i.getBoundingClientRect().height,l="horizontal"===this.direction&&s>r,a="vertical"===this.direction&&n>o;l||a?this.handleDisplayMergedTooltip(!0):this.handleDisplayMergedTooltip(!1)}},handleDisplayMergedTooltip:function(t){var e=this.$refs.tooltip0,i=this.$refs.tooltip1,s=this.$refs.process.getElementsByClassName("vue-merged-tooltip")[0];t?(e.style.visibility="hidden",i.style.visibility="hidden",s.style.visibility="visible"):(e.style.visibility="visible",i.style.visibility="visible",s.style.visibility="hidden")}},mounted:function(){var t=this;if(this.isComponentExists=!0,"undefined"==typeof window||"undefined"==typeof document)return this.printError("window or document is undefined, can not be initialization.");this.$nextTick(function(){t.isComponentExists&&(t.getStaticData(),t.setValue(t.limitValue(t.value),!0,0),t.bindEvents())}),this.isMounted=!0},beforeDestroy:function(){this.isComponentExists=!1,this.unbindEvents()}}},function(t,e,i){"use strict";var s=i(0);t.exports=s},function(t,e,i){e=t.exports=i(4)(),e.push([t.i,'.vue-slider-component{position:relative;box-sizing:border-box;-ms-user-select:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none}.vue-slider-component.vue-slider-disabled{opacity:.5;cursor:not-allowed}.vue-slider-component.vue-slider-has-label{margin-bottom:15px}.vue-slider-component.vue-slider-disabled .vue-slider-dot{cursor:not-allowed}.vue-slider-component .vue-slider{position:relative;display:block;border-radius:15px;background-color:#ccc}.vue-slider-component .vue-slider:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2}.vue-slider-component .vue-slider-process{position:absolute;border-radius:15px;background-color:#3498db;transition:all 0s;z-index:1}.vue-slider-component .vue-slider-process.vue-slider-process-dragable{cursor:pointer;z-index:3}.vue-slider-component.vue-slider-horizontal .vue-slider-process{width:0;height:100%;top:0;left:0;will-change:width}.vue-slider-component.vue-slider-vertical .vue-slider-process{width:100%;height:0;bottom:0;left:0;will-change:height}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-process{width:0;height:100%;top:0;right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-process{width:100%;height:0;top:0;left:0}.vue-slider-component .vue-slider-dot{position:absolute;border-radius:50%;background-color:#fff;box-shadow:.5px .5px 2px 1px rgba(0,0,0,.32);transition:all 0s;will-change:transform;cursor:pointer;z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-focus{box-shadow:0 0 2px 1px #3498db}.vue-slider-component .vue-slider-dot.vue-slider-dot-dragging{z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-disabled{z-index:4}.vue-slider-component.vue-slider-horizontal .vue-slider-dot{left:0}.vue-slider-component.vue-slider-vertical .vue-slider-dot{bottom:0}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-dot{right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-dot{top:0}.vue-slider-component .vue-slider-tooltip-wrap{display:none;position:absolute;z-index:9}.vue-slider-component .vue-slider-tooltip{display:block;font-size:14px;white-space:nowrap;padding:2px 5px;min-width:20px;text-align:center;color:#fff;border-radius:5px;border:1px solid #3498db;background-color:#3498db}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top{top:-9px;left:50%;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom{bottom:-9px;left:50%;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left{top:50%;left:-9px;-webkit-transform:translate(-100%,-50%);transform:translate(-100%,-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right{top:50%;right:-9px;-webkit-transform:translate(100%,-50%);transform:translate(100%,-50%)}.vue-slider-component .vue-slider-tooltip-top .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top .vue-slider-tooltip:before{content:"";position:absolute;bottom:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-top-color:inherit;-webkit-transform:translate(-50%);transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-merged-tooltip{display:block;visibility:hidden}.vue-slider-component .vue-slider-tooltip-bottom .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom .vue-slider-tooltip:before{content:"";position:absolute;top:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-bottom-color:inherit;-webkit-transform:translate(-50%);transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-left .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left .vue-slider-tooltip:before{content:"";position:absolute;top:50%;right:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-left-color:inherit;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.vue-slider-component .vue-slider-tooltip-right .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right .vue-slider-tooltip:before{content:"";position:absolute;top:50%;left:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-right-color:inherit;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.vue-slider-component .vue-slider-dot.vue-slider-hover:hover .vue-slider-tooltip-wrap{display:block}.vue-slider-component .vue-slider-dot.vue-slider-always .vue-slider-tooltip-wrap{display:block!important}.vue-slider-component .vue-slider-piecewise{position:absolute;width:100%;padding:0;margin:0;left:0;top:0;height:100%;list-style:none}.vue-slider-component .vue-slider-piecewise-item{position:absolute;width:8px;height:8px}.vue-slider-component .vue-slider-piecewise-dot{position:absolute;left:50%;top:50%;width:100%;height:100%;display:inline-block;background-color:rgba(0,0,0,.16);border-radius:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2;transition:all .3s}.vue-slider-component .vue-slider-piecewise-item:first-child .vue-slider-piecewise-dot,.vue-slider-component .vue-slider-piecewise-item:last-child .vue-slider-piecewise-dot{visibility:hidden}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-horizontal .vue-slider-piecewise-label{position:absolute;display:inline-block;top:100%;left:50%;white-space:nowrap;font-size:12px;color:#333;-webkit-transform:translate(-50%,8px);transform:translate(-50%,8px);visibility:visible}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-vertical .vue-slider-piecewise-label{position:absolute;display:inline-block;top:50%;left:100%;white-space:nowrap;font-size:12px;color:#333;-webkit-transform:translate(8px,-50%);transform:translate(8px,-50%);visibility:visible}.vue-slider-component .vue-slider-sr-only{clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute!important}',""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var i=this[e];i[2]?t.push("@media "+i[2]+"{"+i[1]+"}"):t.push(i[1])}return t.join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var s={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(s[o]=!0)}for(r=0;r<e.length;r++){var n=e[r];"number"==typeof n[0]&&s[n[0]]||(i&&!n[2]?n[2]=i:i&&(n[2]="("+n[2]+") and ("+i+")"),t.push(n))}},t}},function(t,e){t.exports=function(t,e,i,s){var r,o=t=t||{},n=typeof t.default;"object"!==n&&"function"!==n||(r=t,o=t.default);var l="function"==typeof o?o.options:o;if(e&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns),i&&(l._scopeId=i),s){var a=Object.create(l.computed||null);Object.keys(s).forEach(function(t){var e=s[t];a[t]=function(){return e}}),l.computed=a}return{esModule:r,exports:o,options:l}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],ref:"wrap",class:["vue-slider-component",t.flowDirection,t.disabledClass,t.stateClass,{"vue-slider-has-label":t.piecewiseLabel}],style:[t.wrapStyles,t.boolDisabled?t.disabledStyle:null],on:{click:t.wrapClick}},[i("div",{ref:"elem",staticClass:"vue-slider",style:[t.elemStyles,t.bgStyle],attrs:{"aria-hidden":"true"}},[t.isRange?[i("div",{key:"dot0",ref:"dot0",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[0]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[0]?t.disabledDotStyles[0]:null,t.sliderStyles[0],t.focusFlag&&0===t.focusSlider?t.focusStyles[0]:null],on:{mousedown:function(e){t.moveStart(e,0)},touchstart:function(e){t.moveStart(e,0)}}},[i("div",{ref:"tooltip0",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[0]},[t._v(t._s(t.formatter?t.formatting(t.val[0]):t.val[0]))])],{value:t.val[0],index:0,disabled:!t.boolDisabled&&t.disabledArray[0]})],2)]),t._v(" "),i("div",{key:"dot1",ref:"dot1",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&1===t.focusSlider,"vue-slider-dot-dragging":t.flag&&1===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[1]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[1]?t.disabledDotStyles[1]:null,t.sliderStyles[1],t.focusFlag&&1===t.focusSlider?t.focusStyles[1]:null],on:{mousedown:function(e){t.moveStart(e,1)},touchstart:function(e){t.moveStart(e,1)}}},[i("div",{ref:"tooltip1",class:["vue-slider-tooltip-"+t.tooltipDirection[1],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[1]},[t._v(t._s(t.formatter?t.formatting(t.val[1]):t.val[1]))])],{value:t.val[1],index:1,disabled:!t.boolDisabled&&t.disabledArray[1]})],2)])]:[i("div",{key:"dot",ref:"dot",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider}],style:[t.dotStyles,t.sliderStyles,t.focusFlag&&0===t.focusSlider?t.focusStyles:null],on:{mousedown:t.moveStart,touchstart:t.moveStart}},[i("div",{class:["vue-slider-tooltip-"+t.tooltipDirection,"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v(t._s(t.formatter?t.formatting(t.val):t.val))])],{value:t.val})],2)])],t._v(" "),i("ul",{staticClass:"vue-slider-piecewise"},t._l(t.piecewiseDotWrap,function(e,s){return i("li",{key:s,staticClass:"vue-slider-piecewise-item",style:[t.piecewiseDotStyle,e.style]},[t._t("piecewise",[t.piecewise?i("span",{staticClass:"vue-slider-piecewise-dot",style:[t.piecewiseStyle,e.inRange?t.piecewiseActiveStyle:null]}):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange}),t._v(" "),t._t("label",[t.piecewiseLabel?i("span",{staticClass:"vue-slider-piecewise-label",style:[t.labelStyle,e.inRange?t.labelActiveStyle:null]},[t._v("\n            "+t._s(e.label)+"\n          ")]):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange})],2)})),t._v(" "),i("div",{ref:"process",class:["vue-slider-process",{"vue-slider-process-dragable":t.isRange&&t.processDragable}],style:t.processStyle,on:{click:t.processClick,mousedown:function(e){t.moveStart(e,0,!0)},touchstart:function(e){t.moveStart(e,0,!0)}}},[i("div",{ref:"mergedTooltip",staticClass:"vue-merged-tooltip",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"],style:t.tooltipMergedPosition},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v("\n            "+t._s(t.mergeFormatter?t.mergeFormatting(t.val[0],t.val[1]):t.formatter?t.val[0]===t.val[1]?t.formatting(t.val[0]):t.formatting(t.val[0])+" - "+t.formatting(t.val[1]):t.val[0]===t.val[1]?t.val[0]:t.val[0]+" - "+t.val[1])+"\n          ")])])],2)]),t._v(" "),t.isRange||t.data?t._e():i("input",{directives:[{name:"model",rawName:"v-model",value:t.val,expression:"val"}],staticClass:"vue-slider-sr-only",attrs:{type:"range",min:t.min,max:t.max},domProps:{value:t.val},on:{__r:function(e){t.val=e.target.value}}})],2)])},staticRenderFns:[]}},function(t,e,i){var s=i(3);"string"==typeof s&&(s=[[t.i,s,""]]),s.locals&&(t.exports=s.locals);i(8)("743d98f5",s,!0)},function(t,e,i){function s(t){for(var e=0;e<t.length;e++){var i=t[e],s=d[i.id];if(s){s.refs++;for(var r=0;r<s.parts.length;r++)s.parts[r](i.parts[r]);for(;r<i.parts.length;r++)s.parts.push(o(i.parts[r]));s.parts.length>i.parts.length&&(s.parts.length=i.parts.length)}else{for(var n=[],r=0;r<i.parts.length;r++)n.push(o(i.parts[r]));d[i.id]={id:i.id,refs:1,parts:n}}}}function r(){var t=document.createElement("style");return t.type="text/css",h.appendChild(t),t}function o(t){var e,i,s=document.querySelector('style[data-vue-ssr-id~="'+t.id+'"]');if(s){if(f)return v;s.parentNode.removeChild(s)}if(m){var o=p++;s=c||(c=r()),e=n.bind(null,s,o,!1),i=n.bind(null,s,o,!0)}else s=r(),e=l.bind(null,s),i=function(){s.parentNode.removeChild(s)};return e(t),function(s){if(s){if(s.css===t.css&&s.media===t.media&&s.sourceMap===t.sourceMap)return;e(t=s)}else i()}}function n(t,e,i,s){var r=i?"":s.css;if(t.styleSheet)t.styleSheet.cssText=g(e,r);else{var o=document.createTextNode(r),n=t.childNodes;n[e]&&t.removeChild(n[e]),n.length?t.insertBefore(o,n[e]):t.appendChild(o)}}function l(t,e){var i=e.css,s=e.media,r=e.sourceMap;if(s&&t.setAttribute("media",s),r&&(i+="\n/*# sourceURL="+r.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}var a="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=i(9),d={},h=a&&(document.head||document.getElementsByTagName("head")[0]),c=null,p=0,f=!1,v=function(){},m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,i){f=i;var r=u(t,e);return s(r),function(e){for(var i=[],o=0;o<r.length;o++){var n=r[o],l=d[n.id];l.refs--,i.push(l)}e?(r=u(t,e),s(r)):r=[];for(var o=0;o<i.length;o++){var l=i[o];if(0===l.refs){for(var a=0;a<l.parts.length;a++)l.parts[a]();delete d[l.id]}}}};var g=function(){var t=[];return function(e,i){return t[e]=i,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var i=[],s={},r=0;r<e.length;r++){var o=e[r],n=o[0],l=o[1],a=o[2],u=o[3],d={id:t+":"+r,css:l,media:a,sourceMap:u};s[n]?s[n].parts.push(d):i.push(s[n]={id:n,parts:[d]})}return i}}])});
 
 /***/ }),
-/* 20 */
+/* 25 */
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin