similarBoats.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property label="Enter the property you want to compare by" name="similarBy" type="String" datasource="Type,Price,Length"/>
            <objects>
                <object>Boat__c</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

similarBoats.js

import { api, LightningElement, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation'
import getSimilarBoats from '@salesforce/apex/BoatDataService.getSimilarBoats';

const BOAT_OBJECT = 'Boat__c';

export default class SimilarBoats extends NavigationMixin(LightningElement) {
    // Private
    currentBoat;
    relatedBoats;
    boatId;
    error;
    
    @api
    get recordId() {
        return this.boatId;
    }
    set recordId(value) {
        //sets boatId attribute
        this.setAttribute('boatId', value);        
        //sets boatId assignment
        this.boatId = value;
    }
    
    @api
    similarBy;
    
    // Wire custom Apex call, using the import named getSimilarBoats
    // Populates the relatedBoats list
    @wire(getSimilarBoats, {boatId: '$boatId', similarBy: '$similarBy'})
    similarBoats({ error, data }) {
        if (data) {
            this.relatedBoats = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
        }
    }

    get getTitle() {
      return 'Similar boats by ' + this.similarBy;
    }

    get noBoats() {
      return !(this.relatedBoats && this.relatedBoats.length > 0);
    }
    
    // Navigate to record page
    openBoatDetailPage(event) {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: event.detail.boatId,
                objectApiName: BOAT_OBJECT,
                actionName: 'view'
            },
        });
    }
}

similarBoats.html

<template>
    <lightning-card title={getTitle} icon-name="custom:custom54">
        <lightning-layout multiple-rows="true">
            <template if:true={noBoats}>
                <p class="slds-align_absolute-center">There are no related boats by {similarBy}!</p>
            </template>
            <!-- Loop through the list of similar boats -->
            <template for:each={relatedBoats} for:item="boat">
                <!-- Responsive lightning-layout-item -->
                <lightning-layout-item key={boat.Id} padding='around-small' size='12' small-device-size='6' medium-device-size='4' large-device-size='4'>
                    <!-- Each boat tile goes here -->
                    <c-boat-tile boat={boat} onboatselect={openBoatDetailPage}></c-boat-tile>
                </lightning-layout-item>
            </template>
      </lightning-layout>
    </lightning-card>
</template>