How to change the currency in the shopping basket content

[hobnobby]

I am trying to adapt a simple shopping cart for my website.

I’ve tried changing this line of cod from $ to £;

 price = parseFloat(x.price.split('£')[1]);

It seems to have not done anything.

I’ve also found a currency setter which I’ve changed to GBP £

simpleCart.currency( "GBP" );
simpleCart.currency({
  code: "GBP" ,
  symbol: "£" ,
  name: "GB Pound"
}); 
simpleCart.currency(); 

It’s also not working. I tried changing it to a function that was as useful as a chocolate tea pot as well!

Can you let me know what I need to do to change the currencies to GBP?

[m_hutley]

updateTotals(“#add-items-cost”,££{totalPrice});

Uncaught ReferenceError: updateTotals is not defined

Well, ya. That’s not going to work because you dont have a function named that.

If i comment out this line:

//updateTotals("#add-items-cost",`££{totalPrice}`);

and uncomment these lines so that the buttons actually have their event listeners…

document.getElementById("emptycart").addEventListener("click", emptyCart);
var btns = document.getElementsByClassName('addtocart');
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {addToCart(this);});
} 

The Add to Cart functions work. The total shows $, but thats because you’ve left $'s in your HTML on line 53 and in your Javascript on line 98:

<td>$<span id="total">0</span></td>
    ^ here...

carttable += "<tr><td>" + productname + "</td><td>$" + price.toFixed(2) + "</td></tr>";
                                                  ^ and here...

[hobnobby]

Thanks.

I loggedin about 45 mins ago to post that I fixed it. I found the other JS $.
I then read your reply and chnaged the other HTL one.
All was working fine!

I thought I had to comment out the listeners because they were a problem. They were until about 5 minutes ago (I decided to take my shoes for a walk!).

I’ve just reread your reply. The comments aren’t meant tot be there!

All is working fine now! Thanks

[rpg_digital]

Just because I quite enjoy these exercises I have updated your javascript a bit. I’m not sure where you sourced the original, but it seems quite dated.

Some of the newer methods used.

Updated your var declarations with const and let

Element.closest
This saves the need for the previous sibling while loop you have in your script

For…of
An alternative for looping through elements of an array

Template literals
A cleaner way to build strings with variables e.g. when making an HTML string

I have also created separate getCart, updateCart and deleteCart storage functions.

Maybe of interest, maybe not

// Cart storage functions
function getCart () {
  const cart = sessionStorage.getItem('cart');
  // if cart item doesn't exist, getItem will return null
  if (cart === null) {
    return []; // return an empty array
  }
  // otherwise return the cart object
  return JSON.parse(cart);
}

function updateCart (cart) {
  sessionStorage.setItem('cart', JSON.stringify(cart));
}

function deleteCart () {
  sessionStorage.removeItem('cart');
}

/* Add to Cart */
function addToCart (elem) {
  // get existing or new cart
  const cart = getCart();
  
  // use closest to look for the closest parent item of elem with a class of .product
  const productElem = elem.closest('.product');

  // use that parent as the root to search for children .productname and .price
  const productName = productElem.querySelector('.productname').textContent;
  const price = productElem.querySelector('.price').textContent;

  // add product to cart
  cart.push({ productName, price });
  // save updated cart
  updateCart(cart);
  displayCartAction(productName);
  displayCart(cart);
}

/* Render cart and new totals */
function displayCart (cart = []) {
  let total = 0;
  let cartTable = '';

  for (const product of cart) {
    const price = parseFloat(product.price.split('£')[1]);
    const formattedPrice = '£' + price.toFixed(2);
    const productName = product.productName;

    cartTable += `
        <tr>
          <td>${productName}</td>
          <td>${formattedPrice}</td>
        </tr>
      `;
    total += price;
  }

  // update total on website HTML
  document.getElementById('total').innerHTML = total.toFixed(2);
  // insert saved products to cart table
  document.getElementById('carttable').innerHTML = cartTable;
  // update items in cart on website HTML
  document.getElementById('itemsquantity').innerHTML = cart.length;
}

// Clear cart
function emptyCart () {
  // clear cart
  deleteCart();
  // update cart total
  displayCart([]);
  // clear alerts
  clearCartAction();
}

// user feedback on successful add
function displayCartAction (productName = '') {
  const alerts = document.getElementById('alerts');
  alerts.innerHTML = `${productName} was added to the cart`;
  alerts.classList.add('message');
}

function clearCartAction () {
  const alerts = document.getElementById('alerts');
  alerts.innerHTML = '';
  alerts.classList.remove('message');
}

// initial cart display
displayCart(getCart());

/* button event listeners */
document.getElementById('emptycart').addEventListener('click', emptyCart);

document.querySelectorAll('.addtocart')
  .forEach((button) => {
    button.addEventListener('click', (event) => addToCart(event.target));
  });

[hobnobby]

I appreciate the code. I will try it out as it looks like it overcomes my next hurdle with the olde code.

[hobnobby]

Hi,
I want to check my understanding of your code:

From your code;

cart.push({ productName, price });
  // save updated cart
  updateCart(cart);
  displayCartAction(productName);
  displayCart(cart);

I did this;
I’ve displayed the products as a grid on my site.
As to not mess things up, I decided on the make a few adjustments as shown below.

I’m assuming that your code selects the productname and price for the cart.
I’ve put the productname as .productname {display: none} as if would ruin my page if it was displayed.

 <div class="product">
            <div><p>Studio</p></div>
            <div class="productName">
              <h3>Energy Performance Certificate (EPC) for a Studio Apartment</h3>
           <div><p>65.00</p></div>
            <div class="price" style="color: blue"><p><b>55.00</b></p></div>
            <div><a href="https://www.ecobunny.co.uk"><button type="button" class="addtocart">Book Now</button></a></div>
            </div> 
            </div> 

If I am right;
When product is selected that this will be shown in the cart (can you let me know?);

Energy Performance Certificate (EPC) for a studio apartment £55.00