v2.2.0-rc

assets/html/001_head.html

@@ -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>

assets/html/010_nav.html

@@ -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>

assets/html/011_carro.html

@@ -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>

assets/js/main.js

@@ -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()

assets/sass/_common.scss

@@ -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);

assets/sass/common/_carro.scss

@@ -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%;
+  }
+}

assets/sass/common/_nav.scss

@@ -7,6 +7,7 @@
   .right.menu {
     .item {
       .shopping.cart {
+        cursor: pointer;
         .cantidad {
           position: relative;
           color: $blanco;

public/assets/images/bandera.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="22.742px" height="14.125px" viewBox="0 0 22.742 14.125" enable-background="new 0 0 22.742 14.125" xml:space="preserve">
-<g>
-	<g>
-		<rect fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" width="22.742" height="14.125"/>
-		<rect y="7.063" fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" width="22.742" height="7.062"/>
-		<rect fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" width="8.306" height="7.063"/>
-		<polygon fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" points="4.152,4.318 3.243,4.797 3.417,3.783 
-			2.681,3.066 3.698,2.918 4.152,1.996 4.607,2.918 5.625,3.066 4.889,3.783 5.063,4.797 		"/>
-	</g>
-</g>
-</svg>

public/assets/scripts/main.js

@@ -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()

public/assets/styles/main.css

@@ -206,6 +206,9 @@ html {
   border: none !important;
   box-shadow: none !important;
 }
+#menu .right.menu .item .shopping.cart {
+  cursor: pointer;
+}
 #menu .right.menu .item .shopping.cart .cantidad {
   position: relative;
   color: white;
@@ -224,6 +227,39 @@ html {
   margin: auto;
 }
 
+#carro form .input.cantidad {
+  width: 4.5rem;
+  background: white;
+  text-align: center;
+  padding: 0.5rem 0.05rem;
+  font-size: 10pt;
+  color: rgba(0, 0, 0, 0.87) !important;
+}
+#carro form .input.cantidad button {
+  background: none;
+  border: none;
+  width: 1rem;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  color: inherit !important;
+}
+#carro form .input.cantidad input {
+  width: 2rem;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  text-align: center;
+  color: inherit !important;
+}
+#carro form .precio {
+  text-align: right;
+}
+#carro .content > .button {
+  width: 100%;
+}
+
 .white.circle {
   border: thin solid black;
   background-color: white;