Laravel 6

Impossible de modifier ma vue checkout.blade.php

Avatar de LouisRobredo
LouisRobredo

Bonjour à tous,

J'ai un souci j'ai crée mes routes :

Route::get('/checkout', 'CheckoutController@checkout')->name('checkout.index');
Route::get('/checkout/success', 'CheckoutController@success')->name('checkout.success');

Mon checkoutController:

//Gérer le paiement
   public function checkout(){
       return view('checkout');
   }

   //Si paiement réussi
   public function success(){
       return view('success');
   }

ma vue checkout.blade.php s'affiche bien mais je ne peux rien modifier sur la page rien ne change. Je ne trouve pas mon erreur. Si quelqu'un aurais une idée?

Posté il y a 1 mois
Avatar de Rembos
Rembos

Il nous faudrait un peu plus de détails : que modifies-tu sur ta vue?

Posté il y a 1 mois
Avatar de LouisRobredo
LouisRobredo

Rien que le mot paiement qui n'est pas pris en compte

<!-- Start Banner Area -->
 <section class="banner-area organic-breadcrumb">
    <div class="container">
        <div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
            <div class="col-first">
                <h1>Paiement</h1>
                <nav class="d-flex align-items-center">
                    <a href="index.html">Home<span class="lnr lnr-arrow-right"></span></a>
                    <a href="single-product.html">Paiement</a>
                </nav>
Posté il y a 1 mois
Avatar de CinquièmeDimension
CinquièmeDimension

Tu n'envoie rien à ta vue et tes liens sont clairement sortis d'un example HTML. C'est normal que rien ne fonctionne à mon avis. Sauf si tout est fait en AJAX mais il n'y aurait peut-être pas pas plusieurs vues. En plus, tu ne nous montre qu'un breadcrumb.

Tu semble vraiment galérer à absolument toutes les étapes de la création de ta boutique. Peut-être qu'une boutique avec Laravel est un projet un peu trop autacieux pour toi. As-tu envisagé PrestaShop ? Ce n'est pas méchant, hein. C'est simplement que tu devrais peut-être de faire la main avec des application un peu plus simple.

Qu'est-ce qui te motive à faire ta boutique ? C'est un réel besoin ou c'est pour t'entraîner ? Si c'est un besoin, vraiment, tu devrais jeter un oeil à PrestaShop.

De plus, la prochaine étape est le paiement et c'est beaucoup plus complèxe que tout le reste.

Posté il y a 1 mois
Avatar de LouisRobredo
LouisRobredo

Voici ma vue complete Je suis obligé de passer par laravel et je suis encore à l'école. Mon 1er projet a fonctionné parfaitement mais la je comprends pas

@extends('layouts.master')

@section('includes')
<script src="https://js.stripe.com/v3/"></script>
@stop

@section('content')


 <!-- Start Banner Area -->
 <section class="banner-area organic-breadcrumb">
    <div class="container">
        <div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
            <div class="col-first">
                <h1>Paiement</h1>
                <nav class="d-flex align-items-center">
                    <a href="index.html">Home<span class="lnr lnr-arrow-right"></span></a>
                    <a href="single-product.html">Paiement</a>
                </nav>
            </div>
        </div>
    </div>
</section>
<!-- End Banner Area -->

