Solved

Better way to implement instalment widget on product pages?

SDBdigital
Shopify Partner
71 0 16

One of our payment gateway offers a installment payment plan.

 

They sent me some code that had to be inserted into the main-product.liquid file.

Surely it can be inserted in the editor using the 'custom liquid' block?

It seems like an awful lot of code for a simple instalment calculator.

Is it possible to edit the code below to work in the 'custom liquid' block?

Screenshot 2024-05-16 at 08.38.53.png

 

 

This is the code they sent me:

<html>
<header>
<script src="https://embed.payjustnow.com/product/js/product.js"></script>
<script>
function onLoad() {
setPJNProductAmounts( {{ product.price }} , 3);
}
</script>
</header>
<body onload="onLoad()">
<div id="pjn-product-container"></div>
<style>
.pjn-infolink {
display: table;
}
.pjn-container .pjn-text {
display: block;
}
</style>
</body>
</html>

 

Accepted Solution (1)

Roshi
Excursionist
12 2 0

This is an accepted solution.

Yes, you can insert the code into the 'custom liquid' block in your Shopify theme. However, it's essential to ensure that the code is wrapped in a liquid block comment to avoid causing any issues with your theme.

Here's the modified code you can use in the 'custom liquid' block:

{% comment %}
<html>
<header>
<script src="https://embed.payjustnow.com/product/js/product.js"></script>
<script>
function onLoad() {
setPJNProductAmounts( {{ product.price }} , 3);
}
</script>
</header>
<body onload="onLoad()">
<div id="pjn-product-container"></div>
<style>
.pjn-infolink {
display: table;
}
.pjn-container .pjn-text {
display: block;
}
</style>
</body>
</html>
{% endcomment %}

However, I understand your concern about the amount of code for a simple installment calculator. The code provided is from PayJustNow, and it includes their library and styling for the widget. If you'd like a simpler alternative, you can build a custom installment calculator using JavaScript and HTML.

Here's an example of a basic installment calculator you can include in the 'custom liquid' block:

{% comment %}
<script>
function calculateInstalment(price, months) {
  const interestRate = 0.05; // 5% monthly interest rate
  const monthlyInterest = (price * interestRate) / 12;
  const installmentAmount = (price + monthlyInterest) / months;
  return installmentAmount.toFixed(2);
}
</script>

<div id="installment-calculator">
  <label for="product-price">Product Price:</label>
  <input type="number" id="product-price" value="{{ product.price }}" />
  <label for="months">Number of installments:</label>
  <select id="months">
    <option value="3">3 months</option>
    <option value="6">6 months</option>
    <option value="12">12 months</option>
  </select>
  <button onclick="calculateInstalmentPrice()">Calculate Installment</button>
  <p id="installment-price"></p>
</div>

<script>
function calculateInstalmentPrice() {
  const productPrice = document.getElementById('product-price').value;
  const months = document.getElementById('months').value;
  const installmentPrice = calculateInstalment(productPrice, months);
  document.getElementById('installment-price').innerText = `Installment amount: R${installmentPrice}`;
}

function calculateInstalment(price, months) {
  const interestRate = 0.05; // 5% monthly interest rate
  const monthlyInterest = (price * interestRate) / 12;
  const installmentAmount = (price + monthlyInterest) / months;
  return installmentAmount;
}
</script>
{% endcomment %}

This code creates a basic installment calculator that calculates the installment price based on the product price and the number of months for the payment plan. Note that this example doesn't include any validation or error handling, so you might need to add those features for a production environment.

Keep in mind that this example calculates the monthly installment price based on a fixed interest rate, whereas the PayJustNow widget might include more sophisticated calculations and payment processing.

Hope can help
If you find my reply helpful, please hit Like and Mark as Solution

View solution in original post

Replies 2 (2)

Roshi
Excursionist
12 2 0

This is an accepted solution.

Yes, you can insert the code into the 'custom liquid' block in your Shopify theme. However, it's essential to ensure that the code is wrapped in a liquid block comment to avoid causing any issues with your theme.

Here's the modified code you can use in the 'custom liquid' block:

{% comment %}
<html>
<header>
<script src="https://embed.payjustnow.com/product/js/product.js"></script>
<script>
function onLoad() {
setPJNProductAmounts( {{ product.price }} , 3);
}
</script>
</header>
<body onload="onLoad()">
<div id="pjn-product-container"></div>
<style>
.pjn-infolink {
display: table;
}
.pjn-container .pjn-text {
display: block;
}
</style>
</body>
</html>
{% endcomment %}

However, I understand your concern about the amount of code for a simple installment calculator. The code provided is from PayJustNow, and it includes their library and styling for the widget. If you'd like a simpler alternative, you can build a custom installment calculator using JavaScript and HTML.

Here's an example of a basic installment calculator you can include in the 'custom liquid' block:

{% comment %}
<script>
function calculateInstalment(price, months) {
  const interestRate = 0.05; // 5% monthly interest rate
  const monthlyInterest = (price * interestRate) / 12;
  const installmentAmount = (price + monthlyInterest) / months;
  return installmentAmount.toFixed(2);
}
</script>

<div id="installment-calculator">
  <label for="product-price">Product Price:</label>
  <input type="number" id="product-price" value="{{ product.price }}" />
  <label for="months">Number of installments:</label>
  <select id="months">
    <option value="3">3 months</option>
    <option value="6">6 months</option>
    <option value="12">12 months</option>
  </select>
  <button onclick="calculateInstalmentPrice()">Calculate Installment</button>
  <p id="installment-price"></p>
</div>

<script>
function calculateInstalmentPrice() {
  const productPrice = document.getElementById('product-price').value;
  const months = document.getElementById('months').value;
  const installmentPrice = calculateInstalment(productPrice, months);
  document.getElementById('installment-price').innerText = `Installment amount: R${installmentPrice}`;
}

function calculateInstalment(price, months) {
  const interestRate = 0.05; // 5% monthly interest rate
  const monthlyInterest = (price * interestRate) / 12;
  const installmentAmount = (price + monthlyInterest) / months;
  return installmentAmount;
}
</script>
{% endcomment %}

This code creates a basic installment calculator that calculates the installment price based on the product price and the number of months for the payment plan. Note that this example doesn't include any validation or error handling, so you might need to add those features for a production environment.

Keep in mind that this example calculates the monthly installment price based on a fixed interest rate, whereas the PayJustNow widget might include more sophisticated calculations and payment processing.

Hope can help
If you find my reply helpful, please hit Like and Mark as Solution
SDBdigital
Shopify Partner
71 0 16

Hi Roshi

 

Thank you so much.