Recent Topics

How to retrieve image along with category name



  • Hi everyone,

    Can anyone help me how to retrieve category image along with category name in root page, because I don't know vue js. Please If anyone can send me how to retrieve image dynamically. Thank You.

    I know the category name came from below code, so similarly I need to display image also. (folder path: packages/Webkul/Shop/src/Resources/views/layouts/header/nav-menu/navmenu.blade.php)

    <li style="height:200px">
    <a :href="url+'/categories/'+this.item['translations'][0].slug">
    @{{ name }} 
    </i>



  • Hi,

    Please find the below code of navmenu.blade.php (folder path: packages/Webkul/Shop/src/Resources/views/layouts/header/nav-menu/navmenu.blade.php)

    & replace with it old 'navmenu.blade.php' and you will get image along with category.

    {!! 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
    


  • Hi,
    It shows empty image. Please find below is the screen shot.![alt text](Screenshot (58).png



  • I got the solution, Thank You So Much........! see below
    Screenshot (60).png


Log in to reply