Workshop 5.4: SDK Configuring a Custom Price Tag

Custom prices tags unlike the regular ones allow displaying additional information on the order whether as any kind of calculated discounts or amount of freebies.

To create a custom price tag:

Create an HTML template that will replace the standard display of price tags.

Click to view an example of the HTML template

<div
    class="price-tag-sdk-tooltip__custom"
    style="font-family: 'Salesforce Sans', Arial, sans-serif; max-width: 400px"
>
    <h4
        class="price-tag-heading__custom"
        style="
            text-transform: uppercase;
            background: #e6e6e6;
            color: #3e3e3c;
            min-height: 30px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 16px;
            padding-left: 30px;
            padding-right: 30px;
        "
    >
        Discounts Title
    </h4>
    <ul
        style="list-style: none; margin: 0; padding: 0"
        class="price-tag-discount-list__custom"
    >
        <li
            style="
                padding-left: 30px;
                padding-right: 30px;
                border-bottom: 1px solid #d0d0d0;
            "
            class="discount-item__custom"
        >
            <h5
                style="
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    position: relative;
                    font-weight: 700;
                    font-size: 14px;
                    line-height: 30px;
                    display: flex;
                    align-items: center;
                "
                class="discount-heading__custom"
            >
                <div
                    style="font-weight: 700; font-size: 14px; line-height: 30px"
                    class="discount-heading__name"
                >
                    Discount Name
                </div>
                <div
                    style="
                        font-weight: 700;
                        font-size: 14px;
                        line-height: 30px;
                        display: flex;
                        align-items: center;
                        color: #76bb31;
                        justify-content: center;
                    "
                    class="discount-heading__rate__custom"
                >
                    7%
                </div>
            </h5>
        </li>
        <li
            style="padding-left: 30px; padding-right: 30px"
            class="discount-item__custom"
        >
            <h5
                style="
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    position: relative;
                    font-weight: 700;
                    font-size: 14px;
                    line-height: 30px;
                    display: flex;
                    align-items: center;
                "
                class="discount-heading__custom"
            >
                <div
                    style="font-weight: 700; font-size: 14px; line-height: 30px"
                    class="discount-heading__name__custom"
                >
                    Discount Name 2
                </div>
                <div
                    style="
                        font-weight: 700;
                        font-size: 14px;
                        line-height: 30px;
                        display: flex;
                        align-items: center;
                        color: #76bb31;
                        justify-content: center;
                    "
                    class="discount-heading__rate__custom"
                >
                    10%
                </div>
            </h5>
        </li>
    </ul>
</div>

Create and add an Apex class to your Salesforce org to bring the created HTML layout over the standard price tag display.
Go to Settings and click New.
Select SDK Setting record type and click Next.
Fill in the fields:

The full description of the fields is available here.
- Fill in Order type and Sales Organization fields.
  
  The setting is searched by the information set in the fields and applied accordingly:
  1. First searched the setting with Order Type and Sales Organization filled in so that the setting will be applied to the records of mentioned order types and sales organizations.
  2. If not found with both fields, the next suitable setting is searched with only the Sales Organization filled so that the setting will be applied to all records going by the mentioned sales organization.
  3. Last searched the suitable setting with no specified fields.
  4. If nothing is found, the setting won’t be applied.
- SDK Type: getOrderLineItemPriceTag.
- Platform: select where to apply the setting.
  
  Currently, the setting will be not applied on mobile devices.
- Version: v1. Currently, only v1 is available, otherwise, the setting won’t be applied.
- Implementation: type in the name of the created Apex class in step 2.
- Parameters: leave empty.
Click Save.

Now, when the setting is complete, you should be able to see the custom layout on the order display.