The Custom CSS tool of the Theme Tweaker add-on allows inserting Javascript code into the default software code.

Custom JavaScript for Every Page

To add custom JS to every page of your store:

Open the Custom JavaScript page of your store's Admin area (Look and feel -> Custom CSS & JS -> tab Custom JavaScript).
Turn on the Use custom js toggle.
Paste your custom JS code to the text area.
Save the changes.

All Javascript changes are recorded in one file. Both custom CSS and JavaScript add to the <HEAD> tag after all style files apply.

Custom JavaScript Code for HTML

Adding JS Code In the <HEAD> Tag

If you need to load your code in the <head> tag or limit its usage to a particular page (for example, the orders list) or customize your store's Admin area, you should also use the Theme Tweaker add-on, but differently.

For this purpose:

Add a new template into the "head" widget list.
For example: theme_tweaker/customer/head/custom_js_code_between_head_tags.new.twig
Add your custom JS code to the new template.

For example, you can create the Twig template and place it to skins/theme_tweaker/customer/header/parts/custom_js.twig file. Then you should append the file with the code like this:

{## 
# Custom script tag 
# 
# @ListChild (list="head", weight="999") 
#} 

{% if this.getTarget() == "order_list" %} 
  <script type="text\javascript"> 
       <!-- HERE GOES YOUR JAVASCRIPT CODE 
        YOU CAN ALSO USE SRC PARAM OF SCRIPT TAG --> 
  </script> 
{% endif %}

This example code will be executed only on the order_list page in the storefront. You can see the result here: https://<store domain>/carp.php?target=order_list.

Adding JS Code In the <BODY> Tag

You can also put custom script tags inside <body> tag to a specific place by changing the @ListChild annotation list parameter.

For this purpose:

Add a new template into the "body" -> "jscontainer.js" widget list.
For example: theme_tweaker/customer/jscontainer.js/custom_js_code_between_body_tags.new.twig
Add your custom JS code to the new template.

If you have X-Cart 5.3.2 and later, you can create such files inside skins/theme_tweaker/admin/ folder to execute your code in the Admin area.

NOTES:

If you need to add a custom JS code to the order confirmation page, then add it within the following {% if %} statement:
{% if this.getTarget() == "checkoutSuccess" %} {## Add your Custom JS Code below this line ##} {% endif %}
In this case, your custom JS code will appear on the order confirmation page only.

Use specific variables in your Custom JS Code to pass different value types like Order ID, Currency, Order Total, and Customer's email address.

ADDITIONAL INFO:

Targets that can be checked in {% if %} statement:
- Purchase Confirmation Page: checkoutSuccess
Variables that can be used in your Custom JS Code:
- Order ID: {{ this.order.orderNumber }}
- Currency: {{ this.order.currency.getCode() }}
- Order Total: {{ this.order.getTotal() }}
- Customer's email address: "{{ this.order.profile.email }}"

Script Tag in Content Fields or Static Pages

To paste script tags inside static pages or product\category description, you should disable any WYSIWYG modules (e.g., TinyMCE or Froala Editor). Unfortunately, as long as the <script> tags are present inside text areas, you shouldn't enable the WYSIWYG editors as they will remove such tags upon saving.

Starting from X-Cart 5.3.3, you can paste the <script> right inside the WYSIWYG areas in the static pages or product description. This functionality is available for Root Administrators and Administrators with Allow unfiltered HTML permission.

Related pages:

Custom CSS