[Support request] How to reference one element from inside another element?

Home Forums Support [Support request] How to reference one element from inside another element?

Home Forums Support How to reference one element from inside another element?

  • This topic has 13 replies, 3 voices, and was last updated 1 month ago by Elvin.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2051196
    Robert

    I have a javascript calculator and in the actual script we reference a utils.js file. Since we will have many calculator and only need one utils file, is there an easy way to add this utils file as another element (hook) and then somehow reference it from all of the calculator elements?

    #2051535
    Elvin
    Staff
    Customer Support

    Hi Robert,

    Assuming utils.js is the script library and the calculator scripts are init script, you can just enqueue 1 utils.js on the wp_head of the site and enqueue the init script on wp_footer.

    If you have the URL of the utils.js script you can just hook in it using a Hook element with a hook set to wp_head.

    You then add your code. Example:

    <script src="https://yoursite.com/folder/to/file/js/utils.js" type="text/javascript"></script>

    You can then set it’s display rule location to entire site or just the pages that will be using it. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #2051948
    Robert

    Thank you Elvin. For some reason I am not able to get this to work. Here is what I am using in the Elements. The first script is the utils file I have pasted in a header hook element. The second script is the calculator I have in a footer hook element. I also have some css styles that I added to the same footer hook element below the calculator script.

    Am I missing something obvious here?

    #2053397
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    How are you adding that javascript, exactly?

    Is it in a JS file? Or are you pasting it inline like that? If inline, are you adding <script></script> tags around it? Are you using a Hook Element?

    #2053523
    Robert

    Yes I am using a hook element and pasting inline the the <script></script> and <style></style> tags. Should I be doing this some other way?

    #2054048
    Elvin
    Staff
    Customer Support

    Can you link us to the page that’s using this code?

    Also, can you try hooking both scripts on the footer of the site and let us check?

    A wise man once said:
    "Have you cleared your cache?"

    #2054465
    Robert

    Sure, here is a test page.

    #2055143
    Elvin
    Staff
    Customer Support

    The script is actually being added but it’s returning an error as shown here –

    Can you try adding type="module" attribute to the <script> tag?
    https://share.getcloudapp.com/Wnuqzm9g

    A wise man once said:
    "Have you cleared your cache?"

    #2055486
    Robert

    This is loading now, however I’m not able to import anything from the utils module. How do I reference the file? Right now I have:

    import { amountConfig, insertErrorMessage, numberWithCommas, removeErrorMessage } from “../utils/utils.js”;

    But I don’t think that from ".../utils/utils.js"; part is correct. How to do reference the location of the other utils element I created?

    #2056235
    Elvin
    Staff
    Customer Support

    But I don’t think that from “…/utils/utils.js”; part is correct. How to do reference the location of the other utils element I created?

    You can’t do this as scripts done within the Hook elements are not saved on a file. They are directly embedded to the code of the page.

    If you wish to add in a path, you’ll have to do something like:

    <script src="https://yousite.com/folder/path/to/file/utils.js" type="module" defer=""></script>

    Instead of adding the actual codes on a hook element.

    A wise man once said:
    "Have you cleared your cache?"

    #2057072
    Robert

    Okay, understood. So if I want to upload this javascript file manually via ftp, which folder do I put it in exactly and what will the path be to that file?

    #2057211
    Elvin
    Staff
    Customer Support

    Okay, understood. So if I want to upload this javascript file manually via ftp, which folder do I put it in exactly and what will the path be to that file?

    I suggest installing a child theme for this so you can upload it on the child theme’s folder.

    Example path would be wp-content/themes/your-child-theme-folder/assets/js/

    A wise man once said:
    "Have you cleared your cache?"

    #2057240
    Robert

    Okay, so I’ve uploaded the file. Now how do I find the url to access that file?

    #2057264
    Elvin
    Staff
    Customer Support

    The URL path is similar to the FTP path.

    so for example, if you have uploaded it to theme folder, it’s usually something like this:

    https://www.yoursitedomain.com/wp-content/themes/your-theme-folder/another-folder/utils.js

    A wise man once said:
    "Have you cleared your cache?"

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.