📌 Como FILTRAR elementos por Categorías con HTML, CSS y JS
HTML-код
- Опубликовано: 5 сен 2017
- En este video te estaré enseñando como Crear un Filtro por categorías para tu sitio web. Esto sirve mucho para Crear Tiendas virtuales y mas. Y lo realizaremos con HTML, CSS Y Jquery.
RECURSOS ----------------------------------------------------------------------------
♦ Descarga el Proyecto completo: www.mediafire.com/file/cc98g19...
♦ Imagenes del Proyecto : drive.google.com/open?id=0B10...
♦ Vista previa : codepen.io/CodyTron/pen/bryMjo
================ | REDES SOCIALES | ================
♦ FACEBOOK:
/ codytron.tutos
♦ GRUPO DE FACEBOOK:
/ 284413078641210
♦ TWITTER:
/ codytrontutos
Apoya al canal 🅿 💲💲
www.paypal.com/paypalme/codyt...
------------------------------------------------------------------------------------
SUSCRIBETE, ES GRATIS:
/ codytron
Amigos Disculpen por la perdida de Audio en el minuto 49:40 al 50:48. Pero les explico masomenos lo que digo.
"Dentro del .css(' ') colocamos que tenga un transform: scale(1), para que los productos se muestren con una animación de escala. Pero el problema es que se muestran es sus posiciones anteriores, ya que los demás productos conservan también sus posiciones, ya que solo los hemos ocultado estos elementos, pero no removido de la pagina. Es por eso que es necesario utilizar el .hide() para que los productos pierdan sus posiciones y desaparezcan de la pagina. Entonces ahora hay que descomentar la función que creamos hace un rato, la cual contiene el .hide() para desaparecer los productos y sus posiciones. Pero para que se ejecute esta función debemos colocar el setTimeout .
Después de eso ya todo esta explicado.
Disculpen por este primer gran BUG de Codytron :(
Los quiere Cody ;)
CodyTron una pregunta si no quiero que aparezcan todas y solo aparezcan los items de una categoría manteniendo lo de clasificar ¿como se haría?
Que pasa si no tengo jQuery y no entiendo cómo es lo de script.is, me puedes responder, por favor!!!
tengo una duda,cuando pongo las animaciones me las ejecuta a medias y me sale con errores, hay alguna solucion?
Disculpa, si yo tengo más de 100 productos como hago para que me muestre 10 o 20 por pagina únicamente, Gracias y Saludos.
Excelente, te felicito buena explicación directa al detalle y sin tanta vuelta. Además del programa que está super genial.
Solo queda agradecerte hermano, me salvaste, no sabía como hacer una función parecida en un proyecto escolar, eres un crack
Personas como tu, merecen el cielo. Muy buen video amigo.
jajaja gracias! saludos 😉
Felicitaciones, un gran aporte para algunos principialtes y aficionados como yo. Un fuerte abrazo
Muchisimas gracias por subir este tutorial, lo explicaste paso a paso!
💯
Dios mio, estoy agradecida por tu exelente trabajo! muchas gracias funciono a la perfeccion y sin mencionar que explicas muy bien, si podrias hacer una conexion a la base de datos seria excelente!. gracias por compartirnos tus conocimientos!
siiiiii FUNCIONA! increible lo bien y simple que explicas. MUCHAS GRACIAS POR TU APORTE, ME SUSCRIBÍ
me salvaste la vida con mi tarea bro, buena clase de js
Le agradezco muchísimo por el proyecto.
Genial muchas gracias utilize tu codigo en mi proyecto de node js expre y mysql y me funciono
sos un capo ojala mas gente como vos en el mundo
Muy bueno ¡¡GRACIAS!! por compartir → Éxitos!!
Muy bueno me ayudó mucho, una recomendación, poniendo la clase "all" en cada uno te ahorras un poco de código
Muchas gracias, justo lo que buscaba.
Muy bueno bro! me lo vi completo, incluso con los mocos que te comías jajaja. ¡BUENISIMO!
jajajaja seee andaba bien resfriado en ese tiempo XD Saludos ;D
Muchas gracias mi hermano excelente video (= saludos de ecuador
muchas gracias un tutorial bien explicado👍
Adorei amigo, sou do brasil e gostei muito do seu trabalho.
Putisimo amo, muchísimas gracias. Te mereces un superlike .
Likeazo y mil gracias por compartir esto!
Muy bueno amigo, mis respetos :)
Buenisimo hermano, muchisimas gracias!
te ameee sos un genio te va el like muy util todo
gracias por tu aporte nueva seguidora
Te seré honesto, no te conocía y hasta que encontré este vídeo conozco tu método de explicación, a lo cual considero que... tienes nuevo suscritor, sigue así.
Gracias por el aporte...!!!
Super, bien explicado
Muy buen tutorial, seria bueno combinarlo con PHP para llamar los productos desde una base de datos. MySQL, si tienes algo en mente y pudieses continuar seria excelente. y gracias por tus aportes
venia en busca de eso :c jajaja
Muito obrigado pela explicação ajudou-me muito .....Forca
Gracias por tu aporte, me sirvio
Muchísimas gracias.
Excelente video ... sigue asi
Muchas graciass por el video
Muchas gracias!!!
Hola CodyTron, un gusto saludarles desde Ecuador, felicitaciones por los tutoriales, buen contenido y buena explicación, pueden hacer otro tutorial semejante usando phpmysqli, con unos 4 campos de búsqueda, por favor
Hermano muchas gracias.
Muchacho por fin un video que te paso jajaja.
Jajaja sorry estuve algo ocupado . Pero tranqui, ya volví ;)
Excelente aporte, muchas gracias!
es perfecto gracias
Gracias por el aporte
De nada amigo, espero te guste. Saludos ;)
buen video nuevo sub!!!
Super bueno brooooo
lo ame , eres genial :')
Gracias :o
Apoyo la sujerencia del compañero que comento que si pudieras realizar un carrusel seria interesante un carrusel responsive donde podrian estar tres imagenes o dos de clientes o productos
gracias muy buen vídeo
De nada Arminda Morante ;) saludos
muchas gracias
Hola amigos, espero estén teniendo un Dia magnifico!!!
Para aquellos que no lograron hacer su filtro por categorías o no les funciono algo del tutorial, les sugiero que puedan comparar su código con el código trabajado en el tutorial. Para ello pueden ir a este enlace donde encontraran todo el código del tutorial: codepen.io/CodyTron/pen/bryMjo ( las imágenes no aparecen, porque Codepen no me permite subir las imágenes )
Me gusto mucho tu trabajo, me sirvió para aprender para mi proyecto de web, new sub bro.
Como podria hacer que un producto entre en 2 categorias?
muy buen video
Muchas gracias! me ayudo mucho. Solo tengo una duda? como hacer para escoger dos categorías al mismo tiempo?? y de un resultado distinto.
Amigo, excelente tutorial, ahora como podría ponerle a un elemento mas de una categoría.
Salvaste mi semestre
jajajaja, también es para salvar mi semestre jajajaja
muy buen video, solo tengo una duda
¿Cómo le puedo hacer para que las categorias me queden en la parte superior una seguida de otra?
es que borré algo del paso que diste pero salen todas juntas
Muy bueno broooo, una preguntita, se le pueden añadir más de una categoría? y de ser el caso, cómo?
Hola buen dia, hice los pasos que indicaste, solo una pregunta, porque al subirlo a un servidor no se ve igual (los JS ni CSS) es decir no se ve la pagina correctamente me falto algo, o es culpa del servidor? ya que menciono es gratuito, y en una memoria USB a nivel local si se ve bien.
Como se podria hacer que haya un tipo subcategoria dentro de los verticales izquierdos??
pregunta, como le harias para esas opciones en vez de que aparescan como columna, ponerlas en una caja de seleccion que al darle click haga drop a las opciones que hay?
Excelente tutorial. No se si aun haces tutoriales, tengo una duda. si tengo por ejemplo 50 productos y quiero que por pagina se muestren por decir solo 10. y me de la opción de cambiar entre paginas, como puedo hacerlo? esto para evitar que la pagina tarde en cargar al tener tantas imagenes.
oye codytron excelente video, seria increible si incluyeras un tutorial de owl carousel
te hago una consulta? esas imagenes de los distintos productos, cuando vos haces click muestran informacion?
Hola, mira buen tuturial se puede trae esas imagenes por ejemplo de una base de datos con su respectivo id.
Chao.
Muy buen tutorial...+1 like/sub....si bueno...comoo puedo utilizar eso en sistema de paginación?
hola! oye tengo un problema es que al cambiar de categoría la pagina vuelve a la parte de arriba y no me gusta que pase eso, sabes como solucionarlo? todo funciona bien solo que no me gusta que por ejemplo voy a cambiar de categoría para ver que otros productos hay y se devuelva a la parte de arriba, osea yo puse las categorías en la parte de arriba y que mis productos salgan en la parte de abajo del resto esta casi todo igual, pero en la pagina del tutorial pasa lo mismo, ojalá puedas ayudarme, gracias!
puedes hacer el mismo efecto con el lenguaje nativo de vanilla javascript?
Hola, me gusto mucho tu video, me sirvio bastante pero ahora tengo un problema, hice un menú con submenus (como lo hiciste en tu vídeo), ahora cuando le doy el clic en cualquier opción de la categoría, el submenu deja de mostrarse completamente ¿que debo hacer?
Realice todo el proyecto pero a mi no medio los filtros por categoría, será porque estoy trabajando en JavaScript?. Muy agradable el video y se aprende mucho. si me puedes ayudar te lo agradezco. en la consola salía desconocido no salía el nombre de la categoría.
muy bueno amigo!! y como le haría para poder conectarlo con mi base de datos?
amigo me podrias ayudar lo que pasa es que quiero agregar todo esto después de un párrafo y ya lo agregue el detalle es que cuando doy click a una sección se vuelve a regresar al principio de la pagina
Buen video me sirve de mucho y mas para un proyecto que tengo, pero una consulta..
Como hago si tengo 2 paginas de producto como filtro lo que tan en la pagina 1 y pagina 2?
Muito bom!! Ótima explicação!!
Algumas coisas tive q mudar para funcionar.
Mas o scale não funcionou, Pode me ajudar?
necesito ayuda todo lo q ago en css y js no me da cambios en la pg principal porfa ayuda
hola
mi pregunta es como lo puedo guardar para que cualquier archivo me lo pueda abrir?
Disculpa como hago para que toda la linea de todo ordenadores ... ¿quede de forma horizontal despues de la linea y de forma legible? gracias
tengo un problema al momento de ordenar los productos me aparecen abajo y no arriba, que debo hacer?
hola una pregunta, y como seria para que tenga dos categoría un mismo producto como ejemplo
amigo me podrias ayudar para que cuando cargue la pagina solo que me muestre uno de las categorias??
Hola buenas tardes, muchas gracias por el aporte, me sirvió mucho para mi proyecto, tengo una consulta, como debo poner para que cuando inicio entre en una categoria especifica y no que muestre todo, gracias de antemano
Crear un atributo no tiene nada de malo?
Disculpa, se puede poner dos o más categorías por producto?
Se puede filtrar las imagenes desde otra página html?... es decir, tengo dos páginas, una donde se encuentran las imagenes (productos.html) y otra página html (index.html) donde tengo un botón o una imagen para elegir los productos desde ahi, y cuando se de clic, se abra la de productos con los productos filtrados...
Hola, deseo hacer un select dinámico con ajax se puede a hacer que me filtre datos y los muestre en pantalla ¿tienes esos vídeos o sabes de otros que me puedan ayudar?
Chao.
Buen tuto amigo ;)
Amigo puedes hacer un vídeo haciendo el efecto scroll infinito? no hay ningún vídeo en español que lo haga. Gracias
Cuando hay muchísimas imágenes, yo estoy haciendo una web de libros,más de 200, no sé si esta forma es la que me recomiendas.
amigo buenos tardes haz tutorial como crear una pagina usando html5 , css y javascript por favor...saludos
Tambien se puede hacer en Vs Code?
33:58 Para los que quieran ir directamente al código JS
Saludos, está muy bueno el contenido, mas no sé qué pasa porque no logro que el filtro sea efectivo. Al hacer clic en los diferentes objetos, realiza el efecto al desaparecer, pero luego regresan todos y no se completa el filtro como está pensado que debe hacer.
y si me da error la libreria de jquery que se hace?
Un elemento pueden tener varias categorías?
hola CodyTron yo seguí tu ejemplo para poner los productos por categoría pero yo lo quiero hacer incluyendo los productos de una base de datos con su respectiva imagen ya hace pero lo único que no he podido es traer la categoría desde la base para filtrarla lo hice con el método MVC no se si tu tengas un tutorial acerca de eso... te dejo la parte del código donde llamo a los datos de la base
Hola! yo tenia la misma cuestion y lo solucione de la siguiente manera
$
Yo no tengo la clase product-item, en cambio use card-group (propiedad de boostrap), en fin, lo que hice fue, poner un eco dentro de category, para que ponga ahi la categoria que esta en tu base de datos
Y con base de datos como lo hago ?
Amigo, y para que muestre los detalles al darle click en la imagen como podria hacerle
Checa este tutorial :D ruclips.net/video/btuWTsztepw/видео.html
para que aparezca en Google necesita base de datos??
En que momento usas jquery?
Espectacular tutorial... muchísimas gracias...
Aunque me quedó una duda: SI un producto entra en 2 categorías... cómo se le haría?
Lograste saber como se hace?
@@ricardoarevalo1743 lograste encontrar como hacerlo???
tbm puedo trabajar en dreamviwer ?
y como se muestran productos que aparezcan en dos categorias..?
Muy buen vídeo, me sirvió bastante, pero tengo un problema, agregué otro filtro de categorías abajo y cuando doy click en una de las categorías automáticamente la barra de scroll me manda para arriba, y realmente no sé porque me pasa eso, espero alguien pueda ayudarme:(
Hola, excelente video y explicación. En mi caso los “botones” están en una página llamada de categorías y darle click la idea es que vaya al index (dónde están todas las imágenes) y me las filtré. Qué podría hacer? Agradeceré mucho tu ayuda 🙏🏽
Hola, actualmente tengo la misma duda para un proyecto, ¿Lograste hacerlo?