tabbit

Fri Jan 24 2020
Copied to clipboard! Copy reply
<template>
  <div >

    <!-- Only show masthead-offer if we have a message to show -->
    <section class="masthead-offer" v-if="mastheadOfferMessage">
      {{ mastheadOfferMessage }}
    </section>

    <!-- Masthead Component-->
    <div class="masthead desktop"
      v-if="!this.isMobile"
      :style="{'background-image': `url(/data-models/us/masthead/desktop/${this.id}.jpg)`}">
    </div>
    <div class="masthead mobile"
      v-else
      :style="{'background-image': `url(/data-models/us/masthead/mobile/${this.id}.jpg)`}">
    </div>

    <!-- Holds lang select for desktop and mobile. and Desktop's languages list. -->
    <section class="languages-wrap">
      <div class="content">
        <div>{{ locale.body['lang-select'] }}</div>
        <div>
          <SelectLanguage  :langcode='langcode' />
        </div>
      </div>
    </section>


    <section class="products-container">
      <div class="content">

        <div class="products" >
          <!-- <LoadingCircle v-if='!productList' /> -->
          <!-- Loop through our products | ProductBox Component -->
          <!-- We pass the whole products arra in case we need to mess with skus, ie, bonus month -->
          <ProductBox  v-for="(product, key) in products"
            :msrp="product.msrp"
            :price="product.price"
            :level="product.lvl"
            :name="productName && productName[product.lvl] || product.name"
            :cartLink="product.cart"
            :showFullPrice="fullPrice"
            :bonusMonths="bonusMonth"
            :xpay="parseInt($route.query.xpay) || xpay"
            :email="$route.query.email"
            :ribbonText="ribbonText && ribbonText[product.lvl]"
            :offerText="offerText && offerText[product.lvl]"
            :products="productList"
            :iframeCart=true
            :productFilter="productFilter"
            :key="key"
          />
        </div>

        <p class="disclaimer">
          {{ locale.body['product-disclaimer'] }}
        </p>

        <!--  Guarantee Component -->
        <div class="guarantee-wrapper">
          <Guarantee />
        </div>
      </div>
    </section>



    <section class="highlights">
      <div class="content">
        <h3>{{ locale.body.features.h2 }}</h3>
        <div>
          <div class="product-img" data-bg='/nuxt-assets/img/online-lockup.png'></div>
          <div class="bullets">
            <div>
              <p>
                {{ locale.body.features.p }}
              </p>
              <ul>
                <li v-for='(li, i) in locale.body.features.bullets' :key=i v-html='li'></li>
              </ul>
            </div>
          </div>

        </div>
      </div>
    </section>

    <section class="trusted">
      <div class="content">
        <h3>{{ locale.body.trusted.h2 }}</h3>
        <div class="logos">
          <img alt="tripadvisor" data-src="/nuxt-assets/img/logos/tripadvisor-2.png">
          <img alt="fender" data-src="/nuxt-assets/img/logos/fender.svg">
          <img alt="NASA" data-src="/nuxt-assets/img/logos/nasa.svg">
          <img alt="calvinklein" data-src="/nuxt-assets/img/logos/ck.svg">
        </div>
      </div>
    </section>

    <!-- Company Quotes -->
    <div class="company-quotes">
      <div class="content">
        <CompanyQuotes />
      </div>
    </div>


    <LandingPageFooter />
    
    <CartPanel />
  </div>
</template>


<script>

// Import our Components

import SelectLanguage from '~/components/SelectLanguage.vue'
import ProductBox from '~/components/ProductBox.vue'
import CompanyQuotes from '~/components/quotes/CompanyQuotes.vue'
import Guarantee from '~/components/Guarantee.vue'
import LoadingCircle from '~/components/loading/LoadingCircle.vue'
import LandingPageFooter from '~/components/footers/LandingPageFooter.vue'
import CartPanel from '~/components/CartPanel.vue'

import locale from '~/data/airtable/landing-pages/sbsr/index.yaml'

