overwrite jquery version

After telling dozens other extension developers how to correctly load your own version of jQuery in Joomla, we got this week into a conflict with a big community extension. They just load their own copy without care. So it's time to write a blog post how to do it correctly. A side note. In this post we provide very simplified code examples, they should give you a starting point. Please read the Joomla docs carefully and also the Joomla core code itself, that you know what you are doing.

How to load jQuery

The Joomla CMS comes with it's own unmodified jQuery script in version v1.12.4. When loaded, it executes it in no conflict mode together with jQuery migrate to be compatible with older versions. So every extension which needs jQuery in Joomla MUST load it with the following PHP code. This ensures that the right jQuery script is loaded only once.

JHtml::_('jquery.framework');

More documentation can be found in the official docs

The Problem

When you are loading in your extension a jQuery plugin, then you do it mostly that way:

JHtml::_('jquery.framework');
JHtml::_('script', 'com_foo/myJqueryPlugin.js', array('version' => 'auto', 'relative' => true));
JFactory::getDocument()->addScriptDeclaration("jQuery(document).ready(function() {
	jQuery('#selector').myJqueryPlugin();
})");

In Joomla are all Javascript files loaded from all extensions before the inline Javascript code. When after your extension is executed another one is loading it's own copy of jQuery like:

JHtml::_('script', 'com_bar/jquery-3.2.1.min.js', array('version' => 'auto', 'relative' => true));

Then the head will look like

<head>
<script src="/media/jui/js/jquery.js?56690c624209a47cb536df0eac0a28f3"></script>
<script src="/media/jui/js/jquery-noconflict.js?56690c624209a47cb536df0eac0a28f3"></script>
<script src="/media/jui/js/jquery-migrate.js?56690c624209a47cb536df0eac0a28f3"></script>
<script src="/com_foo/js/myJqueryPlugin.js"></script>
<script src="/com_bar/js/jquery-3.2.1.min.js"></script>
jQuery(document).ready(function() {
	jQuery('#selector').myJqueryPlugin();
})
</head>

This would result in the Javascript error "Function myJqueryPlugin not found". The problem is that the second load of jQuery overwrites the first global jQuery object where the plugin myJqueryPlugin is attached to. So all plugins do not work anymore which are attached to the old jQuery object.

The solution

So why this strange way of loading jQuery trough JHtml? It offers the possibility to overload that function in a plugin. What you have to do is to create a Joomla plugin according to the docs for the group system. Then add a function onAfterInitialise and register your own jquery service like in the following code snippet:

public function onAfterInitialise()
{
	JHtml::register('jquery.framework', function ($noConflict = true, $debug = null, $migrate = true) {
		JHtml::_('script', 'com_bar/jquery-3.2.1.min.js', array('version' => 'auto', 'relative' => true, 'detectDebug' => $debug));

		// Check if we are loading in noConflict
		if ($noConflict)
		{
			JHtml::_('script', 'jui/jquery-noconflict.js', array('version' => 'auto', 'relative' => true));
		}

		// Check if we are loading Migrate
		if ($migrate)
		{
			JHtml::_('script', 'jui/jquery-migrate.min.js', array('version' => 'auto', 'relative' => true, 'detectDebug' => $debug));
		}
	});
}

This ensures that only your jQuery script is loaded. It reduces the page size as not two jQuery scripts are loaded and it will not break all other jQuery based extensions. The head of your page will then look like:

<head>
<script src="/com_bar/js/jquery-3.2.1.min.js"></script>
<script src="/media/jui/js/jquery-noconflict.js?56690c624209a47cb536df0eac0a28f3"></script>
<script src="/media/jui/js/jquery-migrate.js?56690c624209a47cb536df0eac0a28f3"></script>
<script src="/com_foo/js/myJqueryPlugin.js"></script>
jQuery(document).ready(function() {
	jQuery('#selector').myJqueryPlugin();
})
</head>

So we at Digital Peak hope that all extension developers are on the same page and the jQuery errors are history. Time no to turn vanilla :-)

