Skip to content

Instantly share code, notes, and snippets.

@kmesic
Created March 19, 2019 17:18
Show Gist options
  • Save kmesic/54e6e7c6fd33a67457f3b1d8201c4c04 to your computer and use it in GitHub Desktop.
Save kmesic/54e6e7c6fd33a67457f3b1d8201c4c04 to your computer and use it in GitHub Desktop.
img.product {
height: 120px;
max-width: initial;
pointer-events: none;
}
<template>
<lightning-card title="Similar Products" icon-name="standard:link">
<div class="slds-m-horizontal_medium">
<template if:true={similarProducts.data}>
<template if:true={similarProducts.data}>
<template for:each={similarProducts.data} for:item="product">
<c-product-list-item key={product.Id} product={product}></c-product-list-item>
</template>
</template>
<template if:false={similarProducts.data.length}>
<c-placeholder message="No similar products"></c-placeholder>
</template>
</template>
<template if:true={errors}>
<c-inline-message message="An error has occurred while retrieving similar products" errors={errors}></c-inline-message>
</template>
</div>
</lightning-card>
</template>
import { LightningElement, api, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import getSimilarProducts from '@salesforce/apex/ProductController.getSimilarProducts';
import PRODUCT_FAMILY_FIELD from '@salesforce/schema/Product__c.Product_Family__c';
const fields = [PRODUCT_FAMILY_FIELD];
export default class SimilarProducts extends LightningElement {
@api recordId;
@api familyId;
@track product;
// Track changes to the Product_Family__c field that could be made in other components.
// If Product_Family__c is updated in another component, getSimilarProducts
// is automatically re-invoked with the new this.familyId parameter
@wire(getRecord, { recordId: '$recordId', fields })
product;
@wire(getSimilarProducts, {
productId: '$recordId',
familyId: '$product.data.fields.Product_Family__c.value'
})
similarProducts;
get errors() {
const errors = [this.product.error, this.similarProducts.error].filter(
error => error
);
return errors.length ? errors : undefined;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Similar Products (LWC)</masterLabel>
<targets>
<target>lightning__RecordPage</target>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
</targets>
<targetConfigs>
<targetConfig targets="lightningCommunity__Default">
<property
name="recordId"
type="String"
label="Record Id To Find Similarities With"
description="Default uses the current page's record id. Modify if you want a specific record to use."
default="{!recordId}" />
</targetConfig>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Product__c</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment