How to retrieve image along with category name

Keerthi

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)

rahul

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

ElizabethRic

To retrieve an image along with its category name, you can use the following approach:

Store the images and their corresponding category names in a database.

Retrieve the image and category data from the database using an SQL query that joins the image table and category table on the category ID.

Use PHP to display the image with its category name. You can use the database query results to dynamically create an HTML element that displays the image, along with its category name.

Here is an example code snippet that demonstrates this approach:

php
Copy code
// Connect to the database
$db = mysqli_connect("localhost", "username", "password", "mydatabase");

// Define the SQL query
$sql = "SELECT images.*, categories.category_name FROM images
INNER JOIN categories ON images.category_id = categories.category_id";

// Execute the query
$result = mysqli_query($db, $sql);

// Loop through the results and display the images and category names
while ($row = mysqli_fetch_assoc($result)) {
echo "<div>";
echo "<img src='" . $row['image_url'] . "' alt='" . $row['image_alt'] . "'>";
echo "<p>Category: " . $row['category_name'] . "</p>";
echo "</div>";
}
In this example, the query joins the images table with the categories table, using the category_id field as the common key. The query selects all columns from the images table and the category_name column from the categories table.

The while loop iterates through the query results and outputs an HTML div element for each image, containing the img tag and the category name displayed in a p tag.

Note that the code assumes that the image URLs and alt text are stored in the images table, and the category names are stored in the categories table. You may need to adjust the code based on the structure of your database.