CTA doesn’t close the slide-in

Ignore this question. I read in the documentation that close on CTA is only available for pop-ups. Then may I ask why show that option on the slide-in settings?

However, I still have a question on close slide-in: I added the second button to close the slide-in but if I click on the first button, which scrolls the page to the target section but when I then click on the close button the page is scrolled to the top. How can I change that unnecessary behaviour?

• This reply was modified 1 year, 6 months ago by sarumbear.

Hi @sarumbear,

I hope you are doing well today!

?I read in the documentation that close on CTA is only available for pop-ups. Then may I ask why show that option on the slide-in settings?

This option is available for both pop-ups and slide-ins but not for embeds.
https://wpmudev.com/docs/wpmu-dev-plugins/hustle/#content-cta
https://prnt.sc/FtXtQlGX6VkH
If you can refer us the part of the documentation that you read then we can check and correct if necessary.

For the other issue, please share an export of the slide-in which will help us to check the issue further.

You can export it from Edit section : https://prnt.sc/l2j57sk39gQR

Kind regards,
Zafer

Here is the JSON

https://www.dropbox.com/s/kopfkuhgixdlqgu/hustle-slidein-20230524-021803-the-willows-dental-practice-staging-whitening.json?dl=0

This is what I see on the documentation:

Additional Closing Methods (Popups & Slide-Ins?Only)Copy heading anchor to clipboard

• After CTA Conversion (Popups only)?– Many Call-to-action buttons redirect users to a new page, and if configured to do so, will close the original page in the process. However, if a CTA opens in a new tab or does not require redirection,? these controls ensure the module does not remain open on the original page?indefinitely.

Hi @sarumbear

Hope you are doing fine!

Our team has provided a code snippet that should solve the scrolling issue. The code can be found here:
https://gist.github.com/wpmudev-sls/d883de23962ad810166214e1233d07ab

You’ll need to upload the  hustle-scroll-fix.php file to the wp-content/mu-plugins folder, try this in a staging site first if possible. If everything is working fine on the staging site, then you can upload that hustle-scroll-fix.php file to the production site. You can find more information about MU Plugins and how to install them in the following help article:

https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

Could you please confirm if that solves the?problem?

About the “After CTA conversion” close option, Zafer is correct, this feature is available for Pop ups and Slide-Ins.

https://snipboard.io/vbAzt9.jpg

https://snipboard.io/FAwXyW.jpg

Let me share your feedback with the team so they can review this section of the documentation.

Kind regards

Luis

I will try the code but if the option to close the slide-in after CTA is possible, I rather not use a close button, instead just have a single button that is linked to the target section on the page, which closes after the CTA (button clicked). However, the slide-in is not closing after the first button is pressed. The button simply stays on the active mode (purple colour).

My setting is: https://snipboard.io/mLk1Co.jpg

How can I close slide-in after CTA conversion?

• This reply was modified 1 year, 6 months ago by sarumbear.
• This reply was modified 1 year, 6 months ago by sarumbear.

I added the file hustle-scroll-fix.php that has the code in Github to the wp-content/mu-plugins folder but the scroll to top upon close still happens. Are you sure that is a code for a slide-in? It has the following line that suggests the code will only work on embeds.

if ( 'embedded' === $module->module->module_type ) {$html = str_ireplace( 'role="dialog"', 'role="form"', $html );}

I’m surprised that a plugin that has 100,000+ installs have issues with a CTA that points to a section on the page and close when the CTA is done.

• This reply was modified 1 year, 6 months ago by sarumbear.
• This reply was modified 1 year, 6 months ago by sarumbear.
• This reply was modified 1 year, 6 months ago by sarumbear.

Hi @sarumbear

Hope you are doing fine!

Since you’d like to include just one button, then you can use just enable the Close Slide after CTA conversion option(As you already did in the screenshot shared)

I set the delay to 1 second and this is how the slide in behaves on my end:
https://www.loom.com/share/572954f1348c42cc9801d1f333919d08

