CMS Development

antp_dev
Participant

Using Third-Party Library in Modules

SOLVE

Hi there 👋,

 

I'm customizing an existing module that is pulling in blog posts and filtering posts by tags. I'm aiming to use the mixitup library to provide better filtering animations and functionality. After I read the documentation I'm uncertain how to get the library inside the HubSpot environment. 

 

I used npm to install the components locally and I see the node_modules folder but not sure if those get pushed up into the HubSpot environment.

 

If anyone has a solution or can point me in the right direction, that'd be greatly appreciated.

 

 

0 Upvotes
2 Accepted solutions
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Using Third-Party Library in Modules

SOLVE

Hi @antp_dev

 

to be clear: you don't need a new theme. 

 

Adding mixitup(or any other 3rd-party framework) is quite easy as long as you have full theme access(which you have by creating a child-theme).

 

You can:

  • add a <script>-link to your base.html
  • add a new JS file to your theme and copy/paste the whole script into it and add this script/file to your base.html or module
  • upload the JS file to the file-manager and link it in base.html or module

 

If you want to create a custom blog listing with mixitup I'd recommend to create a custom module(it might be easier). It could look something like this:

 

{# start script import #}
{% require_js %}
<script src="/path/to/mixitup.min.js"></script>
<script>
{# place your mixitup config here #}
</script>
{% end_require_js %}
{# end script import #}

{# start module #}
{% set rec_posts = blog_recent_posts("default", 9999) %}
<div class="container">
{% for rec_post in rec_posts %}
    <div class="mix">
      <div class="post-title">{{ rec_post.name }}</div>
     </div>
{% endfor %}
</div>
{# end module #}

 

Also: take a look at the possible functions in the docs. I used blog_recent_posts in this example.

 

best, 

Anton

Anton Bujanowski Signature

View solution in original post

antp_dev
Solution
Participant

Using Third-Party Library in Modules

SOLVE

Hi @Anton,

 

I found out that since the package was within a node_modules folder that all files/folders were being ignored. I took them out of the node_modules folder and was able to successfully upload them to the Design Manager.

 

I will continue to work on it based on your original suggestion. 

 

Thank you! 

View solution in original post

0 Upvotes
4 Replies 4
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Using Third-Party Library in Modules

SOLVE

Hi @antp_dev

 

to be clear: you don't need a new theme. 

 

Adding mixitup(or any other 3rd-party framework) is quite easy as long as you have full theme access(which you have by creating a child-theme).

 

You can:

  • add a <script>-link to your base.html
  • add a new JS file to your theme and copy/paste the whole script into it and add this script/file to your base.html or module
  • upload the JS file to the file-manager and link it in base.html or module

 

If you want to create a custom blog listing with mixitup I'd recommend to create a custom module(it might be easier). It could look something like this:

 

{# start script import #}
{% require_js %}
<script src="/path/to/mixitup.min.js"></script>
<script>
{# place your mixitup config here #}
</script>
{% end_require_js %}
{# end script import #}

{# start module #}
{% set rec_posts = blog_recent_posts("default", 9999) %}
<div class="container">
{% for rec_post in rec_posts %}
    <div class="mix">
      <div class="post-title">{{ rec_post.name }}</div>
     </div>
{% endfor %}
</div>
{# end module #}

 

Also: take a look at the possible functions in the docs. I used blog_recent_posts in this example.

 

best, 

Anton

Anton Bujanowski Signature
antp_dev
Solution
Participant

Using Third-Party Library in Modules

SOLVE

Hi @Anton,

 

I found out that since the package was within a node_modules folder that all files/folders were being ignored. I took them out of the node_modules folder and was able to successfully upload them to the Design Manager.

 

I will continue to work on it based on your original suggestion. 

 

Thank you! 

0 Upvotes
ChehakWadhdwa
Member | Diamond Partner
Member | Diamond Partner

Using Third-Party Library in Modules

SOLVE

Hey @antp_dev

 

Please refer this doc to upload your content from local to hubspot environment

 

https://docs.google.com/document/d/1XNHBU3EW7kdv26Qyt-n_f3lFPT8PlLIpvoQc5gcqFpk/edit

 

 

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

0 Upvotes
antp_dev
Participant

Using Third-Party Library in Modules

SOLVE

So do I need to initialize a new theme? I created a child theme and I am trying to add functionality to the child module. 

 

When I try to run hs upload <local_src> <hubspot_src> I get a success message within the CLI but no node_module folder is actually being pushed to the environment. 

0 Upvotes