cPanel Question posted in
The official documentation can be seen here.

Display price in HTML page based on selected currency – CPanel

I am currently having two main currencies for my business. The product page is actually built using HTML. I have 4 products in a page and I want to display two prices for each product, like if someone selects USD, cost in USD will be displayed and if someone selects EUR then it’ll show the price accordingly, without reloading the page. I also want the order link to be changed upon selecting the currency.

Please I don’t want to convert the currency. I just want to store two different price values for each product and display it accordingly when user changes the currency.

It’s NOT any CMS based or eCommerce website, just few HTML pages. I think it’s it can be done using JS but I am not a programmer :/

Would anyone please tell me how to do it? I need a very simple program but I have no idea where to start.

Here’s product pricing section HTML source code-

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website Hosting | Host Hub</title>

<!--Favicon-->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png"/>

<!--Libraries-->
<link rel="stylesheet" type="text/css" href="assets/libraries/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/font-awesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/animate/animate.min.css">

<!--Google Fonts-->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Overlock:400,400italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Signika:300,400,600,700">

<!--Styles-->
<link rel="stylesheet" type="text/css" href="assets/css/style.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/mobile.min.css">

<!--Custom CSS-->
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<!--Begin Header-->
<div class="topbar">
  <div class="container">
    <div class="row"> 
      <!--Begin Social Icons-->
      <div class="col-xl-4 col-lg-4 col-md-3 col-sm-3 col-12 social">
        <div class="link"><a href="https://www.facebook.com/whmcsthemes" target="_blank"><i class="fab fa-facebook"></i></a></div>
        <div class="link"><a href="https://www.twitter.com/whmcsthemes" target="_blank"><i class="fab fa-twitter-square"></i></a></div>
        <div class="link"><a href="https://www.youtube.com/whmcsthemes" target="_blank"><i class="fab fa-youtube-square"></i></a></div>
        <div class="link"><a href="https://www.skype.com" target="_blank"><i class="fab fa-skype"></i></a></div>
      </div>
      <!--End Social Icons--> 
      <!--Begin Client Links-->
      <div class="col-xl-8 col-lg-8 col-md-9 col-sm-9 col-12 text-right client">
        <div class="link xshide"><a href="#" role="button" data-toggle="modal" data-target=".modal-select-currency-content" id="modal-select-currency"><i class="fas fa-coins"></i>$ USD</a></div>
        <div class="link xshide"><a href="#" role="button" data-toggle="modal" data-target=".modal-select-language-content" id="modal-select-language"><i class="fas fa-globe"></i>Language</a></div>
        <div class="link"><a href="#" role="button" data-toggle="modal" data-target=".modal-client-login-content" id="modal-client-login"><i class="fas fa-lock"></i>Customers</a></div>
        <div class="link"><a href="#"><i class="fas fa-life-ring"></i>Support</a></div>
        <div class="link"><a href="#"><i class="fas fa-shopping-cart"></i><span class="desktop">View Cart</span> (0)</a></div>
      </div>
      <!--End Client Links--> 
    </div>
  </div>
</div>
<!--End Header--> 

<!--Begin Web Hosting-->
<div class="webhosting">
  <div class="container">
    <div class="row"> 
      <!--Begin Plan Box-->
      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown">
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Micro Hub</h3>
          </div>
          <div class="panel-body">
            <div class="the-price">
              <h1> $2<span class="subscript">.99</span></h1>
              <small>Per Month</small> </div>
            <table class="table">
              <tr>
                <td>1 GB Storage</td>
              </tr>
              <tr>
                <td>10 GB Bandwidth</td>
              </tr>
              <tr>
                <td>Unlimited Email</td>
              </tr>
              <tr>
                <td>Unlimited Databases</td>
              </tr>
              <tr>
                <td>Unlimited FTP Accounts</td>
              </tr>
              <tr>
                <td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/[email protected] 2x" class="img-fluid" /></td>
              </tr>
            </table>
          </div>
          <a href="#">
          <div class="panel-footer">Order Today</div>
          </a> </div>
      </div>
      <!--End Plan Box--> 
      <!--Begin Plan Box-->
      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.2s">
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Small Hub</h3>
          </div>
          <div class="panel-body">
            <div class="the-price">
              <h1> $7<span class="subscript">.99</span></h1>
              <small>Per Month</small> </div>
            <table class="table">
              <tr>
                <td>10 GB Storage</td>
              </tr>
              <tr>
                <td>100 GB Bandwidth</td>
              </tr>
              <tr>
                <td>Unlimited Email</td>
              </tr>
              <tr>
                <td>Unlimited Databases</td>
              </tr>
              <tr>
                <td>Unlimited FTP Accounts</td>
              </tr>
              <tr>
                <td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/[email protected] 2x" class="img-fluid" /></td>
              </tr>
            </table>
          </div>
          <a href="#">
          <div class="panel-footer">Order Today</div>
          </a> </div>
      </div>
      <!--End Plan Box--> 
      <!--Begin Plan Box-->
      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.4s">
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Big Hub</h3>
          </div>
          <div class="panel-body">
            <div class="the-price">
              <h1> $9<span class="subscript">.99</span></h1>
              <small>Per Month</small> </div>
            <table class="table">
              <tr>
                <td>20 GB Storage</td>
              </tr>
              <tr>
                <td>200 GB Bandwidth</td>
              </tr>
              <tr>
                <td>Unlimited Email</td>
              </tr>
              <tr>
                <td>Unlimited Databases</td>
              </tr>
              <tr>
                <td>Unlimited FTP Accounts</td>
              </tr>
              <tr>
                <td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/[email protected] 2x" class="img-fluid" /></td>
              </tr>
            </table>
          </div>
          <a href="#">
          <div class="panel-footer">Order Today</div>
          </a> </div>
      </div>
      <!--End Plan Box--> 
</div></div></div>
<!--Libraries--> 
<script src="assets/libraries/jquery/jquery.min.js"></script> 
<script src="assets/libraries/bootstrap/js/bootstrap.min.js"></script> 
<script src="assets/libraries/jquery-ui/jquery-ui.min.js"></script> 
<script src="assets/libraries/wow/wow.min.js"></script> 
<script src="assets/libraries/zumada/sticky-header.min.js"></script> 
<script src="assets/libraries/zumada/dropdown-menu.min.js"></script> 
<script src="assets/libraries/zumada/price-slider-6-plans.min.js"></script> 
<script src="assets/libraries/zumada/scroll-to-top.min.js"></script> 
<script src="assets/libraries/zumada/countdown.min.js"></script> 

<!--Custom Scripts--> 
<script src="assets/js/scripts.js"></script>
</body>
</html>
Tags:

3

Answers


  1. 0

    You can do this easily by using Javascript. You can store the pricing in a JS function and return the actual amount stored when currency is changed without reloading the page.

    If I could see your page source code, I would be able to help you resolve this better.

    Login or Signup to reply.
  2. 0

    I was not patient enough to wait for your HTML and simply built this "mvce" (minimum viable and complete example).

    There are many ways of providing the two prices. I chose the way via the data attribute in the price <td>s.

    const tbl=document.querySelector("table");
