How to add a Link to Feature Boxes

[FurtFan86]

Hello,

I tried to put Link on a whole feature box, as in this example: https://theme.co/apex/forum/t/code-snippet-add-a-link-to-feature-boxes/273

Unfortunately it does not work. Did I do something wrong?

This is the Website: http://relaunch.zarling.de/

You find the Feautured Box under “Portfolio”

[friech]

Hi There,

Thank you for writing in, since you are using icon and not an image, on the code provided remove the img on this part: .find('.x-feature-box-graphic-inner img')

e.g.

jQuery ( function( $ ) {

  $('#linked-feature-box .x-feature-box-text a:last-child').each( function() {
    $( this ).parent().parent().parent().find('.x-feature-box-graphic-inner').wrap( '<a href="' + $( this ).attr('href') + '"></a>' );
    $( this ).remove();
  } );

} );

Add the code on the Page > JS area.

Make sure to add the link URL on the HREF field, and add random text on the Link Text field.

Hope it helps,
Cheers!

[FurtFan86]

Thanks, it works. Is it possible to link the whole box?

[nabeel]

Hi again,

Try replacing the previous code with the following one:

jQuery ( function( $ ) {

  $('.x-feature-box').each( function() {
	var link =  $(this).find('.x-feature-box-text a').attr('href');
	if(link != undefined) {
		$( this ).wrap( '<a href="' + link + '"></a>' );
    	$(this).find('.x-feature-box-text a').remove();
	}
  });

});

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[FurtFan86]

No, it does not work.

Here is a login for you. You will find the Box in Sites/Demo: Home under the Headline “Portfolio”.

Can you explain what went wrong if you find the mistake?

[nabeel]

Hi again,

Thank you for providing the credentials. I checked your JS and I see you didn’t replace the code entirely that’s why it wasn’t working for you. I went ahead and replaced it with the code provided above and it’s working fine now.

Please clear your browser’s cache and check your homepage again.

Cheers!

[FurtFan86]

Ok, there was a misunderstanding. Your code makes each box a link, right? I had discovered a code of one of your colleagues, which refers to an ID of a box, so that you can address each one individually. But then a code snippet would have to be used for each box, right?

[FurtFan86]

But for the moment that’s enough. I just wanted to know how the code would look for every single box.

[paul.r]

Hi,

Yes, if you are targeting an id, you will need a code snippet for each box.

Thanks

[FurtFan86]

Tanks a lot, You can close this Topic.

[paul.r]

You’re welcome!