how add javascript code to header?

hello
iuse nopCommerce and i am not perfesional
i wrote one script file in javascript to show date time to hijri calander (iranian caklander)
i want show Noe() in header site

i use 3.6 ver.

please explain step by step , How?

Hi there,

Once you have the javascript code that you want to include in your project (in your case this is that calendar) you must decide where exactly you want to place it. For example if you want to set it in your header (as you mention) you need to follow this steps:

In the file '~your theme\Views\Shared\Header.cshtml' find the place in the markup where your calendar will be placed. Let say that you want to have it between the logo and the search box. So in the markup you need to add the element to hold your calendar.

<div class="header-lower">
        <div class="header-logo">
            <a href="@Url.RouteUrl("HomePage")">
                <img title="" alt="@storeName" src="@Url.Content(logoPath)">
            </a>
        </div>
        <div class="calendar"> here you can add the full markup of you calendar </div>
        <div class="search-box">
            @Html.Action("SearchBox", "Catalog")
        </div>
    </div>

Then in the same file 'Header.cshtml' in the very bottom you can add the javascript code for your calendar. You can also add the javascript code in your theme general javascript file (if you have one).
I believe that is what you want to do. If there is something else, please provide us more information.

hi dear
thanks to reply

but i wanna explain more

i have a file "mnb_lalali.js" and have a function showDate()   to show current data time in persian format(convert current date to persian date)

and i am not use theme(use standard nopCommerce)

i don t understand  and have 2 question :
1-  in which file call this function and ?
2 - how call this function

again thank to reply me
i am watting for reply

Hi there,

If your script is in separate file you should refer it in 'Themes\DefaultClean\Views\Shared\Head.cshtml'. First you must add the file 'mnb_lalali.js' in the folder 'Themes\DefaultClean\Content' and after that add the code below in the Head.cshtml file.

Html.AddScriptParts("~/Themes/{0}/Content/mnb_lalali.js");

Once you added this, you can call the function inside your javascript file. Just make sure that your code will execute when the document is loaded.

You have to add this condition below:

$( document ).ready(function() {
    showDate(); /*here you calling the function, once your document is loaded*/
});

/*this is the same method but with pure javascript*/
document.addEventListener('DOMContentLoaded', function(){
   showDate();
});

Both methods must works.

hi
i am copy mnb_jalali.js file in

nop.web\thems\deafultclean\content

and then in

nop.web\thems\deafultclean\views\shared\head.cdhtml

add

Html.AddScriptParts("~/Themes/{0}/Content/mnb_lalali.js");

then add in

nop.web\views\shared\head.cdhtml

add script

$( document ).ready(function() {
    showDate(); /*here you calling the function, once your document is loaded*/

but show this like text and don t work . why?

It`s hard to say, without any code.
Could you share your store URL?

now it s a offline and not upload
any explain my code say to me
i am very confuse to solve my problem
thanks to help me

i don t understand how  inject my javascript function  to nopCommerce

I would like to ask how to add this embed code to Nopcommerce?
The instruction said it needs to be added to the bottom of the website

<script data-cfasync="false">window.ju_num="xxxxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxxxxx";window.asset_host='//xxx.xxxxxxxxx.com/';(function(i,s,o,g,r,a,m){i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)};a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script',asset_host+'vck.js','juapp');</script>