How to create functionality using Polaris CDN

Retired Boards Appdev Store Design

Topic summary

Main issue: HTML markup styled with Shopify Polaris via CDN has no built-in interactivity; the author asks if JavaScript/jQuery is required and how to embed it.

Guidance provided:

  • Yes, add JavaScript to enable dynamic behavior.
  • Include a script tag before to load a custom JS file.
  • Use event listeners (e.g., element.onclick = …) to handle interactions.
  • Optionally include jQuery via its CDN, then attach handlers with $(document).ready and .click().
  • If using Polaris with React, rely on React’s event handling and state management rather than jQuery/plain JS. If not using React, use plain JavaScript.

Notes:

  • Code snippets demonstrate adding a script file, including jQuery from a CDN, and basic click handlers; these examples are central to implementing the solution.

Open question / status:

  • The author asks if React can be used for the UI alongside a PHP backend. This has not been answered yet, so the thread remains open with that key question pending.
Summarized with AI on January 17. AI used: gpt-5.
1

I am using Polaris for my shopify app development, but with HTML code (provided in polaris documentation) and

the problem is that there is no functionality on those elements. so do i have to use javascript or jquery for making them dynamic content?? if yes then how tot embedd that ??

2

Hi Rahul_V,

Yes, for adding dynamic behavior to your HTML elements, you will need to use JavaScript (or a library). Here’s how you can do it:

  1. Add a <script> tag at the end of your HTML file, right before the closing </body> tag.
<script src="your-js-file.js"></script>
  1. In your JavaScript file, you can add event listeners to your HTML elements to make them interactive. Here’s an example:
document.getElementById('your-button-id').onclick = function() {
    // Code to execute when button is clicked
}
  1. If you’re using a library like jQuery, make sure to include the jQuery library in your HTML file, then you can use jQuery syntax to add behavior:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Then in your JavaScript file:

$(document).ready(function(){
    $("#your-button-id").click(function(){
        // Code to execute when button is clicked
    });
});

Also, when using the Shopify Polaris library alongside React, you can use React’s built-in event handling and state management to create dynamic behavior. If you’re not using React, then you’ll need to use JavaScript to add that behavior.

Hope this helps!

3

can i use to React as UI component along with PHP as backend component ??