What is the best way to add a theme from Themeforest

Hi, I bought this amazing theme named Jugas on ThemeForest, but I am having a really bad time trying to add it to Meteor, the main problem is with the handling of the jquery files, I tried using differente packages like Wait-On lib, and the preloader package but still no luck to getting it to work 100%. Do anybody has an easier way or knows how I can get this theme into Meteor? Thanks in advance. :wink:

I recently integrated a different theme, also bought on a site like ThemeForest. I had to work through some issues as well, and maybe if you ask very specific questions I can help point to the answers.
In the end I did not need any special packages to help me load everything as required by the theme, so there’s not much I could point you to that would instantly help a lot.

EDIT: Just checked the commit history. I had to do some namespacing to avoid clashes, and generally move some things around in the JavaScript, so things would be loaded / called at the right times. Plus a few css fixes so it wouldn’t clash with another CSS framework that I wanted to use in parallel (Semantic UI).

Thanks for the reply, that is what I am doing right know, trying to add each library at a time to check for errors, :wink:

I ran into a similar issue today though not with a theme but with jquery plugins. The biggest problem I had was how the files were loaded, in what order, and when certain objects were initialized.

I solved the file order by creating a local package and listing the files in the order I needed. Then I had to modify some of the code that called the various methods of the plugin. This had more to do with the original file not exposing certain properties outside of itself so some quick and dirty refactoring allowed me to get it running using the comparability folder on the client.

Basically it took a decent amount of work to get it working and I think I could have written it from scratch using a “Meteorcentric” approach faster. The biggest hurdle was templates and how and when they render the DOM. If you’re using the onRendered callback in a template that has a subscription there’s a chance that the jquery is trying to be initialized on a DOM selector that doesn’t exist yet. I could be wrong on that but from my observation onRendered fires whether the data is all there or not from a subscription. To solve this issue I used the subsReady callback in FlowRouter. I believe Iron has a similar callback.

Without seeing the files its hard to give you an exact answer but the combination of loading the jquery files in the comparability folder or in a package, converting any in-page variables to global variables and figuring out which template needed to be used to call the functions is how I get templates like that moving. There are many many more talented developers on here who may have a more native approach but for me, a little luck and patience seems to work.

1 Like