mercredi 31 janvier 2018

algolia facets automatically hiding products

I am new to algolia, vue and laravel. I am trying to build an e-commerce where I have used facets for filtering down data. The problem here is, whenever I check a specific filter, a certain product hides when I hover over the item before. I don't know what is creating the problem. Please help me. 6 products here. But if I select a filter and then hover on the last item in the previous row then

On hovering the last item, a item hides

This is my store.blade.php

@extends('layouts.search')

@section('content') @include('layouts.app') @stop

@section('scripts')

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>



<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

@endsection

This is my app.blade.php

<div id="app">
    <ais-index
            app-id="Q5IYJ43XF9"
            api-key="eb9bda691044aed1d217db64608643dc"
            index-name="phones"
            :query-parameters="{
             numericFilters:['sold != 1']
           }"
    >


    <div class="top-bar">
        <div class="container">
            <nav>
                <ul id="menu-top-bar-left" class="nav nav-inline pull-left animate-dropdown flip">
                    <li class="menu-item animate-dropdown"><a title="Welcome to Worldwide Electronics Store" href="#">Welcome to Worldwide Electronics Store</a></li>
                </ul>
            </nav>

            <nav>
                <ul id="menu-top-bar-right" class="nav nav-inline pull-right animate-dropdown flip">
                    <li class="menu-item animate-dropdown"><a title="Store Locator" href="#"><i class="ec ec-map-pointer"></i>Store Locator</a></li>
                    <li class="menu-item animate-dropdown"><a title="Track Your Order" href="track-your-order.html"><i class="ec ec-transport"></i>Track Your Order</a></li>
                    @if (!Auth::guest())
                        <li class="menu-item animate-dropdown"><a title="My Account" href=""><i class="ec ec-user"></i>My Account</a></li>
                        <li class="menu-item animate-dropdown"><a title="Sign Out" href=""
                                                                  onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();" style=" font-size: 15px; color:rgb(214, 38, 38)">
                                <i class="fa fa-power-off"></i> <b>Sign Out</b>
                            </a>

                            <form id="logout-form" action="" method="POST" style="display: none;">
                                
                            </form></li>
                    @endif
                </ul>
            </nav>
        </div>
    </div><!-- /.top-bar -->

    <header id="masthead" class="site-header header-v2">
        <div class="container">
            <div class="row">

                <!-- ============================================================= Header Logo ============================================================= -->
                <div class="header-logo">
                    <a href="home.html" class="header-logo-link">
                        <svg version="1.1" x="0px" y="0px" width="175.748px"
                             height="42.52px" viewBox="0 0 175.748 42.52" enable-background="new 0 0 175.748 42.52">
                            <ellipse class="ellipse-bg" fill-rule="evenodd" clip-rule="evenodd" fill="#FDD700" cx="170.05" cy="36.341" rx="5.32" ry="5.367"/>
                            <path fill-rule="evenodd" clip-rule="evenodd" fill="#333E48" d="M30.514,0.71c-0.034,0.003-0.066,0.008-0.056,0.056
            C30.263,0.995,29.876,1.181,29.79,1.5c-0.148,0.548,0,1.568,0,2.427v36.459c0.265,0.221,0.506,0.465,0.725,0.734h6.187
            c0.2-0.25,0.423-0.477,0.669-0.678V1.387C37.124,1.185,36.9,0.959,36.701,0.71H30.514z M117.517,12.731
            c-0.232-0.189-0.439-0.64-0.781-0.734c-0.754-0.209-2.039,0-3.121,0h-3.176V4.435c-0.232-0.189-0.439-0.639-0.781-0.733
            c-0.719-0.2-1.969,0-3.01,0h-3.01c-0.238,0.273-0.625,0.431-0.725,0.847c-0.203,0.852,0,2.399,0,3.725
            c0,1.393,0.045,2.748-0.055,3.725h-6.41c-0.184,0.237-0.629,0.434-0.725,0.791c-0.178,0.654,0,1.813,0,2.765v2.766
            c0.232,0.188,0.439,0.64,0.779,0.733c0.777,0.216,2.109,0,3.234,0c1.154,0,2.291-0.045,3.176,0.057v21.277
            c0.232,0.189,0.439,0.639,0.781,0.734c0.719,0.199,1.969,0,3.01,0h3.01c1.008-0.451,0.725-1.889,0.725-3.443
            c-0.002-6.164-0.047-12.867,0.055-18.625h6.299c0.182-0.236,0.627-0.434,0.725-0.79c0.176-0.653,0-1.813,0-2.765V12.731z
            M135.851,18.262c0.201-0.746,0-2.029,0-3.104v-3.104c-0.287-0.245-0.434-0.637-0.781-0.733c-0.824-0.229-1.992-0.044-2.898,0
            c-2.158,0.104-4.506,0.675-5.74,1.411c-0.146-0.362-0.451-0.853-0.893-0.96c-0.693-0.169-1.859,0-2.842,0h-2.842
            c-0.258,0.319-0.625,0.42-0.725,0.79c-0.223,0.82,0,2.338,0,3.443c0,8.109-0.002,16.635,0,24.381
            c0.232,0.189,0.439,0.639,0.779,0.734c0.707,0.195,1.93,0,2.955,0h3.01c0.918-0.463,0.725-1.352,0.725-2.822V36.21
            c-0.002-3.902-0.242-9.117,0-12.473c0.297-4.142,3.836-4.877,8.527-4.686C135.312,18.816,135.757,18.606,135.851,18.262z
            M14.796,11.376c-5.472,0.262-9.443,3.178-11.76,7.056c-2.435,4.075-2.789,10.62-0.501,15.126c2.043,4.023,5.91,7.115,10.701,7.9
            c6.051,0.992,10.992-1.219,14.324-3.838c-0.687-1.1-1.419-2.664-2.118-3.951c-0.398-0.734-0.652-1.486-1.616-1.467
            c-1.942,0.787-4.272,2.262-7.134,2.145c-3.791-0.154-6.659-1.842-7.524-4.91h19.452c0.146-2.793,0.22-5.338-0.279-7.563
            C26.961,15.728,22.503,11.008,14.796,11.376z M9,23.284c0.921-2.508,3.033-4.514,6.298-4.627c3.083-0.107,4.994,1.976,5.685,4.627
            C17.119,23.38,12.865,23.38,9,23.284z M52.418,11.376c-5.551,0.266-9.395,3.142-11.76,7.056
            c-2.476,4.097-2.829,10.493-0.557,15.069c1.997,4.021,5.895,7.156,10.646,7.957c6.068,1.023,11-1.227,14.379-3.781
            c-0.479-0.896-0.875-1.742-1.393-2.709c-0.312-0.582-1.024-2.234-1.561-2.539c-0.912-0.52-1.428,0.135-2.23,0.508
            c-0.564,0.262-1.223,0.523-1.672,0.676c-4.768,1.621-10.372,0.268-11.537-4.176h19.451c0.668-5.443-0.419-9.953-2.73-13.037
            C61.197,13.388,57.774,11.12,52.418,11.376z M46.622,23.343c0.708-2.553,3.161-4.578,6.242-4.686
            c3.08-0.107,5.08,1.953,5.686,4.686H46.622z M160.371,15.497c-2.455-2.453-6.143-4.291-10.869-4.064
            c-2.268,0.109-4.297,0.65-6.02,1.524c-1.719,0.873-3.092,1.957-4.234,3.217c-2.287,2.519-4.164,6.004-3.902,11.007
            c0.248,4.736,1.979,7.813,4.627,10.326c2.568,2.439,6.148,4.254,10.867,4.064c4.457-0.18,7.889-2.115,10.199-4.684
            c2.469-2.746,4.012-5.971,3.959-11.063C164.949,21.134,162.732,17.854,160.371,15.497z M149.558,33.952
            c-3.246-0.221-5.701-2.615-6.41-5.418c-0.174-0.689-0.26-1.25-0.4-2.166c-0.035-0.234,0.072-0.523-0.045-0.77
            c0.682-3.698,2.912-6.257,6.799-6.547c2.543-0.189,4.258,0.735,5.52,1.863c1.322,1.182,2.303,2.715,2.451,4.967
            C157.789,30.669,154.185,34.267,149.558,33.952z M88.812,29.55c-1.232,2.363-2.9,4.307-6.13,4.402
            c-4.729,0.141-8.038-3.16-8.025-7.563c0.004-1.412,0.324-2.65,0.947-3.726c1.197-2.061,3.507-3.688,6.633-3.612
            c3.222,0.079,4.966,1.708,6.632,3.668c1.328-1.059,2.529-1.948,3.9-2.99c0.416-0.315,1.076-0.688,1.227-1.072
            c0.404-1.031-0.365-1.502-0.891-2.088c-2.543-2.835-6.66-5.377-11.704-5.137c-6.02,0.288-10.218,3.697-12.484,7.846
            c-1.293,2.365-1.951,5.158-1.729,8.408c0.209,3.053,1.191,5.496,2.619,7.508c2.842,4.004,7.385,6.973,13.656,6.377
            c5.976-0.568,9.574-3.936,11.816-8.354c-0.141-0.271-0.221-0.604-0.336-0.902C92.929,31.364,90.843,30.485,88.812,29.55z"/>
                        </svg>
                    </a>
                </div>
                <!-- ============================================================= Header Logo : End============================================================= -->

                <div class="primary-nav animate-dropdown">
                    <div class="clearfix">
                        <button class="navbar-toggler hidden-sm-up pull-right flip" type="button" data-toggle="collapse" data-target="#default-header">
                            &#9776;
                        </button>
                    </div>

                    <div class="collapse navbar-toggleable-xs" id="default-header">
                        <nav>
                            <ul id="menu-main-menu" class="nav nav-inline yamm">
                                <li class="menu-item menu-item-has-children animate-dropdown dropdown"><a title="Home" href="shop.html" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Home</a>

                                </li>
                                <li class="menu-item animate-dropdown"><a title="About Us" href="about.html">About Us</a></li>

                                <li class="menu-item menu-item-has-children animate-dropdown dropdown"><a title="Blog" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Blog</a>

                                </li>
                                <li class="yamm-fw menu-item menu-item-has-children animate-dropdown dropdown">
                                    <a title="Pages" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Pages</a>

                                </li>
                                <li class="menu-item"><a title="Features" href="#">Features</a></li>
                                <li class="menu-item"><a title="Contact Us" href="#">Contact Us</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>

                <div class="header-support-info" style="
    margin-top: 1%;
