Autour de Laravel

Livewire avec wire:click ou wire:model

Avatar de ELHadjYoussoufOUATTARA1
ELHadjYoussoufOUATTARA1

Bonjour la communauté!

Je suis en effet débutant avec Livewire, je suis confronter à un soucis. Lorsque j'effectue une action, la page de ferme. Par exemple dans le cadre d'une vérification si une case est coché pour mettre par exemple un code coupon, j'affiche un bloc de code pour une autre action. Lorsque je coche la case, la page se ferme. Je vous donne un lien vidéo qui explique le problème: https://www.loom.com/share/53946ff2c0a94680b31a8db4c2692c2f

Code de la vue: Cart

<div class="checkout-info">
                        @if(!Session::has('coupon'))
                            <label class="checkbox-field">
                                <input class="frm-input " name="have-code" id="have-code" value="1" wire:model="haveCouponCode" type="checkbox">          <span>J'ai un code coupon</span>
                            </label>
                            <!-- if( haveCouponCode == 1) -->
                                <div class="summary-item">
                                    <form wire:submit.prevent="applyCouponCode">
                                        <h4 class="title-box">Code coupon</h4>
                                        @if(Session::has('coupon_message'))
                                            <div class="alert alert-danger" role="danger">
                                                {{Session::get('coupon_message')}}
                                            </div>
                                        @endif
                                        <p class="row-in-form">
                                            <label for="coupon-code">Entrer votre code coupon :</label>
                                            <input type="text" name='coupon-code' wire:model="couponCode"/>
                                        </p>
                                        <button type="submit" class="btn btn-small">Appliquer</button>
                                    </form>
                                </div>
                            <!--  endif-->
                        @endif
                        <a class="btn btn-checkout" wire:click.prevent="checkout">Finaliser votre commande</a>
                        <a class="link-to-shop" href="shop.html">Continuer vos achats<i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>

Code Composant: CartComposant.php

Class Cartcomposant extends Composant{
    //
    
    	public function applyCouponCode()
	{
		$coupon = Coupon::where('code', $this->couponCode)->where('expiry_date', '>=', Carbon::today())->where('cart_value', '<=', Cart::instance('cart')->subtotal())->first();
		if(!$coupon)
		{
			session()->flash('coupon_message', 'Coupon invalide, désolé !');
			return;
		}
		//dd($coupon);
		session()->put('coupon',[
			'code' => $coupon->code,
			'type' => $coupon->type,
			'value' => $coupon->value,
			'cart_value' => $coupon->cart_value
		]);

	}
}
Avatar de FrédéricAmary
FrédéricAmary

Salut, Peut-être a tu pu réoudre ton problème, mais je vais essayer de t'aider. Quand tu click sur le ta checkbock, tu fait un appel au serveur, du coup, ton composent livewire va repasser par render(), on dirait que cette étape plante car j'imagine que le bloc qui disparait est le contenu du blade de ton composent.

Est-ce que tu a vérifier si tu avait une erreur dans la console lorsque tu clic ou bien dans l'onglet réseau de la console, ça donne parfois des indications, il existe aussi une extension chrome pour Livewire.

Avatar de Bilal
Bilal

Le mieux est d'utiliser alpinejs pour afficher le formulaire de coupon.

Avatar de ELHadjYoussoufOUATTARA1
ELHadjYoussoufOUATTARA1

Merci pour ces réactions, j'apprécie beaucoup.

pour repondre à @FrédéricAmary, j'ai vérifié dans network on a code 200 chaque fois que je click sur la case.

@Bilal, J'ai donné l'exemple des coupons pour me faire comprendre sinon c'est pas seulement l'histoire des coupons.

Le problème est que lorsque je clique sur une cation, la page de ferme. Un autre exemple ici ajout d'envie ou filtrage par prix: https://www.loom.com/share/16d0c23bd2f346b4996e31c05af5bb6e

Avatar de ELHadjYoussoufOUATTARA1
ELHadjYoussoufOUATTARA1

Partie article liké

wishlist-component.blade.php

