Okay
  Public Ticket #3154543
BOoking forms not shoing up on mobile
Closed

Comments

  •  12
    Jonas started the conversation

    I am using Popups for divi to make a popup with the reservations. On my phone it worked nicely but suddenly, or just after I started making a booking and then closed the popup, I can't see the booking forms anymore. The customer login form shows up as well as other forms on the same page. And it works fine on my laptop, although I haven't started making a booking there yet.

    Thank's in advance

  •  12
    Jonas replied

    The page has moved to this location https://arecoach.se/bokningssidan-test/ 

  •  1,617
    Marko replied

    Hello Jonas,

    Thank you for reaching out to us.

    You can use Amelia in elementor pop-for now only. If you want you can set this there like this. When you have created Employees, services and/or events in Amelia, you can add them on front-end using our shortcodes, which are explained in detail in the article "Amelia Shortcodes and Front-end implementation".

    In Elementor widgets, simply search for “Amelia” in Elementor’s side bar, and drag the widget onto a page:

    1765760820.png

    When it’s dragged into the page, the same parameter options seen in the Gutenberg block are shown in Elementor’s side panel:

    1281836611.png

    So, to cover all options in here real quick:

    1. Select Category – allows you to select a specific category you have created in Amelia. 
    2. Select Service – allows you to select a specific service created in Amelia;
    3. Select Employee – selection which filters the form per selected employee;
    4. Select Location – if your employees are working on multiple locations, you can choose which location’s bookings will appear in the window.
    5. Show All refers to “Services” and “Packages”, and is only available in Amelia’s Pro license (since packages are not included in the Basic license). With this option, you can choose if the form will show both services and packages (all), only services, or only packages. All these can be combined, but please be careful that you’re selecting actual values. For example, if you select [ameliacatalog category=1 employee=3 location=2], and there’s no Employee #3 working on Category 1, or on Location #2, the booking form will continuously load, and will not display anything.
    6. Load booking form manually – this is used for popups within Elementor, and that’s what we’re going to explain now.

    First, you need to actually create a Popup in Elementor, following Elementor's tutorial here.

    We added a shortcode for the popup - it needs to have the ID of the button that is calling the popup, so this is
    how one of the shortcodes should look like in the Elementor pop-up:

    [ameliabooking trigger=amelia-button-id]

    So, if the button ID is "my-popup-button" it will be:

    [ameliabooking trigger=my-popup-button]

    So, you create a Popup and add this shortcode in the popup.

    Please note: At the moment, you cannot use Elementor's Amelia widgets in the popup, so when configuring the popup, make sure to add the "Shortcode" widget, and manually type the shortcode you need:

    6052863904.png

    On the bottom-left part of the screen, click on the gear symbol to access Popup Settings:

    8128615255.png

    In there, go to "Advanced", and enable "Prevent Closing on Overlay":

    6043594822.png

    Then, on the page - add a button, on which the popup will be called, next to the "Link" field click on "Dynamic Tags" and select "Popup" from the drop-down:

    2954167864.png

    Then, click on "Popup" in the link field, and you'll see the settings for the popup. Click on the "All" drop-down, and type the name of the popup you previously created. Select it, and click away to close the settings:

    2721467348.png

    In the same form, below, you will see the "Button ID" field, where you need to add the ID for the trigger (from Amelia's shortcode):

    1226262590.png

    That is it - once you publish this page, when you click on the button, it will open a popup which will manually trigger the "my-popup-button" and open Amelia's booking form.

    Hope this helps.

    In case it doesn't I'll kindly ask you to add it as a feature suggestion on this link https://features.wpamelia.com/

    Features are pushed up on our "to-do" list when there are a lot of customers requesting those features, so having your vote as a customer can be beneficial to this feature being developed sooner.

    If you have any more questions please open another ticket and we will gladly help you there.

    We wish you all the best.

    Have a nice day. 


    Kind Regards, 

    Marko Davidovic [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, floor plans, choropleth maps, and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  12
    Jonas replied

    As stated, I use Divi and not Elementor so it's not very helpful I'm afraid.

    It works fine on my desktop and on a tablet, just not on mobile.

    Curious enough if I add a Amelia form on the same page without a popup then the popups work too.

  •  1,617
    Marko replied

    Hello Jonas,

    We will have to check and test if this is possible and we will contact you as soon as we have more information. 

    Kind Regards, 

    Marko Davidovic [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, floor plans, choropleth maps, and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1,617
    Marko replied

    Hello Jonas,

    We just got the feedback from our colleagues and they have told us that they have added the ID for the trigger on the popup of this class as well, because our form is not triggered on the DIVI popup,



    9818683026.png

    9447510247.png

    2048729823.png

    So: ID was added to this btn -> and shortcode and trigger were added to the popup

    1430940371.png
    3699858947.png

    We don't have an official integration with the DIVI popup yet, but this should help you.

    We wish you all the best.

    Have a nice day. 

    Kind Regards, 

    Marko Davidovic [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, floor plans, choropleth maps, and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  • Lee-Anne replied

    I've gone through the steps above to create a popup in Elementor for loading the booking form but no joy. Please have a look at the video.

    https://www.loom.com/share/1393052adcaf406181dc92b28d952f0b

    Also am now seeing error in console

    Uncaught TypeError: Cannot read properties of undefined (reading 'wpAmeliaPluginAjaxURL')
        at stepForm.1a8f8ab0.js:9:10887


      if (typeof hasAmeliaEntitiesApiCall === 'undefined' && '' === '') {
        var hasAmeliaEntitiesApiCall = true;
      }
      var ameliaShortcodeData = (typeof ameliaShortcodeData === 'undefined') ? [] : ameliaShortcodeData;
      ameliaShortcodeData.push(
        {
          'hasApiCall': (typeof hasAmeliaEntitiesApiCall !== 'undefined') && hasAmeliaEntitiesApiCall,
          'trigger': '',
          'show': '',
          'counter': '1000',
          'category': '',
          'service': '',
          'employee': '1',
          'location': ''
        }
      );
      var ameliaShortcodeDataTriggered = (typeof ameliaShortcodeDataTriggered === 'undefined') ? [] : ameliaShortcodeDataTriggered;
      if (ameliaShortcodeData[ameliaShortcodeData.length - 1].trigger !== '') {
        ameliaShortcodeDataTriggered.push(ameliaShortcodeData.pop());
      }
      if (typeof hasAmeliaEntitiesApiCall !== 'undefined' && hasAmeliaEntitiesApiCall) {
        hasAmeliaEntitiesApiCall = false;
      }


  •  12
    Jonas replied

    Thank you for the solution, however the Popup includes some text that now is invisible. and the formatting on mobile is really off. 

    I'm opting out from this solution at the moment and prefer to keep it in a divi tabs module instead.

    Thank you for your time.

  •  1,617
    Marko replied

    Hello Jonas,

    We don't have an official integration with the DIVI popup yet but i will forward this as a suggestion to appropriate sector also I'll kindly ask you to add it as a feature suggestion on this link https://features.wpamelia.com/

    Features are pushed up on our "to-do" list when there are a lot of customers requesting those features, so having your vote as a customer can be beneficial to this feature being developed sooner.

    And Lee-Anne if you have issues that you need help with please open your own ticket and we will gladly help you there. So that we have conversation in private and separate that Jonas's issue.

    We wish you all the best.

    Have a nice day.  


    Kind Regards, 

    Marko Davidovic [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, floor plans, choropleth maps, and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables