Shipnity Website Document

# Landing

<snt-app class="lush"
        #default="{ _, theme, breakpoint, router,
                    scrollY, isAuth, purchasesQuantity,
                    productCategories, productBrands,
                    addToCart }">
<snt-section name="หน้าปก">
  <div class="lush-hero">
    <snt-image src="https://images.unsplash.com/photo-1629654857513-1136aef1b10f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1892&q=80"
                height="890px"/>
    <div class="lush-hero__content">
      <div class="lush-hero__category">
        <div
          class="lush-hero-category-label"
          @click="router.push({
            name: 'SalePageProducts'
          })">
          ทั้งหมด
        </div>
        <template v-for="item in productCategories">
          <div
            v-if="item.name"
            :key="`cat-link-${item.id}`"
            class="lush-hero-category-label"
            @click="router.push({
                    name: 'SalePageCategoryProducts',
                    params: {
                      categoryId: item.id,
                      categoryName: item.name
                    }
                  })">
            {{ item.name }}
          </div>
        </template>
      </div>
      <snt-text-editor html="<div>
          <div style='font-size:6em;line-height:1em;word-break: break-word;font-weight:600;text-align:center;color:#162317;'>
            <div>โปรหั่นครึ่ง </div>
            <div>ลดสูงสุด </div>
            <div>50%</div>
          </div>
          <br/><br/>
          <div style='text-align:center;margin-top:12px;'>
            <a href='/products' target='_blank' style='font-size:16px;font-weight:600;padding: 16px 48px;background-color: rgb(234, 234, 234);text-align:center;color:#162317;text-decoration: none;'>
                สั่งซื้อเลย
            </a>
          </div>
        </div>"
        class="lush-hero__text" />
    </div>
  </div>
</snt-section>
<snt-section name="สินค้า 1">
  <snt-container class="lush-products__container"
                  fluid>
    <div class="lush-products_grid">
      <div class="lush-products_col" >
        <snt-text-editor html="
          <div>
            <div style='font-size:42px;line-height:42px;font-weight:600;color:white;'>
              <div>สินค้าขายดี</div>
              <div>ส่งฟรี</div>
              <div>ไม่มีขั้นต่ำ</div>
            </div>
            <br/><br/>
            <a href='/products' style='font-size:16px;font-weight:600;padding: 16px 48px;background-color: #000000;text-align:center;color:#ffffff;text-decoration: none;border:1px solid white;display:block;'>
                ดูทั้งหมด
            </a>
          </div>"
          class="lush-products__text" />
      </div>
      <snt-products
        :itemProps="{
          showSku: true,
          showPrice: true,
          showDescription: true,
          showStock: true,
          showCart: false
        }"
        class="lush-products"
        limit="12"
        cols="3"
        #default="{ items, itemProps, addMainToCart }">
        <div class="lush-products__wrapper">
          <div v-for="(item, i) in items"
                :key="`item-product-${i}`"
                class="lush-products-item">
            <snt-link
              #activator
              :to="item.routerLink">
              <div class="lush-products-item__wrapper">
                <div class="lush-products-item__image">
                  <snt-image
                    :src="item.pictureUrl || 'https://via.placeholder.com/300/eee/c6c6c6?text=No image'"
                    aspect-ratio="1"
                    contain />
                </div>
                <div class="lush-products-item__content">
                  <template v-if="itemProps.showDescription">
                    <div class="lush-products-item__name">
                      {{ item.name }}
                    </div>
                    <div
                      v-if="item.productCategory"
                      class="lush-products-item__categoryname">
                      {{ item.productCategory.name }}
                    </div>
                  </template>
                  <template v-if="itemProps.showSku">
                    <div
                      v-if="!(item.subproducts.length === 1 && item.subproducts[0].name === 'main')"
                      class="product-item-subitems">
                      <template v-for="(sub, i) in item.subproducts">
                        <div
                          v-if="sub.name !== 'main'"
                          :key="`sub-item-${i}`"
                          class="product-item-subitems__item">
                          {{ sub.name }}
                        </div>
                      </template>
                    </div>
                  </template>
                  <template v-if="itemProps.showPrice">
                    <div class="lush-products-item__price">
                      <span :class="{ 'lush-products-item__price--on-sale': item.displayOnSale }">
                          {{ item.price | toLocaleString }} THB
                      </span>
                      <s v-if="item.displayOnSale">
                        {{ item.fullPrice | toLocaleString }}
                      </s>
                    </div>
                  </template>
                  <template v-if="itemProps.showStock">
                    <div v-if="item.available > 0">Available {{ item.available }}</div>
                  </template>
                </div>
              </div>
            </snt-link>
            <div class="lush-products-item__action">
              <snt-button
                :disabled="item.available <= 0"
                :label="item.available <= 0 ? 'Sold Out' : 'เพิ่มลงตะกร้า'"
                :icon="item.available <= 0 ? '' : 'mdi-shopping-outline'"
                class="lush-products-item__addtocart"
                depressed
                large
                @click="addMainToCart(item)" />
            </div>
          </div>
        </div>
      </snt-products>
    </div>
  </snt-container>
