#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
  • websites

Housing

Introduction

This sample showcases how to build a housing page in AMP HTML. Explore how to use amp components, like amp-carousel, form and amp-list to create a housing page.

Setup

We use amp-carousel to show house images.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

We use amp-accordion to hide and show additional data about an house product.

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

We use amp-list to show a list of properties.

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

We use amp-mustache as a format template for amp-list.

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

We use amp-social-share for adding platform sharing buttons.

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

We use amp-iframe to embed a map of the house location.

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

We use amp-form to implement a mortgage calculator.

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

We use amp-fit-text to fit the title of the house page to the page.

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

We use amp-analytics to track page users.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Price

amp-fit-text can be used to fit the text to the available space. It works well for titles that vary not too much in length.

Cosy House in Central London

£430,000

London SW1A 1AA

<h1>
  <amp-fit-text class="price-heading"
    width="300"
    height="45"
    layout="responsive"
    max-font-size="45">
    Cosy House in Central London
  </amp-fit-text>
</h1>
<div class="price-description">£430,000</div>
<p class="housing-description">London SW1A 1AA</p>

The amp-carousel works very well for housing image galleries. Learn more about amp-carousel here.

Buckingham Palace
<amp-carousel class="image-gallery"
  width="512"
  height="384"
  layout="responsive"
  type="slides">
  <amp-img src="/static/samples/img/buckingham_palace_building_1280x960.jpg"
    layout="fill"
    alt="Buckingham Palace"
    attribution="https://pixabay.com"></amp-img>
  <amp-img src="/static/samples/img/buckingham_palace_entrance_1280x853.jpg"
    layout="fill"
    alt="Buckingham Palace entrance"
    attribution="https://pixabay.com"></amp-img>
</amp-carousel>

Detail request section

These buttons are used for requesting details on the property.

Do you like this property?
<div class="contact-section">
  <div> Do you like this property?</div>
  <div class="contact">
    <a href="tel:012 3456789">Call agent</a>
    <a href="mailto:someone@example.com">Email agent</a>
  </div>
</div>

Social

The Social Share extension provides a common interface for share buttons. Learn more about amp-social-share here.

<p class="social-share">
  <amp-social-share type="twitter"
    width="60"
    height="44"></amp-social-share>
  <amp-social-share type="facebook"
    width="60"
    height="44"
    data-attribution="254325784911610"> </amp-social-share>
  <amp-social-share type="gplus"
    width="60"
    height="44"></amp-social-share>
  <amp-social-share type="email"
    width="60"
    height="44"></amp-social-share>
  <amp-social-share type="pinterest"
    width="66"
    height="44"></amp-social-share>
</p>

Collapsibles/Accordion

Use amp-accordion to hide and show additional data about your product. Learn more about amp-accordion here. Embedding Google Maps is possible via the Google Maps Embed API, see here for a sample.

Description

  • Ideally located near tube station
  • Open plan kitchen
  • Bicycle storage, visitors parking, communal gardens and roof terraces

View on map

Floorplan

<amp-accordion class="additional-data">
  <section>
    <h2>Description</h2>
    <ul class="description">
      <li>Ideally located near tube station</li>
      <li>Open plan kitchen</li>
      <li>Bicycle storage, visitors parking, communal gardens and roof terraces</li>
    </ul>
  </section>
  <section>
    <h2>View on map</h2>
    <amp-iframe title="Embedded Google map"
      width="600"
      height="400"
      layout="responsive"
      sandbox="allow-scripts allow-same-origin allow-popups"
      frameborder="0"
      src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848&q=London SW1A 1AA">
    </amp-iframe>
  </section>
  <section>
    <h2>Floorplan</h2>
    <amp-img src="/static/samples/img/floorplan_518x340.jpg"
      width="518"
      height="340"></amp-img>
  </section>
</amp-accordion>

Mortgage calculator

Use amp-form to implement a mortgage calculator. Learn more about amp-form here.

Mortgage Calculator

<h2>Mortgage Calculator</h2>
<form method="GET"
  action="calculate-mortgage"
  action-xhr="calculate-mortgage-xhr"
  target="_top">
  <div>
    <label>
      <input type="number"
        name="price"
        maxlength="10"
        value="2000000"
        required>
      Price
    </label>
  </div>
  <div>
    <label>
      <input type="number"
        name="deposit"
        maxlength="10"
        value="100000"
        required>
      Deposit
    </label>
  </div>
  <div>
    <label>
      <input type="number"
        name="annual_interest"
        maxlength="10"
        value="2.5"
        step="0.01"
        required>
      Annual interest
    </label>
  </div>
  <div>
    <label>
      <input type="number"
        name="repayment_period"
        value="25"
        required>
      Repayment period (years)
    </label>
  </div>
  <div>
    <input type="submit"
      value="Calculate">
  </div>
  <div submit-success>
    <template type="amp-mustache">
      Monthly repayment {{monthly_repayment}}
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error! You entered some incorrect details {{err}}
    </template>
  </div>
</form>

Properties sold nearby

Use amp-list to show a list of properties sold nearby. Learn more about amp-list here

Properties sold nearby

Show more
<h2>Properties sold nearby</h2>
<amp-list width="auto"
  height="150"
  layout="fixed-height"
  src="/static/samples/json/other_properties.json"
  binding="no">
  <template type="amp-mustache">
    <a href="#"
      class="ampstart-card related m1">
      <amp-img width="122"
        height="100"
        src="https://ampbyexample.com{{src}}"
        alt="{{alt}}"
        attribution="{{attribution}}"></amp-img>
      <p>{{desc}}</p>
      <p>{{address}}</p>
      <p class="price-other">{{price}}</p>
    </a>
  </template>
  <div overflow
    role="button"
    aria-label="Show more"
    class="list-overflow">
    Show more
  </div>
</amp-list>

User analytics

Analytics must be configured in the body. Here we use Google Analytics to track pageviews.

<amp-analytics type="googleanalytics">
  <script type="application/json">
      {
          "vars": {
              "account": "UA-73836974-1"
          },
          "triggers": {
              "default pageview": {
                  "on": "visible",
                  "request": "pageview",
                  "vars": {
                      "title": "Housing"
                  }
              }
          }
      }
    </script>
</amp-analytics>
Требуются дальнейшие объяснения?

Если на этой странице нет ответов на все ваши вопросы, обратитесь к другим пользователям AMP и обсудите свой конкретный сценарий использования.

Перейти на Stack Overflow
Не нашли пояснения к функции?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Редактировать пример на GitHub