v2.2.0-rc
This commit is contained in:
@ -4,11 +4,14 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>Stand Chile</title>
|
||||
<meta name="keywords" content="stand, chile, celular, smartphone, telefono" />
|
||||
<meta name="description" content="Stand Chile, soporte para celulares y tablets" />
|
||||
<meta name="author" content="Aldarien" />
|
||||
<meta name="copyright" content="ProVM" />
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="./assets/images/favicon.png" />
|
||||
<link rel="stylesheet" type="text/css" href="./assets/styles/main.min.css" />
|
||||
</head>
|
||||
|
||||
@ -16,11 +16,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right menu">
|
||||
<a class="item" href="#contacto">
|
||||
<div class="item">
|
||||
<i class="shopping cart icon">
|
||||
<div class="cantidad">0</div>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
23
assets/html/011_carro.html
Normal file
23
assets/html/011_carro.html
Normal file
@ -0,0 +1,23 @@
|
||||
<div id="carro" class="ui modal">
|
||||
<i class="close icon"></i>
|
||||
<div class="header">
|
||||
CARRITO
|
||||
</div>
|
||||
<form>
|
||||
<div class="content productos">
|
||||
<table class="ui table">
|
||||
<tbody></tbody>
|
||||
<tfoot class="total">
|
||||
<tr>
|
||||
<td colspan="3">TOTAL</td>
|
||||
<td class="precio">$ <span class="valor">0</span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<div class="content">
|
||||
<button class="ui button">COMPRAR</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -1,3 +1,4 @@
|
||||
const valor = 6990
|
||||
let available_colors = {
|
||||
white: {
|
||||
name: 'blanco',
|
||||
@ -143,7 +144,7 @@ class Colors {
|
||||
})
|
||||
this.elem.find('.' + color + '.circle').addClass('selected')
|
||||
if (this.changing != null) {
|
||||
this.changing.attr('src', './assets/images/fotos/' + this.picked + '/left.jpg')
|
||||
this.changing.attr('src', './assets/images/fotos/' + this.picked + '/thumb.jpg')
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -223,14 +224,19 @@ let dimensiones = {
|
||||
}
|
||||
}
|
||||
|
||||
let smtp = {
|
||||
const smtp = {
|
||||
SecureToken: '4adcdc1f-6b6e-4e60-ab72-20da4c329b09',
|
||||
From: 'contacto@3dstand.cl'
|
||||
}
|
||||
|
||||
let sticky_form = {
|
||||
elem: $('.sticky form'),
|
||||
color: null,
|
||||
amount: null,
|
||||
setup: function() {
|
||||
this.amount = new Amount($('.sticky .input input[name="cantidad"]'))
|
||||
this.color = new Colors($('.sticky .colores'), true)
|
||||
|
||||
this.elem.submit((e) => {
|
||||
e.preventDefault()
|
||||
this.submit()
|
||||
@ -238,7 +244,11 @@ let sticky_form = {
|
||||
})
|
||||
},
|
||||
submit: function() {
|
||||
console.debug('submit sticky')
|
||||
carro.add(this.elem.find('[name="cantidad"]').val(), this.elem.find('[name="color"]').val())
|
||||
this.color.change_color('blue')
|
||||
this.amount.n = 0
|
||||
this.amount.print()
|
||||
this.elem.trigger('reset')
|
||||
}
|
||||
}
|
||||
let cotiza_form = {
|
||||
@ -355,18 +365,36 @@ let testimonios = {
|
||||
],
|
||||
elem: $('#testimonios'),
|
||||
page: 0,
|
||||
maxPages: 1,
|
||||
amount: 3,
|
||||
word_amount: {
|
||||
1: 'one',
|
||||
3: 'three'
|
||||
},
|
||||
setup: function() {
|
||||
this.maxPages = Math.ceil(this.testimonios.length / this.amount)
|
||||
this.elem.find('.testimonios').swipe({
|
||||
swipeRight: (e, dir, d, t, n, data) => {
|
||||
this.page --
|
||||
if (this.page < 0) {
|
||||
this.page = this.maxPages - 1
|
||||
}
|
||||
this.draw()
|
||||
},
|
||||
swipeLeft: (e, dir, d, t, n, data) => {
|
||||
this.page ++
|
||||
if (this.page >= this.maxPages) {
|
||||
this.page = 0
|
||||
}
|
||||
this.draw()
|
||||
}
|
||||
})
|
||||
if (this.amount != 3) {
|
||||
this.elem.find('.testimonios').removeClass('three')
|
||||
this.elem.find('.testimonios').addClass(this.word_amount[this.amount])
|
||||
}
|
||||
this.draw()
|
||||
},
|
||||
amount: 3,
|
||||
word_amount: {
|
||||
1: 'one',
|
||||
3: 'three'
|
||||
},
|
||||
draw: function() {
|
||||
var n = this.page * this.amount
|
||||
let p = this.elem.find('.testimonios')
|
||||
@ -394,7 +422,7 @@ let testimonios = {
|
||||
this.draw_nav()
|
||||
},
|
||||
draw_nav: function() {
|
||||
let N = Math.ceil(this.testimonios.length / this.amount)
|
||||
let N = this.maxPages
|
||||
let k = this.page
|
||||
let nav = this.elem.find('.nav')
|
||||
let tests = this
|
||||
@ -423,6 +451,10 @@ let sticky = {
|
||||
this.elem.height(h)
|
||||
this.elem.find('#column').height(h)
|
||||
|
||||
sticky_form.setup()
|
||||
|
||||
this.elem.find('.sticky .precio').html('$ ' + format(valor))
|
||||
|
||||
$('#columna_sticky .sticky').sticky({
|
||||
context: '#column'
|
||||
})
|
||||
@ -450,17 +482,166 @@ let image = {
|
||||
}
|
||||
}
|
||||
|
||||
function format(value) {
|
||||
return (''+value).split('').reverse().join('').match(/.{1,3}/g).join('.').split('').reverse().join('')
|
||||
}
|
||||
|
||||
class Producto {
|
||||
constructor(id, cantidad, color) {
|
||||
this.id = id
|
||||
this.cantidad = cantidad
|
||||
this.color = color
|
||||
}
|
||||
colorName() {
|
||||
return this.color.toLowerCase().split(' ').map(function(str) {
|
||||
return str.replace(str[0], str[0].toUpperCase())
|
||||
}).join(' ')
|
||||
}
|
||||
precio(formateado = false) {
|
||||
let precio = this.cantidad * valor
|
||||
if (!formateado) {
|
||||
return precio
|
||||
}
|
||||
return format(precio)
|
||||
}
|
||||
increase() {
|
||||
this.cantidad ++
|
||||
carro.cantidad ++
|
||||
this.updateCantidad()
|
||||
}
|
||||
decrease() {
|
||||
this.cantidad --
|
||||
carro.cantidad --
|
||||
this.updateCantidad()
|
||||
if (this.cantidad <= 0) {
|
||||
carro.remove(this.id)
|
||||
}
|
||||
}
|
||||
updateCantidad() {
|
||||
$('tr[data-id="' + this.id + '"]').find('input[name="cantidad' + this.id + '"]').val(this.cantidad)
|
||||
carro.update()
|
||||
carro.draw()
|
||||
}
|
||||
draw() {
|
||||
let row = $('<tr></tr>').attr('data-id', this.id).append(
|
||||
$('<td></td>').append(
|
||||
$('<div></div>').attr('class', 'ui tiny image').append(
|
||||
$('<img />').attr('src', './assets/images/fotos/' + this.color + '/thumb.jpg')
|
||||
)
|
||||
)
|
||||
).append(
|
||||
$('<td></td>').html('Stand ' + this.colorName())
|
||||
).append(
|
||||
$('<td></td>').attr('class', 'input cantidad').append(
|
||||
$('<button></button>').attr('class', 'minus').attr('type', 'button').append(
|
||||
$('<i></i>').attr('class', 'minus icon')
|
||||
)
|
||||
).append(
|
||||
$('<input />').attr('type', 'text').attr('name', 'cantidad' + this.id).attr('value', this.cantidad)
|
||||
).append(
|
||||
$('<button></button>').attr('class', 'plus').attr('type', 'button').append(
|
||||
$('<i></i>').attr('class', 'plus icon')
|
||||
)
|
||||
)
|
||||
).append(
|
||||
$('<td></td>').attr('class', 'precio').html('$ ' + this.precio(true))
|
||||
).append(
|
||||
$('<td></td>').append(
|
||||
$('<i></i>').attr('class', 'trash icon')
|
||||
)
|
||||
)
|
||||
row.find('button.minus').click((e) => {
|
||||
this.decrease()
|
||||
})
|
||||
row.find('button.plus').click((e) => {
|
||||
this.increase()
|
||||
})
|
||||
row.find('.trash.icon').click((e) => {
|
||||
carro.remove(this.id)
|
||||
})
|
||||
return row
|
||||
}
|
||||
}
|
||||
let carro = {
|
||||
elem: $('#carro'),
|
||||
boton: $('nav#menu .shopping.cart'),
|
||||
cantidad: 0,
|
||||
compras: [],
|
||||
setup: function() {
|
||||
this.boton.click((e) => {
|
||||
this.draw()
|
||||
})
|
||||
this.elem.find('.close.icon').click((e) => {
|
||||
this.elem.modal('hide')
|
||||
})
|
||||
this.elem.find('form').submit((e) => {
|
||||
e.preventDefault()
|
||||
this.submit()
|
||||
return false
|
||||
})
|
||||
this.update()
|
||||
},
|
||||
update: function() {
|
||||
this.boton.find('.cantidad').html(this.cantidad)
|
||||
},
|
||||
add: function(amount, color) {
|
||||
amount = parseInt(amount)
|
||||
if (amount <= 0) {
|
||||
return
|
||||
}
|
||||
this.cantidad += amount
|
||||
this.update()
|
||||
let idx = this.compras.map(x => {return x.color}).indexOf(color)
|
||||
if (idx > -1) {
|
||||
this.compras[idx].cantidad += amount
|
||||
return
|
||||
}
|
||||
let f = Date.now()
|
||||
this.compras.push(new Producto(f, amount, color))
|
||||
},
|
||||
remove: function(id) {
|
||||
if (this.compras.length == 0) {
|
||||
this.cantidad = 0
|
||||
this.update()
|
||||
return
|
||||
}
|
||||
id = parseInt(id)
|
||||
let idx = this.compras.map(x => {return x.id}).indexOf(id)
|
||||
let n = this.compras[idx].cantidad
|
||||
this.compras.splice(idx, 1)
|
||||
this.cantidad -= n
|
||||
this.update()
|
||||
this.draw()
|
||||
},
|
||||
total: function(formateado = false) {
|
||||
let total = this.cantidad * valor
|
||||
if (!formateado) {
|
||||
return total
|
||||
}
|
||||
return format(total)
|
||||
},
|
||||
draw: function() {
|
||||
let t = this.elem.find('.productos table tbody')
|
||||
t.html('')
|
||||
$.each(this.compras, (i, el) => {
|
||||
t.append(el.draw())
|
||||
})
|
||||
t.parent().find('.total .valor').html(this.total(true))
|
||||
this.elem.modal('show')
|
||||
},
|
||||
submit: function() {
|
||||
console.debug('Comprar')
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#subir').sticky()
|
||||
|
||||
$('.shopping.cart').innerText = 0
|
||||
carro.setup()
|
||||
|
||||
sticky.setup()
|
||||
ventajas.setup()
|
||||
dimensiones.setup()
|
||||
let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
|
||||
let sticky_color = new Colors($('.sticky .colores'), true)
|
||||
sticky_form.setup()
|
||||
let cotiza_amount = new Amount($('#corporativos .input input[name="cantidad"]'))
|
||||
let cotiza_color = new Colors($('#corporativos .colores'))
|
||||
cotiza_form.setup()
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
@import 'common/contacto';
|
||||
@import 'common/nav';
|
||||
@import 'common/image_modal';
|
||||
@import 'common/carro';
|
||||
|
||||
.white.circle {
|
||||
border: thin solid rgb(0, 0, 0);
|
||||
|
||||
38
assets/sass/common/_carro.scss
Normal file
38
assets/sass/common/_carro.scss
Normal file
@ -0,0 +1,38 @@
|
||||
#carro {
|
||||
form {
|
||||
.input.cantidad {
|
||||
width: 4.5rem;
|
||||
background: rgb(255, 255, 255);
|
||||
text-align: center;
|
||||
padding: .5rem 0.05rem;
|
||||
font-size: 10pt;
|
||||
color: rgba(0, 0, 0, .87) !important;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: inherit !important;
|
||||
}
|
||||
input {
|
||||
width: 2rem;
|
||||
background: none;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.precio {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.content>.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,7 @@
|
||||
.right.menu {
|
||||
.item {
|
||||
.shopping.cart {
|
||||
cursor: pointer;
|
||||
.cantidad {
|
||||
position: relative;
|
||||
color: $blanco;
|
||||
|
||||
Reference in New Issue
Block a user