Recent Topics

How to override your Webkul controllers, repository and classes?



  • Hi Bagisto Team,

    I have some question regarding theme integration :

    1. 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.
    2. 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.

    3. 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



  • Hi @kishnbupadhyaya

    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



  • Hi Bagisto,

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

    Best Regards,
    Kishan Upadhyaya


Log in to reply