tabbit

Tue Dec 18 2018
Copied to clipboard! Copy reply
<template>
  
  <!-- This was way simple, but Kelsey's combination of fullprice and 3pay ***** it up :( -->
  <div class="product">

    <section class="desktop-product" >
      <div class="bestvalue" v-if="level.match(/24|27/)">
        <span v-if='!threepay'>BEST VALUE</span>
        <span v-else>3-PAY</span>
        
      </div>
      <div class="header" v-bind:class="{ bonus: bonusmonths }">
        <div>{{ name }} MONTHS</div>
        <div class="bonus-copy" v-if='level == 27'>PLUS 3 BONUS MONTHS</div>
        <div class="bonus-copy" v-if='level == 13'>PLUS 1 BONUS MONTH</div>
      </div>


      <div class="body">
        <div class="pricing">
          <div v-if='!fullprice'>
            <div v-if='level == 24 && threepay'>
              <span class="dollar">${{price / 3}}</span>
            </div>
            <div v-else>
              <div class="dollar">${{ dollar }}</div>
              <div class="cents">
                <div>.{{ cents }}</div>
                <div>/Month</div>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="dollar">${{ price }}</div>
          </div>
        </div>


        <!-- Regular monthly pricing -->
        <div class="monthly-pricing" v-if='!fullprice'>
          <div v-if='level == 24 && threepay'>
            <span class="msrp">${{ msrp }}</span> <span>${{price}}</span> total
          </div>
          <div v-else>
            <span class="msrp" v-if="msrp != price">${{ msrp }}</span>
            <span class="price">${{ price }}</span> due today
          </div>
        </div>

        <div class="monthly-pricing" v-if='fullprice'>
          <div v-if='level == 24 && threepay'>
            <span class="msrp">${{ msrp }}</span> <span>${{price}}</span> total
          </div>
          <div v-else>
            Regular <span class="msrp">${{ msrp }}</span>
          </div>          
        </div>

        
        <a :href="cartlink" class="add-to-cart">SELECT</a>
      </div>

     
    </section>

    <section class="mobile-product-wrap">
     
    </section>

  </div>
</template>

<script>
/**
 * Current accepted URL params:
 * lang=ita
 *    Will select a language
 * showfull=1
 *    Will show full price instead of monthly
 * percent=12-30,24-60
 *    Apply custom % off to a product.
 *    ie, percent=24-60 will display 60% off on the 24m product.
 * db=12-15,24-30
 *    Specifies how many months to divide price by.
 *    ie, db=24-30 will device the price of 24m by 30 months,
 *    instead of 24 - customizing the monthly price value
 * h12 
 *    hide 12m
 * TODO make h12 something like hide=...
 */
export default { 
  
  /* Props passed from parent. ie,
    <ProductBox  v-for="(product, key) in products"
      :msrp='product.msrp'
      :price='product.price'
      :level='product.lvl'
      :cartlink='product.cart'
      :key=key 
    />
  */
  props: ['msrp', 'price', 'level', 'cartlink', 'name', 'fullprice', 'threepay', 'bonusmonths'],

  asyncData ()
  {
    return { dollar:  "", cents: "" }     
  },

  data()
  {
    return {
      dollar: null,
      cents: null,
    }
  },
  
  created ()
  {

    const monthly = (Math.ceil(parseFloat(this.price, 10) / 
    parseInt(this.level, 10) * 100) / 100).toFixed(2).split('.')        
    this.dollar = monthly[0]
    this.cents = typeof monthly[1] == 'undefined' ? '00' : monthly[1] 
  }
}
</script>

<style lang='stylus' scoped>

  @require '~assets/css/variables'
  
  .product    
    flex-basis 252px    
    margin-bottom 3em
    position relative
    
    @media $phone      
      flex-basis 100%
      margin-bottom 1em
      .desktop-product
        display none
      .mobile-product-wrap
        display flex
      
  
  .desktop-product
    box-shadow 0 0 10px rgba(0,0,0,.35)
    border-radius 7px

  .bestvalue
    background #407607
    color #fff
    font-weight 700
    text-align center
    padding 8px 0
    position absolute
    width 100%
    top -29px
    left 0
    border-top-right-radius 7px
    border-top-left-radius 7px


  .header
    background $yellow
    padding 1.4em 0
    text-align center
    border-top-right-radius 7px
    border-top-left-radius 7px
    font-weight 700
    &.bonus
      background #3E3E40
      color #fff
      padding-bottom 5px
    .bonus-copy
      font-size 75%
      background #ecc200
      color #333
      display inline-block
      margin 0 auto
      padding 4px 14px
      position relative
      bottom -12px
  .body
    background #fff
    text-align center
    border-bottom-right-radius 7px
    border-bottom-left-radius 7px
    //box-shadow 0 8px 30px rgba(0,0,0,.3)
  .pricing
    padding 1em 0 0.3em 0
  .pricing > div > div
    display flex
    align-items center
    justify-content center
    
    
  
  .pricing  .dollar
    font-size 2.7em
    padding 0.3em 0 0.2em 0
    

  
  .pricing  .cents > div:first-of-type 
    font-size 80%
    text-align left

  .monthly-pricing
    font-size 80%
    margin-top -3px
    padding-bottom 4px
  .monthly-pricing > *
    display inline-block
  
  .msrp
    color red
    padding-right 8px
    text-decoration line-through

  a.add-to-cart
    border 1px solid #34a4d9
    display inline-block
    color #34a4d9
    padding 10px
    text-decoration none
    margin 10px auto 1.5em auto
    width 40%
    border-radius 5px
    transition all .14s
    text-indent -10px
    position relative
    &:after
      content '›'
      position absolute
      font-size 160%
      top 2px
      right 18px
  


  // Mobile Products
  .mobile-product-wrap
    position relative
    display none
    flex-direction column
  
  .mobile-product
    padding 1em
    display flex
    text-decoration none
    color #111
    background #fff    
    position relative
    justify-content space-between

    & > div:first-of-type:not(.ribbon)
      flex-basis 40%
      display flex
      flex-direction column
      justify-content center
    
    .price-mobile
      display flex
      justify-content  center
      flex-direction column

    & .level
      font-size 1.1em
      font-weight 700
    & .bonus
      font-size 60%
      font-weight 700

    .monthly
      font-weight 700
      text-align right
      & > div
        display inline-block
    .dollar
      font-size 1.4em
    .cents
      font-size 11px
      position relative
      top -8px
    
    .full
      font-size 70%
      margin-top 5px
      color #555
    .msrp
      color red
      padding-right 8px
      text-decoration line-through
    .arrow
      color #34a4d9
      font-size 3em
      top -7px
      position relative
      right -1px
  .ribbon
    position: absolute
    top -12px
    left 0
    font-size 80%
    width 100px
    z-index 1
    background #ecc200
    text-align center
    height 24px
    line-height 24px
    
      
    &:after
      position absolute
      width 0
      content ""
      
      border 12px solid #ecc200
    &:after
      border-right-color transparent
</style>