Exploring the Power of Merging HTML with JavaScript in Shopify

Here is a snippet of code that I am grappling with:

<div id="next-shipment"></div>
var date = new Date(); // today using client's timezone
date.setDate(date.getDate() + 1); // move to tomorrow
date.setUTCHours(11,0,0,0); // set time using UTC(GMT) timezone
document.getElementById("next-shipment").textContent = date.toLocaleString();

To address this issue, I decided to create a file named next-shipment.js in Shopify within the "Assets folder" and then proceeded to paste the Javascript code there.

Despite my efforts, I am facing difficulty in merging these two codes in a way that when I add the HTML line

<div id="next-shipment"></div>
on the homepage, nothing seems to appear.

javascripthtmlcssshopify

Answer №1

First things first, if you want to add assets to your Shopify theme, you'll need to incorporate the following code snippet: 

{{ 'next-shipment.js' | asset_url | script_tag }}
within your theme.liquid file. You can place it in the header section or at the bottom of your <body>, whichever suits your preference.

Check out this link for more information on adding scripts to Shopify themes.

If the script still isn't running as expected--

Try encapsulating your code within the jQuery document.ready function like this:

$(document).ready(function() {
    var date = new Date(); // today using client's timezone
    date.setDate(date.getDate() + 1); // move to tomorrow
    date.setUTCHours(11,0,0,0); // set time using UTC(GMT) timezone
    $('#next-shipment').html(date.toLocaleString());
});

Since Shopify already incorporates jQuery, make sure to take advantage of this tool that is readily available for use.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for displaying AJAX response data on a webpage

I am currently developing a Spring Boot application that includes a website with a submenu featuring various computer games. My goal is to have the server respond by sending an image (specifically a path to the image) of the selected game when a position i ...

javascriptjavahtmlajaxspring-boot

How to duplicate a single element from a list using the .clone() method in jQuery

My goal is to only add specific items from a list to a new list. For example, I want to add only the "banana" item to my second list. Currently, the code in my function adds all items from coll-selected-list to coll-grouped-list. How can I clone only a par ...

javascriptjquery

Switching from Bootstrap's traditional "loading" style progress bar to a more minimal dot style progress bar

Currently, I am implementing a survey progress bar using Bootstrap's "loading" style. Here is the code for the progress bar: <div class="progress" style="height: 20px;"> <div class="progress-bar" role="pro ...

htmlcssbootstrap-4frontendbootstrap-5

Concealing Social Security Numbers using AngularJS

I am currently working on masking SSN numbers using AngularJS. Expected Outcome: Before applying mask (onFocus) After applying mask (onBlur) Users are only allowed to enter numbers, and the SSN formatting is handled by filters. Below is a sample of the ...

javascriptjqueryangularjs

I am interested in displaying the PDF ajax response within a unique modal window

With the use of ajax, I am able to retrieve PDF base64 data as a response. In this particular scenario, instead of displaying the PDF in a new window, is it possible to display it within a modal popup? Any suggestions on how this can be achieved? $.ajax ...

javascripthtmljquery

What to do when a JWT token expires and how to generate a fresh token?

I am currently dealing with a problem regarding JWT (JSON Web Token) authentication in my application. At times, when I make API requests, I encounter the following error response: { "success": false, "message": "jwt expired" } I am aware that this er ...

javascriptnode.jsreactjsexpressmern

Can you explain the distinction between ajaxComplete and beforesend when making an Ajax call with JavaScript?

Can you explain the usage of ajaxComplete and beforesend? What sets them apart from each other? Are there any alternative methods similar to success when making an Ajax call? ...

javascriptjqueryajax

Unable to connect to the cloud firestore backend specifically on the deployed version

When deploying the project using Vercel, I included my Firebase security and project details as environment variables on the Vercel dashboard. Authentication works fine during deployment, but there is an error in the console: @firebase/firestore: Firesto ...

javascriptfirebasegoogle-cloud-firestorenext.jsvercel

What is preventing the clickHandler from properly updating the state?

My goal is to dynamically change the background image based on the active button clicked. Although the clickHandler correctly identifies the button id, the state fails to update as expected. Can you help me spot what I may have missed? import React, { Com ...

javascriptreactjs

In my HTML document, I have three identical Id's and I need to figure out how to target the third one using CSS. Can you help

I am working on an HTML document that contains multiple instances of ids and classes. Here is a snippet of the code: <!DOCTYPE html> <html> <body> <div id="Caption_G" class="editor-group"> editor-group<br /> ...

htmlcss

Can you provide guidance on aligning text in a text area to the center?

I've been trying to align my "field labels" in the center of their respective text fields without much success so far. To achieve this, I resorted to using tables but that didn't quite do the trick. Currently, I'm experimenting with CSS prop ...

cssformshtml-tablealignmentvertical-alignment

Javascript code to verify whether the page is currently positioned at the top

How can I use JavaScript to determine if the page is at scroll(0,0)? I have a full-page slider that needs to pause when the page is no longer at the top. The page may not be scrolled manually, as there are internal HTML # links that could load the page d ...

javascriptscroll

When using the Actions SDK, you may encounter an issue stating "TypeError: Cannot read property 'output' of undefined"

I've been attempting to link IBM Watson and Google Assistant together, but I keep encountering the error "TypeError: Cannot read property 'output' of undefined" along with "Function execution took 3323 ms, finished with status: 'crash&a ...

javascriptnode.jsactions-on-googleibm-watson

Bootstrap does not support horizontal alignment of columns

I can't seem to get my columns to align horizontally in bootstrap. I want the image on the left and the text on the right, but they keep stacking vertically. Can someone help me with this? As far as I know, col-md-6 should divide the page into 2 colu ...

htmlcssbootstrap-4

AngularJS - Retaining the initial value without submitting

On the left side, I have a list of users with corresponding details displayed on the right. The form handles the details on the right using inputs with ng-model. Whenever I click on a user from the left section, the selected user changes and the model auto ...

javascriptangularjs

UV mapping with Plane BufferGeometry in Three.js

I'm facing some challenges creating a buffergeometry plane, specifically with the uv coordinates. Despite following advice from Correct UV mapping Three.js, I can't seem to achieve the desired result. Below is the snippet of code for the uv coor ...

javascriptthree.jsuv-mappingbuffer-geometry

"An error has occurred stating that the function Factory.function() in AngularJS

I'm a beginner with AngularJS and could use some assistance! My issue involves retrieving JSON data from a URL in a factory function and returning it to the controller. However, I keep getting an error stating that the function doesn't exist. Wh ...

javascriptjsonangularjs

Changes in an image element's transition can result in either resizing or shifting positions

When I apply an opacity transition to an img element as shown here, I notice that the size of the image changes or it appears to move at the start and end of the transition. Below is a simple CSS code for styling: img{ height:165px; width:165px; ...

htmlcss

Rails 4 - Functional JS errors are absent yet JavaScript functionality is not operational

Currently, I am delving into the world of Ruby on Rails and making an effort to grasp the concept of the asset pipeline. As a means to learn more effectively, I decided to construct my website using Rails and learn along the way. However, after integrating ...

javascriptjqueryruby-on-railsrubyheroku

Is there a different option besides using the scale() function in CSS for transforming elements

It's a well-known fact that elements with the CSS property position: fixed don't behave as expected when the container has the transform property applied in CSS. After searching through various threads, I couldn't find a definitive solution ...

htmlangularjscss