dpcalendar 613 months after DPCalendar 6.0 was shipped, which was the biggest version in the era of DPCalendar, we are proud to ship the next update with some amazing new features. Especially the booking system got tons of new options to adjust it to your needs. Additionally a long standing feature to disable the end date can now be defined on a per event level. Read on for detailed explanation of the main features.

New booking options

Our booking system had already a good amount of functionality and we see an increasing list of web sites, from small to big, which are using it extensively. Appetite comes with eating, so there was demand for more advanced features. And here we go.

Booking form

The order of the fields can be defined in the booking form, including the custom fields. The fields which are not defined in the order list will be appended automatically. Additionally you can define if the default fields should be required, optional or hidden in the booking form. The name and e-mail field can't be changed as they are required anyway.

Booking layout

The booking layout has similar options as the form. You can define which fields should be shown or not and in which order they should be displayed. Additionally we show the booking custom fields on more places like the confirmation mail or the bookings list.

Booking system

The booking system allows now fine tuning of the confirmation mails. You can define the body of the mail with the standard Joomla Wysiwyg editor, as default, a language string is used for multilanguage support. And you can define which mail should be sent out with which attachments. Also the invitation to register can be disabled for guest bookings.

booking options

Hide the events end time

Over the years, one of the most requesting feature was to have the possibility to hide the end time of an event. As this is a very difficult task, because DPCalendar offers CalDAV access with a built in server and ical export, an end time is always required. But at the same time we take the feedback of our customers very seriously, so we were looking for a way to support both worlds. There is now a new option when editing an event to hide the end time. You still have to fill an end time, but on DPCalendar in your Joomla site it will be then hidden.

event hide end time

Small improvements and bug fixes