">

                    <div class="media">
                        <span class="media-left support-icon media-middle" style="margin-right:0px;"></span>
                        <div class="media-body">
                            @if (Auth::guest())
                                <div class="top-right links">
                                    <a href="" style="font-size: 16px; color:#a3d133"><b>Login</b></a> &nbsp; &nbsp;
                                    <a href="" style="font-size: 16px; color:#a3d133"><b>Register</b></a>
                                </div>
                            @else

                                <a href="#" class="nav-link" data-toggle="dropdown" role="button" aria-expanded="false" style="font-size: 16px; color:#a3d133">
                                    <b> </b>
                                </a>

                            @endif
                        </div>
                    </div>
                </div>
            </div>

        </div><!-- /.row -->

</header><!-- #masthead -->


<nav class="navbar navbar-primary navbar-full">
    <div class="container">
        <ul class="nav navbar-nav departments-menu animate-dropdown">
            <li class="nav-item dropdown ">

                <a class="nav-link"  href="#"  >Shop by Department</a>

            </li>
        </ul>


        <div class="navbar-search">
        <div class="input-group">
            <ais-search-box>
                    <ais-input
                            placeholder="Search product by name or reference..."
                            :class-names="{
                'ais-input': 'form-control navbar-search search-field',
                }"
                    ></ais-input>

            </ais-search-box>
            <div class="input-group-addon search-categories">
                <select name='product_cat' id='product_cat' class='postform resizeselect' >
                    <option value='0' selected='selected'>All Categories</option>
                    <option class="level-0" value="laptops-laptops-computers">Laptops</option>
                    <option class="level-0" value="ultrabooks-laptops-computers">Ultrabooks</option>
                    <option class="level-0" value="mac-computers-laptops">Mac Computers</option>
                    <option class="level-0" value="all-in-one-laptops-computers">All in One</option>
                    <option class="level-0" value="servers">Servers</option>
                    <option class="level-0" value="peripherals">Peripherals</option>
                    <option class="level-0" value="gaming-laptops-computers">Gaming</option>
                    <option class="level-0" value="accessories-laptops-computers">Accessories</option>
                    <option class="level-0" value="audio-speakers">Audio Speakers</option>
                    <option class="level-0" value="headphones">Headphones</option>
                    <option class="level-0" value="computer-cases">Computer Cases</option>
                    <option class="level-0" value="printers">Printers</option>
                    <option class="level-0" value="cameras">Cameras</option>
                    <option class="level-0" value="smartphones">Smartphones</option>
                    <option class="level-0" value="game-consoles">Game Consoles</option>
                    <option class="level-0" value="power-banks">Power Banks</option>
                    <option class="level-0" value="smartwatches">Smartwatches</option>
                    <option class="level-0" value="chargers">Chargers</option>
                    <option class="level-0" value="cases">Cases</option>
                    <option class="level-0" value="headphone-accessories">Headphone Accessories</option>
                    <option class="level-0" value="headphone-cases">Headphone Cases</option>
                    <option class="level-0" value="tablets">Tablets</option>
                    <option class="level-0" value="tvs">TVs</option>
                    <option class="level-0" value="wearables">Wearables</option>
                    <option class="level-0" value="pendrives">Pendrives</option>
                </select>
            </div>
            <div class="input-group-btn">
                <button class="btn btn-secondary" type="submit">
                    <i class="ec ec-search"></i>
                </button>
            </div>
        </div>
        </div>
        <ul class="navbar-mini-cart navbar-nav animate-dropdown nav pull-right flip">
            <li class="nav-item dropdown">
                <a href="cart.html" class="nav-link" data-toggle="dropdown">
                    <i class="ec ec-shopping-bag"></i>
                    <span class="cart-items-count count">4</span>
                    <span class="cart-items-total-price total-price"><span class="amount">&#36;1,215.00</span></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-mini-cart">
                    <li>
                        <div class="widget_shopping_cart_content">

                            <ul class="cart_list product_list_widget ">


                                <li class="mini_cart_item">
                                    <a title="Remove this item" class="remove" href="#">×</a>
                                    <a href="single-product.html">
                                        <img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" src="assets/images/products/mini-cart1.jpg" alt="">White lumia 9001&nbsp;
                                    </a>

                                    <span class="quantity">2 × <span class="amount">£150.00</span></span>
                                </li>


                                <li class="mini_cart_item">
                                    <a title="Remove this item" class="remove" href="#">×</a>
                                    <a href="single-product.html">
                                        <img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" src="assets/images/products/mini-cart2.jpg" alt="">PlayStation 4&nbsp;
                                    </a>

                                    <span class="quantity">1 × <span class="amount">£399.99</span></span>
                                </li>

                                <li class="mini_cart_item">
                                    <a data-product_sku="" data-product_id="34" title="Remove this item" class="remove" href="#">×</a>
                                    <a href="single-product.html">
                                        <img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" src="assets/images/products/mini-cart3.jpg" alt="">POV Action Cam HDR-AS100V&nbsp;

                                    </a>

                                    <span class="quantity">1 × <span class="amount">£269.99</span></span>
                                </li>


                            </ul><!-- end product list -->


                            <p class="total"><strong>Subtotal:</strong> <span class="amount">£969.98</span></p>


                            <p class="buttons">
                                <a class="button wc-forward" href="cart.html">View Cart</a>
                                <a class="button checkout wc-forward" href="checkout.html">Checkout</a>
                            </p>


                        </div>
                    </li>
                </ul>
            </li>
        </ul>

        <ul class="navbar-wishlist nav navbar-nav pull-right flip">
            <li class="nav-item">
                <a href="wishlist.html" class="nav-link"><i class="ec ec-favorites"></i></a>
            </li>
        </ul>
        <ul class="navbar-compare nav navbar-nav pull-right flip">
            <li class="nav-item">
                <a href="compare.html" class="nav-link"><i class="ec ec-compare"></i></a>
            </li>
        </ul>
    </div>
