Page Comparison

<p style="padding: 1rem 1rem 0 1rem;">ASSIGNMENT OFTEN HAS AGE RESTRICTIONS, SO ONLY GUESTS OF THE CORRECT AGE WILL APPEAR IN THE THE DROP DOWNS TO BE ASSIGNED TO PRODUCTS.</p>

<p><span vcloak=""> PRODUCTS OFTEN HAVE AGE RESTRICTIONS, SO ONLY GUESTS OF THE CORRECT AGE CAN BE ASSIGNED TO SPECIFIC PRODUCTS.</span></p>

<p>Be sure to provide accurate information, as an error may increase your risk of injury.</p> <ul> <li><strong>Skier Type I:</strong> Prefers easy moderate slopes and slower speeds.</li> <li><strong>Skier Type II:</strong> Ski Moderately. Prefer a Variety of speeds.</li> <li><strong>Skier Type III:</strong> Skis Aggressively. Normally ski at high speeds.</li> </ul>

<a href="YOUR_URL_GOES_HERE" target="_blank">Click to view</a> this information on identifying your skier type.		

<validate-code></validate-code>

<style><!--
:root {
--voucher-banner-background-color: #00cc99;
--voucher-label-weight: normal;
--voucher-label-color: #4d4dff;
--voucher-label-size: 0.875rem;
--voucher-button-text-color: #99ff33;
--voucher-button-text-size: 1.5em;
--voucher-button-background-color: #ff0066;
--voucher-text-weight: 500;

}
--></style>

 <div class="giftcard-message show-mobile">Do you have a <a v-on:click="showCheckoutProducts">gift card or stored value</a> to apply?</div>

<div style="opacity: 0.65; font-style: italic; line-height: 1.2em;">CONFIGURABLE GIFT CARD AND VOUCHER ENTRY TEXT HERE.</div>

<div class="payment-message" style="position: relative; top: -10px; padding: 1.6rem; background: #e8edf0; margin: 0 25px 25px 25px; line-height: 1.5;" v-if="personalization.HasPaymentPlan">By completing this purchase, I agree to the <a href="https://YOURURLFORTERMSANDCONDITIONSGOESHERE" target="_blank">Terms &amp; Conditions</a> for the payment plan products in my cart. The “Order Total” excludes amounts to be charged later on the payment plan.</div>

<div style="border: 1px solid #307cb9; padding: 1rem; text-align: center; background: #f2f2f2;">
<h4>Do not refresh this page</h4>
<p style="line-height: 1.3; margin-bottom: 0;">Processing the order may take a few moments. After clicking 'Confirm Order' do not refresh the page until the order is processed.</p>
</div>

<div class="renewal-banner" vcloak=""><h2 class="hdg hdg_28 hdg_48Md mix-hdg_color7" style="text-align: center;"><b>ANNOUNCEMENT HEADER</b></h2><div style="text-align: center;"><p class="xmsonormal" align="center"><span style="font-size: 12pt;">Announcement Text </span><span><o:p></o:p></span></p></div></div>

<div class="renewal-banner" vcloak=""> <h2 class="requires-signin">Renew Your Products Now!</h2> <h2 class="requires-signout"><b><a href="/login?ReturnUrl=/linkedproducts">Login</a></b> to Renew Your Passes!</h2> <p class="requires-signin">Visit the <a href="/linkedproducts">renew products</a> page to see your eligible products.</p> </div>

<div class="reloadSignInMessage"> <div class="message-description"> <h3 class="title">Reload your MEDIA NAME and save time!</h3> <h4 class="subhead">Already have a MEDIA NAME? Save time by reloading here.</h4> </div> <a class="btn btn-primary flat" :href="https://shop.jacksonhole.com/login?1080=2214&amp;1081=2217&amp;1082=2231&amp;ReturnUrl=%2Fs%2Flift-tickets%2Fp%2Flift-ticket-full-day">Sign In</a></div>

<div class="reloadSignInMessage"> <div class="message-description"> <h3 class="title">Sign in before you can reserve your passholder days!</h3> <h4 class="subhead">Sign in using the account you used to purchase your pass.</h4> </div> <a class="btn btn-primary flat" :href="loginLink">Sign In</a></div>		

