I am building a shopping cart but still at the first hurdle, how do I get a tray sliding out and over on the right. I don’t see that possibility in a modat?
Are there any prebuilt shopping carts and checkouta that would be easy to integrate into wappler?
Hello, the modals don’t work like that. You will need to add some custom CSS in order to create a slide out panel.
Checking this may help you understand how the things work.
Thanks Teodor
So I managed to add it to my wappler project. https://development.pottyplant.com.au/sidebar
But it doesn’t behave as I want it to. I want it right aligned and to come over the top of the content and make the rest of the content unclickbale and with a 50% black overlay.
It was easy to do this in bubble but this does seem a lot more difficult to achive for someone with very little coding experience.
So there is definitely not this functionality already available in wappler/bootstrap? I don’t understand why a modal cant do that?
No there isn’t.
Because the Bootstrap 4 modals work like that … they work like a modal dialog appearing in the center of your site, not like a slide out panel.
Well not really, that’s not Bootstrap 4 based.
You can edit the CSS of the demo i provided and adjust it as you need https://development.pottyplant.com.au/css/sidebar.css
Ok. The demo you provided is not a modal like this: https://codyhouse.co/ds/components/app/cart-drawer--modal
Is it easy for me to get your demo to behave exactly like this?
I can’t really answer this question. It is easy for me but it may not be as easy for you, as you may not be familiar with writing CSS.
Sorry for the questions but it seems like wappler constrains things a lot. I need to be a developer to do something simple like this but I can’t use or modify a component that someone else has developed that does exactly what I need. Then it makes me wonder if I’m better off just finding a developer to completely custom code the site I need.
Well, it’s just you want something really specific for your needs, and it’s missing from the click-and-add components.
You can create such a div/section/container which opens from the right side of the page, using the Design Panel, but again you need to be familiar with the properties like position, max-width, height and z-index.
Then you can add your overlay and style it again in the Design Panel.
Then you need to know how to use variables in Wappler to toggle the panel and overlay visibility on certain event on the page.
Yes it’s doable, yes it requires you to be familiar with the basics of Wappler, no - unfortunately there is no such a ready made component available.
I have built this in other applications and I am familiar with css controls. I’ll try to do it visually without code then?
As a starting point, that’s how to put a section on the right side of your page, overlaying the content with 5 or 6 clicks in the Design Panel:
And here’s the overlay below the side panel:
You can fiddle with the rest.
2 Likes
Thanks for that! I really appreciate it.
I’ve created 2 sections but your second one is a div. And with the bug in wappler I cant preview a section, nor does it work as an overlay.
So, how do you create a div in wappler? (without code)
And I’ve published it but I dont see either of these sections even though both have background colors.
Not sure what do you mean by this?
See my screenshots you can preview them pretty well …
You add common HTML elements in the DOM panel.
App Structure is for Bootstrap 4 and App Connect components only.
There is a bug in wappler with sections where you cant preview it within wappler but it works correclty when. published.
Ok, is there an issue using a section for the overlay instead of creating a div?
I managed to get it displaying but now having difficulty making it visible with a button click. Does something like this really require a variable to show visibility after clicking a button (not toggling)?
I’ve never seen such a “bug”, what sections exactly you can’t preview?
No, it doesn’t matter.
Yes variables are the way to do it - either used with show/hide attributes or with class toggle.
There are definitely bugs with the visibility of sections and containers where you see the grey and Ben also confirmed this.
I’m not sure if it’s obvious from the screenshots but the only way to see what is behind a section that has a background image or a background colour in the wappler browser is to add padding or publish it and view it in another browser. The wappler browser cannot properly preview sections or containers under these conditions. But when you dorp something inside the section then the opaque grey overlay disappears.
To see it for yourself, try adding a background image to a section (nothing else) and seeing it in wappler.
Empty sections/containers show the grey background (which is a placeholder) so you can see them and that is NOT a bug… that’s how they are supposed to be displayed in Wappler.
When you add some content or style them they appear as styled.