</snt-section>
<snt-section name="ฟีด 1">
  <snt-container class="lush-feeds__container"
                  fluid>
    <div class="lush-cover">
      <snt-image src="https://images.unsplash.com/photo-1485256807238-97782da2fa07?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1951&q=80"
                  height="100%" />
    </div>
    <div class="lush-feeds_grid">
      <div class="lush-feeds-grid_col">
        <snt-text-editor html="<div>
                          <div style='font-size:42px;font-weight:600;color:black;'>
                            <div>ติดตามเราได้ที่</div>
                            <div>@Yourbrand</div>
                          </div>
                          <br/>
                          <div style='color:black;'>แจกโค้ดส่วนลด ไลฟ์สดทุกวันอังคาร</div>
                        </div>" />
      </div>
      <snt-feeds :items="[
                    {
                        src: 'https://images.unsplash.com/photo-1596922620993-b039d9936232?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=771&q=80',
                        html: `<div style='text-align:center;'>
                                <div style='font-size:36px;font-weight:600;color:black;'>
                                  <div>Facebook Page</div>
                                </div>
                                <div>
                                  <a href='https://www.facebook.com'
                                  style='font-size:16px;font-weight:600;padding: 16px 48px;text-align:center;color:black;'>
                                      ไลฟ์สดทุกวันอังคาร
                                  </a>
                                </div>
                              </div>`
                    },
                    {
                        src: 'https://images.unsplash.com/photo-1518577915332-c2a19f149a75?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=784&q=80',
                        html: `<div style='text-align:center;'>
                                <div style='font-size:36px;font-weight:600;color:black;'>
                                  <div>#YourInstagram</div>
                                </div>
                                <div>
                                  <a href='https://www.instagram.com'
                                  style='font-size:16px;font-weight:600;padding: 16px 48px;text-align:center;color:black;'>
                                      อัพเดทสินค้าใหม่ที่นี่ทุกวัน
                                  </a>
                                </div>
                              </div>`
                    }
                  ]"
                  type="image"
                  size="large"
                  class="lush-feeds-grid_col"
                  cols="12"
                  md="6"
                  item-aspect-ratio="1"
                  vertical />
    </div>
  </snt-container>
</snt-section>
<snt-section name="สินค้า 2">
  <snt-container
    class="lush-products__container"
    fluid>
    <div class="lush-products_grid">
      <div class="lush-products_col" >
        <snt-text-editor html="<div>
          <div style='font-size:42px;line-height:42px;font-weight:600;color:white;'>
            <div>New Collection</div>
            <div>ใหม่ล่าสุด</div>
          </div>
          <br/>
          <div style='color:white;'>ต้อนรับหน้าหนาวกับ Collection ใหม่ของเรา</div>
          <br/><br/>
          <a href='/products'
          style='font-size:16px;font-weight:600;padding: 16px 48px;background-color: #000000;
          text-align:center;color:#ffffff;
          text-decoration: none;border:1px solid white;display:block;'>
              ดูทั้งหมด
          </a>
        </div>"
        class="lush-products__text" />
      </div>
      <snt-products
        :itemProps="{
          showSku: true,
          showPrice: true,
          showDescription: true,
          showStock: true,
          showCart: false
        }"
        class="lush-products"
        limit="12"
        cols="3"
        #default="{ items, itemProps, addMainToCart }">
        <div class="lush-products__wrapper">
          <div v-for="(item, i) in items"
                :key="`item-product-${i}`"
                class="lush-products-item">
            <snt-link
              #activator
              :to="item.routerLink">
              <div class="lush-products-item__wrapper">
                <div class="lush-products-item__image">
                  <snt-image
                    :src="item.pictureUrl || 'https://via.placeholder.com/300/eee/c6c6c6?text=No image'"
                    aspect-ratio="1"
                    contain />
                </div>
                <div class="lush-products-item__content">
                  <template v-if="itemProps.showDescription">
                    <div class="lush-products-item__name">
                      {{ item.name }}
                    </div>
                    <div
                      v-if="item.productCategory"
                      class="lush-products-item__categoryname">
                      {{ item.productCategory.name }}
                    </div>
                  </template>
                  <template v-if="itemProps.showSku">
                    <div
                      v-if="!(item.subproducts.length === 1 && item.subproducts[0].name === 'main')"
                      class="product-item-subitems">
                      <template v-for="(sub, i) in item.subproducts">
                        <div
                          v-if="sub.name !== 'main'"
                          :key="`sub-item-${i}`"
                          class="product-item-subitems__item">
                          {{ sub.name }}
                        </div>
                      </template>
                    </div>
                  </template>
                  <template v-if="itemProps.showPrice">
                    <div class="lush-products-item__price">
                      <span :class="{ 'lush-products-item__price--on-sale': item.displayOnSale }">
                        {{ item.price | toLocaleString }} THB
                      </span>
                      <s v-if="item.displayOnSale">
                        {{ item.fullPrice | toLocaleString }}
                      </s>
                    </div>
                  </template>
                  <template v-if="itemProps.showStock">
                    <div v-if="item.available > 0">Available {{ item.available }}</div>
                  </template>
                </div>
              </div>
            </snt-link>
            <div class="lush-products-item__action">
              <snt-button :disabled="item.available <= 0"
                          :label="item.available <= 0 ? 'Sold Out' : 'Add to basket'"
                          :icon="item.available <= 0 ? '' : 'mdi-shopping-outline'"
                          class="lush-products-item__addtocart"
                          depressed
                          large
                          @click="addMainToCart(item)" />
            </div>
          </div>
        </div>
      </snt-products>
    </div>
  </snt-container>
