Add menu with icon in front of it and add code for pop up lightbox

Dear @RueNel,

Thank you for you reply.
I copied your icon code but with me it only shows: &#xf218 Cart
No icon?

Your YouTube video is very clear. Thank you for adding it. This helps a lot.

Can it be that there is a typo in your icon code and that’s the reason it isn’t showing any icon with me?

The code for the lightbox I want to use: see example in secure note

Hi There,

Did you remove the FontAwesome icon from your menu item? I couldn’t see it anymore. Would you mind providing us with your admin account so we can take a closer look?

Please this code javascript:openSWPortal() to the href field of your menu item:

Hope it helps :slight_smile:

Hello,

Maybe it was shortly removed. Now the FontAwesome icon is there.

The href field of the menu item will no save the code when I save it.

Is it possible that playing with the Menu Custom Links is messing up things? It’s is the second time that after saving I look how it looks on site that the whole menu is gone or partly gone. The settings for Primary Menu and Footer Menu are also erased. On the staging site then I get: Assign A Menu? If I set the Primary again then not everything will show again.

Hi @smart_x,

Looks like it’s not allowed by Wordpress, been trying too with a different format and it’s working.

But this process of saving shouldn’t remove any existing menu’s configuration. And, please re-assign them again.

As for the code, please try adding this code to your global custom javascript (Theme Options > JS)

jQuery ( document ).on('click', '.custom_menu_trigger a', function(e) {
e.preventDefault();
e.stopPropagation();
openSWPortal();
} );

Then simple add custom_menu_trigger to your menu item’s class.

Thanks!

Hello Rad,

Thank you for your reply.

  1. Icon in menu with Font Awesome
    < i class=“x-icon” data-x-icon="&#xf128" aria-hidden=“true”> < /i> Test
    (extra space before i and /i)
    Isn’t showing any icon. What did you change in a different format?

  2. Pop up lightbox with code on menu click
    Your solution for adding the code to the theme Options JS and then add custom_menu_trigger to the menu item’s class is working (see also secure note).

  • Will this method also keep working after updates? Or does it need to be in the child theme?
  • Can I use the custom_menu_trigger class also for creating a button?

Hi There,

I would like to check your website but the username/password is incorrect. Could you please double check?

You have to setup a chid theme: https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57

After that add this custom code under functions.php file locates your child theme to make the Javascript code work:

add_action( 'wp_head', 'x_print_custom_script' );
function x_print_custom_script(){
  ?>
  <script src="https://*****/start.php"></script>
  <?php
}

Then update the custom JS to this code:

jQuery ( document ).on('click', '.custom_menu_trigger a, .my-button-class', function(e) {
     e.preventDefault();
     e.stopPropagation();
     openSWPortal();
} );

Don’t forget to add the my-button-class to your buttons:

Hope it helps :slight_smile:

Hi Thai,

See secure note

@thai @Rad @RueNel

Please read my secure note

Hi There,

I’ve removed your website URL from the code.

@Rad and I were still unable to login to your website.

Could you please double again?

Thank you very much.

Did you try on live or test site?

Do I edit the functions.php from my child theme through FTP?:

wp-content/themes/x-child/functions.php

And If I open this functions.php file can I add the custom code anywhere in the file?
Does in need to start with //?

Where do I find the Custom JS? I only found the Global JS under Theme Options.

Do I edit the functions.php from my child theme through FTP?:

wp-content/themes/x-child/functions.php

Yes, the path is correct and you need to edit through FTP

And If I open this functions.php file can I add the custom code anywhere in the file?
Does in need to start with //?

You can add the code provided after this line

// Additional Functions
// =============================================================================

eg.

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to Pro in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );



// Additional Functions
// =============================================================================

add_action( 'wp_head', 'x_print_custom_script' );
function x_print_custom_script(){
  ?>
  <script src="https://******/start.php"></script>
  <?php
}

Where do I find the Custom JS? I only found the Global JS under Theme Options.

That’s correct, you need to add code in Theme Options > JS

Hope that helps

Hi X team,

Thank you for explaining.

What about the live or test site?

Hi There,

The Font Awesome version 5 they split icons into multiple fonts. This can be fixed by changing instances of the data-x-icon attribute to one of the following:

  • data-x-icon-b for social icons.
  • data-x-icon-o for outline icons.
  • data-x-icon-sfor solid icons.

So the correct HTML should be:

<i class="x-icon" data-x-icon-s="&#xf128" aria-hidden="true"> </i> Book online

I’ve also seen the popup is working fine now.

Cheers!

Hi X team,

Before I continue… I want to say that you deliver great support. You guys have so much patience. Thank you for that!

The code didn’t work. I changed it to:
<i class="x-icon" data-x-icon-s="&#xf128;" aria-hidden="true"></i> Book online
This works.

About the popup there is still something strange. See secure note.

Hello There,

When I clicked your “Book” menu item, this is what I am seeing.

Is this incorrect? What do we expect to see in this page? Could you please give us a mock layout or explain a little further?

I have unlisted this thread so that only you and our staff can read the responses.

Thank you.

Maybe the problem is that I have already too much trial codes everywhere on my homepage and in the navbar? Is that possible? Because later on on my live site I maybe would like to add buttons for booking per separate location. So through the Menu booking a choice popup and through buttons a location popup.

I didn’t change anything from the instructions of you guys, all is still the same. I tried one time this code on a link. Then I deleted all trials from my staging site. Now it opens with the screen where I can choose. I find it complicated to understand on what the code decides which screen to open. Specially because I didn’t change anything on you instructions.

[code]

Online reserveren

[/code]

We have multiple locations. There for I have 3 different options for the booking code.
1 for location “Jordaan”:
<script src="https://sunfitbeautycare.salonware.nl/start.php"></script>

2 for location " De Pijp":
<script src="https://sunfitbeautycaredepijp.salonware.nl/start.php"></script>

3 for location option choice:
<script src="https://sunfitbeautycaremain.salonware.nl/start.php"></script>

I expect to see this popup:

It belongs to:
<script src="https://sunfitbeautycaremain.salonware.nl/start.php"></script>

Now I get this one when clicking on “Book” menu:
<script src="https://sunfitbeautycare.salonware.nl/start.php"></script>

Hello There,

If the trigger is only openSWPortal(), then there is a problem because you have 3 lightboxes with three different contents. There must have a different trigger so that we will know which one to open in the lightbox. And please keep in mind that you cannot launch a lightbox within a lightbox.

I would recommend that you add further suggestion from the creator of the booking software. You may need to tell them what you have in mind and they should be able to resolve this issue for you.

Please let us know how it goes.

Hello X Team,

I don’t want to open 3 different lightboxes from the Menu “Book”. Just one. The one with the option to choose a location.

Was the reason that on your instructions the wrong lightbox popped up that there was already a lot of trial code on my site? I understand that you are not the creator from the booking software. But I would like to understand how it works. Because according to your instructions I added the script code to the functions.php and the trigger to the Custom JS. So if I edit the script code in the functions.php this should effect the trigger in the Custom JS.

Hello There,

The book now menu item is already launching the lightbox with the selection to choose the location.
This is what I am seeing:

You may have resolved the issue already. Please let us know.

Hi X team,

Yes you are right the book now menu item is launching the lightbox with the selection to choose the location now.

But I don’t really understand how and why. Like I said in my previous post I didn’t change anything on your instructions. I only removed other trials.