+
+
+
+ );
+ }
+})
+
+// *************** Componente pesponsável pelo header ************
+
+var SubHeader = React.createClass({
+ getInitialState: function(){
+ return {
+ click: true
+ };
+ },
+ dropBlock: function(){
+ this.setState({
+ click: !this.state.click
+ });
+ },
+
+ render: function() {
+ var dropMenus = this.state.click ? 'dropmenuBlock' : 'dropmenuNone';
+ var dropClass = this.state.click ? 'dropdownNone' : 'dropdownBlock';
+ return (
+
+ 
+
+
+
+ 
+
+
+ 3
+
+
+ );
+ }
+});
+
+// *************** Componente pesponsável pelo filtro de cor do menu da versão mobile ************
+
+var MenuCor = React.createClass({
+ getInitialState: function(){
+ return {
+ click: true
+ };
+ },
+ dropMenuCor: function(){
+ this.setState({
+ click: !this.state.click
+ });
+ },
+
+ render: function() {
+ var dropMenuCor = this.state.click ? 'dropmenuBlock' : 'dropmenuNone';
+ return (
+
+
+
+
+ VESTIDOS
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+});
+
+// *************** Componente pesponsável pelo filtro de tamanho do menu da versão mobile ************
+
+var MenuTamanho = React.createClass({
+ getInitialState: function(){
+ return {
+ click: true
+ };
+ },
+ dropMenuTam: function(){
+ this.setState({
+ click: !this.state.click
+ });
+ },
+
+ render: function() {
+ var dropMenuTam = this.state.click ? 'dropmenuBlock' : 'dropmenuNone';
+ return (
+ CORES -
+
+
+
+
+ CORES
+
+
+
+
+
+ );
+ }
+});
+
+// *************** Componente pesponsável pelo filtro de preço do menu da versão mobile ************
+
+var MenuPreco = React.createClass({
+ getInitialState: function(){
+ return {
+ click: true
+ };
+ },
+ dropMenuPreco: function(){
+ this.setState({
+ click: !this.state.click
+ });
+ },
+
+ render: function() {
+ var dropMenuPreco = this.state.click ? 'dropmenuBlock' : 'dropmenuNone';
+ return (
+ TAMANHO -
+
+
+
+
+ );
+ }
+});
+
+// *************** Componente pesponsável pelo esquelo do menu esquerdo da página (filtro) versão desktop ************
+
+var ContentFiltro = React.createClass({
+ render: function() {
+ return (
+ PRECOS -
+
+
+
+
+ FAIXA DE PREÇO
+
+
+
+
+
+ );
+ }
+})
+
+// *************** Componente pesponsável pelo conteudo lateral esquerdo da página (Cores) versão desktop ************
+
+var ContentCores = React.createClass({
+
+ getInitialState: function(){
+ return {
+ click: true,
+ };
+ },
+
+ dropBlock: function(){
+ this.setState({
+ click: !this.state.click
+ });
+ },
+
+ render: function() {
+ var dropClass = this.state.click ? 'dropdownNone' : 'dropdownBlock';
+ var arrowClass = this.state.click ? 'arrow' : 'arrow_down';
+ return (
+
+
+ );
+ }
+})
+
+// *************** Componente pesponsável pelo conteudo lateral esquerdo da página (Tamanhos) versão desktop ***********
+
+var ContentTamanhos = React.createClass({
+ render: function() {
+ return (
+
+ );
+ }
+})
+
+// *************** Componente pesponsável pelo conteudo lateral esquerdo da página (Preco) versão desktop ***********
+
+var ContentPrecos = React.createClass({
+
+ render: function() {
+ return (
+ CORES
+
+
+
+
+
+ );
+ }
+});
+
+// *************** Componente pesponsável pelo conteudo com os cards da página ************
+
+var ContentCards = React.createClass({
+ getInitialState: function() {
+ return {
+ images: []
+ }
+ },
+
+ componentDidMount: function() {
+ var _this = this;
+ this.serverRequest =
+ axios
+ .get("http://localhost:8000/data.json")
+ .then(function(result) {
+ _this.setState({
+ images: result.data.images
+ });
+ })
+ .catch(error=>{});
+ },
+
+ componentWillUnmount: function() {
+ this.serverRequest.abort();
+ },
+
+ render: function() {
+ return (
+ FAIXA DE PREÇO
+
+
+
+ -
+ {this.state.images.map(function(image) {
+ return (
-
+ +++ +
{ image.messenger }
+++{ image.promo } R$ { image.preco }
+até 5x de R${ image.preco/5 }
+
+
+ );
+ })}
+
+
+
+
+ );
+ }
+})
+
+// *************** Componente pesponsável pelo header ************
+
+var SubHeader = React.createClass({
+ getInitialState: function(){
+ return {
+ click: true
+ };
+ },
+ dropBlock: function(){
+ this.setState({
+ click: !this.state.click
+ });
+ },
+
+ render: function() {
+ var dropMenus = this.state.click ? 'dropmenuBlock' : 'dropmenuNone';
+ var dropClass = this.state.click ? 'dropdownNone' : 'dropdownBlock';
+ return (
+
+ 
+
+
+
+
+
+
+ 3
+
+
+ );
+ }
+});
+
+// *************** Componente pesponsável pelo filtro de cor do menu da versão mobile ************
+
+var MenuCor = React.createClass({
+ getInitialState: function(){
+ return {
+ click: true
+ };
+ },
+ dropMenuCor: function(){
+ this.setState({
+ click: !this.state.click
+ });
+ },
+
+ render: function() {
+ var dropMenuCor = this.state.click ? 'dropmenuBlock' : 'dropmenuNone';
+ return (
+
+
+
+
+ VESTIDOS
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+});
+
+// *************** Componente pesponsável pelo filtro de tamanho do menu da versão mobile ************
+
+var MenuTamanho = React.createClass({
+ getInitialState: function(){
+ return {
+ click: true
+ };
+ },
+ dropMenuTam: function(){
+ this.setState({
+ click: !this.state.click
+ });
+ },
+
+ render: function() {
+ var dropMenuTam = this.state.click ? 'dropmenuBlock' : 'dropmenuNone';
+ return (
+ CORES -
+
+
+
+
+ CORES
+
+
+
+
+
+ );
+ }
+});
+
+// *************** Componente pesponsável pelo filtro de preço do menu da versão mobile ************
+
+var MenuPreco = React.createClass({
+ getInitialState: function(){
+ return {
+ click: true
+ };
+ },
+ dropMenuPreco: function(){
+ this.setState({
+ click: !this.state.click
+ });
+ },
+
+ render: function() {
+ var dropMenuPreco = this.state.click ? 'dropmenuBlock' : 'dropmenuNone';
+ return (
+ TAMANHO -
+
+
+
+
+ );
+ }
+});
+
+// *************** Componente pesponsável pelo esquelo do menu esquerdo da página (filtro) versão desktop ************
+
+var ContentFiltro = React.createClass({
+ render: function() {
+ return (
+ PRECOS -
+
+
+
+
+ FAIXA DE PREÇO
+
+
+
+
+
+ );
+ }
+})
+
+// *************** Componente pesponsável pelo conteudo lateral esquerdo da página (Cores) versão desktop ************
+
+var ContentCores = React.createClass({
+
+ getInitialState: function(){
+ return {
+ click: true,
+ };
+ },
+
+ dropBlock: function(){
+ this.setState({
+ click: !this.state.click
+ });
+ },
+
+ render: function() {
+ var dropClass = this.state.click ? 'dropdownNone' : 'dropdownBlock';
+ var arrowClass = this.state.click ? 'arrow' : 'arrow_down';
+ return (
+
+
+ );
+ }
+})
+
+// *************** Componente pesponsável pelo conteudo lateral esquerdo da página (Tamanhos) versão desktop ***********
+
+var ContentTamanhos = React.createClass({
+ render: function() {
+ return (
+
+ );
+ }
+})
+
+// *************** Componente pesponsável pelo conteudo lateral esquerdo da página (Preco) versão desktop ***********
+
+var ContentPrecos = React.createClass({
+
+ render: function() {
+ return (
+ CORES
+
+
+
+
+
+ );
+ }
+});
+
+// *************** Componente pesponsável pelo conteudo com os cards da página ************
+
+var ContentCards = React.createClass({
+ getInitialState: function() {
+ return {
+ images: []
+ }
+ },
+
+ componentDidMount: function() {
+ var _this = this;
+ this.serverRequest =
+ axios
+ .get("https://api.myjson.com/bins/1bj13l")
+ .then(function(result) {
+ _this.setState({
+ images: result.data.images
+ });
+ })
+ .catch(error=>{});
+ },
+
+ componentWillUnmount: function() {
+ this.serverRequest.abort();
+ },
+
+ render: function() {
+ return (
+ FAIXA DE PREÇO
+
+
+
+ -
+ {this.state.images.map(function(image) {
+ return (
-
+ +++ +
{ image.messenger }
+++{ image.promo } R$ { image.preco }
+até 5x de R${ image.preco/5 }
+
+
+ );
+ })}
+