How to build Dynamic Ionic 4 Slides with Shopping Cart
HTML-код
- Опубликовано: 25 дек 2024
- In this tutorial we build a simple sliding design with Ionic 4 slides!
🔥 Learn to build mobile apps with Ionic in my Ionic Academy: ionicacademy.com/
💎 Get the Built with Ionic Book: builtwithionic...
#############################
Want to read instead of watch? Here's the full tutorial: devdactic.com/...
Want more tutorials? Here you go! devdactic.com/
Just getting started? Take my 7 Day Ionic Crash Course: ionicacademy.c...
#############################
You can also find me
on / schlimmson
on / devdactic
on / simongrimm_
#############################
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
Very well explained Simon
Thanks Simon. Parts of this were very helpful in getting a better understanding for developing my e-commerce application prototype for University using Ionic 4 & Firestore.
I frequently watch your lecture. fantastic!!
Beautiful!!
I am literally first!! NOTIFICATION SQUAD!!!
best video!!! thanks alot
Awesome! Just a question, I'm using slides to display a list of items in one and in another one, i have a crud to add an item to that list. The problem is the list is big, and when a go to the another slide there is a lot of blank space above the ions-slide. Is it possible to do an AutoUpdateHigth? Ive tried it with "[options]" , "slides.update()" and nothing... tks in advance
You could try to interact with the Swiper API directly, they also have something for auto height documented here: idangero.us/swiper/api/#methods
Not sure if it works but that would be an idea!
hi i tried this example in ionic 4 by default ion slide is not sliding when i navigate back to home page how to fix this issue i am using ioni4 with angular 8
Hi Simon i have question, How to make sub array "Products" in Array "Data" but get data from Database, i'm using json php. thanks, hope u answer me
is it working on normal ionic blank project too..??
project type is reuired..??
I don't know what you mean, the project templates are just a different way of getting started but there is no other difference!
Simon Grimm i was trying to say that if i started project by writing ionic start projectname blank it will work if i do not use type angular.?
Can I add a questionnaire (with radio or text input) on each page of the slide and then, on the last page, press the button to send the answers?
Sure why not?
Awesome content!! Im really digging ionic lately. And youre one of those that i follow.. Question, is there a way to get the ionic shirt youre wearing?
Thanks Vincent! It's actually in the official Ionic Merch store :)
@@galaxies_dev Thanks! Got it! will check the Merch Store!
Hello Simon, I really want to learn how to make this dynamic slide, but when I go to create the service it gives an error. Can you help me?
Is there are problem with your CLI?
Is perfect!!!, thanks so much
How do I make a fixed size for each card? because i have
images of different size
You can give the card a fixed height and maybe also the image but ofc make sure to respect the aspect ratio. Maybe fill the image or set it as a background then!
Thank you for the video! But i had a few questions. How do i add different images for different cards? Also could you show the code to remove items from the shopping cart?
Well I only had some static data, of course you can have information in your data about which image to use! I think someone also posted the code to remove items, you can easily splice() the array at any time :)
Good course
Another interesting video! Suggestion: cut out a little post-it note the size of your mini video and stick it to the screen :) there have been several videos where you keep forgetting its going to be there and start explaining code that is hidden behind it.
Haha that's actually a nice trick! It's anyway always a pane because I'm recording on my iMac and the screen is way to big. Only recording in like 1/4 of the screen, haven't found any other good way yet (besides scaling everything but then my eyes hurt too much)
How do I add an increment and decrement to the cart page for each of the products? Please help.....
I'm already working on an extended example to work with the cart!
is there anyway to fixed the size of an ion-slide ?
Sure you can set it up in the configuration object, also check out the underlying API: swiperjs.com/api/
centeredSlidesBounds doesnt work..please help me simon
simon please
Sir items are added to cart but notification is not showing on the cart badge icon
How do I filter my 'posts' collection from firebase by the categories using ionic 4?
You could either use a query like described on the AngularFire page or retrieve all data and then filter it inside your Ionic app, but the first might make more sense!
@@galaxies_dev is it possible to give me some help through email?
Is amazing man
Hi, how could i insert the data on Firebase? because im trying to use this with firebase but i can't it
I don't see any problem? You could have a collection of items and keep all the items available for purchase in there!
when i refresh or reopen the page, the cart values shows zero...how i fix this..
The values are only within the service and not stored to localstorage or any DB, so it's normal that they disappear. You would have to write them to storage or save them to a backend to persist the cart.
Thanks, its perfect
I been following you channel since the start of my ionic learning journey. Great content. Question. I think ionic change the ion-slide because how I'm having issue when i try to have *ngFor in it. Can you please give me advise :)
Hmm no I'm not aware of changes to slides, perhaps something in your markup is wrong? the iteration needs to be on slides, not the parent slide!
For some reason in vue, binding the options (:options) does not work.
Hi! Im using only the ion-slides, if you look closely you can see a weird animation, it goes from width 100% to width with margins, when you load the page, it happens quickly. For me, it looks like the ion-slides doesnt read the [options] variable when the pages loads, it reads it after.
Im having the same issue: media.giphy.com/media/lOUD7TvWuoXcsVSLj3/giphy.gif
WATCH 17:19
how can I put different images in ion card becsuse it is showing same images in all ion card please solve this promblrm
You need an array with different images and then use the variable in your ngFor!
@@galaxies_dev can you please do the exact code on how to make array with different images then the ngFor variable?? It would mean alot to meeeeee please
perfect but one things i want to know this add product is for universal for all users, it means i added two items from my login and then the two items also show for other users login, whats for individual users???
This is only a very basic UI example. In your case you might need an authentications sytem and display specific items to specific users.
@@galaxies_dev plss humble request to u, how to do this for individual users...plss suggest one video for this or the txt for this... pls
great keep going
slidesPerView doesn't work :( , any ideas ?
I need the ionic 5 with react version please
Always best ever
its not working if we open cart first and then home page
i want this code in ionic 3 please.....
nice !!!!
i know this might sound harsh but what happens if you ngFor the ion-slid over thousands of products :D
Hmm very good question, perhaps you might get performance problems in that case :/
@@galaxies_dev tried to find a way to have infinite slides(or at least a way to lazy load each slide's data), and there are some bugs with the swiperjs lib atm.
HomePage.html:20 ERROR TypeError: Cannot read property 'products' of undefined this is my error and the ion-slide is not displayed Help! @SimonGrimm
Have you defined the products in your page? Looks like there is no variable in the class!
how about in ionic 3 sir?
Video recommendation: making a PWa that is also optimized for desktop browsers.
anyone please suggest me ionic 3 add to cart with mySql
how can i remove product from the cart?
You can simply splice the array :)
@@galaxies_dev i splice my object but display old array length,automatically not change cart length
Mmm and i don't have idea how to do the pop function :c
You speak like a Brazilian, do you are Brazil from?
Haha no from Germany :D
Lol, you can't get no-bug-at-all while developing with ionic.
Yeah it's pretty hard. Sometimes I'm close to it but never 100% x)