Component Shortcode Doesn't Display in Topbar

Support
#1

Hi, I’ve created a staging site to do a few updates and I’m trying to add in a component shortcode to the topbar, but it’s displaying the code instead of the content! I don’t know if I’m doing something wrong, or whether the topbar just doesn’t support shortcodes. You used to be able to use global block shortcodes in the topbar, so I just assumed you could do the same with the component shortcodes.

Also, are you able to create a shortcode for the whole of the component, so it includes the row and responsive settings, or is it just an element within the component you can create a shortcode for?

Thanks!

#2

Hello @core365,

Thank you for the inquiry.

Shortcodes cannot be rendered in the Topbar content by default, but you can override the _topbar.php template in your child theme under framework/views/global/ , and use this code.

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>
<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>
  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo do_shortcode(x_get_option( 'x_topbar_content' )); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>
    </div>
  </div>
<?php endif; ?>

Let us know the result.

Best regards,
Ismael

#3

Hi @Ismael

Thanks for your quick reply! I appreciate you giving me the code, thanks!

I can’t find the file _topbar.php or the framework/views/global/ within the child theme. The only file I can find is themes/x/framework/legacy/cranium/headers/views/global/_topbar.php

Thanks!

#4

Yes, you have to copy the_topbar.php file from the parent theme, move it to the child theme’s framework/views/global/ folder, then do the modifications suggested above.

#5

Hi @Ismael

I’ve done it and it works, thanks!

Is it possible for me to use the whole component, so it includes the row and responsive settings, as at the minute it’s exported just the one element. I did try to replace the ID in the exported shortcode with the component ID I took from the component URL, but it didn’t work.

Thanks!

#6

Thank you for the update.

Are you trying to include the Row element in the component? Edit the component, right-click on the Row element, click Manage, give it a unique name or label, and toggle the Export Component checkbox. You can then copy the component shortcode.

Please check the documentation below for more info about components.

– https://theme.co/docs/component-builder-overview

Let us know if you need more assistance.

Best regards.

#7

Hi @Ismael

Yes, I wanted the row element included, so it would have all of the responsive settings with it, but it looks like it’s just exported the row and not the contents within the row! It’s not displaying the contact details in the topbar!

Ideally I’d like the whole of the component, so it includes the section, row, column and elements. Is there a way of exporting the whole component?

Thanks!

#8

Yes, you have to check the Export Component option as described above. However, before doing so, you need to deactivate the elements that were previously exported as components. Simply edit the element, uncheck the Export Component option, then manage the Section, give it a unique name or label, and export it as a component.

#9

Hi @Ismael

Ah ok! I didn’t realise you had to deactivate the other element beforehand.

Thanks for all your help!

#10

No problem! Let us know if you have more questions. Have a nice day.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.