tabbit

Wed Aug 22 2018
Copied to clipboard! Copy reply
<template>
  
  <div class="product">


    <section class="desktop-product" >
      <div class="bestvalue" v-if="level == 24">
        <span v-if='!threepay'>BEST VALUE</span>
        <span v-else>3-PAY</span>
        
      </div>
      <div class="header">
        <div>{{ name }} MONTHS</div>
        <!--<div>SUBSCRIPTION</div>-->
      </div>

      <!-- Monthly Pricing -->
      <div class="body" v-if='!fullprice'>
        <div class="pricing">
          <div class="dollar">${{ dollar }}</div>
          <div class="cents">
            <div>.{{ cents }}</div>
            <div>/Month</div>
          </div>
        </div>
        <div class="monthly-pricing">
          <div class="msrp" v-if="msrp != price">${{ msrp }}</div>
          <div class="price">${{ price }}</div> due today
        </div>
        <a :href="cartlink" class="add-to-cart">SELECT</a>
      </div>

      <!-- Full Pricing -->
      <div class="body" v-else>
        <div class="pricing">
          <div class="dollar">${{ price }}</div>
        </div>
        <div v-if='price != msrp'>
          Regular <span class="msrp">${{ msrp }}</span>
        </div>
        <a :href="cartlink" class="add-to-cart">SELECT</a>
      </div>
    </section>

    <section class="mobile-product-wrap">
      <div class="ribbon" v-if="level == 24">BEST VALUE</div>
      <a class="mobile-product"  tabindex="0" :href="cartlink">
        <div>
          <div class="level">{{ level }} Months</div>
          <div class="bonus">PLUS 1 BONUS MONTH</div>
        </div>
        <div class="price-mobile">
          <div class="monthly">
            <div class="dollar">${{ dollar }}.</div>
            <div class="cents">{{ cents }}</div>
            <div>/month</div>
          </div>
          <div class="full">
            <span class="msrp" v-if="price != msrp">${{ msrp }}</span>
            <span class="price">${{ price }}</span> due today</div>
        </div>
        <div class="arrow">›</div>
      </a>
    </section>

  </div>
</template>

<script>
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'],

  asyncData ()
  {
    return { dollar:  10, cents: 50 }     
  },

  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
    border-radius 4px
    margin-bottom 3em
    position relative
    @media $small      
      flex-basis 100%
      margin-bottom 1em
      .desktop-product
        display none
      .mobile-product-wrap
        display flex
      
  
  .bestvalue
    background #407607
    color #fff
    font-weight 700
    text-align center
    padding 8px 0
    position absolute
    width 100%
    top -25px
    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
    box-shadow 0 -1px 2px rgba(0,0,0,.3) inset
  .body
    background #fff
    text-align center
    border-bottom-right-radius 7px
    border-bottom-left-radius 7px

  .pricing
    display flex
    align-items center
    justify-content center
    padding 2em 0 1em
    
  
  .pricing > .dollar
    font-size 2.7em
    

  
  .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>