let cur=0; // possible values: 0 and 1
const change=()=>{ 
  tbl.querySelectorAll(".price").forEach(td=>td.textContent=td.dataset.pr.split(" ")[cur]);
  cur=1-cur;
}
document.querySelector("button").onclick=change;
change()
    .price {text-align:right}
    <table>
  <tr><th>nr</th><th>Fruit</th><th>Price</th></tr>
  <tr><td>1</td><td>Apple</td><td class="price" data-pr="1€ 1.2$"></td></tr>
  <tr><td>2</td><td>Orange</td><td class="price" data-pr="10€ 12$"></td></tr>
  <tr><td>3</td><td>Banana</td><td class="price" data-pr="2€ 2.4$"></td></tr>
  <tr><td>4</td><td>Pineapple</td><td class="price" data-pr="5€ 6$"></td></tr>
  <tr><td>5</td><td>Apricot</td><td class="price" data-pr="7€ 8.3$"></td></tr>
  <tr><td>6</td><td>Pear</td><td class="price" data-pr="3€ 3.6$"></td></tr>
  </table>
  <button>change currency</button>

    And here is another sample, based on your HTML (I added the `data-pr="24.95 20.80" attributes):

    let cur=1;
document.querySelector("button").onclick=()=>{
  document.querySelectorAll(".the-price h1").forEach(h=>{
   let p=h.dataset.pr.split(" ")[cur].split(".");
   h.innerHTML=['$','€'][cur]+p[0]+'<span class="subscript">.'+p[1]+'/m</span>';
   });
  cur=1-cur;
}
    .subscript {font-size:1ex}
    <div class="webhosting">
  <div class="container">
    <div class="row">

      <!--Begin Plan Box-->
      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown">
        <div class="panel">
          <div class="panel-heading" style="background: #03989e">
               <a name="pricing"></a>
            <h3 class="panel-title">NVMe-1</h3>
          </div>
          <div class="panel-body">
            <div class="the-price">
              <h1 data-pr="11.95 9.50"> $11<span class="subscript">.95/m</span></h1>
              <small>Per Monthly</small> </div>
            <table class="table">
              <tr>
                <td>Product Description 1</td>
              </tr>
              <tr>
                <td>Product Description 2</td>
              </tr>
            </table>
          </div>
          <a href="{$WEB_ROOT}/cart.php?a=add&pid=77">
          <div class="panel-footer">GET STARTED TODAY</div>
          </a> </div>
      </div>
      <!--End Plan Box--> 

      <!--Begin Plan Box-->
      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown"  data-wow-delay="0.2s">
        <div class="panel">
          <div class="panel-heading"  style="background: #38b6ff ">
            <h3 class="panel-title">NVMe-2</h3>
          </div>
          <div class="panel-body">
            <div class="the-price">
              <h1 data-pr="24.95 20.80"> $24<span class="subscript">.95/m</span></h1>
              <small>Per Monthly</small> </div>
            <table class="table">
               <tr>
                <td>Product Description 1</td>
              </tr>
              <tr>
                <td>Product Description 2</td>
              </tr>
            </table>
          </div>
          <a href="{$WEB_ROOT}/cart.php?a=add&pid=78">
          <div class="panel-footer">GET STARTED TODAY</div>
          </a> </div>
      </div>
      <!--End Plan Box-->
    </div>
  </div>
</div>
<button>change currency</button>
    Login or Signup to reply.
  3. 0

    HTML/CSS Solution

    No JavaScript Needed

    Points to Consider Before Saying, "It Doesn’t Work"

    1. The OP (Original Post) had too much HTML to be considered very useful. A typical Bootstrap layout consists of <div>s heavily burdened by BS (Bootstrap) classes wrapped around more of the same.

      The majority of the HTML is removed and only what is needed has been replaced by more semantic elements. Most importantly, the interactive element <a> was replaced by a <input type='checkbox' hidden> and a <label>. There are a few good reasons for this particular change:

      • Checkboxes are in one of two states checked = true or checked = false. The CSS pseudo-class :checked will change the style of the <label>, and all of the <figure> following it as well as the <sup> nested within each <figure>. When in default, (checked = false) everything is USD and when checked is changed to EUR.
      • Ascetically, the <label> can be styled to look like a <button>, <a>, etc. and the checkbox is actually has the hidden attribute. Since the checkbox has id='currency' and the <label> has for='currency' any click to the <label> is a click to the checkbox as well (and vise versa although it doesn’t matter in this case since the checkbox is hidden).

      Important: The HTML layout should not be altered in a way wherein one or more elements are placed between checkbox and <label> or inserted into any <figure>. There shouldn’t be a problem about adding anything around, ahead, or behind them.

    2. All <link> (except the Google Fonts) pointed to relative paths (ex. href='/path/to/style.css') making them useless. I added the BS classes have styles that have a high specificity that can’t be overridden easily. I added the BS CSS and then doubled up the classes of the custom CSS to increase their specificity in order to override BS CSS.

      Important: The only thing that can be changed are the name of the classes and any CSS property/value with one exception which is content:. If the CSS is placed in a file (ex. style.css), make sure the CSS rule sets are the last ones. If placed in a <style>, make sure the CSS rule sets are the last ones.

    3. The dynamically changing text relies on the following:

      1. :checked + label::before changes {content: '💲USD';... to 'a0€ EUR'
      2. :checked ~ figure::before changes {content: '💲'attr(data-usd)... to €attr(data-eur) for all <figure>s that follow the checkbox.
      3. :checked ~ figure > sup::before changes {content: '.'attr(data-usd)... to '.'attr(data-eur) for all <sup>
      4. Since there’s no JavaScript involved, the values are stored on each <figure> and <sup> data-usd and data-eur attributes and must be manually edited (which is what OP requested if I recall)
      :checked ~ figure::before {content: '€a0'attr(data-eur);...}

<input type='checkbox' checked hidden>
<label>€ EUR</label>
...
<figure data-usd='9' data-eur='12'>
€ 12<sup data-usd='99' data-eur='33'>.33</sup>
</figure>

    label.money.money {
  font-size: 2.5ch;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

label.money.money::before {
  content: '💲USD';
}

#currency:checked+label.money.money::before {
  content: 'a0€ EUR';
}

figure.price.price {
  width: max-content;
  font-size: 4.75ch;
  font-weight: 500;
  line-height: 1.33;
}

figcaption.caption.caption {
  width: 100%;
  font-size: 0.3em;
  padding: 0 0 0 1.5em;
}

sup.cents.cents {
  vertical-align: middle;
  font-size: 0.6em;
  line-height: 0.7;
  margin-left: -.75ch;
}

figure.price.price::before {
  content: '💲'attr(data-usd);
}

sup.cents.cents::before {
  content: '.'attr(data-usd);
}

#currency:checked~figure.price.price::before {
  content: '€a0'attr(data-eur);
  padding-left: 0.3em;
}

#currency:checked~.price>sup.cents.cents::before {
  content: '.'attr(data-eur);
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <input id='currency' class='btn-click' type='checkbox' hidden>
  <label class='money btn btn-link btn-lg' for='currency'></label>

  <figure class='price' data-usd='2' data-eur='4'>
    <sup class='cents' data-usd='99' data-eur='33'></sup>
    <figcaption class='caption'>Per Month</figcaption>
  </figure>

  <figure class='price' data-usd='7' data-eur='13'>
    <sup class='cents' data-usd='99' data-eur='33'></sup>
    <figcaption class='caption'>Per Month</figcaption>
  </figure>

  <figure class='price' data-usd='9' data-eur='16'>
    <sup class='cents' data-usd='99' data-eur='33'></sup>
    <figcaption class='caption'>Per Month</figcaption>
  </figure>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search