How to show my product price on pop-up cart

Milelike · August 28, 2024, 12:44pm

Hello,

I using a craft theme and after clicking on the add to cart button it will pop up a small window of my cart, I would like to know how to show my product price here and how to change its background to white color.

BSSCommerce-HDL · August 28, 2024, 12:49pm

Hi @Milelike ,
Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

Johnwick · August 28, 2024, 1:53pm

To display the product price in the cart pop-up and change its background to white, you can add custom CSS and modify the theme code. Here’s how:

Add Price Display:
Go to your theme’s cart-template.liquid file or wherever the cart pop-up is defined. Find the section where the product details are shown and insert the code to display the product price, typically {{ item.final_price | money }}.
Change Background Color:
Add the following CSS code to your theme.css file or directly within the cart pop-up section:

css
Copy code

.cart-popup { background-color: #ffffff; }

These steps should help you customize your cart pop-up as needed.

Regards : bestbuyshutters

BSSCommerce-B2B · August 28, 2024, 4:31pm

Hi @Milelike , it need some custom codes, follow these step

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code before

Step 4: Go to the cart-notification.js and replace all the code by this one

var Shopify = Shopify || {};

Shopify.formatMoney = function(cents, format) {
  if (typeof cents === 'string') {
    cents = cents.replace('.', '');
  }
  
  var value = '';
  var placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
  var formatString = (format || this.money_format);

  function defaultOption(opt, def) {
    return (typeof opt === 'undefined' ? def : opt);
  }

  function formatWithDelimiters(number, precision, thousands, decimal) {
    precision = defaultOption(precision, 2);
    thousands = defaultOption(thousands, ',');
    decimal = defaultOption(decimal, '.');

    if (isNaN(number) || number == null) {
      return 0;
    }

    number = (number / 100.0).toFixed(precision);

    var parts = number.split('.'),
        dollars = parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands),
        cents = parts[1] ? (decimal + parts[1]) : '';

    return dollars + cents;
  }

  switch (formatString.match(placeholderRegex)[1]) {
    case 'amount':
      value = formatWithDelimiters(cents, 2);
      break;
    case 'amount_no_decimals':
      value = formatWithDelimiters(cents, 0);
      break;
    case 'amount_with_comma_separator':
      value = formatWithDelimiters(cents, 2, '.', ',');
      break;
    case 'amount_no_decimals_with_comma_separator':
      value = formatWithDelimiters(cents, 0, '.', ',');
      break;
  }

  return formatString.replace(placeholderRegex, value);
};

class CartNotification extends HTMLElement {
  constructor() {
    super();

    this.notification = document.getElementById('cart-notification');
    this.header = document.querySelector('sticky-header');
    this.onBodyClick = this.handleBodyClick.bind(this);

    this.notification.addEventListener('keyup', (evt) => evt.code === 'Escape' && this.close());
    this.querySelectorAll('button[type="button"]').forEach((closeButton) =>
      closeButton.addEventListener('click', this.close.bind(this))
    );
  }

  open() {
    this.notification.classList.add('animate', 'active');

    this.notification.addEventListener(
      'transitionend',
      () => {
        this.notification.focus();
        trapFocus(this.notification);
      },
      { once: true }
    );

    document.body.addEventListener('click', this.onBodyClick);
  }

  close() {
    this.notification.classList.remove('active');
    document.body.removeEventListener('click', this.onBodyClick);

    removeTrapFocus(this.activeElement);
  }

  renderContents(parsedState) {
    this.cartItemKey = parsedState.key;
    this.getSectionsToRender().forEach((section) => {
      document.getElementById(section.id).innerHTML = this.getSectionInnerHTML(
        parsedState.sections[section.id],
        section.selector
      );
    });

    if (this.header) this.header.reveal();
    this.open();
    const price = parsedState.price;
    const priceElement = document.createElement('span');
    priceElement.innerText = `Price: ${Shopify.formatMoney(price*100)}`;
    priceElement.classList.add('cart-notification-price');
    const notificationProduct = document.getElementById('cart-notification-product');
    if (notificationProduct) {
      notificationProduct.querySelector("div:nth-child(2)").appendChild(priceElement);
    }
  }

  getSectionsToRender() {
    return [
      {
        id: 'cart-notification-product',
        selector: `[id="cart-notification-product-${this.cartItemKey}"]`,
      },
      {
        id: 'cart-notification-button',
      },
      {
        id: 'cart-icon-bubble',
      },
    ];
  }

  getSectionInnerHTML(html, selector = '.shopify-section') {
    return new DOMParser().parseFromString(html, 'text/html').querySelector(selector).innerHTML;
  }

  handleBodyClick(evt) {
    const target = evt.target;
    if (target !== this.notification && !target.closest('cart-notification')) {
      const disclosure = target.closest('details-disclosure, header-menu');
      this.activeElement = disclosure ? disclosure.querySelector('summary') : null;
      this.close();
    }
  }

  setActiveElement(element) {
    this.activeElement = element;
  }
}

customElements.define('cart-notification', CartNotification);

Step 5. Save and you’ll get the result like this

Milelike · August 29, 2024, 2:38pm

Thank you for your respond, any way I can show the total price in this notification cart? now it is only show a price for 1 unit

BSSCommerce-B2B · August 29, 2024, 2:59pm