<main id="main" class="main-site left-sidebar">

    <div class="container">

        <div class="wrap-breadcrumb">
            <ul>
                <li class="item-link"><a href="#" class="link">home</a></li>
                <li class="item-link"><span>Digital & Electronics</span></li>
            </ul>
        </div>
        <div class="row">
            @if( Cart::instance('wishlist')->content()->count() > 0 )
               
            <ul class="product-list grid-products equal-container">
              
                @foreach(Cart::instance('wishlist')->content() as $item)
                    <li class="col-lg-4 col-md-6 col-sm-6 col-xs-6 ">
                        <div class="product product-style-3 equal-elem ">
                            <div class="product-thumnail">
                                <a href="{{route('product.details', ['slug'=>$item->model->slug])}}" title="{{$item->model->name}}">
                                    <figure><img src="{{ asset('assets/images/products')}}/{{$item->model->image}}" alt="{{$item->model->name}}"></figure>
                                </a>
                            </div>
                            <div class="product-info">
                                <a href="{{route('product.details', [$item->model->slug])}}" class="product-name"><span>{{$item->model->short_description}}</span></a>
                                <div class="wrap-price"><span class="product-price">${{$item->model->regular_price}}</span></div>
                                <a href="#" class="btn add-to-cart" wire:click.prevent="moveProductFromWishlishToCart('{{$item->rowId}}')">Déplacer dans le gbalé</a>
                                <div class="product-wish">
                                    <a href=""  wire:click.prevent="removeFromWishlish({{ $item->model->id }})"><i class="fa fa-heart fill-heart"></i></a>
                                </div>
                            </div>
                        </div>
                    </li>
                @endforeach
            </ul>
            @else
                <h4>Pas d'article aimé</h4>
            @endif
        </div>
    </div>

</main>

wishlishComponent.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Cart;

class WishlistComponent extends Component
{
    public function removeFromWishlish($product_id)
	{
		foreach(Cart::instance('wishlist')->content() as $witem)
		{
			if($witem->id == $product_id)
			{
				Cart::instance('wishlist')->remove($witem->rowId);
				$this->emitTo('wish-list-count-component', 'refreshComponent');
				return;
			}
		}
	}

	public function moveProductFromWishlishToCart($rowId)
	{
		
				$item = Cart::instance('wishlist')->get($rowId);
				Cart::instance('wishlist')->remove($rowId);
				Cart::instance('cart')->add($item->id, $item->name,1, $item->price)->associate('App\Models\Product');
				$this->emitTo('wish-list-count-component', 'refreshComponent');
				$this->emitTo('cart-count-component', 'refreshComponent');
			
	}

    public function render()
    {
        return view('livewire.wishlist-component')->layout('layouts.base');
    }
}

Partie trie par prix de 1 à 1000$

View

 <div class="widget mercado-widget filter-widget price-filter">
                    <h2 class="widget-title">Prix <span class="text-info">${{$min_price}} - ${{$max_price}}</span></h2>
                    <div class="widget-content" style="padding: 10px 5px 40px 5px;">
                        <div id="slider" wire:ignore></div>
                    </div>
                </div><!-- Price-->

ShopComponent.php

class ShopComponent extends Component
{
	public $sorting;
    public $pagesize;

    public $min_price;
	public $max_price;

	public function mount(){
		$this->sorting = "default";
        $this->pagesize = 12;

        $this->min_price = 1;
		$this->max_price = 1000;
	}

	public function store($product_id, $product_name, $product_price){
		Cart::instance('cart')->add($product_id, $product_name, 1, $product_price)->associate('\App\Models\Product');
		session()->flash('success_message', 'Votre mouvement à été ajouter dans votre gbalé!');
		return redirect()->route('product.cart');
	}

    public function addToWishlist($product_id, $product_name, $product_price){
        Cart::instance('wishlist')->add($product_id, $product_name, 1, $product_price)->associate('App\Models\Product');
		$this->emitTo('wish-list-count-component', 'refreshComponent');
	}

	public function removeFromWishlish($product_id)
	{
		foreach(Cart::instance('wishlist')->content() as $witem)
		{
			if($witem->id == $product_id)
			{
				Cart::instance('wishlist')->remove($witem->rowId);
				$this->emitTo('wish-list-count-component', 'refreshComponent');
				return;
			}
		}
	}

    public function render()
    {
    	if($this->sorting == 'date'){
    		$products = Product::whereBetween('regular_price', [$this->min_price, $this->max_price])->orderBy('created_at', 'DESC')->paginate($this->pagesize);
    	}else if($this->sorting == 'price'){
    		$products = Product::whereBetween('regular_price', [$this->min_price, $this->max_price])->orderBy('regular_price', 'ASC')->paginate($this->pagesize);
    	}else if($this->sorting == 'price-desc'){
    		$products = Product::whereBetween('regular_price', [$this->min_price, $this->max_price])->orderBy('regular_price', 'DESC')->paginate($this->pagesize);
    	}
    	else{
    		$products = Product::paginate($this->pagesize);
    	}
    	
    	$category = Category::all();


        return view('livewire.shop-component', compact('products', 'category'))->layout('layouts.base');
    }
}

Vous ne pouvez pas répondre à ce sujet.