Livewire not working about laravel-hopeui-starter HOT 11 CLOSED

Just Give me a min let me check with it & i update you back

from laravel-hopeui-starter.

Thank you for your quick response.

from laravel-hopeui-starter.

@Abdallah-Tah Hi. I have checked the issues it seems like miss configuration of layouts & sometimes using jquery with Livewire may lead to this kind of issue once check if any error is showing in the browser console. we can connect through Google meets to figure this issue further at [email protected]. it's my mail. Feel free to add a meeting between 8:00 pm to 11:00 pm in IST timing. we can connect and fix this issue

from laravel-hopeui-starter.

Thanks, @saravanasai, I got the issue caused because I am using Route::get that maps to a Livewire component directly. This means that the entire page is a Livewire component, and you don't need to include the component using the @livewire directive.

Could check with this option and you will notice the issue?

from laravel-hopeui-starter.

😃 @Abdallah-Tah
yes for the full-page component, we have to configure the component itself like the one below. anyway, thanks for raising an issue that will be useful for others.

public function render()

{

    return view('livewire.show-posts')
         //mention the layouts here
        ->layout('layouts.base', ['title' => 'Show Posts'])

}

from laravel-hopeui-starter.

@Abdallah-Tah can you let me know? what you have exactly need to configure a bit in detail

from laravel-hopeui-starter.

What do you suggestion? Since the master file is not loading correctly livewire

from laravel-hopeui-starter.

What

Yes, I am working on a new project using your package but I end up getting error on livewire specifically on wire:click looks like livewire is not loaded,

`<?php

namespace App\Http\Livewire\Subscription;

use Exception; use Stripe\Stripe; use App\Models\Plan; use Stripe\Customer; use App\Models\Country; use Livewire\Component; use InPersonPaymentRequest; use Illuminate\Support\Facades\Mail;

class SubscriptionCheckoutComponent extends Component { public $paymentMethod; public $selectedPlan; public $countries; public $clientSecret;

public function mount($planId)
{
    $this->selectedPlan = Plan::find($planId);
    $this->countries = Country::all();

    $user = auth()->user();
    $intent = $user->createSetupIntent();
    $this->clientSecret = $intent->client_secret;
}

public function submit()
{
    $user = auth()->user();
    $paymentMethod = $this->paymentMethod;
    $plan = $this->selectedPlan->stripe_plan_id;

    try {
        Stripe::setApiKey(env('STRIPE_SECRET'));

        // Create or update the Stripe customer
        $stripeCustomer = $user->createAsStripeCustomer();

        dd($stripeCustomer);

        // Attach the payment method to the customer
        $stripeCustomer->updateDefaultPaymentMethod($paymentMethod);

        // Create a new subscription for the user
        $stripeSubscription = $stripeCustomer->newSubscription('default', $plan)->create([
            'email' => $user->email,
        ]);

        // Get the payment method used for the subscription
        $stripePaymentMethod = $stripeSubscription->latestPayment()->paymentMethod;

        // Set the payment method ID on the user's model
        $user->update([
            'stripe_payment_method' => $stripePaymentMethod,
        ]);

        session()->flash('message', 'Subscription created successfully.');
    } catch (Exception $e) {
        $this->addError('message', 'Error creating subscription. ' . $e->getMessage());
        return;
    }
}



public function payInPerson()
{
    dd('pay in person');
    $user = auth()->user();
    $plan = $this->selectedPlan;

    // Send an email to the user with the required information
    Mail::to($user->email)->send(new InPersonPaymentRequest($user, $plan));

    // Show a message to the user
    session()->flash('message', 'Our assistant will contact you to complete the payment.');
    return redirect()->to('/dashboard');
}


public function render()
{
    return view('livewire.subscription.subscription-checkout-component');
}

} ` It is my component.