</snt-section>
<snt-section name="ฟีด 2">
  <snt-container class="lush-feeds__container"
                  fluid>
    <div class="lush-cover">
      <snt-image src="https://images.unsplash.com/photo-1586809764311-090bc6068916?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
                  height="100%" />
    </div>
    <snt-feeds :items="[
                {
                    src: 'https://images.unsplash.com/photo-1536329583941-14287ec6fc4e?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
                    html: `<div style='text-align:center;'>
                            <div style='font-size:36px;font-weight:600;color:black;'>
                              <div>เครื่องเขียน</div>
                            </div>
                            <div>
                              <a href='/products'
                              style='font-size:16px;font-weight:600;padding: 16px 48px;text-align:center;color:black;'>
                                  เลือกซื้อ
                              </a>
                            </div>
                          </div>`
                },
                {
                    src: 'https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
                    html: `<div style='text-align:center;'>
                            <div style='font-size:36px;font-weight:600;color:black;'>
                              <div>เครื่องสำอาง</div>
                            </div>
                            <div>
                              <a href='/products'
                              style='font-size:16px;font-weight:600;padding: 16px 48px;text-align:center;color:black;'>
                                  เลือกซื้อ
                              </a>
                            </div>
                          </div>`
                },
                {
                    src: 'https://images.unsplash.com/photo-1598528738936-c50861cc75a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80',
                    html: `<div style='text-align:center;'>
                            <div style='font-size:36px;font-weight:600;color:black;'>
                              <div>น้ำหอม</div>
                            </div>
                            <div>
                              <a href='/products'
                              style='font-size:16px;font-weight:600;padding: 16px 48px;text-align:center;color:black;'>
                                  เลือกซื้อ
                              </a>
                            </div>
                          </div>`
                }
              ]"
              type="image"
              item-aspect-ratio="1"
              title="เลือกซื้อตามหมวดหมู่"
              class="lush-feeds"
              vertical />
  </snt-container>
</snt-section>
<snt-section name="ฟีด 3">
  <snt-container class="lush-feeds__container"
                fluid>
    <snt-feeds :items="[
              {
                  src: 'https://images.unsplash.com/photo-1509201433847-56a1ced3a91f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=843&q=80',
                html: `<div style='text-align:center;'>
                        <div style='font-size:42px;font-weight:600;color:black;'>
                          <div>Visit Our Youtube</div>
                          <div>ดูขั้นตอนการผลิต</div>
                        </div>
                        <br/><br/><br/>
                        <div>
                          <a href='https://www.youtube.com'
                          style='font-size:16px;font-weight:600;padding: 16px 48px;background-color: white;
                          text-align:center;color:black;text-decoration: none;border:1px solid black;'>
                              Youtube
                          </a>
                        </div>
                      </div`
              },
              {
                  src: 'https://images.unsplash.com/photo-1526653054275-5a4f37ea1c64?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
                  html: `<div style='text-align:center;'>
                        <div style='font-size:42px;font-weight:600;color:black;'>
                          <div>อยากกินไอติม</div>
                        </div>
                        <br/><br/><br/>
                        <div>
                          <a href='https://www.wallsthailand.com'
                          style='font-size:16px;font-weight:600;padding: 16px 48px;background-color: white;text-align:center;
                          color:black;text-decoration: none;border:1px solid black;'>
                              สั่งซื้อไอติม
                          </a>
                        </div>
                      </div>`
              }
          ]"
          type="image"
          item-height="100%"
          cols="12"
          md="6"
          vertical />
  </snt-container>
</snt-section>
</snt-app>

← Footer →