export default {
  layout: 'landing-page',

  /* Components this page uses. They are imported above */
  components: {
    SelectLanguage,
    ProductBox,
    CompanyQuotes,
    Guarantee,
    CompanyQuotes,
    LoadingCircle,
    LandingPageFooter,
    CartPanel
  },  


  /**
   * Sets head information for this page.
   * Metadata, scripts, css, title, etc, can
   * all be set and fetched here
   */

  head () {
    return {
      title: 'Rosetta Stone - Learn a New Language',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: 'Rosetta Stone' },
      ],
      link: [
        { rel: 'prefetch', href: `/data-models/us/masthead/desktop/${this.id}.jpg?t=${Date.now()}`},
        { rel: 'prefetch', href: `/data-models/us/masthead/mobile/${this.id}.jpg?t=${Date.now()}`},
        {
          rel: 'prefetch', href:'//assets.adobedtm.com/289d54d757557d351111069aa8acc743e67b15e6/satelliteLib-7aef1085f7c59294e8610e2f691a22c48a200841.js',
          as: 'script'
        }
      ],
      script: [
        { src: `/data-models/${process.env.locale == 'en' ? 'us' : process.env.locale}/js/products/${this.id}.js?t=${Date.now()}`, body: false },
        { src: '/nuxt-assets/js/vendor/jquery/jquery.min.js', body: true},
        {
          src: '//assets.adobedtm.com/289d54d757557d351111069aa8acc743e67b15e6/satelliteLib-7aef1085f7c59294e8610e2f691a22c48a200841.js',
          body: true
        },
        //{ src: '/nuxt-assets/js/clock.js', body: true },
        //{ src: '/nuxt-assets/js/crescendo.js', body: true }
      ]
    }
  },


  /**
   * We run this function on the server so we can pre-populate
   * some data. We pre-populate the products view, so when page load the
   * user sees products right away.
   * < script src='rs.com/product-data/us/models/js/sitewide.json'>< /script>
   */

  async asyncData ({ params, error, payload, $axios }) {
    let model

    // If we're hard reloading in dev mode, or,
    // We're in dev mode and lost the model (became null on file save)
    if (!process.client || (process.client && !model)) {

      if (!payload) {
        // This means user is in dev mode, and/or page is being hard reloaded.
        //let modelURI = `https://rosettastone.com/lp/data-models/us/json/products/catalog.json`
        let modelURI = `/data-models/us/json/products/catalog.json`
        let json = await $axios.get(modelURI)
        model  = json.data
      } else {
        // Page is being generated. Use model passed as payload.model
        model = payload.model
      }
    }

    // Set page's state data here. Set on server, carries to client.
    // route is passed by the generate function in nuxt.config.js
    
    return {
      id: model.id,
      productList: model.products,
      // The following ones can be overridden by url params
      langcode: 'esp',
      ribbonText: model.ribbontext,
      offerText: model.offertext,
      bonusMonth: model.bonusMonth,
      fullPrice: model.fullprice,
      productName: model.productnames,
      xpay: model.xpay,
      productFilter: model.productfilter || [ '3', '6', '12', '24']
    }
  },


  /**
   * Page state data.
   * Some of these come prefilled from the server while pages are being
   * generated, in the `asyncData()` method. And some of these can be
   * overwritten via url parameters as well.
   * The default values here is what you'll see while HMR'ing in dev mode.
   */

  data() {
    return {

      locale: { ...locale },

      // Holds name Page.id value (sitewide, sale, etc). Set on the server with $route
      id: null,

      // Our current 3-letter selected lang code. Initially set in mounted().
      // Set via click, dropdown change, url param, etc
      langcode: 'esp',

      // Language object ( {name, region, code} )
      language: null,

      // List of products to show. Each time a language is changed, this
      // gets populated and the product view gets updated (new cart urls, etc).
      // It is set in the asyncData() method.
      productList: [],

      // Products we don't want to show. This is the default. Can be overwritten in asyncData()
      productFilter: [ '3', '6', '12', '24'],

      // If there's a special offer message, this will hold it.
      mastheadOfferMessage: null,

      // Holds RSI.expirationdate. Default to end of year.
      expirationdate: 'December 31, 2020 23:59',

      // Needed for the sole purpose of hiding/showing masthead components.
      isMobile: null,

      // Passed to <ProductBox /> - Bonus Months
      //bonusMonths: {},

      // Passed to <ProductBox />. Divide prices by x (only changes the html price)
      // always used with showfull=1
      //xPay: null,

      // Passed to <ProductBox /> - Little banner on top of product box
      //ribbonText: {},

      // Passed to <ProductBox /> - Little banner in middle of product box
      //offerText: {} //this.$route.query.offertext,
    }
  },

  created () {
    
  },
  /**
   * Called on client side.
   * We use this to fill State data above
   * before mount, since the /lp/globals/models/<model>.js
   * has been loaded into the browser's window object.
   * This essentially is our state data.
   */

  async mounted() {   
    /*
    this.$store.watch((state, getters) => state.langcode,
      (newValue, oldValue) => {
        
        this.products = this.productList.slice(0)
        this.$forceUpdate() 
      })
      */
     this.$store.subscribe((mutation, state) => {
       if (mutation.type == 'UPDATE_LANGCODE') {
         console.log('detected mutation')
         this.productList = this.productList.slice(0)
         this.$forceUpdate() 
       }
     })
    let defaultLangCode = this.$store.state.locale == 'en' ? 'esp' : 'eng'    
    this.$store.commit('UPDATE_LANGCODE', (this.$route.query.lang || defaultLangCode))   

    // Products gets rendered on server, but we update this so they can be rerendered in the client.
    // We render them in the server so user doesn't see a FOUC, and if something goes wrong in client,
    // page still shows some products user can add to cart.
    //this.productList = window.pagedata.products


    //this.expirationdate = window.pagedata.expirationDate || ''

    this.isMobile = window.innerWidth <= 540
    
    //this.bonusMonths = window.pagedata.bonusmonths

    // This exposes state data to window. Maybe needed when using TnT, etc
    window.vuedata = this

    // Lazy load images
    let imgs = document.querySelectorAll('[data-src], [data-bg]')

    let observer = new IntersectionObserver(loadImg, {
      // Start downloading when img is within 50px of Y axis
      rootMargin: '50px 0px',
      threshold: 0.01
    });

    // Start observing the images
    imgs.forEach(img => observer.observe(img))

    function loadImg (entries, observer)
    {
      entries.forEach(e => {
        // If in viewport
        let el = e.target
        if (e.intersectionRatio > 0)
        {
          let bg = el.dataset.bg || null
          let src = el.dataset.src || null

          if (bg)
          {
            el.style.backgroundImage = `url('${bg}')`
          }
          if (src)
          {
            el.src = src
          }
          // Stop observing
          observer.unobserve(e.target);
        }
      })
    }


    // If RSI has custom js or css, insert them
    /*
    if (window.pagedata.js) {
      let script = document.createElement('script')
      script.src = `/nuxt-assets/models/us/data/us/custom-js/${this.id}.js`
      document.body.appendChild(script)
    }
    if (window.pagedata.css) {
      let css = document.createElement('link')
      css.rel = 'stylesheet'
      css.type = 'text/css'
      css.href = `/nuxt-assets/product-data/data/us/custom-css/${this.id}.css`
      document.body.appendChild(css)
    }
    */

  },

  watch: {
    products: (n, o) => {
      console.log('changed')
      try {
        console.log(`new: ${n[0].lang}`)
        console.log(`old: ${o[0].lang}`)
      } catch (e) {

      }
      
    }
  },

  computed: {

    /**
     * Everytime state's productList gets updated with a new value,
     * this computed property will automatically be updated too.
     * We have this computed property so we don't have to
     * filter/map/sort the productsList each time we update it.
     * Use this in the template view instead of productList
     */
    products () {
        console.log('-- productListe computed reran')
        let p = this.productList
        .filter(p => p.lang == this.$store.state.langcode)
        .filter(p => this.productFilter.indexOf(p.lvl) != -1)
        //.sort( (a, b) => parseInt(a.lvl) < parseInt(b.lvl) ? -1 : 1)
        // TODO sort
        if (this.isMobile) {
          p = p.reverse()
        }
        
        return p
      }
  }    
  

}