`@extends('layouts.master')

@section('tab_tittle', 'Checkout')

@section('content')

{{ __('Selected Plan') }}

{{ $selectedPlan->name }} - ${{ number_format($selectedPlan->price / 100, 2) }}/month

{{ __('Payment Method') }}

• {{ __('Credit Card') }}

• {{ __('Pay In Person') }}

                            <input id="card-holder-name" type="text" placeholder="Card holder name"
                                class="form-control">

                            <!-- Stripe Elements Placeholder -->
                            <div id="card-element"></div>

                            <hr class="mb-4">
                            <button class="btn btn-primary btn-lg btn-block"
                                type="submit">{{ __('Subscribe') }}</button>
                        </form>
                    </div>
                    <div class="tab-pane" id="inPerson">
                        <h4 class="mb-3">{{ __('Pay In Person') }}</h4>
                        <p>To proceed with the In-Person payment, please click the button below. Our agent will contact
                            you to schedule a visit and collect the payment or check for your subscription. Once the
                            payment is collected, your subscription will be activated.</p>
                        <button class="btn btn-primary"
                            wire:click="payInPerson">{{ __('Request In-Person Payment') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://js.stripe.com/v3/"></script>
<script>
    var navPillsAdjust = function() {
        $('.nav.nav-tabs').each(function() {
            var liGroup = $(this).children('li');
            var liLength = liGroup.length;
            liGroup.each(function() {
                var liWidth = 100 / liLength - 1;
                $(this).css({
                    'min-width': liWidth + '%',
                    'margin-left': '0px',
                    'margin-right': '0px'
                });
            });
        });
    };

    $(document).ready(function() {
        navPillsAdjust();
    });
</script>

@endsection @section('scripts') <script> // Create a Stripe instance const stripe = Stripe("{{ env('STRIPE_KEY') }}"); const elements = stripe.elements();

    // Customize the Stripe Elements card input
    const style = {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    };
    // Create a card input and mount it
    const card = elements.create('card', {
        style: style
    });
    card.mount('#card-element');

    // Handle form submission
    const form = document.querySelector('#creditCard form');
    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        // Confirm card setup and handle the response
        const {
            setupIntent,
            error
        } = await stripe.confirmCardSetup(
            "{{ $clientSecret }}", {
                payment_method: {
                    card: card,
                    billing_details: {
                        name: document.querySelector('#card-holder-name').value
                    }
                }
            }
        );

        if (error) {
            // Handle the error
            console.error(error);
            alert('Error processing payment.');
        } else {
            // Process the payment
            document.querySelector('#payment-method').value = setupIntent.payment_method;
            form.submit();
        }
    });
</script>

@endsection ` I have to livewire working, I had to create this file app.blade.php because livewire config will look to the layout.app

