如何使用livewire在laravel中刷新owl carousel滑块中的元素？

jgwigjjp 于 2023-02-20 发布在其他

关注(0)|答案(1)|浏览(114)

我正在创建一个电子商务网站，在猫头鹰旋转木马滑块内的产品将显示一些信息，如名称，价格等。我已经设置了一个计数器在顶部，也设置了一个功能，当我点击一个图标添加它将增加计数，也将显示在滑块内添加的项目。但当我点击，计数增加，但我的旋转木马离开屏幕。当我刷新页面，传送带带有一个项目添加到上面的购物车图标。2我需要当我点击购物车图标购物车增加计数和项目添加将显示没有页面刷新。3下面是我的代码。

<div class="row" >
            <div class="col-md-12">
                <div class="product_slider carousel_slider owl-carousel owl-theme nav_style1" data-loop="true" data-dots="false" data-nav="true" data-margin="20" data-responsive='{"0":{"items": "1"}, "481":{"items": "2"}, "768":{"items": "3"}, "1199":{"items": "4"}}' >

                    @php
                       $cart = Cart::instance('cart')->content()->pluck('id');
                    @endphp

                    @foreach ($sproducts as $sproduct)
                    <div class="item">
                        <div class="product">
                            
                            <div class="product_img">
                                <div class="product_action_box">
                                    <ul class="list_none pr_action_btn">

                                        @if($cart->contains($sproduct->id))

                                        <li class="add-to-cart tooltip">
                                            <span class="tooltiptext">Item added!</span>
                                            <a href="" wire:click.prevent="removeFromCart({{$sproduct->id}})" ><i class="icon-basket-loaded"></i> Add To Cart</a>
                                        </li>
                                        @else
                                        <li class="add-to-cart">
                                            <a href="" wire:click.prevent="store({{$sproduct->id}}, '{{$sproduct->name}}', {{$sproduct->sale_price}})"><i class="icon-basket-loaded"></i> Add To Cart</a></li>
                                        @endif
                                        

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

我的livewire组件：

protected $listeners = ['refreshComponent'=>'$refresh'];

    public function store($product_id,$product_name, $product_price)
    {
        Cart::instance('cart')->add($product_id,$product_name,1,$product_price)->associate('App\Models\Product');
        $this->emitTo('cart-count-component', 'refreshComponent');
        $this->emitTo('onsale-component', 'refreshComponent');
        return back();
    }

laravel

来源：https://stackoverflow.com/questions/74639248/how-to-refresh-a-element-within-owl-carousel-slider-in-laravel-using-livewire

1条答案

按热度按时间

zzoitvuj1#

我有一个类似的情况下，你和这是什么做了我：
JavaScript（使用jQuery）：

window.addEventListener('contentChanged', event => {
    const owl = $('#owlCarousel'); // Owl carousel in question
    $(owl).trigger('destroy.owl.carousel'); // Destroy carousel instance
    $(owl).html($(owl).find('.owl-stage-outer').html()).removeClass('owl-loaded'); // Destroy carousel instance part 2
    $(owl).owlCarousel($(owl).data()); // Initialize Owl carousel once again with same config options
});

Livewire组件：

$this->dispatchBrowserEvent('contentChanged');

改编自Alfred Huang对类似问题的回答（未使用Livewire）：https://stackoverflow.com/a/27976562

赞(0）回复(0）举报 2023-02-20

我来回答

如何使用livewire在laravel中刷新owl carousel滑块中的元素？

1条答案

相关问题

热门标签

最新问答