Shopify Question posted in
The Shopify help center can be found here.

Is there a way to assign a product price to a variable in Javascript? – Shopify

I have a small amount of knowledge on JavaScript so I would appreciate any help with this query.

I am learning Liquid and using Shopify to make a form of finance calculator; I want to assign the product price as a variable in JavaScript so when the user changes the repayment months, then it will change the data dynamically.

I have copied most of the JavaScript from a template.

Currently, I am just typing in the price using an on html, however I was wondering if there way to assign a javascript variable to text on the screen.

For example, I can make the product price show by adding: 

<p>{{ price}}</p>

but when I try and make a javascript variable which is: 

var amount = document.getElementById("amount");

It doesn’t pull anything through.

I want the variable “amount” to equal the product price.

My code is…

Javascript

<script type="text/javascript">
function calculate() {
  //Look up the input and output elements in the document
  var amount = document.getElementById("amount");
  var period = document.getElementById("period");
  var payment = document.getElementById("payment");
  var total = document.getElementById("total");
  var financecost = document.getElementById("financecost");
  var deposit = document.getElementById("deposit");
  var hireweekly = document.getElementById("hireweekly");

  var principal = amount.value - deposit.value;
  var interest = principal / 100 * 5.43;
  var payments = parseFloat(period.value);

// compute the monthly payment figure
var monthly = principal / period.value;

  if (isFinite(monthly)){
    payment.innerHTML = monthly.toFixed(2);
    total.innerHTML = (principal + interest).toFixed(2);
    financecost.innerHTML = (principal + interest - principal).toFixed(2);
    hireweekly.innerHTML = (monthly / 4.34524).toFixed(2);

// Save the user's input so we can restore it the next time they visit
 save(amount.value, period.value);

 // Advertise: find and display local lenders, but ignore network errors
 try { // Catch any errors that occur within these curly braces
 getLenders(amount.value, period.value);
 }

  catch(e) { /* And ignore those errors */ }
 // Finally, chart loan balance, and interest and equity payments
 chart(principal, interest, monthly, payments, hireweekly);
 }
 else {
 // Result was Not-a-Number or infinite, which means the input was
 // incomplete or invalid. Clear any previously displayed output.
 hireweekly.innerHTML = "";
 payment.innerHTML = ""; // Erase the content of these elements
 total.innerHTML = ""
 financecost.innerHTML = "";
 chart(); // With no arguments, clears the chart
 }
}
</script>

HTML

<table class="finance-calculator-table" width="100%">
  <tbody class="finance-calculator-table--body">
    <tr class="table-row-alternate-2"><td><p>Vehcle Price (£)</p></td>
      <td>
        <input class="finance-calculator--input" id="amount" onchange="calculate();" placeholder="Enter the vehicle amount"></td>
    </tr>
    <!--<tr><td>Annual interest (%):</td> <td><input id="apr" onchange="calculate();"></td></tr>-->
    <tr class="table-row-alternate-1"><td><p>Period (years)</p></td>
      <td>
        <select class="finance-calculator--select" id="period" onchange="calculate();">
          <option value="12">12 Months</option>
          <option value="24">24 Months</option>
          <option value="36">36 Months</option>
          <option value="48">48 Months</option>
          <option value="60">60 Months</option>
          <option value="72">72 Months</option>
          <option value="84">84 Months</option>
        </select>
      </td>
    <tr class="table-row-alternate-2" width="100%">
      <td><p>Deposit (£)</p></td>
      <td>
        <input class="finance-calculator--input" id="deposit" onchange="calculate();" placeholder="Enter an amount">
      </td>
    </tr>
    <tr class="table-row-alternate-1">
      <td><p>Weekly Payments</p></td>
      <td>£<span class="output" id="hireweekly"></span></td>
    </tr>
    <tr class="table-row-alternate-2">
      <td><p>Monthly Payments</p></td>
      <td>£<span class="output" id="payment"></span></td>
    </tr>
    <tr class="table-row-alternate-1">
      <td><p>Total Payment</p></td>
      <td>£<span class="output" id="total"></span></td>
    </tr>
    <tr class="table-row-alternate-2">
      <td><p>Finance Cost</p></td>
      <td>£<span class="output" id="financecost"></span></td>
    </tr>
  <tbody>
</table>
Tags:

2

Answers


  1. 0

    maybe try:

    amount = document.getElementById('amount').value;
    Login or Signup to reply.
  2. 0

    Staring with the error, this statement does not return any value because there is no element with the ID amount.

    var amount = document.getElementById("amount");

    Read more about IDs at MDN Documentation like how you can define them in HTML and later get Elements in JavaScript by their IDs.

    With that being said, there are 2 possible solutions for your problem.

    1. Output to JS variable via Liquid
    2. Add ID to HTML markup and getElementById

    To output directly to JS variable via Liquid, somewhere in your liquid file, you can do something like this and then inside JavaScript you will have product price inside productPrice variable.

    <script>
    var productPrice = {{ product.price}}
</script>

    You can also add ID to your markup like,

    <p id="amount">{{ price}}</p>

    and then inside JavaScript

    // to get amount
var amount = document.getElementById("amount").innerText;

    Now some of the the things you should know to make it work with Shopify are..

    {{amount}} variable will not be avaialble on all templates.. So make sure you are using it accordingly.

    {{amount}} will return price in cents, so take care of that in your calculations.

    Shopify Product Object Docs

    Shopify Money Filters

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search