• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64

<template>
  <main>
    <CardTileWrapper bg-color="#C4ECFF" :cards="cardTiles" />
    <FooterLP />
  </main>
</template>

<script>
export default {
  asyncData: ({ store }) => {
    
    let yaml;
    
    // Data for the CardTileWrapper component
    const cardTiles = require(`~/data/components/CardTile/${store.state.locale}.yaml`);

    
    let data;

    if (isDev) {
      const modelURI = `/data-models/${store.state.locale}/json/products/${params.pathMatch}.json`;
      ({ data } = await $axios.get(modelURI));
    } else if (payload) {
      data = payload.model;
    } else {
      return;
    }

    // Determine if it's homeschool by checking for '-hs' at end of page id/name
    const vertical = data.id.slice(-3) === "-hs" || data.id === "students" ? "homeschool" : "consumer";    

    return {
      yaml: content,
      localeShared: contentShared,
      id: data.id,
      productList: data.products,
      langId: "esp",
      ribbonText: data.ribbontext,
      offerText: data.offertext,
      bonusMonth: data.bonusMonth,
      fullPrice: data.fullprice,
      productName: data.productnames,
      xpay: data.xpay,
      expirationDate: data.expirationdate,
      expirationDateSpanish: data.expirationdatespanish,
      productFilter: data.productfilter || ["3", "12", "lifetime-u"],
      vertical,
    };

    return {
      cardTiles,
    };
  },

  data: () => {
    return {
      cardTiles: [],
      productList: [],
      productFilter: [],
    };
  },
};
</script>