While developing a new site, I noticed that the MixItUp plugin I was using was having issues with Turbolinks. As you might be aware of, jQuery and Turbolinks tend to have some issues when it comes to loading on pages that use turbolinks. The first though I had was to use jquery.turbolinks which usually solved a majority of my jQuery + Turbolinks issue — however this wasn’t the case with MixItUp. After doing a bit of research, I came across an issue that was posted on the MixItUp github issues, which clearly outlined the resolution. In a nutshell, you’ll basically need to destroy the instance that was created from the first mixitup call, and recall it on a ‘page:load’. You can read more about it here.
When dealing with tables, majority of them will have a checkbox in the first column. In order to make it a little bit more user friendly, it is always nice to be able to tick the checkbox no matter where you click on that row – and we can do that very easily with some JavaScript! It is as simple as that. The JavaScript It is as simple as that! The second line basically triggers a click when a TR (row) element under the table class “dataTable” is clicked.
A friend of mine was editing her Shopify files to try and add a “View Product Details” button, that would toggle the specific products description. She asked for my help on how this could be achieved and I decided to share it for everyone to view! The HTML The JavaScript Now whenever you click on “View Product Details”, it will toggle its siblings with the class “prod-details”. A simple read-more toggle!