[Resolved] Shortcodes with Elementor Pro

[Author]

Posts

[John Cook]

Elementor supports Toolset and Shortcodes. The following shortcode displays the following:

[types field='start-date'][/types] - [types field='end-date'][/types] at [types field='start-time-evenings'][/types] <span style="font-size:75%;">(matinee at [types field='start-time-matinee'][/types])</span>

January 19, 2018 - January 27, 2018 at 8pm (matinee at 2.30pm)

PROBLEMS
I'd like it to appear as follows:

19th - 27th January 2018 at 8pm (matinee at 2.30pm)

I only want the year to appear after the end-date month

I want the start-date Month to appear ONLY IF it is DIFFERENT to the end-date month.

19th January - 27th March 2018 at 8pm (matinee at 2.30pm)

AND the (matinee at 2.30pm) text ONLY to appear IF there is a matinee time entered

Can this be done?

SAME URL:
hidden link
hidden link

Thanks

[Waqar]

Hi John,

Thank you for contacting us and I'll be happy to assist.

The Toolset types shortcode supports "format" attribute for the date field, which can be used to output the date in any format:
https://toolset.com/documentation/customizing-sites-using-php/functions/#date
https://codex.wordpress.org/Formatting_Date_and_Time

This can be combined with the conditional output blocks, to achieve the desired results:
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/

For example, you'll first need two separate conditional blocks to show the dates in each case:

1. When the months are the same
2. When the months are different

[wpv-conditional if="( '[types field='start-date' format='F'][/types]' eq '[types field='end-date' format='F'][/types]' )"]
[types field='start-date' format='jS'][/types] - [types field='end-date' format='jS F Y'][/types] at [types field='start-time-evenings'][/types]
[/wpv-conditional]

[wpv-conditional if="( '[types field='start-date' format='F'][/types]' ne '[types field='end-date' format='F'][/types]' )"]
[types field='start-date' format='jS F'][/types] - [types field='end-date' format='jS F Y'][/types] at [types field='start-time-evenings'][/types]
[/wpv-conditional]

Likewise, you'll need a third conditional block to check the value for matinee field and only print it, if not empty:

[wpv-conditional if="( '[types field='start-time-matinee'][/types]' ne '' )"]
<span style="font-size:75%;">(matinee at [types field='start-time-matinee'][/types])</span>
[/wpv-conditional]

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[John Cook]

Hi Waqar, thanks for taking this one one.

The conditional code you sent is not working but it seems even though 'shortcodes' ARE working but just conditional codes are NOT

Please see this quick 3 min video explaining the issue.

hidden link

Thanks again

John

[Waqar]

Hi John,

Thanks for writing back and for sharing the screencast.

That screencast was very useful and it seems that the "Heading" widget that you're using to test the shortcode has a limitation that it can't render nested shortcodes.

In my tests, I was able to reproduce this same behavior with the "Heading" widget, but the same shortcodes work correctly if used inside a regular "Text Editor" widget.

Backend screenshot:
hidden link

Frontend screenshot from two different posts:
hidden link
hidden link

I hope this helps.

regards,
Waqar