JeanBenitez
/
SitioWebRake


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
							<!doctype html>
<html lang="es">

<head>
    <title> Productos - Líder en Agroinsumos México </title>
    <meta charset="utf-8">
    <meta content='Rake.' name='DC.Title' xml:lang='ES'>
    <meta content='Agroinsumos Rake.' name='DC.Subject' xml:lang='ES'>
    <meta content='Agroinsumos Rake.' name='DC.Description' xml:lang='ES'>
    <meta content='ES' name='DC.Language' scheme='dcterms:RFC1766'>
    <meta content='Agroinsumos' name='DC.Contributor'>
    <meta content='text/html' name='DC.Type'>
    <meta content='https://rake.mx/' name='DC.Identifier'>
    <meta content='Copyright 2019, Rake Inc.  All rights reserved.' name='DC.Rights'>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
    <meta content='Agroinsumos Rake' property='og:title'>
    <meta content='website' property='og:type'>
    <meta content='https://rake.mx/' property='og:url'>
    <meta content='Agroinsumos Rake, empresa líder en la venta de insumos para la producción agrícola, que ofrece gran  calidad en los productos agrícolas'>
    <link href='productos.html' hreflang='es' rel='alternate'>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1' id='viewport' name='viewport'>

    <!-- Favicons -->
    <link href="assets/favicon.ico" rel="icon">
    <link href="img/apple-touch-icon.png" rel="apple-touch-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700|Raleway:300,400,400i,500,500i,700,800,900" rel="stylesheet">

    <!-- Bootstrap CSS File -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Libraries CSS Files -->
    <link href="lib/nivo-slider/css/nivo-slider.css" rel="stylesheet">
    <link href="lib/owlcarousel/owl.carousel.css" rel="stylesheet">
    <link href="lib/owlcarousel/owl.transitions.css" rel="stylesheet">
    <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/venobox/venobox.css" rel="stylesheet">

    <!-- Nivo Slider Theme -->
    <link href="css/nivo-slider-theme.css" rel="stylesheet">

    <!-- Main Stylesheet File -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Responsive Stylesheet File -->
    <link href="css/responsive.css" rel="stylesheet">

    <!-- Vuejs -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body data-spy="scroll" data-target="#navbar-example">

    <!-- <div id="preloader"></div> -->

    <!-- header Start -->
    <header></header>
    <!-- header end -->

    <!-- Start Bottom Header -->
    <!-- <div class="header-bg page-area" id="productos">
        <div class="home-overly"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="text-center">
                        <div class="header-bottom"> -->
    <!--  <div class="layer2 wow zoomIn" data-wow-duration="1s" data-wow-delay=".4s">
                <h1 class="title2">FICHA TÉCNICA</h1>
              </div> -->
    <!-- <div class="layer3 wow zoomInUp" data-wow-duration="2s" data-wow-delay="1s">
                <h2 class="title3"> <span style="color: #2cb978">RAKE</span> </h2>
              </div> -->
    <!-- </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
    <div id="home" class="slider-area">
        <div class="bend niceties preview-2">

            <div id="" class="">
                <img src="img/banners/banner-productos.png" alt="" title="#slider-direction-1" />
            </div>
        </div>
    </div>
    <!-- END Header -->

    <!-- Start Products Area -->
    <div class="container" style="margin-top: 1%" id="info">

        <ol class="breadcrumb">
            <li><a href="index">Inicio</a></li>
            <li><a href="productos">Productos</a></li>
            <li><a href="" id="marcasRef">Marcas</a></li>
            <li class="active" id="productoLi"></li>
        </ol>
        <br><br>
        <div class="row" v-if="productoData.length != 0">
            <div class="col-sm-5 col-lg-5">

                <div class="img text-center">
                    <h2 style="color: #5cb85c"><b>{{ productoData.nombreProducto }}</b></h2>
                    <!-- <img class="rounded float-right img-producto" src="assets/productos-botella/bionutra/bio-capsi.png" alt="Producto"> -->
                    <img class="rounded float-right img-producto" :src="productoData.imgProducto" alt="Producto">
                </div>

            </div>
            <div class="col-sm-5 col-lg-6">
                <!-- <button type="button" class="btn btn-success" style="float:right;"> -->
                <!-- <a :href="productoData.fichaTecnica" style="color:white"> DESCARGAR FICHA TÉCNICA</a></button> -->
                <div><label class="proveedor text-uppercase"> {{ productoData.nombreProveedor }} </label></div>
                <div class="descripcion card">
                    <p><b>DESCRIPCIÓN:</b> {{ productoData.descripcion }} </p>
                    <p><b>Ingrediente Activo: </b> {{ productoData.ingredienteActivo }} </p>
                    <p><b>Presentación: </b> {{ productoData.presentacion }} </p>

                    <p><b>Cantidad: </b> {{ productoData.cantidad }} </p>
                </div>
            </div>
            <!-- /.row -->
        </div>

        <div class="row" v-if="productoData.length == 0">
            <h3 style="padding: 5px">No se encontraron resultados para este producto</h3>
        </div>
        <!-- /.col-lg-9 -->

    </div>
    <!-- /.row -->
    </div>
    <!-- End Products Area -->

    <div class="clearfix"></div>

    <!-- Start Footer bottom Area -->
    <br><br>
    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="col-md-6 text-center pad-re">
                        <p id="fecha">
                        </p>
                    </div>
                    <div class="col-md-3"></div>
                    <div class="col-md-6 text-center pad">
                        <p>
                            Desarrollado y administrado por
                            <img src="img/ittec.png" width="80px">
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var dt = new Date();
        var anio = dt.getFullYear();
        document.getElementById('fecha').innerHTML = '@' + anio + ' <strong>Agro Insumos Raké</strong> SPR de RL de CV. Todos los derechos reservados';
    </script>
    <!-- End Footer bottom Area -->

    <a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>

    <style>
        .descripcion {
            padding: 15px;
            text-align: justify;
            margin: 10px;
        }
        
        .img-producto {
            max-height: 450px;
        }
        
        .proveedor {
            background: #fff;
            padding: 5px;
            margin-left: 10px;
            border: 1px solid #5cb85c;
        }
        
        .title2 {
            margin-top: 120px;
        }
        
        .title2,
        .title3 {
            font-family: "All Round Gothic" !important;
        }
        
        #filtro {
            background: #f2f2f2;
        }
        
        #filtroText {
            text-align: center;
            padding: 8px 1px 5px 0px;
            background: #0e8a51 !important;
            box-shadow: 0px 5px 10px 0px #c6c6c6;
        }
        
        #filtroText h5 {
            color: white;
        }
        
        .card {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: rgba(255, 255, 255, 0.93);
            background-clip: border-box;
            border: 1px solid rgba(0, 0, 0, .125);
            border-radius: .25rem;
            margin-bottom: 5%;
            transition: box-shadow 0.3s ease-in-out
        }
        
        .card:hover {
            box-shadow: 2px 9px 14px 0px #d8cccc;
        }
        
        .card-img-top {
            width: 100%;
            border-top-left-radius: calc(.25rem - 1px);
            border-top-right-radius: calc(.25rem - 1px);
        }
        
        .card-footer {
            text-decoration: none;
            padding: .75rem 1.25rem;
            background-color: #00713b;
            border-top: 1px solid rgba(0, 0, 0, .125);
            text-align: center;
            color: #fff;
            padding: 10px;
        }
    </style>

    <script>
        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

        var marca = getParameterByName('marca');
        var producto = getParameterByName('producto');

        // Capializamos la primera letra
        document.getElementById("marcasRef").innerHTML = marca.charAt(0).toUpperCase() + marca.slice(1);
        document.getElementById("marcasRef").href = "producto?marca=" + marca;

        document.getElementById("productoLi").innerHTML = producto.charAt(0).toUpperCase() + producto.slice(1);


        var info = new Vue({
            el: '#info',
            data: {
                productoData: [],
            },
            mounted() {
                axios.get("./shared/data/marcas.json")
                    .then(response => {
                        var data = [];
                        // Filtro los datos por el producto
                        let arrResultado = response.data.filter(function(item) {
                            if (item.titulo == marca) {
                                data = item.productos.find((prod) => {
                                    return prod.nombre.toLowerCase() === producto.toLowerCase();
                                });
                            }

                        });

                        this.productoData = (typeof(data) != "undefined") ? data : [];
                    });

            },
            computed: {
                filtro: function() {


                    } //termina filtro

            }
        });
    </script>

    <!-- JavaScript Libraries -->
    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>
    <script src="lib/venobox/venobox.min.js"></script>
    <script src="lib/knob/jquery.knob.js"></script>
    <script src="lib/wow/wow.min.js"></script>
    <script src="lib/parallax/parallax.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/nivo-slider/js/jquery.nivo.slider.js" type="text/javascript"></script>
    <script src="lib/appear/jquery.appear.js"></script>
    <script src="lib/isotope/isotope.pkgd.min.js"></script>

    <!-- Contact Form JavaScript File -->
    <script src="contactform/contactform.js"></script>
    <script src="js/main.js"></script>

    <!-- All Round Gothic -->
    <link href="https://db.onlinewebfonts.com/c/4387b781fdcc752283b72bdc76757065?family=All+Round+Gothic" rel="stylesheet" type="text/css">
</body>

</html>