Programación en el desarrollo web en Shopify 👨‍💻 (parte 1)

Partamos desde la base, la programación dentro de lo que es diseño web, es un tema simple, pero a la vez complicado.

En Shopify se manejan distintos lenguajes, tales como HTML, CSS, Liquid y Javascript para lo que sería el front de la página.

(...y qué chucha es el front?) Dentro del desarrollo de software y desarrollo web se destaca harto el concepto de Front-End / Back-End.

Front-End:

El Front hacen referencia a las tecnologías que corren del lado del cliente, es decir, que corren en el mismo navegador; Usualmente hay que conocer de UX (User Experience) ya que tu función como frontend es llegar con algo bonito y funcional a cada visitante, conocido o cliente.

Back-End:

El Back se va por el lado completamente opuesto, es todo aquello que ocurre en el servidor, tales como el manejo de bases de datos, integraciones continuas, manejo de sesiones de los usuarios, y de este mismo entregarle todas las herramientas necesarias al front-end para funcionar debidamente, a través de microservicios, estructuras de datos, etc.

 Sería algo así:

Ambos son necesarios siempre a cualquier escala, existen programadores que son considerados 'FULL STACK', es decir, manejan las herramientas necesarias del front y del backend para desarrollar bajo un stack específico de lenguajes de programación y herramientas.

HTML

HTML (Hypertext Markup Language) es un lenguaje de marcado, o sea, a la larga es simplemente una estructura o esqueleto el cual es interpretado por los distintos exploradores para poder observar los elementos. Es una de las bases del desarrollo web, y a pesar de tener una estructura extraña, es fácil de dominar. Se puede aprender muchísimo gracias a los chicos de W3Schools.

CSS

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo, se encarga a través de clases y atributos, de embellecer el esqueleto del HTML, siempre van a la par. Existen también frameworks para trabajar más facilmente o usando estilos modernos actualizados, tales como Materialize, Foundation, Semantic UI y uno de mis favoritos para proyectos profesionales: Bulma .

También hay guías muy simple, que todos los entendidos ya saben de memoria en W3Schools.

Liquid

Liquid es un lenguaje de plantillas, escrito en Ruby. Fue desarrollado por Shopify como lenguaje Open Source y actualmente es usado en varias páginas. Su principal gracia es cargar contenido dinámico para nuestras tiendas.

No existen muchos tutoriales interesantes, pero puedes encontrar el cheatsheet con todas sus sentencias en este link.

Javascript

JavaScript es un lenguaje de programación interpretado de alto nivel. Se define como orientado a objetos, basado en prototipos, imperativo, debilmente tipado y dinámico; lo cual lo convierte en un lenguaje muy versatil para trabajar en el frontend de forma pura. Para Shopify directamente lo más fácil/cómodo es usar javascript puro; sin embargo, existen frameworks y librerías tanto para el frontend como para el backend que son bastante poderosos, entre ellos destacan:

Backend: Node.js.

Frontend: React, Angular, Vuejs, ember.

Existen cursos javascript en muchas partes, pero la mejor forma de aprender, es metiendo mano, y dejando la cagada hasta conseguir algo mejor; de todas formas, en W3Schools, y personalmente este curso en Udemy.

Dejaré este mini código para ser ocupado, aquel que lo haga funcionar, puede mandarme un correo a mi mail, si responde correctamente la pregunta secreta, ofrezco una sección a pedido para su tienda!

tip: "es una seccion para el código de la plantilla jeje"

¡Para que se la juegan al máximo con esto!

{% comment %}
    @rotcl
{% endcomment %}


<div class="container">
    <div class="row">
<div class="caption v-middle text-center">
    <h1 class="cd-headline clip">
		<span class="blc">{{ section.settings.t1 }}</span>
		<span class="cd-words-wrapper">
			<b class="is-visible">{{ section.settings.t2 }}</b>
			<b>{{ section.settings.t3 }}</b>
			<b>{{ section.settings.t4 }}</b>
		</span>
	</h1>
</div>
  </div>
</div>



<style>
  .cd-words-wrapper {
	display: inline-block;
	position: relative;
	text-align: left;
	font-size: 30px
}

.cd-words-wrapper b {
	display: inline-block;
	position: absolute;
	white-space: nowrap;
	left: 0;
	top: 0
}

.blc {
	font-size: 30px
}

.cd-words-wrapper b.is-visible {
	position: relative
}

.cd-headline.clip span {
	display: inline-block;
	padding: .2em 0
}

.cd-headline.clip .cd-words-wrapper {
	overflow: hidden;
	vertical-align: top
}

.cd-headline.clip b {
	opacity: 0
}

.cd-headline b.is-visible {
	opacity: 1;
	font-weight: 900
}
</style>