</script>

<style lang='stylus'>


  body
    margin 0
    padding 0
    font-family effra

    //font-family gothamlight

  .content
    max-width 1150px
    margin 0 auto
    padding 0 1em


  .masthead-offer
    background $yellow
    text-align center
    padding  1.3em 0
    font-size 1.3em

  .masthead
    background-color #333
    background-size 100% 100%
    padding 27% 0 0 0
    line-height 1
    box-shadow 0 4px 10px -6px inset
    box-sizing border-box
    &.desktop
      @media $phone
        display none

    &.mobile
      display none
      @media $phone
        display block
        padding 36% 0% 1% 0%

  .languages-wrap
    //background #f1f1f1
    padding-top 3em
    .content
      display flex
      flex-direction row
      justify-content center
      & > div:first-of-type
        align-self center
        font-size 1.8em
        padding-right 1em
    @media (max-width:580px)
      padding-top 2em
      .content
        flex-direction column
        max-width 450px
        & > div:first-of-type
          font-size 1.8em
          padding 0 0 20px 0

  .products-container
    position relative
    margin-top 3em
    //background #f1f1f1
    p.disclaimer
      margin 50px auto       20px
      max-width 1000px
      font-size 16px
      font-family effra      
      
    &:after
      content ''
      position absolute
      height 142%
      width 40%
      left 0
      top -66px
      background-image url(https://rosettastone.com/lp/common-modules/assets/modules_2018/gray-stone.svg)
      background-repeat no-repeat
      background-size contain
      background-position center left
      z-index -1
    @media $phone
      &:after
        height 90%
        width 100%
        top -65px
        left -100px
        background-size cover


  .products
    display flex
    flex-wrap wrap
    justify-content space-between


    @media $tablet
      justify-content space-around
    @media $phone
      // Reverse product order in mobile
      list = 1..15
      for n in list
        .product:nth-child({n})
          order list[-(n)]

  .highlights
    padding 3em
    position relative
    h3
      margin 0 0 2em 0
      font-size 180%
      text-align center
      font-family helvetica
      font-size 40px
    .content > div
      display flex
      & > div
        display flex

    .bullets
      flex-basis 50%
      p
        margin-bottom 3em
        line-height 26px
      ul
        padding 0
        margin 0
        list-style none
      li
        margin-bottom 1em
        background url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjNweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMjMgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUwLjIgKDU1MDQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5jaGVjazM1PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkxwLWxheW91dC12YWx1ZS1wcm9wLXByb21vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYuMDAwMDAwLCAtNDI3LjAwMDAwMCkiIGZpbGw9IiMzRjkzRDMiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxnIGlkPSJjaGVjazM1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNi4wMDAwMDAsIDQyNy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMi43MjMxMjY2LDIuNDg2ODk2NTUgTDguNTc2Mzc5NzUsMTUuODkxMzEwMyBDOC40NTE3NzIxNSwxNi4wMDkzNzkzIDguMjUwMDEyNjYsMTYuMDA5Mzc5MyA4LjEyNTY5NjIsMTUuODkxMzEwMyBMMC4wOTMxNjQ1NTcsOC4yOCBDLTAuMDMxMTUxODk4Nyw4LjE2MjQ4Mjc2IC0wLjAzMTE1MTg5ODcsNy45NzEzMTAzNCAwLjA5MzE2NDU1Nyw3Ljg1MzI0MTM4IEwyLjA0NDk2MjAzLDYuMDAzODYyMDcgQzIuMTY5NTY5NjIsNS44ODYwNjg5NyAyLjM3MTMyOTExLDUuODg2MDY4OTcgMi40OTU2NDU1Nyw2LjAwMzg2MjA3IEw4LjM1MTMyOTExLDExLjU1MiBMMjAuMzIwOTM2NywwLjIxMDQ4Mjc1OSBDMjAuNDQ1ODM1NCwwLjA5MjY4OTY1NTIgMjAuNjQ3MDEyNywwLjA5MjY4OTY1NTIgMjAuNzcxNjIwMywwLjIxMDQ4Mjc1OSBMMjIuNzIzMTI2NiwyLjA1OTg2MjA3IEMyMi44NDc3MzQyLDIuMTc3NjU1MTcgMjIuODQ3NzM0MiwyLjM2ODU1MTcyIDIyLjcyMzEyNjYsMi40ODY4OTY1NSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') no-repeat 0 12px
        padding 10px 0 0 30px

    .product-img
      order 1
      flex-basis 50%
      background-repeat no-repeat
      background-size contain
      margin-left 5em

    &:after
      content ''
      position absolute
      height 107%
      width 100%
      right 0
      top 7%
      background-image url(https://rosettastone.com/lp/standard-page-assets/freetrial_assets/blue-stone.svg)
      background-repeat no-repeat
      background-size contain
      background-position center right
      z-index: -1
    @media $tablet
      .content
        padding 0
        & > div
          flex-direction column
      .bullets
        order 1
        font-size 18px
      .product-img
        order 0
        min-height 310px
        margin 0
        background-position center


  .company-quotes
    padding 0 0 6em 0
    h3
      text-align center
    @media $phone
      .content
        padding 0


  .trusted
    padding 5em 0
    box-sizing border-box
    position relative
    & > div
      text-align center
      max-width 770px
    h3
      font-size 2.3em
      margin-bottom 2em
      font-family helvetica
    .logos
      display flex
      align-items center
      justify-content space-between
      img:nth-of-type(1)
        height 75px
      img:nth-of-type(2)
        height 50px
        width 20%
      img:nth-of-type(3)
        height 65px
      img:nth-of-type(4)
        width 22%
    &:after
      content ''
      position absolute
      height 184%
      width 100%
      right 0
      top 204px
      background-image url(https://rosettastone.com/lp/common-modules/assets/modules_2018/gray-stone.svg)
      background-repeat no-repeat
      background-size contain
      z-index: -1
      transform scaleX(-1)
    &:before
      content ''
      position absolute
      height 184%
      width 100%
      left 0
      top 204px
      background-image url(https://rosettastone.com/lp/common-modules/assets/modules_2018/gray-stone.svg)
      background-repeat no-repeat;
      background-size contain;
      background-position center left;
      z-index -1
    @media $tablet
      padding-top 0







</style>