`<?php

return [

/*
|--------------------------------------------------------------------------
| Class Namespace
|--------------------------------------------------------------------------
|
| This value sets the root namespace for Livewire component classes in
| your application. This value affects component auto-discovery and
| any Livewire file helper commands, like `artisan make:livewire`.
|
| After changing this item, run: `php artisan livewire:discover`.
|
*/

'class_namespace' => 'App\\Http\\Livewire',

/*
|--------------------------------------------------------------------------
| View Path
|--------------------------------------------------------------------------
|
| This value sets the path for Livewire component views. This affects
| file manipulation helper commands like `artisan make:livewire`.
|
*/

'view_path' => resource_path('views/livewire'),

/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
| The default layout view that will be used when rendering a component via
| Route::get('/some-endpoint', SomeComponent::class);. In this case the
| the view returned by SomeComponent will be wrapped in "layouts.app"
|
*/

'layout' => 'layouts.app',

/*
|--------------------------------------------------------------------------
| Livewire Assets URL
|--------------------------------------------------------------------------
|
| This value sets the path to Livewire JavaScript assets, for cases where
| your app's domain root is not the correct path. By default, Livewire
| will load its JavaScript assets from the app's "relative root".
|
| Examples: "/assets", "myurl.com/app".
|
*/

'asset_url' => null,

/*
|--------------------------------------------------------------------------
| Livewire App URL
|--------------------------------------------------------------------------
|
| This value should be used if livewire assets are served from CDN.
| Livewire will communicate with an app through this url.
|
| Examples: "https://my-app.com", "myurl.com/app".
|
*/

'app_url' => null,

/*
|--------------------------------------------------------------------------
| Livewire Endpoint Middleware Group
|--------------------------------------------------------------------------
|
| This value sets the middleware group that will be applied to the main
| Livewire "message" endpoint (the endpoint that gets hit everytime
| a Livewire component updates). It is set to "web" by default.
|
*/

'middleware_group' => 'web',

/*
|--------------------------------------------------------------------------
| Livewire Temporary File Uploads Endpoint Configuration
|--------------------------------------------------------------------------
|
| Livewire handles file uploads by storing uploads in a temporary directory
| before the file is validated and stored permanently. All file uploads
| are directed to a global endpoint for temporary storage. The config
| items below are used for customizing the way the endpoint works.
|
*/

'temporary_file_upload' => [
    'disk' => null,        // Example: 'local', 's3'              Default: 'default'
    'rules' => null,       // Example: ['file', 'mimes:png,jpg']  Default: ['required', 'file', 'max:12288'] (12MB)
    'directory' => null,   // Example: 'tmp'                      Default  'livewire-tmp'
    'middleware' => null,  // Example: 'throttle:5,1'             Default: 'throttle:60,1'
    'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs.
        'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
        'mov', 'avi', 'wmv', 'mp3', 'm4a',
        'jpg', 'jpeg', 'mpga', 'webp', 'wma',
    ],
    'max_upload_time' => 5, // Max duration (in minutes) before an upload gets invalidated.
],

/*
|--------------------------------------------------------------------------
| Manifest File Path
|--------------------------------------------------------------------------
|
| This value sets the path to the Livewire manifest file.
| The default should work for most cases (which is
| "<app_root>/bootstrap/cache/livewire-components.php"), but for specific
| cases like when hosting on Laravel Vapor, it could be set to a different value.
|
| Example: for Laravel Vapor, it would be "/tmp/storage/bootstrap/cache/livewire-components.php".
|
*/

'manifest_path' => null,

/*
|--------------------------------------------------------------------------
| Back Button Cache
|--------------------------------------------------------------------------
|
| This value determines whether the back button cache will be used on pages
| that contain Livewire. By disabling back button cache, it ensures that
| the back button shows the correct state of components, instead of
| potentially stale, cached data.
|
| Setting it to "false" (default) will disable back button cache.
|
*/

'back_button_cache' => false,

/*
|--------------------------------------------------------------------------
| Render On Redirect
|--------------------------------------------------------------------------
|
| This value determines whether Livewire will render before it's redirected
| or not. Setting it to "false" (default) will mean the render method is
| skipped when redirecting. And "true" will mean the render method is
| run before redirecting. Browsers bfcache can store a potentially
| stale view if render is skipped on redirect.
|
*/

'render_on_redirect' => false,

]; ` I did try to change layout.master but livewire it is not working at all.

from laravel-hopeui-starter.

@Abdallah-Tah The configuration file mentions layouts for the full-page components but in your case, it seems that not making any issue.

from laravel-hopeui-starter.

When I create a new component, the Livewire wire directives don't seem to be working, and some of the stylings are not applied.

For example, when I create a new component with a wire:click directive, the click event doesn't seem to fire. Additionally, some of the stylings in the component are not applied, which leads to a disjointed and unprofessional appearance.

Try by yourself and you will notice the issue. Thanks @saravanasai

from laravel-hopeui-starter.

@Abdallah-Tah I have tried to re-create the issue by following the steps below.

• I have created a new component

• This is my component logic

And then my component blade file

• Then finally my view blade file for testing

• Now I have opened the project in the browser

initial state :

after clicking on increase button

But still, I can't reproduce the issue or suggest me any points. I have missed

from laravel-hopeui-starter.