<h2>Assign MEDIA NAME card</h2>
<p>Add a new MEDIA NAME card to this group member.</p>
<img src="ADD_IMAGE_URL" />

	<div style="background: #ffffff; padding: 10px; text-transform: none;" vcloak=""><span style="font-size: 9pt;">Need Help? You may need to reset your password or <br />find your account with your email or card.</span><br /><br />
	<span style="font-size: 9pt;"><a id="FindMeBtn" href="/register/findbyemail" style="border: 0px none; margin: 0px; padding: 0px; line-height: inherit; white-space: normal; font-style: normal; font-weight: bold; font-stretch: inherit; font-family: Avenir; font-size: 13.6px; vertical-align: baseline; cursor: pointer; text-decoration: underline ! important; color: inherit; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; background-color: #ffffff;">
	CLICK HERE TO FIND YOUR ACCOUNT</a></span></div>

<div style="padding-bottom: 8px;">Access your CUSTOM PAGE.</div> <a href="YOUR_LINK_GOES_HERE" class="btn btn-primary flat narrow" target="_blank" style="margin-bottom: 20px;">CTA HERE</a>

<style><!-- .page.store-closed-page { top: 17vh !important; left: 50%; right: 100px; padding: 1rem !important; max-width: 450px; transform: translatex(-50%); min-height: 0px !important; z-index: 10000 !important; width: 90vw; text-align: center; } .html-store-closed-page primary-header, .html-store-closed-page primary-footer { opacity: 0.5; } --></style>

<style><!-- .html-category-page #dynamic-hero { display: none !important; } --></style>

<style><!-- #body #hero-image #dynamic-hero { opacity: 1; top: 110px; } #body #hero-image { background-image: url("YOUR_HERO_IMAGE_URL_GOES-HERE"); } @media only screen and (max-width:959px) { #body #hero-image #dynamic-hero { top: 90px; } } --></style>

<script type='text/javascript' src='//static.queue-it.net/script/queueclient.min.js'></script><script data-queueit-c='RESORT'data-queueit-spa='true'type='text/javascript'src='//static.queue-it.net/script/queueconfigloader.min.js'></script>

<script>// <![CDATA[ function getInternetExplorerVersion() { var rv = -1; if (navigator.appName == 'Microsoft Internet Explorer') { var ua = navigator.userAgent; var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null) rv = parseFloat(RegExp.$1); } else if (navigator.appName == 'Netscape') { var ua = navigator.userAgent; var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null) rv = parseFloat(RegExp.$1); } return rv; } var ieVersion = getInternetExplorerVersion(); if (ieVersion > 0 && ieVersion < 11) { $('html').addClass('upgrade-browser') } // ]]></script> <div class="browsehappy"> <h1>Whoa there!</h1> <p>You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/" target="_blank">upgrade your browser</a> or use a different browser to improve your experience.</p> </div>		

