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.
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 #}
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.
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 #}
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.
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.