merchandising/saver-to-main-upsell-bottom



Earn Miles in Main

Enjoy the perks of flying Main:

  • No middle seat
  • Overhead Bins
  • Personal Item
+$1337 USD per pax
BE MAIN BE LAME

# 🏠 Properties

Name Type

# 🎰 Slots

Name Default value
            
Show Code
<script src="/components/shared/component-base.js"></script> <script src="/components/saver-to-main-upsell-bottom/main.js"></script> <link rel="stylesheet" href="/components/shared/component-base.css" /> <button onclick="fireDemo('demo1')">Upsell 1</button> <button onclick="fireDemo('demo2')">Upsell 2</button> <button onclick="fireDemo('demo3')">Upsell 3</button> <saver-to-main-upsell-bottom id="demo1" price="60" upgradeLink="https://www.google.com" ></saver-to-main-upsell-bottom> <br/> <saver-to-main-upsell-bottom roundtrip id="demo2" firstIcon='boarding-pass-filled' secondIcon='chat' thirdIcon='plane-diag-fill'></saver-to-main-upsell-bottom> <saver-to-main-upsell-bottom id="demo3" roundtrip price="1337" cancelLink="#" upgradeLink="#"> <span slot="upsell-title">Earn Miles in Main</span> <p slot="upsell-message-secondary">Enjoy the perks of flying Main: </p> <ul slot="upsell-message-content"> <li class="upsell-message-list-item"> <span>No middle seat</span> </li> <li class="upsell-message-list-item"> <span>Overhead Bins</span> </li> <li class="upsell-message-list-item"> <span>Personal Item</span> </li> </ul> <div slot="upsell-price-content"> <span class="upsell-price">+$1337 USD</span> per pax </div> <span slot="upgrade-action"> BE MAIN </span> <span slot="decline-action"> BE LAME </span> </saver-to-main-upsell-bottom> <script> function fireDemo(elName) { var upsell = document.getElementById(elName); upsell.removeAttribute("open"); upsell.setAttribute("open", ''); } var upsell = document.getElementById('demo1'); upsell.addEventListener('declineUpgrade', (data) => { console.log('received declineUpgrade'); }) </script>