<style>[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--nav {
    margin-bottom: 30px;
    position: relative;
}

[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .inventory-low-wrapper .inventory-low-message {
    flex-basis: 10%;
    background-color: #d6973e;
    color: white;
    text-align: center;
    padding: 3px;
    font-size: 0.75rem !important;
}

[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .price-major {
    display: none;
}

[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--nav::after {
    content: 'Click on any available calendar date to reserve';
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: #f2f2f2;
    padding: 5px 10px;
    border-radius: 3px;
    white-space: nowrap;
}

[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .inventory-low-wrapper .inventory-low-message ::after {
    flex-basiscontent: " 10%";
    background-colorposition: #d6973eabsolute;
    colormargin-bottom: white20px;
    text-align: center;
    paddingheight: 3px40px;
    fontbackground-size: 0.75rem !important;
image: url('https://shop.woodwardparkcity.com/images/uploaded/reservations-inventory-key.png');
    background-size: 320px auto;
    background-repeat: no-repeat;
    width: 90%;
    background-position: center;
    left: 50%;
    transform: translateX(-50%);
}

[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .price-majordatepicker--cell-day {
    displaybackground: none !important;
}

@media screen and (min-width: 768px) {
    [data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--nav::after {cell-day:not(.-disabled-) .price::after {
        content: 'Reserve'Click;
on any available calendar date to reserve';  font-size: 0.8em !important;
position:  absolute;     bottom: font-25px;weight: normal !important;
  left: 50%;     text-transform: translateX(-50%)uppercase;
    background: #f2f2f2;     padding: 5px2px 10px;
    border-radius: 3px;
    white-space: nowrap;
}}
    [data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper::after .datepicker--cell-day {
      content  background: "#88C583 "!important;
    position:}
absolute;     margin-bottom: 20px;
    text-align: center;[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--cell-day .price::after {
        heightcolor: 40px#4A4A4A !important;
    background-image: url('https://shop.woodwardparkcity.com/images/uploaded/reservations-inventory-key.png');     background-size: 320pxnone auto!important;
     background-repeat: no-repeat   font-size: 0.8em !important;
    width:}
90%;     background-position: center;
    left: 50%;
    transform: translateX(-50%);
}

[[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--celllowinventory-day {
        background: none#F7AD44 !important;
}  @media screen and}
(min-width: 768px) {
    [data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--cell-day:not(.-disabled-)lowinventory- .price::after {
        content: 'Reserve';
        font-size: 0.8em !important;
        font-weight: normal !important;
        text-transform: uppercase;
        padding: 2px 10px;
        color: #4A4A4A !important;
    }
}

@media screen and (max-width: 767px) {
    [data-category="CATEGORY_SEO_NAME"] .product-#commerce-store .product-pricing-calendar-wrapper .datepicker--cell-daynav::after {
        backgroundfont-size: #88C583 !important0.75rem;
    }
    [data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .datepickerdate-wrapper.full-cellwidth-daycalendar .price::afterdate-day {
        color: #4A4A4A !important;
        background: none !important;
        font-size: 0.8em65rem !important;
    }
    [data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .-lowinventory-datepicker--cell-day:not(.-disabled-) .date-day {
        backgroundleft: #F7AD44 !important50%;
        top: 50%;
    }    transform: [data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .-lowinventory- .price::after {translateX(-50%) translateY(-50%);
        height: 90%;
        contentwidth: 'Reserve'90%;
        fontmax-sizeheight: 0.8em !important32px;
        fontmax-weightwidth: normal !important32px;
        textline-transformheight: uppercase32px;
        paddingborder-radius: 2px 10px;
        colorbackground: #4A4A4A !important#88C583;
    } }  @media screen and (max-width: 767px) {color: #222;
    }
    [data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .datepicker--nav::aftercell-day.-lowinventory- .date-day {
        font-sizeleft: 0.75rem50%;
    }     [data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .date-day {top: 50%;
        transform:  font-size: 0.65rem !importanttranslateX(-50%) translateY(-50%);
    }     [data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .datepicker--cell-day:not(.-disabled-) .date-day {height: 90%;
         leftwidth: 50%90%;
        topmax-height: 50%32px;
        transformmax-width: translateX(-50%) translateY(-50%)32px;
        line-height: 90%32px;
        widthborder-radius: 90%10px;
        max-heightbackground: 32px#F7AD44;
        max-widthcolor: 32px#222;
    }
   line-height: 32px;
        border-radius: 10px;
        background: #88C583;
        color: #222;
    }
    [data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .datepicker--cell-day.-lowinventory- .date-day {
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        height: 90%;
        width: 90%;
        max-height: 32px;
        max-width: 32px;
        line-height: 32px;
        border-radius: 10px;
        background: #F7AD44;
        color: #222;
    }
}

</style>

<div class="payment-message" style="position: relative; top: -10px; padding: 1.6rem; background: #e8edf0; margin: 0 25px 25px 25px; line-height: 1.5;" v-if="personalization.HasPaymentPlan">
A credit card is being collected to collect payments. Payments will be collected monthly for products you are purchasing.
</div>	

<script>// <![CDATA[ (function() { // the DOM will be available here if this is placed at the end of the body tag console.log('TEMPORARY FIX FOR PAYMENT PLAN VERBIAGE') let paymentPlansAdminElement= document.getElementById("payment-plans-admin"); let innerParagraphs = paymentPlansAdminElement.getElementsByTagName("p"); //Should only be one paragraph innerParagraphs[0].innerHTML = "The following orders were purchased with payment plans. These indicated credit cards will be automatically charged the amount shown on the payment date; payments using the same card will be grouped together into one payment on your credit card statement. You may update the credit cards below if necessary. If you have had a failed payment and update your credit card, the new card will be immediately charged for any failed payments." })(); // ]]></script>

<div class="payment-message" style="position: relative; top: -10px; padding: 1.6rem; background: #e8edf0; margin: 0 25px 25px 25px; line-height: 1.5;" v-if="personalization.HasPaymentPlan">
A credit card is being collected to collect payments. Payments will be collected monthly for products you are purchasing.
</div>	

<payment-details-schedule></payment-details-schedule>

<script>// <![CDATA[
Vue.component('payment-details-schedule', {

  data: function () {
    return {
      monthlyPayment: 0,
      paymentTableHeaders: [
        { text: 'Date', value: 'Date', align: 'center' },
        { text: 'Amount', value: 'Amount', align: 'center' },
      ],
      processing: false,
      showModal: false,
      paymentPlanProductIds: [],
      dates: null,
      paymentPrices: [],
      paymentDetails: [],
      paymentRemainder: 0,   
      modalDescription: null,
      widgetDescription: null,
      totalPaymentPrice: 0,
      totalDeposit: 0
    }
  },
    template: '<div class="payment-plan-details" v-if="paymentDetails.length && isPaymentPlanProduct"> <p>You will be billed in 4 easy payments <span v-if="paymentRemainder == 0">of ${{ monthlyPayment.toFixed(2) }}</span>.<div v-if="widgetDescription">{{widgetDescription}}</div><span class="ax--btn ax--btn--secondary viewSchedule" @click="showModal = true">View Payment Schedule</span></p><ax-modal v-if="showModal" modalType="message" size="medium" @close="showModal = false" style="top: 100px;"><template v-slot:header><h3>Payment Plan Schedule</h3><div>{{modalDescription}}</div><div>${{totalDeposit.toFixed(2)}} will be charged now.  The remaining ${{totalPaymentPrice.toFixed(2)}} will be charged on the following schedule:</div></template><template v-slot:body><ax-loader v-if="processing" size="lg" position="fixed" loader-color="#222" /><ax-data-table v-if="!!paymentDetails.length" :allow-row-selection="false" break-width="large" :headers="paymentTableHeaders" :items="paymentDetails"/><div style="margin: 10px 0; font-style: italic;">Product total with deposit: ${{(totalPaymentPrice + totalDeposit).toFixed(2)}}</div></template></ax-modal></div>',
  created() {
    this.dates = window.datesArray
    this.paymentPrices = window.priceArray
    this.paymentPlanProductIds = window.productArray
    this.      })

      if (_this.totalPaymentPrice > 0) {
        //Determine monthly payment
        let thisPayment = +(_this.totalPaymentPrice / _this.dates.length)

        _this.monthlyPayment = Math.floor(thisPayment * 100) / 100

        //Determine if there is a remainder amount
        _this.paymentRemainder = +(_this.totalPaymentPrice - (_this.monthlyPayment * _this.dates.length)).toFixed(2)

        //Then we create payment record for each configured date
        _this.dates.forEach(function (paymentDate, index) {
          if (index === _this.dates.length - 1 && _this.paymentRemainder > 0) {
            let lastPayment = _this.monthlyPayment + _this.paymentRemainder
            _this.paymentDetails.push({ date: paymentDate, amount: `$${lastPayment.toFixed(2)}` })
          }
          else {
            _this.paymentDetails.push({ date: paymentDate, amount: `$${_this.monthlyPayment.toFixed(2)}` })
          }
        })

        //Add a total amount row

        _this.paymentDetails.push({ date: '<b>TOTAL</b>', amount: `<b>$${_this.totalPaymentPrice.toFixed(2)}</b>` })

      }

    },
  },
  watch: {
    selectedAttributeValueIds: {
      immediate: true,
      deep: false,
      handler(newValue, oldValue) {
        this.buildPaymentSchedule()
      },
    },
  }
})
// ]]></script>
<style><!--
.payment-plan-details p {
    margin-bottom: 5px;
  }

  .payment-plan-details .viewSchedule.ax--btn {
    display: block;
    text-align: center;
    text-transform: uppercase;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
  }

  .addtocart-card .viewSchedule {
    margin-top: 10px;
  }

  .payment-plan-details .ax--modal-container .ax--modal-body {
    max-height: 125vh;
    overflow-y: visible;
    margin-bottom: 0;
  }

  .payment-plan-details .ax--modal-container .ax--data-table {
    margin: 0.35rem 0;
  }
--></style>modalDescription = window.modalDescription
    this.widgetDescription = window.widgetDescription

    this.buildPaymentSchedule()
  },
  computed: {
    productId() {
      return this.$store.getters['products/selectedProduct'].Id
    },
    selectedAttributeValueIds() {
      return this.selectedAttributes
        .filter(function (attribute) {
        return !attribute.IsDisabled
        }) 
        .map(function (obj) {
          return obj.SelectedValueId;
        });
    },
    selectedAttributes() {
      return this.$store.getters['products/selectedProductAttributes']
    },
    numberOfPayments() {
      return this.dates.length
    },
    isPaymentPlanProduct() {
      let _this = this
      let foundProductId = this.paymentPlanProductIds.find(function (pid) {
        return pid === _this.productId;
      });

      if (foundProductId){
        return true
      }
      else {
        return false
      }
    },
  },
  methods: {
    buildPaymentSchedule() {
      this.paymentDetails = []
      let paymentPriceRecord = null
      this.totalPaymentPrice = 0
      this.totalDeposit = 0

      //First we must determine which of the selected attributes have payment prices and calculate a total payment price for them
      let _this = this
      this.selectedAttributeValueIds.forEach(function (attributeId, index) {
        paymentPriceRecord = null
        paymentPriceRecord = _this.paymentPrices.filter(p => {
          return p.id.toString() === attributeId
        })

        if (paymentPriceRecord && paymentPriceRecord.length > 0) {
          _this.totalPaymentPrice += paymentPriceRecord[0].paymentPrice
          _this.totalDeposit += paymentPriceRecord[0].deposit
        }

<script>// <![CDATA[
//ADD WIDGET DESCRIPTION HERE
//   Description must be in single quotes.  
var widgetDescription='This is configurable:'
//ADD MODAL DESCRIPTION HERE
//   Description must be in single quotes.  
var modalDescription='You will be billed on the following schedule:'
//ADD PAYMENT DATES HERE
//   Format is 'mm/dd/yyyy' and must be in single quotes.  
//   Commas are required between dates
var datesArray = [
'06/01/2020',
'07/01/2020',
'08/01/2020',
'09/01/2020'
];

//ADD PRiCES FOR ATTRIBUTES IDS HERE
//   Each record is an object in the format {id: 12345, paymentPrice: 100.25}F
//   id and paymentPrice are numeric (no quotes or $)
//   Commas are required between objects

var priceArray = [
    { id: 10790, paymentPrice: 499.00, deposit: 100.00 },
    { id: 10791, paymentPrice: 349.00, deposit: 80.00  },
    { id: 10792, paymentPrice: 229.00, deposit: 60.00  },
    { id: 10794, paymentPrice: 349.00, deposit: 80.00  },
    { id: 10796, paymentPrice: 319.00, deposit: 80.00  },
    { id: 10797, paymentPrice: 399.00, deposit: 100.00  },
];
//ADD PAYMENT PLAN PRODUCT IDS HERE
//   values are numeric (no quotes)
//   Commas are required between ids
var productArray = [
515,
516,
517
];
// ]]></script>