From 2d2eccb600be2a81bad8f0b8d2fce272a73ad09e Mon Sep 17 00:00:00 2001
From: Aldarien <aldarien85@gmail.com>
Date: Sun, 31 May 2020 13:31:23 -0400
Subject: [PATCH] Orden de js y FIX: cambio a estado avisos

---
 common/Controller/Web/Admin/Home.php          |   2 +-
 resources/views/admin/faq.blade.php           | 101 +++++----
 resources/views/admin/home.blade.php          | 161 ++++++-------
 resources/views/admin/producto.blade.php      | 212 +++++++++---------
 resources/views/admin/productos/add.blade.php |  70 +++---
 resources/views/home/resumen.blade.php        |  25 ++-
 resources/views/productos/list.blade.php      | 120 +++++-----
 .../views/productos/producto/buscar.blade.php |  31 ++-
 .../productos/producto/galeria.blade.php      |  76 +++----
 9 files changed, 435 insertions(+), 363 deletions(-)

diff --git a/common/Controller/Web/Admin/Home.php b/common/Controller/Web/Admin/Home.php
index 9ccbbcf..967913c 100644
--- a/common/Controller/Web/Admin/Home.php
+++ b/common/Controller/Web/Admin/Home.php
@@ -29,7 +29,7 @@ class Home {
     $avisos = json_decode(trim(file_get_contents($filename)));
 
     if (isset($post['estado'])) {
-      $avisos->activo = (bool) $post['estado'];
+      $avisos->activo = ($post['estado'] !== 'false');
     } else {
       $aviso = (object) [
         'titulo' => '',
diff --git a/resources/views/admin/faq.blade.php b/resources/views/admin/faq.blade.php
index aa8fc7c..8a852c0 100644
--- a/resources/views/admin/faq.blade.php
+++ b/resources/views/admin/faq.blade.php
@@ -41,57 +41,62 @@
 
 @push('scripts')
   <script type="text/javascript">
-    var edit = false
-    var faqs = [
-      @foreach ($faqs as $faq)
-        {
-          titulo: '{{$faq->titulo}}',
-          contenido: '{{$faq->contenido}}'
-        },
-      @endforeach
-    ]
-    $(document).ready(() => {
-      $('.titulo').css('cursor', 'pointer').click(function() {
-        var id = $(this).attr('data-id')
+    var faq = {
+      edit: false,
+      faqs: [
+        @foreach ($faqs as $faq)
+          {
+            titulo: '{{$faq->titulo}}',
+            contenido: '{{$faq->contenido}}'
+          },
+        @endforeach
+      ],
+      setup: () => {
+        $('.titulo').css('cursor', 'pointer').click(function() {
+          var id = $(this).attr('data-id')
 
-        $("input[name='id']").val(id)
-        $("input[name='titulo']").val(faqs[id].titulo)
-        $("textarea[name='contenido']").val(faqs[id].contenido)
-        $('.button.enviar').html('EDITAR')
-        edit = true
-      })
-      $('.trash.icon').css('cursor', 'pointer').click(function() {
-        var id = $(this).attr('data-id')
-        var url = '{{$urls->admin}}/faqs/delete'
-        $.post(url, {id: id}, (data) => {
-          if (data.estado) {
-            window.location.reload()
-          }
+          $("input[name='id']").val(id)
+          $("input[name='titulo']").val(faq.faqs[id].titulo)
+          $("textarea[name='contenido']").val(faq.faqs[id].contenido)
+          $('.button.enviar').html('EDITAR')
+          faq.edit = true
         })
-      })
-      $('.button.resetear').click(() => {
-        $("input[name='id']").val('')
-        $('.button.enviar').html('AGREGAR')
-        edit = false
-      })
-      $('.form').trigger('reset')
-      $('.form').submit((e) => {
-        e.preventDefault()
-        var input = {
-          titulo: $("input[name='titulo']").val(),
-          contenido: $("textarea[name='contenido']").val()
-        }
-        if (edit) {
-          input['id'] = $("input[name='id']").val()
-        }
-        var url = '{{$urls->admin}}/faqs/add'
-        $.post(url, input, (data) => {
-          if (data.estado) {
-            window.location.reload()
-          }
+        $('.trash.icon').css('cursor', 'pointer').click(function() {
+          var id = $(this).attr('data-id')
+          var url = '{{$urls->admin}}/faqs/delete'
+          $.post(url, {id: id}, (data) => {
+            if (data.estado) {
+              window.location.reload()
+            }
+          })
         })
-        return false
-      })
+        $('.button.resetear').click(() => {
+          $("input[name='id']").val('')
+          $('.button.enviar').html('AGREGAR')
+          faq.edit = false
+        })
+        $('.form').trigger('reset')
+        $('.form').submit((e) => {
+          e.preventDefault()
+          var input = {
+            titulo: $("input[name='titulo']").val(),
+            contenido: $("textarea[name='contenido']").val()
+          }
+          if (edit) {
+            input['id'] = $("input[name='id']").val()
+          }
+          var url = '{{$urls->admin}}/faqs/add'
+          $.post(url, input, (data) => {
+            if (data.estado) {
+              window.location.reload()
+            }
+          })
+          return false
+        })
+      }
+    }
+    $(document).ready(() => {
+      faq.setup()
     })
   </script>
 @endpush
diff --git a/resources/views/admin/home.blade.php b/resources/views/admin/home.blade.php
index e91d023..9f7b60e 100644
--- a/resources/views/admin/home.blade.php
+++ b/resources/views/admin/home.blade.php
@@ -81,93 +81,98 @@
 
 @push('scripts')
   <script type="text/javascript">
-    var edit = false
-    function editAviso(id) {
-      var titulo = $(".link.titulo[data-id='" + id + "']").html()
-      var contenido = $(".link.contenido[data-id='" + id + "']").html()
+    var home = {
+      edit: false,
+      editAviso: (id) => {
+        var titulo = $(".link.titulo[data-id='" + id + "']").html()
+        var contenido = $(".link.contenido[data-id='" + id + "']").html()
 
-      $("input[name='id']").val(id)
-      $("input[name='titulo']").val(titulo)
-      $("input[name='contenido']").val(contenido)
-      edit = true
-      $('.accion').html('EDITAR')
-    }
-    function submitAviso(e) {
-      e.preventDefault()
-      input = {
-        titulo: $("input[name='titulo']").val(),
-        contenido: $("input[name='contenido']").val()
-      }
-      if (edit) {
-        input['id'] = $("input[name='id']").val()
-      }
-      if (input['titulo'] == '') {
-        return false
-      }
-      var url = '{{$urls->admin}}/home/avisos/add'
-      $.post(url, input, (data) => {
-        if (data.estado) {
-          window.location.reload()
-        }
-      }, 'json')
-      return false
-    }
-    function deleteAviso(id) {
-      var url = '{{$urls->admin}}/home/avisos/delete'
-      $.post(url, {id: id}, (data) => {
-        if (data.estado) {
-          window.location.reload()
-        }
-      }, 'json')
-    }
-    $(document).ready(() => {
-      $('.link').css('cursor', 'pointer').click(function() {
-        var id = $(this).attr('data-id')
-        editAviso(id)
-      })
-      $('#avisos').trigger('reset')
-      $('#avisos').submit((e) => {
-        submitAviso(e)
-      })
-      $(".button[type='reset']").click((e) => {
-        $("input[name='id']").val('')
-        $('.accion').html('CREAR')
-        edit = false
-      })
-      $('.trash.icon').css('cursor', 'pointer').click(function() {
-        var id = $(this).attr('data-id')
-        deleteAviso(id)
-      })
-      $('.checkbox').checkbox({
-        onChange: function() {
-          var state = $(this).is(':checked')
-          var url = '{{$urls->admin}}/home/avisos/add'
-          $.post(url, {estado: state}, (data) => {
-            console.debug(data)
-          })
-        }
-      })
-      @if ($avisos->activo)
-        $('.checkbox').checkbox('set checked')
-      @endif
-      $('#resumen').submit((e) => {
+        $("input[name='id']").val(id)
+        $("input[name='titulo']").val(titulo)
+        $("input[name='contenido']").val(contenido)
+        home.edit = true
+        $('.accion').html('EDITAR')
+      },
+      submitAviso: (e) => {
         e.preventDefault()
-        return false
-      })
-      $('.guardar').click(function() {
-        var id = $(this).attr('data-id')
-        var url = '{{$urls->admin}}/home/resumen/edit'
         input = {
-          id: id,
-          titulo: $("input[name='titulo" + id + "']").val(),
-          cantidad: $("input[name='cantidad" + id + "']").val()
+          titulo: $("input[name='titulo']").val(),
+          contenido: $("input[name='contenido']").val()
         }
+        if (home.edit) {
+          input['id'] = $("input[name='id']").val()
+        }
+        if (input['titulo'] == '') {
+          return false
+        }
+        var url = '{{$urls->admin}}/home/avisos/add'
         $.post(url, input, (data) => {
           if (data.estado) {
             window.location.reload()
           }
+        }, 'json')
+        return false
+      },
+      deleteAviso: (id) => {
+        var url = '{{$urls->admin}}/home/avisos/delete'
+        $.post(url, {id: id}, (data) => {
+          if (data.estado) {
+            window.location.reload()
+          }
+        }, 'json')
+      },
+      setup: () => {
+        $('.link').css('cursor', 'pointer').click(function() {
+          var id = $(this).attr('data-id')
+          home.editAviso(id)
         })
-      })
+        $('#avisos').trigger('reset')
+        $('#avisos').submit((e) => {
+          home.submitAviso(e)
+        })
+        $(".button[type='reset']").click((e) => {
+          $("input[name='id']").val('')
+          $('.accion').html('CREAR')
+          home.edit = false
+        })
+        $('.trash.icon').css('cursor', 'pointer').click(function() {
+          var id = $(this).attr('data-id')
+          home.deleteAviso(id)
+        })
+        $('.checkbox').checkbox({
+          onChange: function() {
+            var state = $(this).is(':checked')
+            var url = '{{$urls->admin}}/home/avisos/add'
+            $.post(url, {estado: state}, (data) => {
+              console.debug(data)
+            })
+          }
+        })
+        @if ($avisos->activo)
+          $('.checkbox').checkbox('set checked')
+        @endif
+        $('#resumen').submit((e) => {
+          e.preventDefault()
+          return false
+        })
+        $('.guardar').click(function() {
+          var id = $(this).attr('data-id')
+          var url = '{{$urls->admin}}/home/resumen/edit'
+          input = {
+            id: id,
+            titulo: $("input[name='titulo" + id + "']").val(),
+            cantidad: $("input[name='cantidad" + id + "']").val()
+          }
+          $.post(url, input, (data) => {
+            if (data.estado) {
+              window.location.reload()
+            }
+          })
+        })
+      }
+    }
+    $(document).ready(() => {
+      home.setup()
     })
   </script>
 @endpush
diff --git a/resources/views/admin/producto.blade.php b/resources/views/admin/producto.blade.php
index 274044e..3550f43 100644
--- a/resources/views/admin/producto.blade.php
+++ b/resources/views/admin/producto.blade.php
@@ -153,112 +153,120 @@
 
 @push('scripts')
   <script type="text/javascript">
-    var months = {
-      long: [],
-      short: []
-    }
-    var date = new Date(2018, 0, 1)
-    for (i = 0; i < 12; i ++) {
-      date.setMonth(i)
-      months.long.push(date.toLocaleString('es-ES', {month: "long"}).replace(
-          /\w\S*/g,
-          function(txt) {
-              return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
-          }
-      ))
-      months.short.push(date.toLocaleString('es-ES', {month: "short"}).replace(
-          /\w\S*/g,
-          function(txt) {
-              return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
-          }
-      ))
-    }
-    function listImage(image) {
-      var icon = $('<i></i>').attr('class', 'trash alternate outline icon')
-      icon.css('cursor', 'pointer').click(function() {
-        var url = '{{$urls->admin}}/producto/{{$producto->id}}/imagen/delete'
-        $.post(url, {imagen: image}, (data) => {
-          if (data.estado) {
-            window.location.reload()
+    var producto = {
+      months: {
+        long: [],
+        short: []
+      },
+      date: new Date(2018, 0, 1),
+      listImage: (image) => {
+        var icon = $('<i></i>').attr('class', 'trash alternate outline icon')
+        icon.css('cursor', 'pointer').click(function() {
+          var url = '{{$urls->admin}}/producto/{{$producto->id}}/imagen/delete'
+          $.post(url, {imagen: image}, (data) => {
+            if (data.estado) {
+              window.location.reload()
+            }
+          })
+        })
+        $('#imagenes').append(
+          $('<div></div>').attr('class', 'item').append(
+            icon
+          ).append(
+            $('<div></div>').attr('class', 'content').html(image)
+          )
+        )
+      },
+      setMonths: () => {
+        for (i = 0; i < 12; i ++) {
+          producto.date.setMonth(i)
+          producto.months.long.push(producto.date.toLocaleString('es-ES', {month: "long"}).replace(
+              /\w\S*/g,
+              function(txt) {
+                  return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+              }
+          ))
+          producto.months.short.push(producto.date.toLocaleString('es-ES', {month: "short"}).replace(
+              /\w\S*/g,
+              function(txt) {
+                  return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+              }
+          ))
+        }
+      },
+      setup: () => {
+        producto.setMonths()
+        $('.selection.dropdown').dropdown()
+        $('.selection.dropdown').dropdown('set selected', '{{$producto->segmento}}')
+        $('.calendar').calendar({
+          type: 'month',
+          text: {
+            months: producto.months.long,
+            monthsShort: producto.months.short
+          },
+          formatInput: false,
+          onChange: function(a, b) {
+            if (typeof a == 'undefined') {
+              a = new Date()
+            }
+            $(this).find('input').val(('0' + (a.getMonth() + 1)).slice(-2) + '/' + a.getFullYear())
           }
         })
-      })
-      $('#imagenes').append(
-        $('<div></div>').attr('class', 'item').append(
-          icon
-        ).append(
-          $('<div></div>').attr('class', 'content').html(image)
-        )
-      )
+        var entrega = new Date('{{str_pad(implode('-', array_reverse(explode('/', $producto->entrega))), 7, '20', STR_PAD_LEFT)}}-01T01:00')
+        $('.calendar').calendar('set date', entrega)
+        $('.checkbox').checkbox()
+        @if ($producto->destacado())
+          $('.checkbox').checkbox('set checked')
+        @endif
+        $("input[name='imagen']").change(function() {
+          var data = new FormData()
+          data.append('imagen', $(this)[0].files[0])
+          var url = '{{$urls->admin}}/producto/{{$producto->id}}/imagenes/add'
+          $.ajax({
+            url: url,
+            method: 'post',
+            data: data,
+            contentType: false,
+            processData: false,
+            success: (data) => {
+              if (data.estado) {
+                window.location.reload()
+              }
+            }
+          })
+        })
+        @foreach ($producto->imagenes() as $image)
+          producto.listImage('{{$image}}')
+        @endforeach
+        $("input[name='video']").change(function() {
+          var fData = new FormData()
+          fData.append('video', $("input[name='video']")[0].files[0])
+          var url = '{{$urls->admin}}/producto/{{$producto->id}}/video/set'
+          $.ajax({
+            url: url,
+            method: 'post',
+            data: fData,
+            contentType: false,
+            processData: false,
+            success: (data) => {
+              if (data.estado) {
+                window.location.reload()
+              }
+            }
+          })
+        })
+        $('.trash.video').attr('cursor', 'pointer').click(() => {
+          var url = '{{$urls->admin}}/producto/{{$producto->id}}/video/delete'
+          $.post(url, {}, (data) => {
+            if (data.estado) {
+              window.location.reload()
+            }
+          })
+        })
+      }
     }
     $(document).ready(() => {
-      $('.selection.dropdown').dropdown()
-      $('.selection.dropdown').dropdown('set selected', '{{$producto->segmento}}')
-      $('.calendar').calendar({
-        type: 'month',
-        text: {
-          months: months.long,
-          monthsShort: months.short
-        },
-        formatInput: false,
-        onChange: function(a, b) {
-          if (typeof a == 'undefined') {
-            a = new Date()
-          }
-          $(this).find('input').val(('0' + (a.getMonth() + 1)).slice(-2) + '/' + a.getFullYear())
-        }
-      })
-      var entrega = new Date('{{str_pad(implode('-', array_reverse(explode('/', $producto->entrega))), 7, '20', STR_PAD_LEFT)}}-01T01:00')
-      $('.calendar').calendar('set date', entrega)
-      $('.checkbox').checkbox()
-      @if ($producto->destacado())
-        $('.checkbox').checkbox('set checked')
-      @endif
-      $("input[name='imagen']").change(function() {
-        var data = new FormData()
-        data.append('imagen', $(this)[0].files[0])
-        var url = '{{$urls->admin}}/producto/{{$producto->id}}/imagenes/add'
-        $.ajax({
-          url: url,
-          method: 'post',
-          data: data,
-          contentType: false,
-          processData: false,
-          success: (data) => {
-            if (data.estado) {
-              window.location.reload()
-            }
-          }
-        })
-      })
-      @foreach ($producto->imagenes() as $image)
-      listImage('{{$image}}')
-      @endforeach
-      $("input[name='video']").change(function() {
-        var fData = new FormData()
-        fData.append('video', $("input[name='video']")[0].files[0])
-        var url = '{{$urls->admin}}/producto/{{$producto->id}}/video/set'
-        $.ajax({
-          url: url,
-          method: 'post',
-          data: fData,
-          contentType: false,
-          processData: false,
-          success: (data) => {
-            if (data.estado) {
-              window.location.reload()
-            }
-          }
-        })
-      })
-      $('.trash.video').attr('cursor', 'pointer').click(() => {
-        var url = '{{$urls->admin}}/producto/{{$producto->id}}/video/delete'
-        $.post(url, {}, (data) => {
-          if (data.estado) {
-            window.location.reload()
-          }
-        })
-      })
+      producto.setup()
     })
   </script>
 @endpush
diff --git a/resources/views/admin/productos/add.blade.php b/resources/views/admin/productos/add.blade.php
index 65d0497..324f355 100644
--- a/resources/views/admin/productos/add.blade.php
+++ b/resources/views/admin/productos/add.blade.php
@@ -127,40 +127,48 @@
 
 @push('scripts')
   <script type="text/javascript">
-    var months = {
-      long: [],
-      short: []
-    }
-    var date = new Date(2018, 0, 1)
-    for (i = 0; i < 12; i ++) {
-      date.setMonth(i)
-      months.long.push(date.toLocaleString('es-ES', {month: "long"}).replace(
-          /\w\S*/g,
-          function(txt) {
-              return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+    var producto = {
+      months: {
+        long: [],
+        short: []
+      },
+      date: new Date(2018, 0, 1),
+      setMonths: () => {
+        for (i = 0; i < 12; i ++) {
+          producto.date.setMonth(i)
+          producto.months.long.push(producto.date.toLocaleString('es-ES', {month: "long"}).replace(
+              /\w\S*/g,
+              function(txt) {
+                  return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+              }
+          ))
+          producto.months.short.push(producto.date.toLocaleString('es-ES', {month: "short"}).replace(
+              /\w\S*/g,
+              function(txt) {
+                  return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+              }
+          ))
+        }
+      },
+      setup: () => {
+        producto.setMonths()
+        $('.selection.dropdown').dropdown()
+        $('.calendar').calendar({
+          type: 'month',
+          text: {
+            months: months.long,
+            monthsShort: months.short
+          },
+          formatInput: false,
+          onChange: function(a) {
+            $(this).find('input').val(('0' + (a.getMonth() + 1)).slice(-2) + '/' + a.getFullYear())
           }
-      ))
-      months.short.push(date.toLocaleString('es-ES', {month: "short"}).replace(
-          /\w\S*/g,
-          function(txt) {
-              return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
-          }
-      ))
+        })
+        $('.checkbox').checkbox()
+      }
     }
     $(document).ready(() => {
-      $('.selection.dropdown').dropdown()
-      $('.calendar').calendar({
-        type: 'month',
-        text: {
-          months: months.long,
-          monthsShort: months.short
-        },
-        formatInput: false,
-        onChange: function(a) {
-          $(this).find('input').val(('0' + (a.getMonth() + 1)).slice(-2) + '/' + a.getFullYear())
-        }
-      })
-      $('.checkbox').checkbox()
+      producto.setup()
     })
   </script>
 @endpush
diff --git a/resources/views/home/resumen.blade.php b/resources/views/home/resumen.blade.php
index 5fa0094..918cdb2 100644
--- a/resources/views/home/resumen.blade.php
+++ b/resources/views/home/resumen.blade.php
@@ -28,17 +28,22 @@
 
 @push('scripts')
   <script type="text/javascript">
-    var max_width = 0
+    var resumen = {
+      max_width: 0,
+      setup: () => {
+        $('#resumen .circular.segment').each(function(i, el) {
+          var width = $(this).css('width')
+          var w = parseInt(width)
+          if (w > resumen.max_width) {
+            resumen.max_width = w
+          }
+          $(this).css('width', resumen.max_width + 'px')
+          $(this).css('height', resumen.max_width + 'px')
+        })
+      }
+    }
     $(document).ready(function() {
-      $('#resumen .circular.segment').each(function(i, el) {
-        var width = $(this).css('width')
-        var w = parseInt(width)
-        if (w > max_width) {
-          max_width = w
-        }
-        $(this).css('width', max_width + 'px')
-        $(this).css('height', max_width + 'px')
-      })
+      resumen.setup()
     })
   </script>
 @endpush
diff --git a/resources/views/productos/list.blade.php b/resources/views/productos/list.blade.php
index d851190..520a8b5 100644
--- a/resources/views/productos/list.blade.php
+++ b/resources/views/productos/list.blade.php
@@ -34,64 +34,84 @@
 
 @push('scripts')
   <script type="text/javascript">
-    var loaded = {
-      todo: false,
-      @foreach ($segmentos as $segmento)
+    var productos = {
+      id: '#productos',
+      current_hash: '',
+      loaded: {
+        todo: false,
+        @foreach ($segmentos as $segmento)
         '{{mb_strtolower($segmento->titulo)}}': false,
-      @endforeach
-    }
-    function loadSegmento(segmento) {
-      if (loaded[segmento]) {
-        return
-      }
-      var name = segmento
-      if (name.indexOf(' ') > -1) {
-        name = name.replaceAll(' ', '_')
-      }
-      var url = '{{$urls->base}}/productos/segmento/' + name
-      $(".tab[data-tab='" + segmento + "']").find('.grid').html('')
-      loaded[segmento] = true
-      $.getJSON(url, (data) => {
-        $(".tab[data-tab='" + segmento + "']").find('.grid').append(
-          $('<div></div>').attr('class', 'ui active centered inline loader')
-        )
-        if (data.productos.length == 0) {
-          $(".tab[data-tab='" + segmento + "']").find('.grid').html('No hay productos en este segmento.')
+        @endforeach
+      },
+      loadSegmento: (segmento) => {
+        if (productos.loaded[segmento]) {
           return
         }
-        $.each(data.productos, (i, el) => {
-          getProducto(segmento, el)
-        })
-      })
-    }
-    function getProducto(segmento, id_producto) {
-      var url = '{{$urls->base}}/producto/' + id_producto + '/ficha'
-      $.ajax({
-        url: url,
-        success: (data) => {
-          if ($(".tab[data-tab='" + segmento + "']").find('.grid').find('.loader').length > 0) {
-            $(".tab[data-tab='" + segmento + "']").find('.grid').html('')
-          }
-          $(".tab[data-tab='" + segmento + "']").find('.grid').append(
-            $('<div></div>').attr('class', 'column').append(data)
-          )
+        var name = segmento
+        if (name.indexOf(' ') > -1) {
+          name = name.replaceAll(' ', '_')
         }
-      })
-    }
-    $(document).ready(() => {
-      loadSegmento('todo')
-      $('#productos').find('.tabular.menu .item').tab({
-        onFirstLoad: (tabPath, parameterArray, historyEvent) => {
-          if (tabPath == 'todo') {
+        var url = '{{$urls->base}}/productos/segmento/' + name
+        $(".tab[data-tab='" + segmento + "']").find('.grid').html('')
+        productos.loaded[segmento] = true
+        $.getJSON(url, (data) => {
+          $(".tab[data-tab='" + segmento + "']").find('.grid').append(
+            $('<div></div>').attr('class', 'ui active centered inline loader')
+          )
+          if (data.productos.length == 0) {
+            $(".tab[data-tab='" + segmento + "']").find('.grid').html('No hay productos en este segmento.')
             return
           }
-          loadSegmento(tabPath)
+          $.each(data.productos, (i, el) => {
+            productos.getProducto(segmento, el)
+          })
+        })
+      },
+      getProducto: (segmento, id_producto) => {
+        var url = '{{$urls->base}}/producto/' + id_producto + '/ficha'
+        $.ajax({
+          url: url,
+          success: (data) => {
+            if ($(".tab[data-tab='" + segmento + "']").find('.grid').find('.loader').length > 0) {
+              $(".tab[data-tab='" + segmento + "']").find('.grid').html('')
+            }
+            $(".tab[data-tab='" + segmento + "']").find('.grid').append(
+              $('<div></div>').attr('class', 'column').append(data)
+            )
+          }
+        })
+      },
+      setup: () => {
+        productos.loadSegmento('todo')
+        $(productos.id).find('.tabular.menu .item').tab({
+          onFirstLoad: (tabPath, parameterArray, historyEvent) => {
+            if (tabPath == 'todo') {
+              return
+            }
+            productos.loadSegmento(tabPath)
+          }
+        })
+        $('#productos_menu').find('.menu .item').click(function() {
+          productos.getHash($(this).attr('href').split('#')[1])
+        })
+        if (window.location.hash) {
+          productos.getHash(window.location.hash)
         }
-      })
-      if (window.location.hash) {
-        var start = (window.location.hash).replace('#', '').replace('%20', ' ')
-        $('#productos').find('.tabular.menu .item').tab('change tab', start)
+      },
+      getHash: (hash) => {
+        if (typeof hash == 'undefined') {
+          hash = window.location.hash
+        }
+        var start = (hash).replace('#', '').replace('%20', ' ')
+        if (productos.current_hash == start) {
+          return
+        }
+        productos.current_hash = start
+        $(productos.id).find('.tabular.menu .item').tab('change tab', start)
       }
+    }
+    $(document).ready(() => {
+      productos.setup()
     })
   </script>
 @endpush
diff --git a/resources/views/productos/producto/buscar.blade.php b/resources/views/productos/producto/buscar.blade.php
index bcc5750..bf85a44 100644
--- a/resources/views/productos/producto/buscar.blade.php
+++ b/resources/views/productos/producto/buscar.blade.php
@@ -30,15 +30,38 @@
 
 @push('scripts')
   <script type="text/javascript">
-    function changePrice(min, max) {
+    var buscar = {
+      min: 1000,
+      max: 30000,
+      changePrice: (min, max) => {
+        $("input[name='precio']").val(min + '-' + max)
+        formatter = new Intl.NumberFormat('de-DE')
+        $('.price_label').html(formatter.format(min) + ' - ' + formatter.format(max) + ' UF')
+      },
+      setup: () => {
+        buscar.changePrice(buscar.min, buscar.max)
+        $('#precio').slider({
+          min: buscar.min,
+          max: buscar.max,
+          start: buscar.min,
+          end: buscar.max,
+          step: 500,
+          onChange: (range, min, max) => {
+            buscar.changePrice(min, max)
+          }
+        })
+      }
+    }
+    /*function changePrice(min, max) {
       $("input[name='precio']").val(min + '-' + max)
       formatter = new Intl.NumberFormat('de-DE')
       $('.price_label').html(formatter.format(min) + ' - ' + formatter.format(max) + ' UF')
     }
     var gMin = 1000
-    var gMax = 30000
+    var gMax = 30000*/
     $(document).ready(() => {
-      changePrice(gMin, gMax)
+      buscar.setup()
+      /*changePrice(gMin, gMax)
       $('#precio').slider({
         min: gMin,
         max: gMax,
@@ -48,7 +71,7 @@
         onChange: (range, min, max) => {
           changePrice(min, max)
         }
-      })
+      })*/
     })
   </script>
 @endpush
diff --git a/resources/views/productos/producto/galeria.blade.php b/resources/views/productos/producto/galeria.blade.php
index 4a23b86..0e75871 100644
--- a/resources/views/productos/producto/galeria.blade.php
+++ b/resources/views/productos/producto/galeria.blade.php
@@ -20,49 +20,47 @@
 
 @push('scripts')
   <script type="text/javascript">
-    var images = [
-      @foreach ($producto->imagenes() as $image)
-        '{{$urls->images}}/{{mb_strtolower($producto->nombre)}}/{{$image}}',
-      @endforeach
-    ]
-    function populateThumbs(current) {
-      var thumbs = $('#thumbnails')
-      thumbs.html('')
-      $.each(images, (i, el) => {
-        if (i == current) {
-          return
-        }
-        thumbs.append(
-          $('<div></div>').attr('class', 'three wide column').append(
-            $('<div></div>').attr('class', 'ui image').attr('data-id', i).append(
-              $('<img />').attr('src', el)
+    var galeria = {
+      images: [
+        @foreach ($producto->imagenes() as $image)
+          '{{$urls->images}}/{{mb_strtolower($producto->nombre)}}/{{$image}}',
+        @endforeach
+      ],
+      populateThumbs: (current) => {
+        var thumbs = $('#thumbnails')
+        thumbs.html('')
+        $.each(galeria.images, (i, el) => {
+          if (i == current) {
+            return
+          }
+          thumbs.append(
+            $('<div></div>').attr('class', 'three wide column').append(
+              $('<div></div>').attr('class', 'ui image').attr('data-id', i).append(
+                $('<img />').attr('src', el)
+              )
             )
           )
-        )
-      })
-      $('#galeria').find('.grid .image').click(function(e) {
-        var id = $(this).attr('data-id')
-        changeImage(id)
-      })
-    }
-    function changeImage(id) {
-      var big = $('#galeria>.image')
-      big.find('img').attr('src', images[id])
-      big.attr('data-id', id)
-      populateThumbs(id)
-    }
-    $(document).ready(() => {
-      $('#galeria').find('.grid .image').click(function(e) {
-        var id = $(this).attr('data-id')
-        changeImage(id)
-        /*var big = $('#galeria>.image')
-        var big_id = big.attr('data-id')
+        })
+        $('#galeria').find('.grid .image').click(function(e) {
+          var id = $(this).attr('data-id')
+          galeria.changeImage(id)
+        })
+      },
+      changeImage: (id) => {
+        var big = $('#galeria>.image')
         big.find('img').attr('src', images[id])
         big.attr('data-id', id)
-        $(this).find('img').attr('src', images[big_id])
-        $(this).attr('data-id', big_id)
-        populateThumbs(id)*/
-      })
+        galeria.populateThumbs(id)
+      },
+      setup: () => {
+        $('#galeria').find('.grid .image').click(function(e) {
+          var id = $(this).attr('data-id')
+          galeria.changeImage(id)
+        })
+      }
+    }
+    $(document).ready(() => {
+      galeria.setup()
     })
   </script>
 @endpush