Build an E-commerce Project With Laravel in Bangla Part-9: Adding Attributes to Products

Laravel eCommerce Product Attribute

Laravel eCommerce Product Attribute

Laravel Ecommerce প্রজেক্টের নবম পর্বে আপনাদেরকে স্বাগতম! আমাদের পর্ব ৬ এ যেই attribute তৈরি এবং ম্যানেজ এর ব্যবস্থা করেছিলাম।আজকের পর্বে আমরা আমাদের প্রোডাক্ট গুলোতে সেই সব এট্রিবিউট গুলো যুক্ত করার ব্যবস্থা করব আর এর জন্য আমাদেরকে আমাদের product এর edit view তে product attributes tab যুক্ত করতে হবে। আসলে product attribute গুলোকে আমরা বহু ভাবে handle করতে পারি , তবে আমরা এখানে যত টুকু সম্ভব সিম্পল ওয়েতে কাজটি সম্পূর্ণ করব।

ডাটাবেসে কিছু পরিবর্তন

VueJS component নিয়ে কাজ শুরুর আগে , আমরা আমাদের ইতিপূর্বে পর্ব ৮ এ Product Management করার সময় আমরা attribute_values টেবিল কে product_attribute table এর সাথে জয়েন করানোর জন্য attribute_value_product_attribute নামে একটা pivot table তৈরি করেছিলাম। এখন আমরা attribute_value_product_attribute এই table টি ডিলিট করব। আর এর জন্য এখন আমরা একটা migration তৈরি করতে হবে।

php artisan make:migration drop_attribute_value_product_attribute_table

এবার আপনার migration file টি তৈরি হয়ে গেলে নিম্নোক্ত কোড দিয়ে সেটিকে আপডেট করে নিন।

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class DropAttributeValueProductAttributeTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::dropIfExists('attribute_value_product_attribute');
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        //
    }
}

এখন আমি product_attributes টেবিল এ কিছু অতিরিক্ত ফিল্ড যুক্ত করব, আর এর জন্য আপনাকে আবার নতুন করে নিচের কমান্ডটি দিয়ে একটা migration ফাইল তৈরি করতে হবে।

php artisan make:migration alter_product_attributes_table

এবার আপনার সদ্য তৈরি মাইগ্রেশন ফাইলটি খুলুন এবং নীচের কোডগুলো দিয়ে আপডেট করুন।

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class AlterProductAttributesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('product_attributes', function (Blueprint $table) {

            $table->unsignedBigInteger('attribute_id')->after('id');
            $table->foreign('attribute_id')->references('id')->on('attributes');

            $table->string('value')->after('attribute_id');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::create('product_attributes', function (Blueprint $table) {
            $table->dropColumn('value');
        });
    }
}

লক্ষ্য করে থাকবেন , আমরা product_attributes table এ attribute_id এবং value নামে দুটি নতুন কলাম তৈরি করেছি।

এখন নিম্নোক্ত কমান্ডটি রান করার মাধ্যমে আপনার ডাটাবেস কে আপডেট করে নিন।

php artisan migrate

এখন লক্ষ্য করবেন , এতক্ষনে আপনার pivot table টি ডাটাবেস থেকে ডিলিট হয়ে গেছে। এবং একই সাথে product_attributes টেবিলে অতিরিক্ত দুটি কলাম দেখতে পাবেন।

