up-sellling completed

packages/Webkul/Admin/src/Resources/lang/en/app.php

@@ -375,7 +375,11 @@ return [
             'categories' => 'Categories',
             'images' => 'Images',
             'inventories' => 'Inventories',
-            'variations' => 'Variations'
+            'variations' => 'Variations',
+            'product-link' => 'Linked Products',
+            'cross-selling' => 'Cross Selling',
+            'up-selling' => 'Up Selling',
+            'product-search-hint' => 'Start typing product name'
         ],
 
         'attributes' => [

packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/product-links.blade.php

@@ -11,19 +11,21 @@
 
 <script type="text/x-template" id="up-selling-template">
     <div>
-
         <div class="control-group">
-            <input type="text" class="control" autocomplete="off" v-model="search_term">
+            <label for="up-selling">{{ __('admin::app.catalog.products.up-selling') }}</label>
+            <input type="text" class="control" autocomplete="off" v-model="search_term" placeholder="{{ __('admin::app.catalog.products.product-search-hint') }}">
+
+            <input type="hidden" name="up_sell[]" v-for='(product, index) in this.addedProduct' :value="product.id"/>
 
             <span class="filter-tag" style="text-transform: capitalize; margin-top: 10px; margin-right: 0px; justify-content: flex-start">
-                <span class="wrapper" style="margin-left: 0px; margin-right: 10px;" v-for='(product, index) in this.product_name'>
+                <span class="wrapper" style="margin-left: 0px; margin-right: 10px;" v-for='(product, index) in this.addedProduct'>
                         @{{ product.name }}
-                <span class="icon cross-icon" @click="removeProduct(product.name)"></span>
+                <span class="icon cross-icon" @click="removeProduct(product)"></span>
                 </span>
             </span>
 
             <ul>
-                <li v-for='(product, index) in products' style="padding: 10px; border-bottom: 1px solid; width: 70%; cursor: pointer;" @click="addProduct(product.name)">
+                <li v-for='(product, index) in products' style="padding: 10px; border-bottom: 1px solid #e8e8e8; width: 70%; cursor: pointer;" @click="addProduct(product)">
                     @{{ product.name }}
                 </li>
             </ul>
@@ -38,13 +40,29 @@
             template: '#up-selling-template',
 
             data: () => ({
-                allProduct : @json($allProducts),
+                allProduct: @json($allProducts),
 
                 search_term: '',
 
-                product_name: [],
+                addedProduct: [],
+
+                upSellingProduct: @json($product->up_sells()->get()),
             }),
 
+            created () {
+                if (this.upSellingProduct.length >= 1) {
+                    for (var index in this.upSellingProduct) {
+                        this.addedProduct.push(this.upSellingProduct[index]);
+
+                        for (var index1 in this.allProduct) {
+                            if (this.allProduct[index1].id == this.upSellingProduct[index].id) {
+                                this.allProduct.splice(index1, 1);
+                            }
+                        }
+                    }
+                }
+            },
+
             computed: {
                 products () {
                     if (this.search_term.length >= 1) {
@@ -56,21 +74,27 @@
             },
 
             methods: {
-                addProduct(productName) {
-                    this.product_name.push({'name': productName});
+                addProduct(product) {
+                    this.addedProduct.push(product);
                     this.search_term = '';
+
+                    for (var index in this.allProduct) {
+                        if (this.allProduct[index].id == product.id) {
+                            this.allProduct.splice(index, 1);
+                        }
+                    }
                 },
 
-                removeProduct(productName) {
-                    for (var index in  this.product_name) {
-                        if ( this.product_name[index].name == productName ) {
-                            let data = Array.prototype.slice.call(this.product_name, index);
-
-                            console.log(data);
+                removeProduct(product) {
+                    for (var index in this.addedProduct) {
+                        if (this.addedProduct[index].id == product.id ) {
+                            this.allProduct.push(product);
+                            this.addedProduct.splice(index, 1);
                         }
                     }
                 },
             }
         });
 </script>
+
 @endpush

packages/Webkul/Product/src/Repositories/ProductRepository.php

@@ -194,6 +194,10 @@ class ProductRepository extends Repository
                 $product->categories()->sync($data['categories']);
             }
 
+            if (isset($data['up_sell'])) {
+                $product->up_sells()->sync($data['up_sell']);
+            }
+
             $previousVariantIds = $product->variants->pluck('id');
 
             if (isset($data['variants'])) {

packages/Webkul/Shop/src/Resources/views/products/view/up-sells.blade.php

@@ -8,7 +8,7 @@
             <span class="border-bottom"></span>
         </div>
 
-        <div class="product-grid max-4-col">
+        <div class="product-grid-4">
 
             @foreach ($product->up_sells()->paginate(4) as $up_sell_product)