1

I have a situation where I need to display booking links when the user selects a location from the dropdown list.

I have 30+ locations. Each location may have 3-5 different booking page links.

May I know how can I achieve this kind of problem in Craft CMS?

enter image description here

here is an example of what I want to achieve.

4
  • Do you want this functionality in the backend (CMS / Craft interface) or frontend of your site? For the backend, you might be able to do this with a lot of conditional fields using the reasons plugin. For the frontend, there are a number of way to solve this using server-side or client-side code. What have you tried so far? Why isn't it working? As it stands this question is way too broad to be answerable, you should add more details and a more specific question.
    – MoritzLost
    Jun 29 at 13:51
  • I just want this function to be on the front end site only. There is no saving or updating database work. It is just showing the links when the user has selected the value from the dropdown option. To be honest, I haven't tried out anything yet since I'm not the one who built this website. My task just to add this function to a existing page and this is my first time using Craft CMS. If you don't mind, can you share some links that I can refer to for this problem?
    – Aima
    Jun 29 at 14:02
  • Hey Aima, the thing is that this isn't really a Craft-related question in this case. It depends very much of how the site is built. If your screenshot comes from some kind of frontend app (using React or Vue, for example), you will need to edit that to add the required functionality. Of course, you will need to update the entry fields to accomodate your links and either update your API (if the frontend is an app) or your templates (if the site is rendered server-side). Beyond that, it's just JavaScript to handle loading/displaying content based on the user selection.
    – MoritzLost
    Jun 29 at 14:10
  • There are many way to build this, and it depends heavily on the exsting setup. And for every approach, there are multiple problems to be solved. For example, how to add the required fields to the Craft entries, how to add the required output in your templates/API and how to load/display content based on the problem. Nobody is gonna write a step-by-step guide for that, its not even possible without knowing much more about your setup. What you might wanna do is describe your site in more detail and ask a more specific question that can actually be answered without writing a book :)
    – MoritzLost
    Jun 29 at 14:12
1

At the risk of this question being closed for being too broad, there are a couple ways to handle this.

Unlike other CMS such as WordPress, in Craft CMS, the front end code is up to you. If you don't have any experience with HTML or CSS, you're going to need to get that experience first.

Assuming you have front end development experience, I'd recommend the Introduction to Templating page inside the Craft CMS documentation. Twig is a different, but great templating language for PHP.

In general, the way I work, I usually build the HTML and CSS outside of Craft first. When I have a good base, then I bring in the CMS related elements where you need them.

From your example, I can't tell if that's a mockup or production code but it looks like you're going to be making use of some sort of "accordion" UI component.

You could use something like one of the premade Foundation or Bootstrap components or if your project already has something like that built in, check out how it's built already by visiting the templates folder inside your project.

From there, if those booking links aren't being stored in Craft at all, you could just hardcode them in. But I'm also guessing those links could change at some point so maybe you use a Globals field to store them.

With knowing more it's hard to recommend a path but hopefully that gets you going.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.