<script>
  jQuery(document).ready(function(s) {
    function e(e) {
        e.each(function() {
            var e = s(this),
                a = e.text().split(""),
                n = e.hasClass("is-visible");
            for (i in a) e.parents(".rotate-2").length > 0 && (a[i] = "<em>" + a[i] + "</em>"), a[i] = n ? '<i class="in">' + a[i] + "</i>" : "<i>" + a[i] + "</i>";
            var t = a.join("");
            e.html(t).css("opacity", 1)
        })
    }

    function a(i) {
        var e = c;
        i.each(function() {
            var i = s(this);
            if (i.hasClass("loading-bar")) e = h, setTimeout(function() {
                i.find(".cd-words-wrapper").addClass("is-loading")
            }, u);
            else if (i.hasClass("clip")) {
                var a = i.find(".cd-words-wrapper"),
                    t = a.width() + 10;
                a.css("width", t)
            } else if (!i.hasClass("type")) {
                var d = i.find(".cd-words-wrapper b"),
                    l = 0;
                d.each(function() {
                    var i = s(this).width();
                    i > l && (l = i)
                }), i.find(".cd-words-wrapper").css("width", l)
            }
            setTimeout(function() {
                n(i.find(".is-visible").eq(0))
            }, e)
        })
    }

    function n(s) {
        var i = r(s);
        if (s.parents(".cd-headline").hasClass("type")) {
            var e = s.parent(".cd-words-wrapper");
            e.addClass("selected").removeClass("waiting"), setTimeout(function() {
                e.removeClass("selected"), s.removeClass("is-visible").addClass("is-hidden").children("i").removeClass("in").addClass("out")
            }, C), setTimeout(function() {
                t(i, f)
            }, m)
        } else if (s.parents(".cd-headline").hasClass("letters")) {
            var a = s.children("i").length >= i.children("i").length;
            d(s.find("i").eq(0), s, a, p), l(i.find("i").eq(0), i, a, p)
        } else s.parents(".cd-headline").hasClass("clip") ? s.parents(".cd-words-wrapper").animate({
            width: "2px"
        }, w, function() {
            o(s, i), t(i)
        }) : s.parents(".cd-headline").hasClass("loading-bar") ? (s.parents(".cd-words-wrapper").removeClass("is-loading"), o(s, i), setTimeout(function() {
            n(i)
        }, h), setTimeout(function() {
            s.parents(".cd-words-wrapper").addClass("is-loading")
        }, u)) : (o(s, i), setTimeout(function() {
            n(i)
        }, c))
    }

    function t(s, i) {
        s.parents(".cd-headline").hasClass("type") ? (l(s.find("i").eq(0), s, !1, i), s.addClass("is-visible").removeClass("is-hidden")) : s.parents(".cd-headline").hasClass("clip") && s.parents(".cd-words-wrapper").animate({
            width: s.width() + 10
        }, w, function() {
            setTimeout(function() {
                n(s)
            }, v)
        })
    }

    function d(i, e, a, t) {
        if (i.removeClass("in").addClass("out"), i.is(":last-child") ? a && setTimeout(function() {
                n(r(e))
            }, c) : setTimeout(function() {
                d(i.next(), e, a, t)
            }, t), i.is(":last-child") && s("html").hasClass("no-csstransitions")) {
            var l = r(e);
            o(e, l)
        }
    }

    function l(s, i, e, a) {
        s.addClass("in").removeClass("out"), s.is(":last-child") ? (i.parents(".cd-headline").hasClass("type") && setTimeout(function() {
            i.parents(".cd-words-wrapper").addClass("waiting")
        }, 200), e || setTimeout(function() {
            n(i)
        }, c)) : setTimeout(function() {
            l(s.next(), i, e, a)
        }, a)
    }

    function r(s) {
        return s.is(":last-child") ? s.parent().children().eq(0) : s.next()
    }

    function o(s, i) {
        s.removeClass("is-visible").addClass("is-hidden"), i.removeClass("is-hidden").addClass("is-visible")
    }
    var c = 2500,
        h = 3800,
        u = h - 3e3,
        p = 50,
        f = 150,
        C = 500,
        m = C + 800,
        w = 600,
        v = 1500;
    ! function() {
        e(s(".cd-headline.letters").find("b")), a(s(".cd-headline"))
    }()
});
</script>


{% schema %}
{
  "name": "Algo choro",
  "class": "findme",
  "settings": [
	{	
		"type": "header",
		"content": "Static"
	},
	{
		"type": "text",
		"id": "t1"
	},
	{	
		"type": "header",
		"content": "Dinamic"
	},
	{
		"type": "text",
		"id": "t2"
	},
	{
		"type": "text",
		"id": "t3"
	},
	{
		"type": "text",
		"id": "t4"
	}
  ],
  "presets": [{
    "name": "algo choro",
    "category": "Custom"
  }]

}
{% endschema %}

Aquel que lo haga funcionar, puede mandarme un correo a mi mail, si responde correctamente la pregunta secreta, ofrezco una sección a pedido para su tienda!

¡Para que se la juegan al máximo con esto!

En la siguiente entrega de esta saga, profundizaremos un poco más dentro de la creación de secciones especiales, y responderé las dudas o comentarios que lleguen a este post.

Good game.