<!--================Checkout Area =================-->
<section class="checkout_area section_gap">
    <div class="container">
        <div class="billing_details">
            <div class="row">
                <div class="col-lg-8">
                    <h3>Billing Details</h3>
                    <form class="row contact_form" action="#" method="post" novalidate="novalidate">
                        <div class="col-md-6 form-group p_star">
                            <input type="text" class="form-control" id="first" name="name">
                            <span class="placeholder" data-placeholder="First name"></span>
                        </div>
                        <div class="col-md-6 form-group p_star">
                            <input type="text" class="form-control" id="last" name="name">
                            <span class="placeholder" data-placeholder="Last name"></span>
                        </div>
                        <div class="col-md-12 form-group">
                            <input type="text" class="form-control" id="company" name="company" placeholder="Company name">
                        </div>
                        <div class="col-md-6 form-group p_star">
                            <input type="text" class="form-control" id="number" name="number">
                            <span class="placeholder" data-placeholder="Phone number"></span>
                        </div>
                        <div class="col-md-6 form-group p_star">
                            <input type="text" class="form-control" id="email" name="compemailany">
                            <span class="placeholder" data-placeholder="Email Address"></span>
                        </div>
                        <div class="col-md-12 form-group p_star">
                            <select class="country_select">
                                <option value="1">Country</option>
                                <option value="2">Country</option>
                                <option value="4">Country</option>
                            </select>
                        </div>
                        <div class="col-md-12 form-group p_star">
                            <input type="text" class="form-control" id="add1" name="add1">
                            <span class="placeholder" data-placeholder="Address line 01"></span>
                        </div>
                        <div class="col-md-12 form-group p_star">
                            <input type="text" class="form-control" id="add2" name="add2">
                            <span class="placeholder" data-placeholder="Address line 02"></span>
                        </div>
                        <div class="col-md-12 form-group p_star">
                            <input type="text" class="form-control" id="city" name="city">
                            <span class="placeholder" data-placeholder="Town/City"></span>
                        </div>
                        <div class="col-md-12 form-group p_star">
                            <select class="country_select">
                                <option value="1">District</option>
                                <option value="2">District</option>
                                <option value="4">District</option>
                                <option value="4">District</option>
                            </select>
                        </div>
                        <div class="col-md-12 form-group">
                            <input type="text" class="form-control" id="zip" name="zip" placeholder="Postcode/ZIP">
                        </div>
                        <div class="col-md-12 form-group">
                            <div class="creat_account">
                                <input type="checkbox" id="f-option2" name="selector">
                                <label for="f-option2">Create an account?</label>
                            </div>
                        </div>
                        <div class="col-md-12 form-group">
                            <div class="creat_account">
                                <div class="form-group">
                                    <label for="card-element">
                                      Credit or debit card
                                    </label>
                                    <div id="card-element">
                                      <!-- A Stripe Element will be inserted here. -->
                                    </div>
                                
                                    <!-- Used to display form errors. -->
                                    <div id="card-errors" role="alert"></div>
                                  </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-lg-4">
                    <div class="order_box">
                        <h2>Your Order</h2>
                        <ul class="list">
                            <li><a href="#">Product <span>Total</span></a></li>
                            <li><a href="#">Fresh Blackberry <span class="middle">x 02</span> <span class="last">$720.00</span></a></li>
                            <li><a href="#">Fresh Tomatoes <span class="middle">x 02</span> <span class="last">$720.00</span></a></li>
                            <li><a href="#">Fresh Brocoli <span class="middle">x 02</span> <span class="last">$720.00</span></a></li>
                        </ul>
                        <ul class="list list_2">
                            <li><a href="#">Subtotal <span>$2160.00</span></a></li>
                            <li><a href="#">Shipping <span>Flat rate: $50.00</span></a></li>
                            <li><a href="#">Total <span>$2210000.00</span></a></li>
                        </ul>
                    </div>
                    <div class="coupon my-3">
                        <div class="code">
                            <p>Avez-vous un coupon ?</p>
                            <form action="#" method="POST">
                                <div class="d-flex align-items-center contact_form">
                                    <input type="text" name="coupon_code" id="coupon_code" class="form-control" placeholder="Coupon code">
                                    <button class="primary-btn my-3" type="submit">
                                        <i class="fas fa-check"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--================End Checkout Area =================-->

@stop

@section('js')

<script>
// Create a Stripe client.
var stripe = Stripe('pk_test_51H2YuDFjtg66AnaAjZRguubu8tw5fFFMjjGmEofW7mXHXHxGrBA1qKWbxKwHdz7y9EHruqGlFYy7xvKGVfN4xpLf00ON95DLmi');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Element.
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.on('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the user if there was an error.
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server.
      stripeTokenHandler(result.token);
    }
  });
});

// Submit the form with the token ID.
function stripeTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}

</script>

@stop
Posté il y a 1 mois
Avatar de CinquièmeDimension
CinquièmeDimension

Ton form principal a une action # donc il va recharger la page en cours. Or, dans le controller de ta page en cours, tu n'as pas de traitement de ton formulaire. Donc la page est rechargée et c'est tout.

Autre remarque:

  • dans ton JS, tu déclare plusieurs fois form
  • dans ton JS, le(s) form déclaré(s) n'existe(nt) pas car pas l'ID 'payment-form'
  • dans ton JS, tu utilise des var, or, c'est de moins en moins utilisé, le let est mieux (pour moi)
Posté il y a 1 mois
Avatar de LouisRobredo
LouisRobredo

Mais je suis obligé justement puisque c'est exactement dans la doc de stripe je ne peux faire autrement

Posté il y a 1 mois
Avatar de CinquièmeDimension
CinquièmeDimension

Sur quel point tu es obligé ?

Sur la doc de Stripe:

  • le form a un ID
  • form n'est déclaré qu'une seule fois
  • c'est effectivement en var, comme souvent, mais charger pour des let fonctionnera toujours, c'est sumplement qu'il te faut être conscient de la différence de portée en un var et un let. Mais tu peux laisser ça.
  • la soumission du formulaire va chercher un script PHP de traitement que tu peux mettre dans ton controller.

Tout ce que je t'ai dit (sauf les var/let) est dans la doc. Une doc ne doit pas être prise telle qu'elle. Si tu ne comprends pas ce que tu copie/colle ça ne fonctionne pas bien. En l'occurence, la doc est faite pour un site en PHP from scratch, donc il faut l'adapter pour mettre sur Laravel.

Posté il y a 1 mois
Avatar de LouisRobredo
LouisRobredo

Difficile a éxpliquer mais ma vue fonctionne elle s'affiche c'est juste que même si je la commente j'arrive toujours a l'afficher et pourtant pas de doublon j'ai vérifié sur un autre forum on me dit que normalement ça devrait fonctionner. Perdu la

Posté il y a 1 mois
Avatar de Rembos
Rembos

Problème de cache peut-être, ouvre un cmd à la racine de ton projet et tape php artisan cache:clear

Posté il y a 1 mois
Avatar de LouisRobredo
LouisRobredo

Merci mais déjà fait et aucun changement sur toutes mes vues maintenant

Posté il y a 1 mois

Vous ne pouvez pas répondre à ce sujet.