0

Can someone help with correcting my LWC code? I'm trying to get a logo to display dynamically based on URL parameters in Experience Cloud, but I cannot get it to render the static resource images.

The goal is for the URL parameter "brand" to be passed in to the JS component and dynamically display logos with IF/Then statements.

https://Example--uat.sandbox.my.site.com/s/**?brand=facebook**

HTML File:

<lightning-card title=" ">  

    <img src={dynamicLogo} alt="testing" width='200' height='150'>  

    </lightning-card>  

JavaScript File:

import { LightningElement } from 'lwc'; 
import resource_fb from '@salesforce/resourceUrl/facebook';
import resource_az from '@salesforce/resourceUrl/amazon ';  
import resource_nf from '@salesforce/resourceUrl/netflix';  
import resource_gl from '@salesforce/resourceUrl/google';  
import resource_sf from '@salesforce/resourceUrl/salesforce';
export default class MyComponent extends LightningElement { 
    connectedCallback() { 
        const url = new URL(window.location.href); 
        const params = new URLSearchParams(url.search); 
        const brand = params.get('brand'); 
        if (brand === 'facebook') { 
            dynamicLogo = resource_fb;  
        } else if (brand === 'amazon') { 
            dynamicLogo = resource_az;  
        } else if (brand === 'netflix') { 
            dynamicLogo = resource_nf;  
        } else if (brand === 'google') { 
            dynamicLogo = resource_gl;  
        } else { 
            dynamicLogo = resource_sf;  
        } 
    } 
} 

XML File:

<apiVersion>57.0</apiVersion> 

<isExposed>true</isExposed> 

<targets> 

    <target>lightningCommunity__Page</target> 

    <target>lightning__AppPage</target> 

    <target>lightningCommunity__Default</target> 

1 Answer 1

0

In order to set a class property, you should use this. before the property name. In the connectedCallback you missed it when setting dynamicLogo, so you're setting a local variable, while the instance one is never initialized, therefore in the template it would always resolve to undefined.

Changing dynamicLogo = to this.dynamicLogo = would fix it:

export default class MyComponent extends LightningElement {
    dynamicLogo;

    connectedCallback() { 
        const url = new URL(window.location.href); 
        const params = new URLSearchParams(url.search); 
        const brand = params.get('brand'); 
        if (brand === 'facebook') { 
            this.dynamicLogo = resource_fb;  
        } else if (brand === 'amazon') { 
            this.dynamicLogo = resource_az;  
        } else if (brand === 'netflix') { 
            this.dynamicLogo = resource_nf;  
        } else if (brand === 'google') { 
            this.dynamicLogo = resource_gl;  
        } else { 
            this.dynamicLogo = resource_sf;
        } 
    } 
}

By the way, instead of multiple if-else, you could leverage a map or a plain object with bracket notation:

import { LightningElement } from 'lwc'; 
import resource_fb from '@salesforce/resourceUrl/facebook';
import resource_az from '@salesforce/resourceUrl/amazon ';  
import resource_nf from '@salesforce/resourceUrl/netflix';  
import resource_gl from '@salesforce/resourceUrl/google';  
import resource_sf from '@salesforce/resourceUrl/salesforce';

const BRAND_TO_LOGO = {
    facebook: resource_fb,
    amazon: resource_az,
    netflix: resource_nf
    google: resource_gl
};

export default class MyComponent extends LightningElement {
    dynamicLogo;

    connectedCallback() { 
        const url = new URL(window.location.href); 
        const params = new URLSearchParams(url.search); 
        const brand = params.get('brand'); 
        this.dynamicLogo = BRAND_TO_LOGO[brand] || resource_sf;
    } 
}

I used the logical OR (||) operator to assign the default value (resource_sf) if the brand is not found in the object properites, so if the left operand is falsy

2
  • Thanks @ RubenDG and @ Raul. I applied both your suggestions and it is working!
    – Taku
    Jul 29, 2023 at 13:27
  • @Taku You're welcome. Please consider to mark helpful answers provided to your questions as accepted, to benefit the whole community. Here you can read why this is a good practice.
    – RubenDG
    Jul 29, 2023 at 20:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .