Это видео недоступно.
Сожалеем об этом.
📌 Como FILTRAR elementos por Categorías con HTML, CSS y JS
HTML-код
- Опубликовано: 19 авг 2024
- 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.c...
♦ Imagenes del Proyecto : drive.google.c...
♦ Vista previa : codepen.io/Cod...
================ | REDES SOCIALES | ================
♦ FACEBOOK:
/ codytron.tutos
♦ GRUPO DE FACEBOOK:
/ 284413078641210
♦ TWITTER:
/ codytrontutos
Apoya al canal 🅿 💲💲
www.paypal.com...
------------------------------------------------------------------------------------
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.
Personas como tu, merecen el cielo. Muy buen video amigo.
jajaja gracias! 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
Felicitaciones, un gran aporte para algunos principialtes y aficionados como yo. Un fuerte abrazo
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
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 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
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Í
Genial muchas gracias utilize tu codigo en mi proyecto de node js expre y mysql y me funciono
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í.
Muchisimas gracias por subir este tutorial, lo explicaste paso a paso!
💯
sos un capo ojala mas gente como vos en el mundo
Muy bueno me ayudó mucho, una recomendación, poniendo la clase "all" en cada uno te ahorras un poco de código
me salvaste la vida con mi tarea bro, buena clase de js
te ameee sos un genio te va el like muy util todo
Le agradezco muchísimo por el proyecto.
Putisimo amo, muchísimas gracias. Te mereces un superlike .
Muito obrigado pela explicação ajudou-me muito .....Forca
Muy bueno ¡¡GRACIAS!! por compartir → Éxitos!!
muchas gracias un tutorial bien explicado👍
Muchas gracias, justo lo que buscaba.
Salvaste mi semestre
jajajaja, también es para salvar mi semestre jajajaja
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
Muchas gracias! me ayudo mucho. Solo tengo una duda? como hacer para escoger dos categorías al mismo tiempo?? y de un resultado distinto.
Adorei amigo, sou do brasil e gostei muito do seu trabalho.
Muchísimas gracias.
Buenisimo hermano, muchisimas gracias!
Likeazo y mil gracias por compartir esto!
Muchas graciass por el video
Muchas gracias!!!
Super, bien explicado
gracias por tu aporte nueva seguidora
Gracias por tu aporte, me sirvio
es perfecto gracias
Muchas gracias mi hermano excelente video (= saludos de ecuador
Muy bueno amigo, mis respetos :)
Como se podria hacer que haya un tipo subcategoria dentro de los verticales izquierdos??
Amigo, excelente tutorial, ahora como podría ponerle a un elemento mas de una categoría.
Gracias por el aporte...!!!
muchas gracias
Gracias por el aporte
De nada amigo, espero te guste. Saludos ;)
Muchacho por fin un video que te paso jajaja.
Jajaja sorry estuve algo ocupado . Pero tranqui, ya volví ;)
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
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.
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
Excelente aporte, muchas gracias!
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!
Super bueno brooooo
Excelente video ... sigue asi
lo ame , eres genial :')
Gracias :o
Hermano muchas gracias.
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...
puedes hacer el mismo efecto con el lenguaje nativo de vanilla javascript?
Hola me gustaria poner los productos con los precio como lo hago
Bueno, pues dentro del .product-item podrias poner un texto que contenga el precio como por ejemplo $50.00 y le asignas tus propios estilos CSSS. Saludos 😉
33:58 Para los que quieran ir directamente al código JS
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
gracias muy buen vídeo
De nada Arminda Morante ;) saludos
Si quieren combianar varios atributos para la busqueda la sintasis es así: $('.tuClase[atributo1=valor1][atributo2=valor2]')
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
buen video nuevo sub!!!
Muy bueno broooo, una preguntita, se le pueden añadir más de una categoría? y de ser el caso, cómo?
muy bueno amigo!! y como le haría para poder conectarlo con mi base de datos?
hola una pregunta, y como seria para que tenga dos categoría un mismo producto como ejemplo
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???
muy buen video
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.
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.
buen video gracias, una pregunta como puedo hacer para que un mismo producto tenga 2 categorias diferentes ?
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?
Hola muy buen tutorial.... Me saco de un apuro pero tengo una duda que pasa si quiero ponerle dos categorías a un elemento?
tengo la misma duda
para que aparezca en Google necesita base de datos??
Y con base de datos como lo hago ?
Disculpa como hago para que toda la linea de todo ordenadores ... ¿quede de forma horizontal despues de la linea y de forma legible? gracias
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 como se muestran productos que aparezcan en dos categorias..?
3:40 oye, al darle click me sale otra pagina con puro codigo,
ayudaa
descarga la carpeta de la descripción, ahí viene
te hago una consulta? esas imagenes de los distintos productos, cuando vos haces click muestran informacion?
tengo un problema al momento de ordenar los productos me aparecen abajo y no arriba, que debo hacer?
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
esta mui bueno el tutorial, pero como se le agrega el precio del producto, el registro de compra, y el carrito de compra para ver los productos que escogido?
y si me da error la libreria de jquery que se hace?
Estoy haciendo lo del jquery en visual code y no funciona.
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?
no entiendo porque no me salen como botones
necesito ayuda todo lo q ago en css y js no me da cambios en la pg principal porfa ayuda
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.
Tambien se puede hacer en Vs Code?
Hola :) buen video. Una consulta, como puedo hacer si por ejemplo quiero ponerle dos categorias a un objeto para que aparezca en dos secciones? intente agregarlas en el codigo pero al hacerlo desaparece el objeto de la lista
hola, yo también estoy teniendo ese problema, y quería saber si lograste encontrar una solución, de antemano gracias
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?
Muito bom!! Ótima explicação!!
Algumas coisas tive q mudar para funcionar.
Mas o scale não funcionou, Pode me ajudar?
Y qué pasa cuando es mucho contenido? realmente no los oculta por qué la clase css lo que hace es ponerlos transparentes por lo tanto no es recomendable para contenido que tenga mucha info.
Hola qué tal y para cuando ya tengo el html hecho que debo hacer!
Un elemento pueden tener varias categorías?
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
de casualidad alguien sabe como implementarle base de datos
hola
mi pregunta es como lo puedo guardar para que cualquier archivo me lo pueda abrir?
El codigo en js no pude aselo
Disculpa, se puede poner dos o más categorías por producto?