Add Price Drop

Confirm AEM Script placement

The first step to adding Price Drop is to confirm that the AEM script is in place on the domain they intend to implement this feature on. Because this feature is tied to AEM, the AEM script must be in place for this feature to show. If it is on the site, you can find it in the domain’s Developer tab, either in the Head or Footer Scripts area. (The best place for it to go is in the Footer Scripts, so if you do find it in the Head, please move it to the Footer.)

 

Open

 

 

Open

 

A typical AEM script follows this format:

Incorrect Script in Place

In some rare scenarios, a dealer opting in to this feature may be using the “old” version of the AEM script, which looks something like this:

If you do find that this version is in place, we should replace it with the new version above. Simply pull the combination of characters in the {PSM provided key} area out of the old script and place it in the new one, place the new one in the Footer scripts, and then delete the old one.

Example:

would then become

No Script in Place

If neither version of the script is in place on the site, then we need the AM to get in touch with AEM to provide the script for us. Once we receive it, we should place it in the Footer Scripts. Once this is completed, we can move on to actually placing the button.

Confirm SRP/VDP Template type

The next step we need to take involves changing the templates we use for our SRP and VDP. To determine which steps we need to take to add the Price Drop component, we need to check if we are using the default templates or if we’re using a custom template.

To confirm which one we’re using, there are two places we can check.

Company Profile

If we navigate to Settings > Company Profile, there is a spot on the profile that lists the current names of the templates being used. Typically, templates are account-wide.

Registrations

If we navigate to Products > Registrations, and select an individual type, it displays the template being used.

We will be changing the template over in this area in the next steps, so this can be the better place to look.

Reading the Template Name

We have two types of templates we can expect to find here – default and custom.

Default Templates

The templates you are most likely to find are UnitDetailv2.cshtml and UnitListItemv2.cshtml. These are our current (V2/Version 2) default templates that the majority of our dealers are operating on. This template looks like this on the front end:

There may be additional elements added or hidden, but the basic setup of the pages should resemble the above images.

However, we also have a V1 template that some dealers are still using, which are named UnitDetail.cshtml and UnitListItem.cshtml. These templates look like this on the front end:

They must upgrade to V2 in order to use Price Drop. This comes with an additional fee, but the V2 version is a better user experience and we should encourage dealers to upgrade.

Custom Templates

Some dealers require a custom SRP/VDP template to suit their needs. They may use a custom template for BOTH SRP and VDP, or they may have a custom template only for one or the other. Either way, you can identify a custom template by the name, as it will typically feature the dealer’s name in the name of the template, or otherwise not follow the usual structure of UnitDetail, etc.

If the dealer is using a custom template, you’ll want to check the front end to see if it more closely resembles our default V1 or V2 template. If the custom template is based off of our V1 template, we will also need to upgrade them to V2 (and then potentially make a custom V2 template, depending on why they were using a custom V1 template). If the custom template is based off V2, then we are good to proceed with adding the Price Drop feature to the custom template.

Once you’ve determined which type of template the dealer is using, please follow the instructions below to implement accordingly.

Add to default template

This version is pretty easy. If the dealer is using the default template, then all that we need to do is switch them to the default AEM templates (which contains additional elements that allow for Price Drop to appear).

To switch this out, go to Products > Registrations, and select “Bulk Update Item Templates” in the top right corner of the page.

This will allow you to change the template for all registrations at once. Under the Product Group dropdown, select the “Select All” option. Then, check off both the check boxes next to Detail Template and Listing Item Template to allow you to edit the text in that field.

Finally, we will change out the wording in these fields to match our standard default AEM templates.

The Detail Template field should be set to UnitDetailv2AEM.cshtml

The List Item Template field should be set to UnitListItemV2AEM.cshtml

Once these are updated, go ahead and hit “Save”. Once this is saved out, the template will be replaced with the AEM standard templates instead. It may take a few minutes for the cache to clear, but at this point, you should see a Price Drop button on the SRP appear. It may appear positioned strangely, which we will fix in the Styling the button after placement step. However, you may notice that the button does not show on the VDP page – we must take an additional step to add this button to the VDP page (see Add to VDP after template adjustments below).

Add to custom template

To add the Price Drop button to a custom template, there will be some additional steps involved where we edit the template to include the elements it needs.

More coming soon!

Add to VDP after template adjustments

Once the new template is in place, we will need to instruct the VDP to show a Price Drop button. The template itself includes the ability for it to show, but it uses a toggle in the platform to turn it on.