এবার আমি product_attributes table এর relationship এ কিছু পরিবর্তন আনব। আর এর জন্য আপনার ProductAttribute model এ attributes() মেথড টি নিম্নের মতো করে আপডেট করে নিন।

    /**
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function attribute()
    {
        return $this->belongsTo(Attribute::class);
    }

এছাড়া $fillable array তে attribute_id এবং value কলামকে যুক্ত করে নিন।

Product Attributes Tab যুক্ত করন

resources/views/admin/products/edit.blade.php ফাইল এ mages tab এর ঠিক নিচে attributes নামে একটা tab যুক্ত করব। ঠিক যেভাবে আমরা images এর জন্য করেছি।

আপনার resources/views/admin/products/edit.blade.php file টি ওপেন করুন এবং images tab এর ঠিক নিচে নিম্নোক্ত markup যুক্ত করুন।

<li class="nav-item"><a class="nav-link" href="#attributes" data-toggle="tab">Attributes</a></li>

এবার resources/views/admin/products/edit.blade.php ফাইল এ images div এর ঠিক নিচে নতুন attributes সেকশন টি যুক্ত করুন।

<div class="tab-pane" id="attributes">
                    <product-attributes :productid="{{ $product->id }}"></product-attributes>
                </div>

আপনি দেখতে পাচ্ছেন , আমরা product-attributes নামে একটা tag যুক্ত করেছি , যা আমাদের Vue component এ তৈরি হবে।

এবার আমরা app.js ফাইলটি এখানে নিচের মতো করে সংযুক্ত করব।

<script type="text/javascript" src="{{ asset('backend/js/app.js') }}"></script>

দরকারি Route গুলো যুক্ত করণ

এবার আমরা আমাদের product attributes এর জন্য প্রয়োজনীয় Route গুলো যুক্ত করব।

আপনার admin.php routes file টি ওপেন করুন , এবং নিম্নোক্ত route গুলো products group এর মধ্যে যুক্ত করুন।

// Load attributes on the page load
Route::get('attributes/load', 'Admin\ProductAttributeController@loadAttributes');
// Load product attributes on the page load
Route::post('attributes', 'Admin\ProductAttributeController@productAttributes');
// Load option values for a attribute
Route::post('attributes/values', 'Admin\ProductAttributeController@loadValues');
// Add product attribute to the current product
Route::post('attributes/add', 'Admin\ProductAttributeController@addAttribute');
// Delete product attribute from the current product
Route::post('attributes/delete', 'Admin\ProductAttributeController@deleteAttribute');

আমি প্রত্যেকটি route এর বিপরীতে কমেন্টস যুক্ত করেছি , আশাকরি এতে প্রত্যেকটি route সম্পর্কে আপনার বুজতে সহজ হবে।

Product Attribute Controller তৈরি।

product attributes এর জন্য তৈরি আমাদের সব গুলো route ProductAttributeController কে পয়েন্ট করেছে। তা হলে চলুন নিম্নোক্ত কম্যান্ড দিয়ে তৈরি করে ফেলি নতুন একটা controller।

php artisan make:controller Admin\ProductAttributeController

এবার আপনার সদ্য তৈরি হওয়া controller কে নিম্নোক্ত কোড গুলো দিয়ে আপডেট করে নিন।

<?php

namespace App\Http\Controllers\Admin;

use App\Models\Product;
use App\Models\Attribute;
use Illuminate\Http\Request;
use App\Models\ProductAttribute;
use App\Http\Controllers\Controller;

class ProductAttributeController extends Controller
{
    /**
     * @return \Illuminate\Http\JsonResponse
     */
    public function loadAttributes()
    {
        $attributes = Attribute::all();

        return response()->json($attributes);
    }

    /**
     * @param Request $request
     * @return \Illuminate\Http\JsonResponse
     */
    public function productAttributes(Request $request)
    {
        $product = Product::findOrFail($request->id);

        return response()->json($product->attributes);
    }

    /**
     * @param Request $request
     * @return \Illuminate\Http\JsonResponse
     */
    public function loadValues(Request $request)
    {
        $attribute = Attribute::findOrFail($request->id);

        return response()->json($attribute->values);
    }

    /**
     * @param Request $request
     * @return \Illuminate\Http\JsonResponse
     */
    public function addAttribute(Request $request)
    {
        $productAttribute = ProductAttribute::create($request->data);

        if ($productAttribute) {
            return response()->json(['message' => 'Product attribute added successfully.']);
        } else {
            return response()->json(['message' => 'Something went wrong while submitting product attribute.']);
        }
    }

    /**
     * @param Request $request
     * @return \Illuminate\Http\JsonResponse
     */
    public function deleteAttribute(Request $request)
    {
        $productAttribute = ProductAttribute::findOrFail($request->id);
        $productAttribute->delete();

        return response()->json(['status' => 'success', 'message' => 'Product attribute deleted successfully.']);
    }
}

উপরের controller এ আমি আমাদের route এর জন্য প্রয়োজনীয় সবগুলো method কে যুক্ত করেছি। আর এই ধরণের method নিয়ে আমি যেহেতু ইতিপূর্বে আলোচনা করেছি , তাই এখানে এই বিষয়টা নিয়ে আমি সময় নষ্ট করবোনা।

