Bagisto: changing home page content in velocity and npm

[farshadff]

hi i want to change the home page content of velocity theme i am running npm install and npm run watch in the velocity package root but when i make changes to the files like featured-product nothing happens . should i do any thing else for that ??

[shubhwebkul]

Hi @farshadff ,
You need to make changes in the featured-product file which belongs to resources directory.
( resources -> themes -> velocity -> home - > featured-products.blade.php )

Also, you could run command php artisan vendor:publish --force after changing in velocity package.

[farshadff]

@shubhwebkul thanks for the help and how about the vuecomponents like product-card i want to edit it for example should i edit it in package and run npm ??? thanks in advance for this great job <3

[shubhwebkul]

Yes, you should change in vue-component and run command npm run watch, that will continuously watch you vue-component and sass changes.

[farshadff]

@shubhwebkul when i do as you said i can for example romve this line from featured-poroducts file and it will be removed :

<div class="container">
<featured-products></featured-products>
</div>

but i want to edit the below side :

@push('scripts')
    <script type="text/x-template" id="featured-products-template">
        <div class="container-fluid featured-products">
            <shimmer-component v-if="isLoading && !isMobileView"></shimmer-component>

            <template v-else-if="featuredProducts.length > 0">
                <card-list-header heading="{{ __('shop::app.home.featured-products') }}">
                </card-list-header>

                <div class="carousel-products vc-full-screen ltr" v-if="!isMobileView">
                    <carousel-component
                        slides-per-page="6"
                        navigation-enabled="hide"
                        pagination-enabled="hide"
                        id="fearured-products-carousel"
                        :slides-count="featuredProducts.length">

                        <slide
                            :key="index"
                            :slot="`slide-${index}`"
                            v-for="(product, index) in featuredProducts">
                            <product-card
                                :list="list"
                                :product="product">
                            </product-card>
                        </slide>
                    </carousel-component>
                </div>

                <div class="carousel-products vc-small-screen" v-else>
                    <carousel-component
                        slides-per-page="2"
                        navigation-enabled="hide"
                        pagination-enabled="hide"
                        id="fearured-products-carousel"
                        :slides-count="featuredProducts.length">

                        <slide
                            :key="index"
                            :slot="`slide-${index}`"
                            v-for="(product, index) in featuredProducts">
                            <product-card
                                :list="list"
                                :product="product">
                            </product-card>
                        </slide>
                    </carousel-component>
                </div>
            </template>

        </div>
    </script>

    <script type="text/javascript">
        (() => {
            Vue.component('featured-products', {
                'template': '#featured-products-template',
                data: function () {
                    return {
                        'list': false,
                        'isLoading': true,
                        'featuredProducts': [],
                        'isMobileView': this.$root.isMobile(),
                    }
                },

                mounted: function () {
                    this.getFeaturedProducts();
                },

                methods: {
                    'getFeaturedProducts': function () {
                        this.$http.get(`${this.baseUrl}/category-details?category-slug=featured-products&count={{ $count }}`)
                        .then(response => {
                            if (response.data.status)
                                this.featuredProducts = response.data.products;

                            this.isLoading = false;
                        })
                        .catch(error => {
                            this.isLoading = false;
                            console.log(this.__('error.something_went_wrong'));
                        })
                    }
                }
            })
        })()
    </script>
@endpush

how can i edit the elements in this section because they dont change with npm run watch on public/themes/velocity directory

[shubhwebkul]

@farshadff , this component is actually inside blade file, so you need to make changes in blade file itself under resources directory.

If you're making changes in blade file then there is no need to run npm command.
npm run is basically for when you are making changes in vue-components resides under Resources -> js -> UI

[farshadff]

you are right thanks for your great help <3