Issue with Setting Image src in Repeater from getCurrentCart lineItems

Ask the community
, ,
1

Hello Wix Community,

I’m facing an issue while working with a repeater in Wix to display items from the current cart using the getCurrentCart function. The problem arises when I try to set the src property of an image element in the repeater.

Details:

Functionality: I’m retrieving the current cart’s line items using the following code:

import { Permissions, webMethod } from "wix-web-module";
import wixStoresBackend from "wix-stores-backend";

export const getCurrentCart = webMethod(
  Permissions.Anyone, 
  () => wixStoresBackend.getCurrentCart()
);

Usage in Repeater:

import { getCurrentCart } from 'backend/cart.web';

$w.onReady(function () {
    $w('#cart-repeater').onItemReady(($item, itemData, index) => {
        $item('#product-name').text = itemData.name;
        $item('#product-image').src = itemData.mediaItem.src;
        console.log('itemData.mediaItem.src', itemData.mediaItem.src);
        $item('#product-price-single').text = itemData.priceData.price.toLocaleString("de-DE", { style: "currency", currency: itemData.currency });
        $item('#product-price-total').text = itemData.priceData.totalPrice.toLocaleString("de-DE", { style: "currency", currency: itemData.currency });
        $item('#product-size').text = `${itemData.options[0].option}: ${itemData.options[0].selection}`;
        $item('#product-counter').value = itemData.quantity;
    });
    populateCartItems();
});

async function populateCartItems() {
    const cart = await getCurrentCart();
    console.log('cart', JSON.stringify(cart));
    const { lineItems } = cart;
    $w('#cart-repeater').data = lineItems.map(item => ({ ...item, _id: item.productId, currency: cart.currency.code }));
    $w('#cart-status-box').changeState(lineItems.length > 0 ? 'full' : 'empty');
}

Example Cart Data:

{
  "_id": "82bc5b2e-a188-4069-9659-d90fdff0778a",
  "status": "INCOMPLETE",
  "billingAddress": null,
  "appliedCoupon": null,
  "buyerInfo": { "identityType": "VISITOR" },
  "currency": { "symbol": "€", "code": "EUR" },
  "lineItems": [
    {
      "id": 1,
      "productId": "9c7c81da-8ff2-40ab-a6d8-6cf0e3833010",
      "name": "2 in 1: Ganganalyse und Einlagen",
      "quantity": 2,
      "weight": 1,
      "lineItemType": "PHYSICAL",
      "customTextFields": [],
      "mediaItem": {
        "src": "wix:image://v1/https:/bf4b98_82e57741606445e787fbc0ff5b9d9d83~mv2.jpg#originWidth=2511&originHeight=3348",
        "type": "IMAGE"
      },
      "options": [{ "option": "Schuhgröße", "selection": "36" }],
      "convertedPriceData": { "price": 249, "totalPrice": 498 },
      "priceData": { "price": 249, "totalPrice": 498 },
      "price": 249,
      "totalPrice": 498
    },
    {
      "id": 2,
      "productId": "7dcb6746-e289-f532-dd33-313c4fc4a957",
      "name": "Ganganalyse",
      "quantity": 1,
      "lineItemType": "PHYSICAL",
      "customTextFields": [],
      "mediaItem": {
        "src": "wix:image://v1/https:/bf4b98_4b9ce5b257a648b1bf2c2557dd6a154b~mv2.png#originWidth=2472&originHeight=3276",
        "type": "IMAGE"
      },
      "options": [{ "option": "Schuhgröße", "selection": "36" }],
      "convertedPriceData": { "price": 149, "totalPrice": 149 },
      "priceData": { "price": 149, "totalPrice": 149 },
      "price": 149,
      "totalPrice": 149,
      "weight": 0
    }
  ],
  "shippingInfo": null,
  "totals": {
    "discount": 0,
    "quantity": 3,
    "shipping": 0,
    "subtotal": 647,
    "tax": 0,
    "total": 647,
    "weight": 2
  },
  "weightUnit": "KG"
}

Problem:
When I try to set the image src using the mediaItem.src property, I get the error stating that the src must be a valid URL. The src value I’m dealing with looks like this:

wix:image://v1/https:/bf4b98_82e57741606445e787fbc0ff5b9d9d83~mv2.jpg#originWidth=2511&originHeight=3348

It appears that there’s an extra https:/ in the URL, which is likely causing the issue.

What I’ve Tried:

  • I attempted to remove the extra https:/ from the URL before setting the src, which partially worked, but I still encountered the same error.
  • I logged both the original and modified URLs to verify their correctness.

Request for Help:

Has anyone else faced a similar issue with getCurrentCart and handling wix:image:// URLs? Is there a more reliable way to format these URLs or handle this situation? Any advice or alternative approaches would be greatly appreciated!

Thank you for your assistance!

Best regards

2

If you’re having trouble displaying images from your current cart in a Wix repeater due to the wix:image:// URL format, you need to convert these URLs to standard HTTPS URLs before setting them as the src for your image elements. Here’s how you can do it:

3

import { getCurrentCart } from ‘backend/cart.web’;
import wixMedia from ‘wix-media’; // Import Wix Media module

$w.onReady(function () {
$w(‘#cart-repeater’).onItemReady(($item, itemData, index) => {
$item(‘#product-name’).text = itemData.name;

    // Convert the wix:image URL to a valid HTTPS URL
    const imageUrl = wixMedia.getImageUrl(itemData.mediaItem.src);
    $item('#product-image').src = imageUrl;

    $item('#product-price-single').text = itemData.priceData.price.toLocaleString("de-DE", { style: "currency", currency: itemData.currency });
    $item('#product-price-total').text = itemData.priceData.totalPrice.toLocaleString("de-DE", { style: "currency", currency: itemData.currency });
    $item('#product-size').text = `${itemData.options[0].option}: ${itemData.options[0].selection}`;
    $item('#product-counter').value = itemData.quantity;
});
populateCartItems();

});

4

This code ensures that images are displayed correctly by converting the wix:image:// URLs to standard HTTPS URLs that can be rendered by browsers.