Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jdvivar/ing-landing-hipotecas-demo
CMS-focused Web Component demo based on a commercial landing page
https://github.com/jdvivar/ing-landing-hipotecas-demo
cms cms-experiment javascript lit-element lit-html parcel standard webcomponents
Last synced: 6 days ago
JSON representation
CMS-focused Web Component demo based on a commercial landing page
- Host: GitHub
- URL: https://github.com/jdvivar/ing-landing-hipotecas-demo
- Owner: jdvivar
- License: gpl-3.0
- Created: 2020-02-07T19:21:38.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T06:46:18.000Z (about 2 years ago)
- Last Synced: 2024-11-21T20:47:18.197Z (2 months ago)
- Topics: cms, cms-experiment, javascript, lit-element, lit-html, parcel, standard, webcomponents
- Language: JavaScript
- Homepage:
- Size: 34 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ``
A landing page made with a single tag, ultra customisable via slots.
> Notice: this demo used a copyrighted SVG logo through a HREF link in the code (the logo itself wasn't part of this repository), still visible on GIF images for demo purposes. It's now been removed, to avoid confusion. Now a cute kitten would show up instead. 🐱
## Why?
This demo has one goal and one goal only: gain the love and conquer the hearts of a group of unconvinced yet creative skeptics that Web Components can be used to manage **web content** effortlessly... by anyone!
## How?
Web Components are extremely powerful. For this particular scenario —with the web content management mindset in place— the philosophy was about creating a simple and contentful experience by default, which could be tweaked later for other content.
This is the landing page used for inspiration:
https://www.ing.es/hipotecas/simula-hipoteca.html.
This is all the markup you need:
```html
```
... and this is the result:
## What technologies are being used?
I've tried to keep it simple (stupid, as in [KISS](https://en.wikipedia.org/wiki/KISS_principle)). Just [LitElement](https://github.com/Polymer/lit-element) for defining Web Components and [Parcel](https://github.com/parcel-bundler/parcel) for bundling and serving the app. For consistent code I used [Standard](https://github.com/standard/standard) as linter.
But you don't really need to know any of that to start, keep reading...
## Get started
Want to give it a shot? Go ahead: click here and explore it within the warmth of your browser 😌
[](https://glitch.com/edit/#!/import/github/jdvivar/ing-landing-hipotecas-demo)
> **Advanced users**
>
> If you want to execute locally instead, clone the repo, install dependencies and then just type:
> ```bash
> npm start
> ```
## Things to try
For the following steps to work, just stay on [`markup.html`](markup.html)
### Main title
This will change the main title
```html
Hipoteca LIMÓN 🍋
```
### Subtitle
This will empty the subtitle
```html
```
### Logo
This will paint a little ball of kitten furr instead of the logo and your heart will melt 😻
```html
```
### Floating notices
This will remove the first notice and change the text of the second notice
```html
Esta hipoteca mola!
```
### Mortgage card
This will change the title, description and floating notice of the 2nd mortgage card
```html
Esta ha bajado más!
Hipoteca Jamón y Queso
Los 10 primeros añitos de nuestra relación a 1.49% TIN,
luego manda el euríbor al que hay que poner 0.99%,
y nos obligan a decirte que eso en total es TAE variable del 2.16%3
```
### Conditions, button and more information link
By design, these are the same for any mortgage card and therefore this markup will change the content in all of them. This prevent unnecessary copy errors. This markup will change all of them:
```html
Necesitamos tu nómina y que contrates seguros de vida y hogar. Todo queda en casa!
Empezar!
+ INFO
```
### Benefits title
This will change the title of the 2nd list of benefits
```html
Cero comisiones
```
### Benefits list, update
This will update the 1st list of benefits, and instead use 3 different benefits
```html
0 %
Comisión por reembolso o amortización anticipada total o parcial
0 %
Comisión de apertura
```
### Benefits list, update a specifig benefit
This will remove all the descriptions from the 1st list of benefits
```html
```
### Benefits list, add another benefit
This will add a 5th benefit to the 2nd list of benefits
```html
0 €
Gastos inventados
Sin más gastos sorpresa
```
### All available slots
- `titulo`
- `subtitulo`
- `logo`
- `hipoteca-*-titulo`
- `hipoteca-*-descripcion`
- `condiciones`
- `boton`
- `mas-informacion`
- `ventajas-*-titulo`
- `ventajas-*-lista`
- `ventajas-*-lista-extra`
- `ventajas-*-lista-*-titulo`
- `ventajas-*-lista-*-subtitulo`
- `ventajas-*-lista-*-descripcion`
Where `*` is a number for the n-item, starting in `1`.
## FAQ
### I want to modify/add/remove X thing but it doesn't seem like any of these slots will do the work for me
Sure, ask me what you want to customise [opening an issue](https://github.com/jdvivar/ing-landing-hipotecas-demo/issues/new) and I'll do it as soon as I can.
### What is [Glitch](https://glitch.com/about)? Are you planning to use Glitch for managing web content?
To the last question: no way! Glitch is just a tool to edit code directly in the browser without much hassle. I think it gives anyone the opportunity to play and explore in ways they might have never thought of before. Find out more bout Glitch in [its about page](https://glitch.com/about).
### Do you have unaddressed questions?
Please don't hesitate and [open an issue](https://github.com/jdvivar/ing-landing-hipotecas-demo/issues/new) assigning `question` as label. I'll answer as soon as I can plus you'll help improve this documentation.