To add Price Drop to the VDP page, we’ll want to navigate to the Websites > Content tab, and under the domain in question, find the dynamic-inventory-detail page.

This page controls what populates on our individual unit pages, and we can change the settings for the buttons in the Advanced tab of this page.

While there are two spots for adjusting button order (Button Layout and Link Layout), we will be using Button Layout in this case as dealers typically want this button to be large and clearly visible.

As you can see from the instructions next to the field and the items written in the field in the example, to change the order of the buttons (or what buttons appear, in general), you simply have to write the appropriate terms into the field as needed. The template update for the VDP signals to ICC that we can now use “pricedrop” as a term in this field – so go ahead and add this to the list of terms in the field (or if there’s nothing in the field, use the default order provided in the instructions to the left). Price Drop should usually be placed first on the list unless otherwise requested.

Example:

• Currently, in the example above, the order of terms in the field is paymentcalc,glp,contact,creditapp. If we want to add Price Drop to this list, it would become pricedrop,paymentcalc,glp,contact,creditapp.

Example 2:

• The field often has no content in it by default, meaning it defaults to the default order of glp,contact,makeoffer,requestinfo. To add Price Drop to this, we would put pricedrop,glp,contact,makeoffer,requestinfo into the field to establish the new order including Price Drop.

Once you add this to the list, make sure you Save & Publish at the bottom of the page to save your changes. It may take a minute, but when you reload the VDP, you should now see a Price Drop button at the top of the buttons on the VDP.

Styling the button after placement

Now that the button is placed, you may notice that it looks a little odd, or that the spacing between it and other buttons is off. We may also need to make some additional font or padding adjustments to ensure that it looks like a “regular” button, compared to the rest of the buttons.

Using CSS to style

This involves using some CSS to style the button. The class .psm-PD-ButtonType can be used to target the Price Drop button with whatever styling is needed.

A good place to start is to use the same styling as an existing button on the site you want to imitate. Since we want this button to stand out, we should typically follow the rules of the Primary button class on the site (usually primary-btn, but there may be other classes).

To find the classes of the button you’re trying to imitate, use the Inspect tool:

In this example, we can see the button in question is following several different rules to determine how it should look:

• font-size: 16px

• text-align: center

• padding: 15px (this is the padding on the outside of the text in the button, but inside the bounds of the button)

• background: #0153a0

• border: 1px solid #0153a0

• color: #fff !important (this is the color of the text)

All of these are instructions from the CSS to tell the button how to look. We could combine these into some CSS that tells our Price Drop button how to behave (though typically the Price Drop button comes with colors already assigned to it that you don’t need to override):

Some other rules that may be helpful to include:

• margin-top:#px - this adds a margin above the button to give it some space from the one above it; change the # to whatever number looks good, but usually 10-15px will do it

• margin-bottom:#px - this adds a margin below the button to give it some space from the one below it; change the # to whatever number looks good, but usually 10-15px will do it

• text-transform: uppercase - this causes the font to be forced into all uppercase, if it’s not doing that naturally

All of your rules should be contained within the {} brackets and each individual rule should be followed by semicolons ( ; ). Once you’ve compiled all of the rules you need (and you can test these out in the Inspect tool before you implement it for real to see if it has the effect you want), you’ll want to add them to the CSS file.

Adding CSS to the site’s CSS file

To add to the CSS file, navigate to the domain node’s CSS tab.

We have a specific place in the stylesheet where this CSS should go. You can search through the stylesheet using the Ctrl+F shortcut once you click into the text field of the stylesheet – it will pull up a box that looks like this:

The specific section of the stylesheet we need is one called /*-- Site-Specific Styling For Listing & Detail Pages --*/ – if you search for “site-specific” it will take you there.

As the title suggests, this is the area of the stylesheet where we place any custom styling we may need to do for Listing & Detail pages. Since this is a bit of custom styling for a button on the SRP/VDP, we should place it here. You’ll want to paste your rules near the bottom of the section, along with a “title” to explain what the styling is for, which makes it easy for other people to search for it in the future. To keep the text from appearing anywhere on the site, you’ll need to add a /* and a */ on each side of the title, like the example below.

Once you’ve added your CSS to the stylesheet (and confirmed your brackets are closed – aka, there’s a } at the end of your statement that closes it off like in the example above), hit Save and Publish in the bottom right. You’ll want to double check the SRP and VDP to make sure your styling took effect, and then you’re done!