</nav>
        <div id="content" class="site-content" tabindex="-1">
            <div class="container">

                <nav class="woocommerce-breadcrumb" ><a href="home.html">Home</a><span class="delimiter"><i class="fa fa-angle-right"></i></span>Smart Phones &amp; Tablets</nav>
                <div id="updateDiv">
                    <div id="primary" class="content-area">
                        <main id="main" class="site-main">

                            <header class="page-header">
                                <h1 class="page-title">Smart Phones &amp; Tablets</h1>
                                <p class="woocommerce-result-count"> <ais-stats></ais-stats></p>
                            </header>

                            <div class="shop-control-bar">
                                <ul class="shop-view-switcher nav nav-tabs" role="tablist">
                                    <li class="nav-item"><a class="nav-link active" data-toggle="tab" title="Grid View" href="#grid"><i class="fa fa-th"></i></a></li>
                                    <li class="nav-item"><a class="nav-link " data-toggle="tab" title="List View Small" href="#list-view-small"><i class="fa fa-th-list"></i></a></li>
                                </ul>
                                <form class="woocommerce-ordering" method="get" action="">
                                    <select name="orderby" class="orderby" action="/store/sort">
                                        <option value="menu_order" >Default sorting</option>
                                        <option value="price" >Sort by price: low to high</option>
                                        <option value="price-desc" >Sort by price: high to low</option>
                                    </select>&nbsp;&nbsp;
                                </form>
                            </div>

                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="grid" aria-expanded="true">
                                    <ul class="products columns-3">

                                            <ais-results>
                                                <template scope="{ result }">
                                            <li class="product col-md-4">
                                                <div class="product-outer">
                                                    <div class="product-inner highlight">
                                                        <span class="loop-product-categories"><a href="product-category.html" rel="tag">Smartphones</a></span>

                                                        <a :href='result.url'>

                                                            <h3><ais-highlight :class-names="{'ais-highlight': 'highlight'}" :result="result" attribute-name="company"></ais-highlight> <ais-highlight :result="result" attribute-name="model"></ais-highlight> -  @ GB</h3>
                                                            <div class="product-thumbnail">

                                                                <img :src="result.photo" alt="" style="height:200px">

                                                            </div>
                                                        </a>

                                                        <div class="price-add-to-cart">
                            <span class="price">
                                <span class="electro-price">
                                    <ins><span class="amount">₹ @</span></ins>

                                </span>
                            </span>
                                                            <a rel="nofollow" href="single-product.html" class="button add_to_cart_button">Add to cart</a>
                                                        </div><!-- /.price-add-to-cart -->

                                                        <div class="hover-area">
                                                            <div class="action-buttons">

                                                                <a href="#" rel="nofollow" class="add_to_wishlist">
                                                                    Premium Quality Phone</a>

                                                            </div>
                                                        </div>
                                                    </div><!-- /.product-inner -->
                                                </div><!-- /.product-outer -->
                                            </li>
                                                </template>
                                            </ais-results>
                                        <ais-no-results></ais-no-results>

                                    </ul>
                                </div>

                            </div>

                            <div class="shop-control-bar-bottom">
                                <p class="woocommerce-result-count"> <ais-stats></ais-stats></p>
                                <nav class="woocommerce-pagination">
                                    
                                </nav>
                            </div>

                        </main><!-- #main -->
                    </div><!-- #primary -->
                </div>

                @include('layouts.sidebar')

            </div><!-- .container -->
        </div><!-- #content -->



    </ais-index>

