How to override your Webkul controllers, repository and classes?

kishnbupadhyaya · 26 Aug 2019, 09:05

Hi Bagisto Team,

I have some question regarding theme integration :

list itemi am trying to integrate theme but same time i want to add new methods in our package controller and I have done that as per your documentation but its not making impact that I want.

-> For Example,
- I have created HomeController in my package and added one method in that but somehow its not working, even its not taking methods from WebKul.
Also I have made changes for include new partial file to include dynamically by edit or Add new from admin->settings->channels. But That file does not exist on WebKul package and its gives me error 404 for that file.
For navigation menu you have used Vue.js component, I have used the same in my Theme but in addition I want to show image beside each menu. For that I have used some logic but its not working somehow. So please help me on this.

Best Regards,
Kishan Upadhyay

rahul · 27 Aug 2019, 07:07

Basically Controller is work for a route, so if you are want any specific route should be called using your controller then create a route file in your package & used same name of route as it have in core & when this route hit, call your controllers method.

Can you attach a screenshot for same.

First of all, you need to override 'avmenu.blade.php' file & use this code for showing image.

{!! view_render_event('bagisto.shop.layout.header.category.before') !!}

<?php

$categories = [];

foreach (app('Webkul\Category\Repositories\CategoryRepository')->getVisibleCategoryTree(core()->getCurrentChannel()->root_category_id) as $category) {
    if ($category->slug)
        array_push($categories, $category);
}

?>

<category-nav categories='@json($categories)' url="{{url()->to('/')}}"></category-nav>

{!! view_render_event('bagisto.shop.layout.header.category.after') !!}


@push('scripts')


<script type="text/x-template" id="category-nav-template">

    <ul class="nav">
        <category-item
            v-for="(item, index) in items"
            :key="index"
            :url="url"
            :item="item"
            :parent="index">
        </category-item>
    </ul>

</script>

<script>
    Vue.component('category-nav', {

        template: '#category-nav-template',

        props: {
            categories: {
                type: [Array, String, Object],
                required: false,
                default: (function () {
                    return [];
                })
            },

            url: String
        },

        data: function(){
            return {
                items_count:0
            };
        },

        computed: {
            items: function() {
                return JSON.parse(this.categories)
            }
        },
    });
</script>

<script type="text/x-template" id="category-item-template">
    <li>
        <a :href="url+'/categories/'+this.item['translations'][0].slug">
            @{{ name }}&emsp;
            <i class="icon dropdown-right-icon" v-if="haveChildren && item.parent_id != null"></i>
            <img :src="url+'/storage/'+image" style="height: 20px; width: 20px">
        </a>

        <i :class="[show ? 'icon icon-arrow-down mt-15' : 'icon dropdown-right-icon left mt-15']"
        v-if="haveChildren"  @click="showOrHide"></i>

        <ul v-if="haveChildren && show">
            <category-item
                v-for="(child, index) in item.children"
                :key="index"
                :url="url"
                :item="child">
            </category-item>
        </ul>
    </li>
</script>

<script>
    Vue.component('category-item', {

        template: '#category-item-template',

        props: {
            item:  Object,
            url: String,
        },

        data: function() {
            return {
                items_count:0,
                show: false,
            };
        },

        mounted: function() {
            if(window.innerWidth > 770){
                this.show = true;
            }
        },

        computed: {
            haveChildren: function() {
                return this.item.children.length ? true : false;
            },

            name: function() {
                if (this.item.translations && this.item.translations.length) {
                    this.item.translations.forEach(function(translation) {
                        if (translation.locale == document.documentElement.lang)
                            return translation.name;
                    });
                }

                return this.item.name;
            },

            image: function() {
                return this.item.image;
            }
        },

        methods: {
            showOrHide: function() {
                this.show = !this.show;
            }
        }
    });
</script>


@endpush

Thanks

kishnbupadhyaya · 27 Aug 2019, 07:20

Hi Bagisto,

Thanks for reply i found the solution of 2nd point. Thank you for your reply.

Best Regards,
Kishan Upadhyaya