@Milelike , You want to show both product price and total price or just total price?

BSSCommerce-B2B · August 31, 2024, 1:27am

@Milelike , to show both change the code in cart-notification.js file like this

var Shopify = Shopify || {};

Shopify.formatMoney = function(cents, format) {
  if (typeof cents === 'string') {
    cents = cents.replace('.', '');
  }
  
  var value = '';
  var placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
  var formatString = (format || this.money_format);

  function defaultOption(opt, def) {
    return (typeof opt === 'undefined' ? def : opt);
  }

  function formatWithDelimiters(number, precision, thousands, decimal) {
    precision = defaultOption(precision, 2);
    thousands = defaultOption(thousands, ',');
    decimal = defaultOption(decimal, '.');

    if (isNaN(number) || number == null) {
      return 0;
    }

    number = (number / 100.0).toFixed(precision);

    var parts = number.split('.'),
        dollars = parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands),
        cents = parts[1] ? (decimal + parts[1]) : '';

    return dollars + cents;
  }

  switch (formatString.match(placeholderRegex)[1]) {
    case 'amount':
      value = formatWithDelimiters(cents, 2);
      break;
    case 'amount_no_decimals':
      value = formatWithDelimiters(cents, 0);
      break;
    case 'amount_with_comma_separator':
      value = formatWithDelimiters(cents, 2, '.', ',');
      break;
    case 'amount_no_decimals_with_comma_separator':
      value = formatWithDelimiters(cents, 0, '.', ',');
      break;
  }

  return formatString.replace(placeholderRegex, value);
};

class CartNotification extends HTMLElement {
  constructor() {
    super();

    this.notification = document.getElementById('cart-notification');
    this.header = document.querySelector('sticky-header');
    this.onBodyClick = this.handleBodyClick.bind(this);

    this.notification.addEventListener('keyup', (evt) => evt.code === 'Escape' && this.close());
    this.querySelectorAll('button[type="button"]').forEach((closeButton) =>
      closeButton.addEventListener('click', this.close.bind(this))
    );
  }

  open() {
    this.notification.classList.add('animate', 'active');

    this.notification.addEventListener(
      'transitionend',
      () => {
        this.notification.focus();
        trapFocus(this.notification);
      },
      { once: true }
    );

    document.body.addEventListener('click', this.onBodyClick);
  }

  close() {
    this.notification.classList.remove('active');
    document.body.removeEventListener('click', this.onBodyClick);

    removeTrapFocus(this.activeElement);
  }

  async renderContents(parsedState) {
    this.cartItemKey = parsedState.key;
    this.getSectionsToRender().forEach((section) => {
      document.getElementById(section.id).innerHTML = this.getSectionInnerHTML(
        parsedState.sections[section.id],
        section.selector
      );
    });

    if (this.header) this.header.reveal();
    this.open();

    // Fetch cart details and update total price
    const cart = await this.fetchCart();
    const totalCartPrice = cart.items.reduce((total, item) => total + item.final_line_price, 0);

    // Create price elements
    const productPriceElement = document.createElement('div');
    productPriceElement.innerText = `Product price: ${Shopify.formatMoney(parsedState.price * 100)}`;
    productPriceElement.classList.add('cart-notification-product-price');

    const totalPriceElement = document.createElement('div');
    totalPriceElement.innerText = `Total cart price: ${Shopify.formatMoney(totalCartPrice)}`;
    totalPriceElement.classList.add('cart-notification-total-price');

    // Append price elements to the notification
    const notificationProduct = document.getElementById('cart-notification-product');
    if (notificationProduct) {
      const productDiv = notificationProduct.querySelector("div:nth-child(2)");
      productDiv.appendChild(productPriceElement);
      productDiv.appendChild(totalPriceElement);
    }
  }

  async fetchCart() {
    const response = await fetch('/cart.js');
    const cart = await response.json();
    return cart;
  }

  getSectionsToRender() {
    return [
      {
        id: 'cart-notification-product',
        selector: `[id="cart-notification-product-${this.cartItemKey}"]`,
      },
      {
        id: 'cart-notification-button',
      },
      {
        id: 'cart-icon-bubble',
      },
    ];
  }

  getSectionInnerHTML(html, selector = '.shopify-section') {
    return new DOMParser().parseFromString(html, 'text/html').querySelector(selector).innerHTML;
  }

  handleBodyClick(evt) {
    const target = evt.target;
    if (target !== this.notification && !target.closest('cart-notification')) {
      const disclosure = target.closest('details-disclosure, header-menu');
      this.activeElement = disclosure ? disclosure.querySelector('summary') : null;
      this.close();
    }
  }

  setActiveElement(element) {
    this.activeElement = element;
  }
}

customElements.define('cart-notification', CartNotification);

Topic		Replies	Views
How to change background color of add to cart pop up window dawn theme Store Design	8	57	June 12, 2022
How can I change the background color of the Add to Cart pop up in Sense Theme? Store Design	5	15	June 9, 2022
Why isn't my cart price updating immediately in the popup? Store Design customizations , collection-page , cart-page , troubleshooting	3	22	May 19, 2023
How can I change the color of the 'Add to Cart' pop-up window? Store Design	4	14	August 27, 2021
How can I change the background color of my add to cart pop-up? Shopify Discussion	9	71	June 8, 2023

How to show my product price on pop-up cart

Related topics