Use javascript library from Woocommerce plugin

aitor · May 24, 2021, 2:32pm

I would like to use selectWoo JS library in my regular resources/scripts files of Sage 10 (bedrock framework). This library is distributed with Woocommerce and it is located at

web/app/plugins/woocommerce/asssets/js/selectWoo/selectWoo.js

Is it possible to use it in Sage 10 script files? Should I install another copy of selectWoo? I guess it is not a good practice.

Thanks.

strarsis · May 24, 2021, 3:30pm

For script files from these external libraries it would make sense to enregister them (using the plugin_dir_url method) and then enregister/+enqueue a script that makes use of that library as dependency.

aitor · May 24, 2021, 4:12pm

Ok, thanks for the answer. I want the libray functions available in my regular js files, not just inject the library in the page. I mean, something like import it to JS files in resources/scripts.

strarsis · May 24, 2021, 4:22pm

While you could do that I wouldn’t recommend that in this case.
The WooCommerce plugin ships with these library scripts and it would be better to enregister them as libraries and enqueue your own script with these as a dependency.
As the script is built during build time and the WooCommerce plugin and its libraries loaded during runtime, you would bake one particular version/release of the WooCommerce library into your theme script. What if WooCommerce fixes some issues in that library? Then you would have to rebuild your theme each time you updated the WooCommerce plugin, otherwise the baked-in code may stop working - even if the public interface of these libraries hadn’t changed.

You may find this tutorial/best practices guide for selectWoo from WooCommerce helpful:

github.com

woocommerce/selectWoo/blob/master/README.md

selectWoo
=======
selectWoo is a fork of [select2](https://github.com/select2/select2) with improved accessibility. 

selectWoo is also optimized for WordPress plugin development and is designed to be able to run alongside versions of select2 that other plugins may be using.

**Usage**: 

[Usage is the same as select2](https://select2.github.io/examples.html), but can also be initialized with `.selectWoo()`. `.select2()` initialization has been kept for full backwards compatibility. If other versions of select2 are potentially going to be running on the same site, initializing elements with `.selectWoo()` is recommended.

You can enqueue the select2 or the selectWoo js and css files in the dist folder. They are the same.

**Accessibility Testing**:

[Here are samples that can be used for accessibility testing.](https://woocommerce.github.io/selectWoo/accessibility-testing/)

aitor · May 24, 2021, 7:06pm

Thank you for the explanation, @strarsis, very clear.

system · July 5, 2021, 2:32pm

This topic was automatically closed after 42 days. New replies are no longer allowed.