Crear variantes 2
Comprar curso

44. Crear variantes 2


3 comentarios

Inicia sesión para comentar

Comentarios:

  • Jumede Bermudez

    Jumede Bermudez hace 10 horas

    Me esta dando el Siguiente error y ya he verificado todo varias veces 

     

    Property [pivot] does not exist on this collection instance.

  • Marco A. Yanez

    Marco A. Yanez hace 3 meses

    Upsss…fuenro 3 dias en estos dos videos…hay algunos detalles que el profe se salto o padecieron en la edicion del video.. pero en fin aqui vamos…


    *** ProductVariants.php****

     <div>
        <section class="rounded-lg border border-gray-200 bg-white shadow-lg">
            <header class="border-b border-gray-300 px-6 py-2">
    
                <div class="flex justify-between ">
                    <h1 class="text-lg font-semibold text-gray-700">
                        Opciones del Producto
                    </h1>
                    <x-button wire:click="$set('openModal', true)">
                        + Nuevo
                    </x-button>
                </div>
            </header>
    
            {{-- Sesion Listado de Features de Option --}}
            <div class="p-6">
                <div class="space-y-6">
    
                    @foreach ($product->options as $option)
    
                       <div wire:key="product-option-{{$option->id}}"
                         class=" relative p-6 rounded-lg border border-gray-300">
    
                         <div class="absolute -top-3 bg-white px-4">
                            <button onclick="confirmDeleteOption({{$option->id}})">
                             <i class="fa-solid fa-trash-can text-red-400 hover:text-red-800 "></i>
                            </button>
    
                            <span class="ml-3">
                                {{$option->name}}
                            </span>
                         </div>
    
    
                            {{----------  Valores --------------}}
                            <div class="flex flex-wrap">
    
                                @foreach ($option->pivot->features as $feature)
    
                                    @switch($option->type)
                                        @case(1){{-- Texto --}}
                                            <span class="bg-gray-100 text-gray-800 text-xs font-medium me-2 pr-0.5 pl-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-400 border border-gray-500">
                                            {{$feature['value']}}  
    
                                                <button onclick="confirmDeleteFeature({{$option['id']}},{{$feature['id']}})" class="bg-red-200 hover:bg-orange-700 rounded-sm"> 
                                                    <i   class="fa-solid fa-xmark text-black hover:text-white px-1.5 py-1.2"></i>
                                                </button>
    
                                            </span>
                                            @break
    
                                        @case(2)  {{-- Color --}}
                                        <div class="relative pt-2">
                                               
                                                <span class="inline-block h-6 w-6 shadow-lg rounded-full border-2 border-gray-300 mr-4" style="background-color: {{$feature['value']}}"></span>
    
                                                    <button class="bg-red-200 hover:bg-orange-700 rounded-full absolute z-10 left-3 top-1 h-4 w-4 flex justify-center items-center"
                                                        onclick="confirmDeleteFeature({{$option['id']}},{{$feature['id']}})"> 
                                                        <i class="fa-solid fa-xmark text-black hover:text-white px-1 py-1 text-sm"></i>
                                                    </button>
                                        
                                        </div>
    
                                            @break
                                        @default
                                            
                                    @endswitch
                                    
                                @endforeach
                            </div>{{-- End Features --}}
    
    
    
                            
                        </div>  
                        
                    @endforeach
    
                </div>
            </div>
        <section> 
            
    
    
    
          {{-- Creamos el componente modal para el registro de las variants --}}
         <x-dialog-modal wire:model="openModal">
    
             <x-slot name="title">
             
                    <h3>Agregar nueva optión</h3>
               
            </x-slot>
    
            <x-slot name="content">
               {{--   Asignamos validaciones --}}
                <x-validation-errors class="mb-4"/>
    
                {{--  Select de options --}}
                <div class="mb-4">
                    <x-label for="option" class="mb-1">Opción</x-label>
    
                        {{-- Enlazamos el select con la variable variants y el campo option_id del componente ProductVariants --}}
                        <x-select id="option" class="w-full" wire:model.live="variant.option_id">
    
                            <option value="" disabled>Seleccione una opción</option>
    
                            @foreach ($options as $option)
                                <option value="{{ $option->id }}">{{ $option->name }}</option>
                            @endforeach
    
                        </x-select>
                </div>
    
            {{--   Lineas divisoras --}}
            <div class="flex items-center mb-6">
                <hr class="flex-1">
                    <span class="mx-4">
                    Valores
                    </span>
                <hr class="flex-1">
            </div>
            {{-- Final Lineas divisoras --}}
    
                 {{-- Listado de Valores Segun Options --}}
                 <ul class="mb-4 space-y-4">
                    
                    @foreach ($variant['features'] as $index => $feature )
    
                        <li wire:key="variant-feature-{{$index}}"
                           class="relative border border-gray-300 rounded-md p-6">
    
                           {{-- icono delete --}}
                            <div class="absolute -top-3 bg-white px-4">
                                <button wire:click="removeFeature({{$index}})"> {{-- al click pasamos el index del feature al eliminar --}}
                                    <i class="fa-solid fa-trash-can text-red-400 hover:text-red-800"></i>
                                </button>
                            </div>
    
                           {{--  listado de features(Valores) --}}
                           <div>
    
                             <x-label class="mb-1">
                                Valores
                             </x-label>
    
                             {{-- Enlazamos el select con el componente con su variant de valor con su indice --}}
                             <x-select class="w-full" 
                            wire:model="variant.features.{{$index}}.id"
                             wire:change="feature_change({{$index}})">
    
                                <option value=""disabled>
                                    Selecciona un Valor
                                </option>
    
                                @foreach ($this->features as $feature )
     
                                  <option value="{{$feature->id}}"> 
                                     {{$feature->description}}
                                  </option>
                                    
                                @endforeach
                             </x-select>
    
    
                           </div>
    
                        </li>
             
                    @endforeach
    
                </ul>
    
                {{-- Botones de Accion --}}
                <div class="flex justify-end">
    
                     {{-- Modificamos la propiedad de openModal a Fase, logrando cerrar el modal --}}
                    <x-danger-button class="hover:bg-red-800 mr-2"  wire:click="$set('openModal', false)">
                        Cancelar
                    </x-danger-button>
    
                     {{-- Ejecutamos la funcion save, logrando asi el registro de un nuevo valor..segun opcion selecionada --}}
                    <X-button class="btn-lime p-2 rounded-md mr-5 font-normal cursor-pointer uppercase" wire:click="save">
                        Guardar
                    </X-button>
    
                    <x-button wire:click="addFeature">
                       + Valor
                    </x-button>
    
                </div>
                  
            </x-slot>   
            <x-slot name="footer">
    
            </x-slot>
    
         </x-dialog-modal>
    
    
         @push('js')
    
         <script>
    
              
    
               function confirmDeleteFeature(option_id, feature_id){
                           Swal.fire({
                           title: "Seguro Eliminar Valores?",
                           text: "Este Proceso es Inrebersible!",
                           icon: "warning",
                           showCancelButton: true,
                           confirmButtonColor: "#3085d6",
                           cancelButtonColor: "#d33",
                           confirmButtonText: "Si, Eliminar!",
                           cancelButtonText: "Cancelar"
                       }).then((result) => {
                           if (result.isConfirmed) {
                           
                               @this.call('deleteFeature', option_id, feature_id);
    
                               
                               }
                       });
    
               }
    
    
               function confirmDeleteOption(option_id){
                           Swal.fire({
                           title: "Seguro Eliminar La Option",
                           text: "Este Proceso es Inrebersible!",
                           icon: "warning",
                           showCancelButton: true,
                           confirmButtonColor: "#3085d6",
                           cancelButtonColor: "#d33",
                           confirmButtonText: "Si, Eliminar!",
                           cancelButtonText: "Cancelar"
                       }).then((result) => {
                           if (result.isConfirmed) {
                           
                               @this.call('deleteOption', option_id);
    
                               
                               }
                   });
    
               }   
           
               
         </script>  
    
       @endpush
    </div>
    </div>                                     

    ***product-variants.blade.php**

    <div>
        <section class="rounded-lg border border-gray-200 bg-white shadow-lg">
            <header class="border-b border-gray-300 px-6 py-2">
    
    
                <div class="flex justify-between ">
                    <h1 class="text-lg font-semibold text-gray-700">
                        Opciones del Producto
                    </h1>
                    <x-button wire:click="$set('openModal', true)">
                        + Nuevo
                    </x-button>
                </div>
            </header>
    
    
            {{-- Sesion Listado de Features de Option --}}
            <div class="p-6">
                <div class="space-y-6">
    
    
                    @foreach ($product->options as $option)
    
    
                       <div wire:key="product-option-{{$option->id}}"
                         class=" relative p-6 rounded-lg border border-gray-300">
    
    
                         <div class="absolute -top-3 bg-white px-4">
                            <button onclick="confirmDeleteOption({{$option->id}})">
                             <i class="fa-solid fa-trash-can text-red-400 hover:text-red-800 "></i>
                            </button>
    
    
                            <span class="ml-3">
                                {{$option->name}}
                            </span>
                         </div>
    
    
    
                            {{----------  Valores --------------}}
                            <div class="flex flex-wrap">
    
    
                                @foreach ($option->pivot->features as $feature)
    
    
                                    @switch($option->type)
                                        @case(1){{-- Texto --}}
                                            <span class="bg-gray-100 text-gray-800 text-xs font-medium me-2 pr-0.5 pl-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-400 border border-gray-500">
                                            {{$feature['value']}}  
    
    
                                                <button onclick="confirmDeleteFeature({{$option['id']}},{{$feature['id']}})" class="bg-red-200 hover:bg-orange-700 rounded-sm">
                                                    <i   class="fa-solid fa-xmark text-black hover:text-white px-1.5 py-1.2"></i>
                                                </button>
    
    
                                            </span>
                                            @break
    
    
                                        @case(2)  {{-- Color --}}
                                        <div class="relative pt-2">
                                               
                                                <span class="inline-block h-6 w-6 shadow-lg rounded-full border-2 border-gray-300 mr-4" style="background-color: {{$feature['value']}}"></span>
    
    
                                                    <button class="bg-red-200 hover:bg-orange-700 rounded-full absolute z-10 left-3 top-1 h-4 w-4 flex justify-center items-center"
                                                        onclick="confirmDeleteFeature({{$option['id']}},{{$feature['id']}})">
                                                        <i class="fa-solid fa-xmark text-black hover:text-white px-1 py-1 text-sm"></i>
                                                    </button>
                                       
                                        </div>
    
    
                                            @break
                                        @default
                                           
                                    @endswitch
                                   
                                @endforeach
                            </div>{{-- End Features --}}
    
    
    
    
                           
                        </div>  
                       
                    @endforeach
    
    
                </div>
            </div>
        <section>
           
    
    
    
    
          {{-- Creamos el componente modal para el registro de las variants --}}
         <x-dialog-modal wire:model="openModal">
    
    
             <x-slot name="title">
             
                    <h3>Agregar nueva optión</h3>
               
            </x-slot>
    
    
            <x-slot name="content">
               {{--   Asignamos validaciones --}}
                <x-validation-errors class="mb-4"/>
    
    
                {{--  Select de options --}}
                <div class="mb-4">
                    <x-label for="option" class="mb-1">Opción</x-label>
    
    
                        {{-- Enlazamos el select con la variable variants y el campo option_id del componente ProductVariants --}}
                        <x-select id="option" class="w-full" wire:model.live="variant.option_id">
    
    
                            <option value="" disabled>Seleccione una opción</option>
    
    
                            @foreach ($options as $option)
                                <option value="{{ $option->id }}">{{ $option->name }}</option>
                            @endforeach
    
    
                        </x-select>
                </div>
    
    
            {{--   Lineas divisoras --}}
            <div class="flex items-center mb-6">
                <hr class="flex-1">
                    <span class="mx-4">
                    Valores
                    </span>
                <hr class="flex-1">
            </div>
            {{-- Final Lineas divisoras --}}
    
    
                 {{-- Listado de Valores Segun Options --}}
                 <ul class="mb-4 space-y-4">
                   
                    @foreach ($variant['features'] as $index => $feature )
    
    
                        <li wire:key="variant-feature-{{$index}}"
                           class="relative border border-gray-300 rounded-md p-6">
    
    
                           {{-- icono delete --}}
                            <div class="absolute -top-3 bg-white px-4">
                                <button wire:click="removeFeature({{$index}})"> {{-- al click pasamos el index del feature al eliminar --}}
                                    <i class="fa-solid fa-trash-can text-red-400 hover:text-red-800"></i>
                                </button>
                            </div>
    
    
                           {{--  listado de features(Valores) --}}
                           <div>
    
    
                             <x-label class="mb-1">
                                Valores
                             </x-label>
    
    
                             {{-- Enlazamos el select con el componente con su variant de valor con su indice --}}
                             <x-select class="w-full"
                            wire:model="variant.features.{{$index}}.id"
                             wire:change="feature_change({{$index}})">
    
    
                                <option value=""disabled>
                                    Selecciona un Valor
                                </option>
    
    
                                @foreach ($this->features as $feature )
     
                                  <option value="{{$feature->id}}">
                                     {{$feature->description}}
                                  </option>
                                   
                                @endforeach
                             </x-select>
    
    
    
                           </div>
    
    
                        </li>
             
                    @endforeach
    
    
                </ul>
    
    
                {{-- Botones de Accion --}}
                <div class="flex justify-end">
    
    
                     {{-- Modificamos la propiedad de openModal a Fase, logrando cerrar el modal --}}
                    <x-danger-button class="hover:bg-red-800 mr-2"  wire:click="$set('openModal', false)">
                        Cancelar
                    </x-danger-button>
    
    
                     {{-- Ejecutamos la funcion save, logrando asi el registro de un nuevo valor..segun opcion selecionada --}}
                    <X-button class="btn-lime p-2 rounded-md mr-5 font-normal cursor-pointer uppercase" wire:click="save">
                        Guardar
                    </X-button>
    
    
                    <x-button wire:click="addFeature">
                       + Valor
                    </x-button>
    
    
                </div>
                 
            </x-slot>  
            <x-slot name="footer">
    
    
            </x-slot>
    
    
         </x-dialog-modal>
    
    
    
         @push('js')
    
    
         <script>
    
    
             
    
    
               function confirmDeleteFeature(option_id, feature_id){
                           Swal.fire({
                           title: "Seguro Eliminar Valores?",
                           text: "Este Proceso es Inrebersible!",
                           icon: "warning",
                           showCancelButton: true,
                           confirmButtonColor: "#3085d6",
                           cancelButtonColor: "#d33",
                           confirmButtonText: "Si, Eliminar!",
                           cancelButtonText: "Cancelar"
                       }).then((result) => {
                           if (result.isConfirmed) {
                           
                               @this.call('deleteFeature', option_id, feature_id);
    
    
                               
                               }
                       });
    
    
               }
    
    
    
               function confirmDeleteOption(option_id){
                           Swal.fire({
                           title: "Seguro Eliminar La Option",
                           text: "Este Proceso es Inrebersible!",
                           icon: "warning",
                           showCancelButton: true,
                           confirmButtonColor: "#3085d6",
                           cancelButtonColor: "#d33",
                           confirmButtonText: "Si, Eliminar!",
                           cancelButtonText: "Cancelar"
                       }).then((result) => {
                           if (result.isConfirmed) {
                           
                               @this.call('deleteOption', option_id);
    
    
                               
                               }
                   });
    
    
               }  
           
               
         </script>  
    
    
       @endpush
    </div>
    </div>

     

     




     

                           

              

           




     

        

    • Juan Cruz hace 3 meses

      x2 a mi me pasa lo mismo, ademas agrego documentacion (entiendo que se puede volver contraproducente),  pero en mi caso me bien cuando necesito repasar algo. Este proyecto esta super completo. Vamos por masss

  • Edmer

    Edmer hace 5 meses

    Estimado Profesor.

    Sucede que agrgue una opcion al producto, después al rato debo agregar otra, se generan tarjetas independientes con esas opciones. Se deberia actualizar en misma tarjeta/sección (img-1).

    El otro tema es duplicidad. Si sigo agregando misma opción al mismo producto, lo permite. Ya no deberia (img-2).

    Le agradezco si puede actualizar esta sección sobre la observación.

    IMG-1

    IMG-2

    • Victor Arana Flores hace 5 meses

      Hola Edmer, todos esos detalles lo explicare al final del curso. 

      Corregiremos pequeños errore y agregaremos seguridad.