How can I use liquid filters in javascript for image resizing and price formatting?

Technical Q&A
,
1

Hi,

Im creating a custom AJAX cart and just stuck on a a few formatting bits.

I have this part of my javascript which is getting the updated info from the cart and displaying it, my issue is with the image and the prices. In Liquid I can use this to output a resized version of the image url:

{{ item.image | img_url: ‘200x’ }}

but in my javascript I can only get the standard URL not the resized one:

${item.image}

How can I put the url from javascript through the shopify filter?

Similarly my price is just displaying as an integer whereas Id like to put it through this filter:

{{ item.price | money_with_currency }}

Heres the part of my script outputting these variables:

var itemContent = `
            <div class=''>
                 <img src='${item.image}' alt='${item.title }' width='200px' height='auto' />
            </div>
             <div class='qps-cart-title'>
            <h3>${item.title}</h3>
            </div>
            <div class='qps-cart-price'>
      ${item.price}
  </div>
<div class='qps-cart-qty'>
${item.quantity}
  </div>
   <div class='qps-cart-remove'>
    <a href="#" class="remove-from-cart" data-variant-id="${item.variant_id}">Remove from Cart</a>
    </div>`;

Thanks

2

For price:

const formattedPrice = Shopify.formatMoney(item.price, '{{ shop.money_format }}');

Make sure you are using it in liquid file inside the script tag.

For image:

const originalImageUrl = `${item.image}`;
const resizeImageUrl = (url, size) => {
  const urlParts = url.split('.');
  const extension = urlParts.pop();
  const baseName = urlParts.join('.'); 
  const resizedUrl = `${baseName}_${size}.${extension}`;
  
  return resizedUrl;
};

const resizedImageUrl = resizeImageUrl(originalImageUrl, '200x');
3

Thanks,

I just tried the price fix but it throws this error:

Error fetching cart information: TypeError: Shopify.formatMoney is not a function

I also tried changing the code to this to try to use the money_with_currency filter I had been using but then get this error:

Error fetching cart information: TypeError: Shopify.money_with_currency is not a function

I did have the HTML in a file called ajax-cart-drawer.liquid and the js in a file called ajax-cart.js but have moved all the js into the liquid file within the {% javascript %} section. Is that the correct place or should I include it with a script tag in the main part of the file?