These are the settings I have used:
https://snipboard.io/omN2LU.jpg
https://snipboard.io/uSxGQA.jpg
https://snipboard.io/nKvYlS.jpg
https://snipboard.io/g83xdb.jpg

Please review the settings and let us know if the the slide closes after the CTA conversion as expected. If you still have issues even after this change, we’d recommend to run a plugin conflict test. ?Make sure you have a recent backup and perform this operation on your dev/staging site if possible. To learn more about a plugin conflict test, please see this guide below:?https://wpmudev.com/docs/getting-started/getting-support/#conflict-test.
Basically, you’ll need to deactivate all plugins, except Forminator and switch to a basic theme. Then verify if the issue persists. If it doesn’t then start activating the plugins/theme one by one until you identify the one causing the issue. Share the results of the conflict test to provide further help.

About the ’embeded’ defintion , in case you still want to use the code and the close button, please let us know so we can share with our development team to get additional advice.

Kind regards

Luis

I’ve imported the JSON file to a test site below and had only Hustle active on the site. The result is the same. The slide-in is not closing after CTA and the close button is sending the page to the top.

Test site URL: https://test.sarumbear.com/

JSON download link: https://www.dropbox.com/s/5prvqdryulfmewe/hustle-slidein-20230529-120357-the-willows-dental-practice-staging-whitening.json?dl=0

In your test page you are not targeting a section on the same page. Maybe that is the problem?

I can give you access to the test site if it will be of any help.

Hi @sarumbear

Thanks for response!

You are right, it’s about targeting the section on the page.

It’s actually related to the way browser works, where a click on such “internal anchor” doesn’t really trigger necessary events as, for browser, it’s bascially just “search inside already rendered page”.

A simple solution to this is to edit the CTA button in question and change it so the “Redirect URL” instead of just

#whitening

would be

https://test.sarumbear.com/#whitening

You would need to save updated slide-in and, quite likely, clear all cache on site (if there is any) but it should then work out of the box – from user’s point of view, the same way as there still will be no real redirect (just scroll down to section) but the CTA conversion will be triggered and slide-in will be closed.

Best regards,
Adam

This is what I have but CTA is still not closing the slide-in.

https://snipboard.io/mzF5tf.jpg

Tests failed on other devices that never visited the page before, including an iPad.

• This reply was modified 1 year, 6 months ago by sarumbear.

Hi @sarumbear

I visited your site again and I see you have changed it. It is supposed to work but now we are dealing there with another issue which is, apparently, a Divi conflict.

I noticed that Divi adds some even listeners to the click (and other) event related to those buttons and this seems to be conflicting.

This is a different issue (of which I wasn’t aware) and I actually could replicate this on my end now (knowing you are using Divi there). Take a look at this video, please, where I remove Divi-attached script from “click” browser event on your test site:

https://app.screencast.com/rarHhqQIRRPcq

Once removed, it works exactly as it should.

Specifically, it seems to be related to this line of one of Divi’s JS script:

t('a[href*="#"]:not([href="#"]), .mobile_nav').on("click", (function(e) {

This is “hooking up” to all the A (link) elements that contain # (hash) character and if I’m not mistaken it’s aimed to add some kind of “smooth scrolling” (but the code is executed even if this option is disabled).

—-

So we have confirmed Divi conflict here as I can also replicate this on my own setup. Unfortunately, I couldn’t find any relevant setting in Divi configuration (there’s none in Hustle as it wasn’t known issue until now) that could help.

Therefore, I’m afraid I don’t have a workaround for it for now (unfortunately, Divi uses plain “onclick” JS event rather than using “addEventLitener” method; which makes it more difficult to override).

But I have already reported it to our developers as a compatibility bug. They will further examine it and see if the fix for that can possibly implemented directly in Hustle plugin – if yes, they’ll include it in one of upcoming releases (though I’m not able to tell at this point which one).

Kind regards,
Adam

Hi @sarumbear

I hope you are doing well and safe!

We haven’t heard from you in a while, I’ll mark this thread as resolved.

Feel free to let us know if you have any additional questions or problems.

Best Regards
Patrick Freitas