Beside the great new features, we fixed some bugs and added many little goodies to DPCalendar to make your life as administrator easier and to offer your visitors a neat event experience. The following list represents the full changelog of the new 6.1 version:

  • [#4078]   Deaktivate parts of booking form
  • [#4913]   date-icons as option in list view
  • [#5144]   Option to not send ICS file in booking mails
  • [#5145]   Option to not send the invoice file in booking mails
  • [#5146]   Option to not send the ticket files in booking mails
  • [#5147]   Disable registration after booking for guests
  • [#5150]   Option for the booking mail body
  • [#5151]   Support custom fields in booking confirmation mail
  • [#5162]   Add options to hide the booking and ticket fields in the layouts
  • [#5176]   Make forms text fields full width
  • [#5173]   Show date before time on timed events
  • [#5120]   Add missing parameters from component from calendar view to mini module
  • [#5127]   Add parameter to not show the event end time
  • [#5143]   Default menu item for events in upcoming module
  • [#5153]   Change order of booking and ticket fields
  • [#5157]   Offer bookings link in event detail page
  • [#5158]   Show custom fields in bookings list
  • [#5160]   Hide ticket form fields
  • [#5165]   Option to disable the booking confirmation mails
  • [#5174]   Price label not displayed
  • [#5096]   Event link not generated correct on Jomsocial wall
  • [#5116]   Render back end views always with BS2
  • [#5117]   Compact mode spans every day till end of month
  • [#5129]   Email button does not open new window
  • [#5133]   Quick Create event form sets wrong date
  • [#5136]   Google Calendar: A location has the same alias on recurring events
  • [#5148]   Event and calendar link in map not correct
  • [#5152]   Editing a booking clears the custom fields
  • [#5167]   Link to calendar date option is not working
  • [#5178]   Map module search box overlaps on small module positions

How to upgrade?

We tested this version extensively, so you can be safe when upgrading. Just install the whole package from our download site or trough the Joomla update manager, DPCalendar will take care about the rest. As in respect to our backwards compatibility promise, there are no changes in this version which will break your existing layout overrides or require special attention from you.

BUT we recommend always to make a backup first and do the upgrade on a test clone of your production site to have no unexpected downtime. Also clearing the Joomla cache is a good advice when upgrading extensions in general, not just when upgrading the Joomla CMS. 

Kind regards

Allon Moritz aka laoneo
Founder of Digital Peak

jandbeyond 2017

Allon did attend another great J and Beyond conference, a place where the geeks do meet. He hold two sessions about the new media manager in Joomla 4 and how to migrate your extension to Joomla 4.

Prepare your extension for Joomla 4

Slides can be found here.

Status New Media Manager

Slides can be found here.

dpcalendar 6

Shortly after Joomla 3.7 was released, we are happy to announce DPCalendar 6.0. Our new cutting edge version of one of the best Joomla calendar and event manager comes with some amazing new features. We use the kickass new custom fields library, which is by the way donated by us to the Joomla community. Beside that we were revamping the whole template layer of DPCalendar to work with any major CSS frameworks like Bootstrap 2/3/4 or UiKit, as well as Font Awesome for icons. More on that later.

Additionally we are preparing slowly for Joomla 4, but this will be covered in another blog post. First we want to introduce our new major features of DPCalendar 6. Enjoy reading.

New template layer

Till now we have already out of the box support for Bootstrap 2 and 3, but we were still shipping  a namespaced bootstrap 2 version which can be activated in DPCalendar when the template didn't fit into the bootstrap stack. We got rid of that and refactored the whole templating layer of DPCalendar to work natively with any major CSS frontend framework like Bootstrap 2/3/4 or UiKit. But that's not all, want to be ready for the future as well when old ones get deprecated and new ones arise or custom elements get implemented. Means our templating layer is made that way, adding a new CSS framework or icon set requires us minimal code changes and they will affect all views and layouts in DPCalendar. This step is needed as Joomla itself will not be backwards compatible across major versions when we do bootstrap major shifts. More on that problem can be read here.

Additionally we have been moving any part in DPCalendar which produces output to a layout. We went even so far that the forms for events, locations, bookings and tickets are rendered by the same layout on the front and back end.

dpcalendar 6 template layer

New location views

There are two new views available. A locations view which shows all configured locations in DPCalendar and a location details view which shows the information about a location and the upcoming events. The event details pages does not link anymore to Google maps directly, instead of to the location details page. For every menu type additional parameters are available to define the initial latitude and longitude as well as the zoom factor.

Under the hood we refactored the code the way, that we can integrate more maps libraries like OpenStreetMap. But we open that door in a future release.

dpcalendar 6 locations

Updated libraries

  • Calendar library
    We have updated our Javascript calendar library. Beside some performance improvements, it comes with a new list view which has a fresh look and some nice little features. You can define business hours, working days and when there are too many events on a day, then a readmore button is shown.
    The mini module has now the same calendar options as the menu item
  • CalDAV
    We updated the CalDAV library to be able to integrate more features in the future like calendar sharing or scheduling.
  • Google attachments
    The Google calendar API serves now attachments from Google Drive. The DPCalendar Google plugin integrates them nicely in the event details page.
  • Payment gateways
    The payment libraries got a version shift. Like that we can talk now with paypal through their Rest API as well.

All Javascript and CSS files are now in the media folder and can be overriden in the template when desired.

dpcalendar 6 multiple

Joomla custom fields

As DPCalendar was already working fine with DPFields, it supports now out of the box the Joomla custom fields. That's why DPCalendar 6 is only compatible with Joomla 3.7. If you want to have a look how all of that works, then we suggest to check out our demo site. We prepared a series of events for you where you can see how it works. On the back end you can also play around with the custom fields to get a feeling for it. Basically it works the same way as with the core, eg. articles or contacts.

We support custom fields for events, locations, bookings and tickets.

dpcalendar 6 custom fields

Small improvements and bug fixes

Beside the great new features, we fixed some bugs and added many little goodies to DPCalendar to make your life as administrator easier and to offer your visitors a neat event experience. The following list represents the full changelog of the new 6.0 version:

  • [#3261]   Event limit option
  • [#3274]   Map of locations as menu link
  • [#3563]   Location list menu item
  • [#4071]   Business hours
  • [#4272]   Support multiple frontend frameworks
  • [#4422]   Attachments - Google Calendar
  • [#4462]   Mini module should have the options like the component
  • [#4090]   Move calendarlist JLayout to view layout
  • [#4126]   Upcoming: Modern calendar icons
  • [#4170]   Events from subcalendar are fetched in parent calendar via CalDAV
  • [#4178]   Add option to hide only capacity used
  • [#4181]   Show prices inline in edit form
  • [#4187]   iCal name is not human readable
  • [#4199]   Save and copy on front end
  • [#4208]   Email notification subject not according to content
  • [#4214]   Calendar view, define which views to show
  • [#4244]   Option to disable default to list view on small screens
  • [#4255]   Using Joomla lib to render tabs
  • [#4263]   Optimize CalDAV client sync
  • [#4308]   New location from frontend with gps cords.
  • [#4451]   Clicking from the mini calendar defaults to "Day" view
  • [#4465]   Ability to set a default calendar category when adding
  • [#4500]   Show current time as line
  • [#4537]   Caldav acl privileges - Edit own + delete not possible
  • [#4556]   Event details page, consider the address setting
  • [#4583]   Use the same layout on the front and the back end
  • [#4628]   Joomla custom fields integration
  • [#4644]   Remove duplicate dpcalendar string from plugin names
  • [#4670]   Remove DPFields support in favor of Joomla custom fields
  • [#4569]   Lat/long input not validated in backend
  • [#4635]   Booking Details created time incorrect

How to upgrade?

We tested this version extensively, but we expect some bugs in the next weeks as we have rewritten every single line in the template and layout files (there are over 1'000 files touched). So please make a backup before you do the upgrade! The template overrides will not work anymore, so please remove them from your templates HTML folder. After these steps are done, you can install your downloaded DPCalendar 6 package through the extension manager or update it through the extension update functionality.

The 5.x series changes now to maintenance mode. This means, when critical bugs appear or security issues do arise, then we will make patch releases for the 5.x series. No new features will be released, our full focus goes to version 6.

This release took us longer than expected, but it was worth the effort and time we put into this version. You as valuable user of DPCalendar will have a great new calendar and event experience for Joomla for many years!

Kind regards

Allon Moritz aka laoneo
Founder of Digital Peak

future dpfiels

As you probably know, DPFields is the base for the new Joomla 3.7 custom fields feature. Most of you are eagerly waiting for the migration to Joomla custom fields. So we want to explain the process and clarify the future of DPFields in this blog post.

The diff to Joomla custom fields

Since the merge of the custom fields feature in October 2016, we have been working heavily to stabilize it. During that time the community decided to skip some of the features we have already shipped with DPFields. For example the Gallery plugin is not available in core anymore or the templating functionality to render the fields inside the article description. One of the biggest changes was to move from categories to it's own entity for field groups, which do complicate the migration very much. More on that a bit later.

On the other side some new features have been added to custom fields. The biggest one is the move to fields plugins. Beside that some minor changes do have happened on the database schema and in the logic which will affect the migration path.

The migration

For a long time after the merge it looked like that the migration will just be a database table rename and all is good. But with the changes from categories to their own field groups, a lot of logic needs to be implemented on the DPFields side to make a painless migration. Not even to mention taking care of all the ACL settings. So it will take us a bit of time to make a proper migration script.

But don't worry, we will come up with a solution as we are using DPFields in production by ourselves and want to migrate to Joomla custom fields as well.

What happens to DPFields?

As we mentioned earlier, the core doesn't have the same feature set as DPFields has. So we will not shut down DPFields. We will make DPFields a product on top of Joomla custom fields with more features. This means, that we migrate the DPFields fields to com_fields fields under the hood. Additionally we have planed to offer dynamic content types and some new field plugins. All of that needs some time for development, so follow us on Twitter for latest updates. The core of DPFields will be forevere free of charge, that the users will have a painless migration to Joomla custom fields. Perhaps we will add then in the future some Pro features, but this is not decided yet.

Happy Digital Peak team

After all the positive feedback about Joomla custom fields, the Digital Peak team is very happy that we brought it into the core. It costed us a lot of energy, resources and time, but at the end we are still convinced that it was worth it. We are sure that Joomla is now on a good track and that it will help a lot of web site administrators and site integrators to spice up their site. We felt a new vibe of motivation in the community and with the plugin based approach we are sure that to Joomla eco system will come up with amazing new custom fields plugins.

So enjoy the new Joomla custom fields!

Allon Moritz
Founder of Digital Peak