> </div>
>     </div>
> </div><!-- .container -->
> 
> <script src=""></script>

This is my sidebar.blade.php

<div id="sidebar" class="sidebar" role="complementary">

    <aside class="widget widget_electro_products_filter">
        <h3 class="widget-title">Filters</h3>

            <aside class="widget woocommerce">
                <h3 class="widget-title">Brands</h3>
                <ul>
                    <div class="companies" id="company">
                        <ais-refinement-list attribute-name="company" :class-names="{
            'ais-refinement-list__count': 'badge',
            'ais-refinement-list__item': 'checkbox'
            }">
                        </ais-refinement-list>
                    </div>
                </ul>

            </aside>
            <aside class="widget woocommerce">
                <h3 class="widget-title">Storage</h3>
                <ul>
                    <div class="storages">
                        <ais-refinement-list attribute-name="storage" :class-names="{
            'ais-refinement-list__count': 'badge',
            'ais-refinement-list__item': 'checkbox'
            }">
                        </ais-refinement-list>
                    </div>
                </ul>

            </aside>

    </aside>
    <aside class="widget widget_text">
        <div class="textwidget">
            <a href="#">
                <img src="assets/images/banner/ad-banner-sidebar.jpg" alt="Banner"></a>
        </div>
    </aside>

</div>

And finally app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);



/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */


Vue.component('Search', require('./components/Search.vue'));

const app = new Vue({
    el: '#app'
});

const app2 = new Vue({
    el: '#appli'
});

const app3 = new Vue({
    el: '#applic'
});



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire