Use Webflow Custom Element to render select options from CMS

Поделиться
HTML-код
  • Опубликовано: 29 окт 2024

Комментарии • 37

  • @daniel_q40
    @daniel_q40 9 месяцев назад +3

    Very useful, looks cleaner than FS solution, thanks!

  • @nathansimula8058
    @nathansimula8058 21 день назад

    Thanks a lot, very usefull tutorial !

  • @mihai227
    @mihai227 11 месяцев назад +2

    Hi Igor, thanks for sharing. The new custom element is such a powerful and easy-to-use element. If you have other useful use-case, we would appreciate it if you would share them with us. Cheers!

    • @igorvoroshilov
      @igorvoroshilov  11 месяцев назад

      Thank you! I also think the same way. I have some use cases in mind. Some of them may be quite obvious but I still will share them in new videos.

  • @framerprojects
    @framerprojects 11 месяцев назад

    Wow! Never thought of this! Thanks Igor! Super helpful tutorial.

  • @bbgec
    @bbgec 11 месяцев назад

    Great video. Just what I was looking for. Thank you for sharing, Igor.

  • @leocath
    @leocath 11 месяцев назад

    Just what I needed, thanks Igor!

    • @igorvoroshilov
      @igorvoroshilov  11 месяцев назад

      Glad you found it helpful! Thanks you

  • @1azjoy
    @1azjoy 10 месяцев назад

    Thank you for the useful tutorial, looking forward to more !

    • @igorvoroshilov
      @igorvoroshilov  10 месяцев назад

      Thank you! Glad you find it helpful. Stay tuned!

  • @fazlu3706
    @fazlu3706 11 месяцев назад

    great one, thanks.

  • @SigneiKoch
    @SigneiKoch 8 месяцев назад

    Is it the same to do a Multi Select field? Thanks for the video… very helpful

    • @igorvoroshilov
      @igorvoroshilov  7 месяцев назад

      I believe it should work with multiselect too. Just need to add an attribute to the input element.

  • @bellomubarak3270
    @bellomubarak3270 3 месяца назад

    This is genius

  • @dank7319
    @dank7319 10 месяцев назад

    Subscribed! Very helpful video. Typical that i saw this the day after i added over 100 industries to a select field 🥴 Can you create this with a multi select field?

    • @igorvoroshilov
      @igorvoroshilov  10 месяцев назад

      Thanks! Glad it helped you. I think you can make it multiselect by adding an attribute to the select element.

  • @labruda
    @labruda 9 месяцев назад

    Super useful!! Thanks for sharing this hack

    • @igorvoroshilov
      @igorvoroshilov  9 месяцев назад

      Glad you find it useful! Thank you

  • @thekyser
    @thekyser 7 месяцев назад

    This is Amazing Igor, thank you very much. Maybe you can help me with this: I'm trying to create options first for countries, and once the country is selected, the option to choose cities should appear. That is, the city options will be a condition depending on the country that was chosen. Do you think this can be done with this structure and with CMS? Thank you very much

    • @igorvoroshilov
      @igorvoroshilov  7 месяцев назад

      Hello! Thank you for the question. I think it can be done with Jetboost somehow. Otehrwise Webflow is not that good at front-end dynamic filtering. Also you would spend a lot of CMS records on those cities, which in my opinion is not efficient. Maybe it's better to come up with some JS solution to do it.

    • @thekyser
      @thekyser 7 месяцев назад

      @@igorvoroshilovI did it!

      Province



      Buenos Aires
      City of Buenos Aires
      Córdoba
      Salta
      Santa Fe







      And the JS:
      document.addEventListener("DOMContentLoaded", function() {
      var provinceSelectDiv = document.getElementById("provinceSelect");
      var provinceSelect = provinceSelectDiv.querySelector("select");
      provinceSelect.addEventListener("change", function() {
      var selectedProvince = provinceSelect.value;
      // Hide all city containers
      var cityContainers = document.querySelectorAll(".city-container");
      cityContainers.forEach(function(container) {
      container.style.display = "none";
      });
      // Show the container corresponding to the selected province
      var selectedCityContainer = document.getElementById(selectedProvince + "-content");
      if (selectedCityContainer) {
      selectedCityContainer.style.display = "block";
      }
      });
      });

  • @Sergy_Kondrashin
    @Sergy_Kondrashin 9 месяцев назад

    🔥🔥🔥

  • @darshil_dixit
    @darshil_dixit 10 месяцев назад

    Awesome Video! Curious How can more than 200 CMS Items be rendered into this custom select element? I tried adding it with finsweet CMS load infinite and render-all attribute..but it does not seem to work :(
    Can you please share a solution for this?
    I want to render 200+ countries in the select input element.

    • @igorvoroshilov
      @igorvoroshilov  10 месяцев назад

      Hey thank you for the comment! I made a video explaining my solution for 100+ items as select options. Please check out this tutorial: ruclips.net/video/XRJEyM7L-HA/видео.html

  • @yossiilani5014
    @yossiilani5014 10 месяцев назад

    Hi, very nice, it just seems that you are missing the most important part of the explanation, which is the data collection in the email of the form, which seems to be missing some code to accept the selection, when it comes to the email it does not show which field is selected

    • @igorvoroshilov
      @igorvoroshilov  10 месяцев назад

      Hey! Thanks for the comment. I actually tested it after receiving the comment and it seems to be working, I can see my chosen option in Webflow form submission notification email. To have your data submitted you need to specify "value" attribute. So could you please double check if you have that in your setup? Let me know if you still need a help.

  • @Bars_Sl
    @Bars_Sl 8 месяцев назад

    Круть! Тоже делаю webflow сайты, для англоязычных. Да вы еще и в Японии 👍
    Интересно, есть ли у вас вакансии на удалёнку без японского? Знаю может сотню кандзи только и чуть базовой грамматики.

    • @igorvoroshilov
      @igorvoroshilov  7 месяцев назад

      Спасибо! Рад слышать. Да, мы в Японии в основном работаем. У нас своя команда разработчиков, иногда привлекаем фрилансеров, если резко слишком много работы. Будет здорово посмотреть на твой профиль и портфолио.

    • @Bars_Sl
      @Bars_Sl 7 месяцев назад

      @@igorvoroshilov Написал в Linkedin, надеюсь туда можно

  • @abhikatochh
    @abhikatochh 7 месяцев назад

    how to add Multi Select field?

    • @igorvoroshilov
      @igorvoroshilov  3 месяца назад

      add one more attribute multiple="true"

  • @user-qc8jy3lw8x
    @user-qc8jy3lw8x 2 месяца назад

    no it not working