VueJs Component তৈরি এবং app.js File এ যুক্ত করন

এবার আমরা VueJs এ একটা নতুন component তৈরি করব। resources/js/app.js file টি ওপেন করুন এবং নিম্নোক্ত নতুন Vue Component টি যুক্ত করুন।

Vue.component('product-attributes', require('./components/ProductAttributes').default);

ProductAttributes.vue ফাইল তৈরি

resources/js/components/ ফোল্ডারে ProductAttributes.vue ফাইলটি তৈরি করব এবং নিম্নোক্ত মার্কআপ গুলো যুক্ত করব।

<template>
    <div>
        <div class="tile">
            <h3 class="tile-title">Product Attributes</h3>
            <div class="tile-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                        <tr class="text-center">
                            <th>Value</th>
                            <th>Qty</th>
                            <th>Price</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="pa in productAttributes">
                            <td style="width: 25%" class="text-center">{{ pa.value}}</td>
                            <td style="width: 25%" class="text-center">{{ pa.quantity}}</td>
                            <td style="width: 25%" class="text-center">{{ pa.price}}</td>
                            <td style="width: 25%" class="text-center">
                                <button class="btn btn-sm btn-danger" @click="deleteProductAttribute(pa)">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "product-attributes",
        props: ['productid'],
        data() {
            return {
                productAttributes: [],
            }
        },
        created: function() {
            this.loadProductAttributes(this.productid);
        },
        methods: {
            loadProductAttributes(id) {
                let _this = this;
                axios.post('/admin/products/attributes', {
                    id: id
                }).then (function(response){
                    _this.productAttributes = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
        }
    }
</script>

উপরের কোডে product attribute গুলো প্রদর্শনের যে জন্য আমরা একটা table যুক্ত করেছি। আর জাভাস্ক্রিপ্ট সেক্শনে আমরা প্রথমে আমাদের vue component টির নাম নির্ধারণ করি এবং আমাদের productid এর জন্য props গুলো সেট করি।

তারপর আমরা আমাদের data method এ productAttributes কে ডিফাইন করি এবং তারমধ্যে একটি খালি এরে ডিফাইন করি। তারপর VueJS এর lifecycle hook তৈরি করি। তারপর আমরা আমাদের কারেন্ট product গুলোকে লোড করার যে অন্য loadProductAttributes() method কে কল করি।

Method গুলোর মধ্যে , আমরা productAttributes() method টি তৈরি করি। যেটি একটি Axios তৈরি করে এবং আমাদের ইতিপূর্বে তৈরি route গুলোকে কল করে। আর যখন আমরা কোনো response পাই , তখন productAttributes এর মাধ্যমে data variable গুলোকে সেট করি।

আর table এর মধ্যে , আমরা product attribute গুলোকে প্রদর্শনের জন্য productAttributes variable কে iterating করি।

এবার আমরা সব গুলো attribute কে লিস্ট আকারে প্রদর্শনের জন্য একটা dropdown তৈরি করব। আর এর জন্য আপনাকে roduct attributes table এর ঠিক উপরে নিম্নোক্ত মার্কআপ যুক্ত করতে হবে।

<div class="tile">
    <h3 class="tile-title">Attributes</h3>
    <hr>
    <div class="tile-body">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="parent">Select an Attribute <span class="m-l-5 text-danger"> *</span></label>
                    <select id=parent class="form-control custom-select mt-15" v-model="attribute" @change="selectAttribute(attribute)">
                        <option :value="attribute" v-for="attribute in attributes"> {{ attribute.name }} </option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>

আর এরজন্য আমাদেরকে এখন আরেকটি attributes variable তৈরি করতে হবে এবং সব attribute গুলোকে এর মধ্যে লোড করতে হবে। আর এর জন্য নিম্নোক্ত কোড গুলো দিয়ে data() method কে আপডেট করে দিন।

 data() {
return {
    productAttributes: [],
    attributes: [],
    attribute: {},
},

এখন আমরা এই component এর method সেক্শনে নতুন একটি method তৈরি করব।

            loadAttributes() {
                let _this = this;
                axios.get('/admin/products/attributes/load').then (function(response){
                _this.attributes = response.data;
            }).catch(function (error) {
                  console.log(error);
        });
},

উপরের মেথডটি backend এ সবগুলো attribute কে call করার জন্য তৈরি করা হয়েছে, তারপর আমরা attributes data variable কে response data তে set করেছি। আর attribute variable কে আমরা v-model directive ব্যবহার করে select dropdown এর সাথে বাইন্ড করেছি।

এখন আমরা এই মেথডটিকে VueJs component এ তৈরী hook এর মধ্যে call করব।

created: function() {
    this.loadAttributes();
    this.loadProductAttributes(this.productid);
},

এবার , যখন আমাদের attribute গুলো attributes dropdown এ লোড হবে , তখন আমরা চাইবো attribute values গুলোও load হবে, যা আমরা ইতিপূর্বে selectAttribute() method এ কাজটি করে রেখেছি। এবার আপনার VueJs এ data() block এ নিম্নোক্ত কোড দিয়ে আপডেট করে নিন।

data() {
    return {
        productAttributes: [],
        attributes: [],
        attribute: {},
        attributeSelected: false,
        attributeValues: [],
        value: {},
        valueSelected: false,
        currentAttributeId: '',
        currentValue: '',
        currentQty: '',
        currentPrice: '',
    }
},

এবার methods block এ নিম্নোক্ত method গুলোকে যুক্ত করে দিন।

selectAttribute(attribute) {
    let _this = this;
    this.currentAttributeId = attribute.id;
    axios.post('/admin/products/attributes/values', {
        id: attribute.id
    }).then (function(response){
        _this.attributeValues = response.data;
    }).catch(function (error) {
        console.log(error);
    });
    this.attributeSelected = true;
},
selectValue(value) {
    this.valueSelected = true;
    this.currentValue = value.value;
    this.currentQty = value.quantity;
    this.currentPrice = value.price;
},
addProductAttribute() {
    if (this.currentQty === null || this.currentPrice === null) {
        this.$swal("Error, Some values are missing.", {
            icon: "error",
        });
    } else {
        let _this = this;
        let data = {
            attribute_id: this.currentAttributeId,
            value:  this.currentValue,
            quantity: this.currentQty,
            price: this.currentPrice,
            product_id: this.productid,
        };

        axios.post('/admin/products/attributes/add', {
            data: data
        }).then (function(response){
            _this.$swal("Success! " + response.data.message, {
                icon: "success",
            });
            _this.currentValue = '';
            _this.currentQty = '';
            _this.currentPrice = '';
            _this.valueSelected = false;
        }).catch(function (error) {
            console.log(error);
        });
        this.loadProductAttributes(this.productid);
    }
},
deleteProductAttribute(pa) {
    let _this = this;
    this.$swal({
        title: "Are you sure?",
        text: "Once deleted, you will not be able to recover this data!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    }).then((willDelete) => {
        if (willDelete) {
            console.log(pa.id);
            axios.post('/admin/products/attributes/delete', {
                id: pa.id,
            }).then (function(response){
                if (response.data.status === 'success') {
                    _this.$swal("Success! Product attribute has been deleted!", {
                        icon: "success",
                    });
                    this.loadProductAttributes(this.productid);
                } else {
                    _this.$swal("Your Product attribute not deleted!");
                }
            }).catch(function (error) {
                console.log(error);
            });
        } else {
            this.$swal("Action cancelled!");
        }
    });
}

এবার আপনার attributes dropdown block এবং product attributes table এর মধ্যে নিম্নোক্ত মার্কআপ টি যুক্ত করে দিন।

<div class="tile" v-if="attributeSelected">
    <h3 class="tile-title">Add Attributes To Product</h3>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label for="values">Select an value <span class="m-l-5 text-danger"> *</span></label>
                <select id=values class="form-control custom-select mt-15" v-model="value" @change="selectValue(value)">
                    <option :value="value" v-for="value in attributeValues"> {{ value.value }} </option>
                </select>
            </div>
        </div>
    </div>
    <div class="row" v-if="valueSelected">
        <div class="col-md-4">
            <div class="form-group">
                <label class="control-label" for="quantity">Quantity</label>
                <input class="form-control" type="number" id="quantity" v-model="currentQty"/>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label class="control-label" for="price">Price</label>
                <input class="form-control" type="text" id="price" v-model="currentPrice"/>
                <small class="text-danger">This price will be added to the main price of product on frontend.</small>
            </div>
        </div>
        <div class="col-md-12">
            <button class="btn btn-sm btn-primary" @click="addProductAttribute()">
                <i class="fa fa-plus"></i> Add
            </button>
        </div>
    </div>
</div>

উপরের JS code এবং markup এ, আমরা আরেকটি dropdown তৈরি করি , যেটি আমাদের attribute values গুলোকে প্রদর্শন করবে। যখন আমরা dropdown থেকে কোনো value কে select করব, আমরা selectValue() method কে কল করব, যেটি current option value গুলোর ডাটা কে temporary variable গুলোতে সেট করবে।

তারপরের ব্লকটি , যেটি তখনি শো করবে , যখন একটি value dropdown থেকে valueSelected variable এর ভিত্তিতে select হবে।

আর এই ব্লক এ , আমাদের quantity এবং price এর জন্য দুটি input box রয়েছে , যা যথাক্রমে currentQty এবং currentPrice এর সাথে binded. সর্বশেষে product attribute টেবিল এ value add করার জন্য একটা বাটন আছে on click ইভেন্ট এর মাধ্যমে addProductAttribute() method কে কল এর মাধ্যমে কাজটি করবে।

এখন আমাদের সম্পূর্ণ Vue component টি ঠিক নিচের মতো হবে।

<template>
    <div>
        <div class="tile">
            <h3 class="tile-title">Attributes</h3>
            <hr>
            <div class="tile-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="parent">Select an Attribute <span class="m-l-5 text-danger"> *</span></label>
                            <select id=parent class="form-control custom-select mt-15" v-model="attribute" @change="selectAttribute(attribute)">
                                <option :value="attribute" v-for="attribute in attributes"> {{ attribute.name }} </option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tile" v-if="attributeSelected">
            <h3 class="tile-title">Add Attributes To Product</h3>
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="values">Select an value <span class="m-l-5 text-danger"> *</span></label>
                        <select id=values class="form-control custom-select mt-15" v-model="value" @change="selectValue(value)">
                            <option :value="value" v-for="value in attributeValues"> {{ value.value }} </option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row" v-if="valueSelected">
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label" for="quantity">Quantity</label>
                        <input class="form-control" type="number" id="quantity" v-model="currentQty"/>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label" for="price">Price</label>
                        <input class="form-control" type="text" id="price" v-model="currentPrice"/>
                        <small class="text-danger">This price will be added to the main price of product on frontend.</small>
                    </div>
                </div>
                <div class="col-md-12">
                    <button class="btn btn-sm btn-primary" @click="addProductAttribute()">
                        <i class="fa fa-plus"></i> Add
                    </button>
                </div>
            </div>
        </div>
        <div class="tile">
            <h3 class="tile-title">Product Attributes</h3>
            <div class="tile-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                        <tr class="text-center">
                            <th>Value</th>
                            <th>Qty</th>
                            <th>Price</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="pa in productAttributes">
                            <td style="width: 25%" class="text-center">{{ pa.value}}</td>
                            <td style="width: 25%" class="text-center">{{ pa.quantity}}</td>
                            <td style="width: 25%" class="text-center">{{ pa.price}}</td>
                            <td style="width: 25%" class="text-center">
                                <button class="btn btn-sm btn-danger" @click="deleteProductAttribute(pa)">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "product-attributes",
        props: ['productid'],
        data() {
            return {
                productAttributes: [],
                attributes: [],
                attribute: {},
                attributeSelected: false,
                attributeValues: [],
                value: {},
                valueSelected: false,
                currentAttributeId: '',
                currentValue: '',
                currentQty: '',
                currentPrice: '',
            }
        },
        created: function() {
            this.loadAttributes();
            this.loadProductAttributes(this.productid);
        },
        methods: {
            loadAttributes() {
                let _this = this;
                axios.get('/admin/products/attributes/load').then (function(response){
                    _this.attributes = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            loadProductAttributes(id) {
                let _this = this;
                axios.post('/admin/products/attributes', {
                    id: id
                }).then (function(response){
                    _this.productAttributes = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            selectAttribute(attribute) {
                let _this = this;
                this.currentAttributeId = attribute.id;
                axios.post('/admin/products/attributes/values', {
                    id: attribute.id
                }).then (function(response){
                    _this.attributeValues = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
                this.attributeSelected = true;
            },
            selectValue(value) {
                this.valueSelected = true;
                this.currentValue = value.value;
                this.currentQty = value.quantity;
                this.currentPrice = value.price;
            },
            addProductAttribute() {
                if (this.currentQty === null || this.currentPrice === null) {
                    this.$swal("Error, Some values are missing.", {
                        icon: "error",
                    });
                } else {
                    let _this = this;
                    let data = {
                        attribute_id: this.currentAttributeId,
                        value:  this.currentValue,
                        quantity: this.currentQty,
                        price: this.currentPrice,
                        product_id: this.productid,
                    };

                    axios.post('/admin/products/attributes/add', {
                        data: data
                    }).then (function(response){
                        _this.$swal("Success! " + response.data.message, {
                            icon: "success",
                        });
                        _this.currentValue = '';
                        _this.currentQty = '';
                        _this.currentPrice = '';
                        _this.valueSelected = false;
                    }).catch(function (error) {
                        console.log(error);
                    });
                    this.loadProductAttributes(this.productid);
                }
            },
            deleteProductAttribute(pa) {
                let _this = this;
                this.$swal({
                    title: "Are you sure?",
                    text: "Once deleted, you will not be able to recover this data!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                }).then((willDelete) => {
                    if (willDelete) {
                        console.log(pa.id);
                        axios.post('/admin/products/attributes/delete', {
                            id: pa.id,
                        }).then (function(response){
                            if (response.data.status === 'success') {
                                _this.$swal("Success! Product attribute has been deleted!", {
                                    icon: "success",
                                });
                                this.loadProductAttributes(this.productid);
                            } else {
                                _this.$swal("Your Product attribute not deleted!");
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                    } else {
                        this.$swal("Action cancelled!");
                    }
                });

            }
        }
    }
</script>

Compiling JS

এবার আপনার terminal টি ওপেন করুন এবং npm run watch এই কমান্ডটি রান করুন।

finally আপনার product attribute এর কাজটি দেখতে ঠিক এইরকম হবে।

Product attribute Options

যেভাবে এই পার্ট টি আপনার পিসিতে রান করবেন

আমি আপনাদের জন্য গিটহাবের এখানে এই পার্ট টি উঠায় রাখছি , আপনার পিসিতে যদি গিট ইনস্টল থাকে তাহলে নিম্নোক্ত উপায়ে আপনার লোকাল পিসিতে command line এগুলো লিখে এন্টার দিন এবং এই পার্ট টি রান করুন :

git clone https://github.com/w3programmers/Laravel-E-commerce-Part-9.git
cd Laravel-E-commerce-Part-9
composer install
php artisan key:generate
php artisan migrate
php artisan db:seed
php artisan serve
Masud Alam
আমি মাসুদ আলম, বাংলাদেশের ৩৬ তম Zend Certified Engineer । ২০০৯ সালে কম্পিউটার সাইন্স থেকে বেচেলর ডিগ্রী অর্জন করি। দীর্ঘ ৮ বছর আমি Winux Soft, SSL Wireless, IBCS-PRIMAX, Max Group, Canadian International Development Agency (CIDA), Care Bangladesh, World Vision, Hellen Keller সহ বিভিন্ন দেশি বিদেশী কোম্পানিতে ওয়েব ডেভেলপমেন্ট এবং সফটওয়্যার ডেভেলপমেন্ট এর উপর বিভিন্ন লিডিং পজিশন এ চাকরি এবং প্রজেক্ট লিড করি। বিশেষ ভাবে বাংলাদেশের ১০০ জন জেন্ড সার্টিফাইড ইঞ্জিনিয়ার এর মধ্যে ৫২ জন ই আমার হাতে জেন্ড সার্টিফাইড হয়েছে। বর্তমানে TechBeeo Software Company তে সিইও হিসাবে আছি । পাশাপাশি w3programmers ট্রেনিং ইনস্টিটিউট এ PHP এর উপর Professional এবং Advance Zend Certified PHP -7 Engineering কোর্স করাই। আর w3programmers.com সাইট টি আমার।

Leave a Reply