Holiday Notice – Support Unavailable on April 18 and April 21

We just wanted to let you know that our support team will be offline on Friday, April 18th (Good Friday) and Monday, April 21st (Easter Monday) due to the holidays.
We'll be back on Tuesday, ready to assist you!

In the meantime, if you need any help, feel free to:

Amelia YouTube Channel

wpDataTables YouTube Channel

Thank you for your understanding, and we wish you a wonderful holiday weekend!

Okay
  Public Ticket #2902536
My main Website's SVG logo gots repeated after entering 3rd step of service registration
Closed

Comments

  • Quauhtli Martínez started the conversation
    October 25, 2021 at 8:26pm

    Hi:

    Every time user reaches the third step of the service registration, my website's main logo (which is an SVG) suddenly appears 4 times. 

    Please watch the attached video for a better understanding of this behavior.

    25.10.2021_13.24.52_REC (screenrec.com)


  • Quauhtli Martínez replied
    October 26, 2021 at 4:12pm

    You can check this behaviour directly on my website https://brisiancontreras.com/asesorias-online/

  • [deleted] replied
    October 26, 2021 at 6:57pm

    Hi Quauhtli

    Thank you for reaching out to us.

    Issues like this usually occur when there is a conflict either with the theme currently active on your website, or another plugin you have installed. Please check for any errors in the console?

    Can you please change the theme and see if the issue is resolved? If not, then please deactivate all other plugins except for our plugin, refresh the page where the issue is, and see if it is resolved (it should be). If it is, then start activating other plugins one by one, and after each activation refresh the page to see if the issue reoccurred. Once it does reoccur, you will have found the plugin causing the issue.

  • Quauhtli Martínez replied
    October 26, 2021 at 7:18pm

    Hi:

    I think the problem occur because my logo is an SVG file and in Amelia, there is some javascript code that does something with all SVG elements contained in the current page. I can confirm this because if I change my SVG logo file for a PNG file, this behavior does not occur, but I must use an SVG file as my main logo, not PNG neither JPG.

    I actually disabled all the plugins one by one. If I disable my theme (Be-Theme, by the way), it works, however, I cannot do this because all my website is developed and configured in order to work using Betheme.

    I saw this messages in the console when this error happens (you can check it for yourself on my live website).

    Uncaught TypeError: Cannot read properties of null (reading 'replaceChild')
        at XMLHttpRequest.s.onload (amelia-booking-booking-b4477d5b64a5624fad8d.js:1)
    s.onload @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
    load (asincrónica)
    (anónimo) @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
    s @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
    i.init @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
    inlineSVG @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
    mounted @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
    Re @ amelia-booking.js?ver=4.2:1
    tn @ amelia-booking.js?ver=4.2:1
    insert @ amelia-booking.js?ver=4.2:1
    S @ amelia-booking.js?ver=4.2:1
    (anónimo) @ amelia-booking.js?ver=4.2:1
    e._update @ amelia-booking.js?ver=4.2:1
    pn.before @ amelia-booking.js?ver=4.2:1
    pn.get @ amelia-booking.js?ver=4.2:1
    pn.run @ amelia-booking.js?ver=4.2:1
    hn @ amelia-booking.js?ver=4.2:1
    (anónimo) @ amelia-booking.js?ver=4.2:1
    Je @ amelia-booking.js?ver=4.2:1
    Promise.then (asincrónica)
    Ue @ amelia-booking.js?ver=4.2:1
    tt @ amelia-booking.js?ver=4.2:1
    (anónimo) @ amelia-booking.js?ver=4.2:1
    pn.update @ amelia-booking.js?ver=4.2:1
    de.notify @ amelia-booking.js?ver=4.2:1
    set @ amelia-booking.js?ver=4.2:1
    mn.set @ amelia-booking.js?ver=4.2:1
    refreshCalendar @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
    showNextScreen @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
    Re @ amelia-booking.js?ver=4.2:1
    n @ amelia-booking.js?ver=4.2:1
    Re @ amelia-booking.js?ver=4.2:1
    e.$emit @ amelia-booking.js?ver=4.2:1
    showNextScreen @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
    Re @ amelia-booking.js?ver=4.2:1
    n @ amelia-booking.js?ver=4.2:1
    Re @ amelia-booking.js?ver=4.2:1
    e.$emit @ amelia-booking.js?ver=4.2:1
    handleClick @ amelia-booking.js?ver=4.2:1
    Re @ amelia-booking.js?ver=4.2:1
    n @ amelia-booking.js?ver=4.2:1
    Zi.a._wrapper @ amelia-booking.js?ver=4.2:1



  • Quauhtli Martínez replied
    October 26, 2021 at 7:21pm

    It seems the error has to be with the SVG selection, I think your code is assuming no other SVG element will be placed in the site but the SVG contained inside Amelia:

    7961347764.png
    9537981349.png 

    The line causing the problem is the following, as I assumed, your considering no other SVG element will be placed in the site but the Amelia's forms SVG elements. So this has to be changed for some selection using an specific class name or an ID (better).

    if (s.status >= 200 && s.status < 400) {
                                    var i = (new DOMParser).parseFromString(s.responseText, "text/xml").getElementsByTagName("svg")[0]

    Actually, before that line, the root of the problem is with this line:

                        svgSelector: "img.svg"
                        var i = document.querySelectorAll(t.svgSelector)

    You have to use another svgSelector in order to make Amelia compatible with any other SVG used in the page where the Event plugin is being used, otherwise, you will be forcing the developer to not use any SVG element on their pages.

    What other selector can I use?

    Thanks!


  • Quauhtli Martínez replied
    October 26, 2021 at 7:21pm

    Please check my message previous to this one.

  •  2,576
    Aleksandar replied
    October 28, 2021 at 8:37am

    Hello Quauhtli,

    Sorry for the late response.

    You're totally right about this, and it will be fixed for the 2nd update (one update will be released today, so the fix will be included in the one after that).

    Until then, please add this custom CSS to Amelia's pages:

    /* New Top bar | Logo */
	#Top_bar #logo svg{vertical-align:middle; max-height:100%}
	#Top_bar #logo svg.logo-sticky,#Top_bar #logo svg.logo-mobile,#Top_bar #logo svg.logo-mobile-sticky{display:none}
	#Top_bar .logo .custom-logo-link svg{vertical-align:middle;max-height:100%;width:auto!important}
	/* Top bar | Logo | Advanced */
	.logo-valign-top #Top_bar #logo svg{vertical-align:top}
	.logo-valign-bottom #Top_bar #logo svg{vertical-align:bottom}
	.logo-no-sticky-padding #Top_bar.is-sticky #logo svg.logo-sticky{max-height:60px}
	.logo-overflow #Top_bar #logo svg{max-height:none;z-index:200}
@media only screen and (min-width: 1240px) {  #Top_bar.is-sticky #logo svg.logo-sticky {    display: inline;    max-height: 35px;  }  #Top_bar.is-sticky #logo svg.logo-main {    display: none;  }
}

    That should resolve the issue. Please let me know.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    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

  • Quauhtli Martínez replied
    October 28, 2021 at 3:39pm

    Thank you! The workaround worked. I will be waiting for the next release.

  • [deleted] replied
    October 30, 2021 at 5:59pm

    You are most welcome on behalf of the entire teamsmile.png

    If there is anything else we can assist you with please don't hesitate to open a new ticket.

    Have a wonderful day!