A partial is a fragment that can contain html, css, and javascript. A common example is credit card and ad placements found in various places in AlaskaAirCom.

Personalization is an opt-in feature. This is a mobile credit card ad placed on the m.alaskaair.com payment page. It's looking for a cookie to know if you have a Bank of America credit card. If you do, it returns a different variant of the ad. Partials personalized with cookies need to be tested within the alaskaair.com domain.

Custom data can also be sent to the partials to be rendered in using the partial client's LiquidJS templating engine. All attributes attached to the `cms-partial` will be automatically sent to the Client and rendered into the partial before being returned back to the client.

These values are sent by manually setting the elements smartValues property via JavaScript instead of through attributes.

Note: Don't forget to use the personalized and smart attributes whenever you use Smart Values!

This can be particularly useful for personalizing partials based on the contents or values on the page:

For more information about setup and troubleshooting tips, checkout our Partials and Smart Partials documentation in the Content Enablement space!

# 🏠 Properties

# 🎰 Slots

            
Show  Code
            
<script src="/components/shared/component-base.js"></script>
<script src="/components/cms-partial/main.js"></script>
<link rel="stylesheet" href="/components/shared/component-base.css" />
<link
  rel="stylesheet"
  href="https://unpkg.com/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css"
/>
<link
  rel="stylesheet"
  href="https://unpkg.com/@alaskaairux/webcorestylesheets@latest/dist/bundled/essentials.css"
/>

<script
  src="https://unpkg.com/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js"
  type="module"
></script>
<script
  src="https://unpkg.com/@alaskaairux/auro-button@latest/dist/auro-button__bundled.js"
  type="module"
></script>

<p>
  A partial is a fragment that can contain html, css, and javascript. A common
  example is credit card and ad placements found in various places in
  AlaskaAirCom.
</p>
<cms-partial path="shopping/compare-fare-upsell-table"></cms-partial>
<br />
<p>
  Personalization is an <em>opt-in</em> feature. This is a mobile credit card ad
  placed on the m.alaskaair.com payment page. It's looking for a cookie to know
  if you have a Bank of America credit card. If you do, it returns a different
  variant of the ad.
  <strong
    >Partials personalized with cookies need to be tested within the
    alaskaair.com domain.</strong
  >
</p>
<cms-partial personalized path="mow/payment"></cms-partial>

<br />

<p>
  Custom data can also be sent to the partials to be rendered in using the
  partial client's LiquidJS templating engine. All attributes attached to the
  `cms-partial` will be automatically sent to the Client and rendered into the
  partial before being returned back to the client.
</p>

<p>
  These values are sent by manually setting the elements
  <code>smartValues</code> property via JavaScript instead of through
  attributes.
</p>

<p>
  Note: Don't forget to use the <code>personalized</code> and <code>smart</code> attributes whenever you use Smart Values!
</p>

<p>
  This can be particularly useful for personalizing partials based on the
  contents or values on the page:
</p>



<script>
  const updateSmartExample = () => {
    const smartPrice = document.getElementById("smart-value-input").value;
    document.getElementById("smart-update-example").smartValues = {
      price: smartPrice || "$7",
    };
  };
</script>

<auro-input required id="smart-value-input">
  <span slot="label">Value to use with Smart Partial</span>
</auro-input>
<auro-button onclick="updateSmartExample()">Submit</auro-button>

<br />
<br />

<cms-partial
  personalized
  smart
  path="smart/example-smart-values"
  id="smart-update-example"
></cms-partial>

<br />

<p>
  For more information about setup and troubleshooting tips, checkout our
  <a
    href="https://alaskaair.sharepoint.com/sites/ECOMt/Engineering/Enablement/Content-Enablement/SitePages/Partials.aspx"
    >Partials</a
  >
  and
  <a
    href="https://alaskaair.sharepoint.com/sites/ECOMt/Engineering/Enablement/Content-Enablement/SitePages/Smart-Partials.aspx"
    >Smart Partials</a
  >
  documentation in the Content Enablement space!
</p>