FROM CACHE - es_header

Iconos del footer al header sin apps, solo código

Alcercos
Nuevo miembro
6 0 0

Hola, 

Estoy intentando aprender a programar con Liquid pero he tenido algunos problemas.

Estoy intentando de llevar los logos de redes sociales del footer (cómo los de la imagen 1) del tema Debut al header, idealmente a la izquierda pero me da igual si es al lado de los íconos. 

Pude identificar donde debería pegar un código al inspeccionar la web en chrome (como la imagen 2), pero solamente me sirve para mostrar la idea, no supe que código copiar desde el footer.liquid al header.liquid para que se mantuviera el mismo aspecto e información que la foto que les mostré más arriba. 

Esto es lo que copié y pegué en la inspección:

<ul class="list--inline site-footer__social-icons social-icons site-footer__icon-list"><li class="social-icons__item">
                  <a class="social-icons__link" href="www.facebook.com/kissenbag" aria-describedby="a11y-external-message"><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-facebook" viewBox="0 0 20 20"><path fill="#444" d="M18.05.811q.439 0 .744.305t.305.744v16.637q0 .439-.305.744t-.744.305h-4.732v-7.221h2.415l.342-2.854h-2.757v-1.83q0-.659.293-1t1.073-.342h1.488V3.762q-.976-.098-2.171-.098-1.634 0-2.635.964t-1 2.72V9.47H7.951v2.854h2.415v7.221H1.413q-.439 0-.744-.305t-.305-.744V1.859q0-.439.305-.744T1.413.81H18.05z"></path></svg><span class="icon__fallback-text">Facebook</span>
                  </a>
                </li><li class="social-icons__item">
                  <a class="social-icons__link" href="https://www.instagram.com/kissenbag/" aria-describedby="a11y-external-message"><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-instagram" viewBox="0 0 512 512"><path d="M256 49.5c67.3 0 75.2.3 101.8 1.5 24.6 1.1 37.9 5.2 46.8 8.7 11.8 4.6 20.2 10 29 18.8s14.3 17.2 18.8 29c3.4 8.9 7.6 22.2 8.7 46.8 1.2 26.6 1.5 34.5 1.5 101.8s-.3 75.2-1.5 101.8c-1.1 24.6-5.2 37.9-8.7 46.8-4.6 11.8-10 20.2-18.8 29s-17.2 14.3-29 18.8c-8.9 3.4-22.2 7.6-46.8 8.7-26.6 1.2-34.5 1.5-101.8 1.5s-75.2-.3-101.8-1.5c-24.6-1.1-37.9-5.2-46.8-8.7-11.8-4.6-20.2-10-29-18.8s-14.3-17.2-18.8-29c-3.4-8.9-7.6-22.2-8.7-46.8-1.2-26.6-1.5-34.5-1.5-101.8s.3-75.2 1.5-101.8c1.1-24.6 5.2-37.9 8.7-46.8 4.6-11.8 10-20.2 18.8-29s17.2-14.3 29-18.8c8.9-3.4 22.2-7.6 46.8-8.7 26.6-1.3 34.5-1.5 101.8-1.5m0-45.4c-68.4 0-77 .3-103.9 1.5C125.3 6.8 107 11.1 91 17.3c-16.6 6.4-30.6 15.1-44.6 29.1-14 14-22.6 28.1-29.1 44.6-6.2 16-10.5 34.3-11.7 61.2C4.4 179 4.1 187.6 4.1 256s.3 77 1.5 103.9c1.2 26.8 5.5 45.1 11.7 61.2 6.4 16.6 15.1 30.6 29.1 44.6 14 14 28.1 22.6 44.6 29.1 16 6.2 34.3 10.5 61.2 11.7 26.9 1.2 35.4 1.5 103.9 1.5s77-.3 103.9-1.5c26.8-1.2 45.1-5.5 61.2-11.7 16.6-6.4 30.6-15.1 44.6-29.1 14-14 22.6-28.1 29.1-44.6 6.2-16 10.5-34.3 11.7-61.2 1.2-26.9 1.5-35.4 1.5-103.9s-.3-77-1.5-103.9c-1.2-26.8-5.5-45.1-11.7-61.2-6.4-16.6-15.1-30.6-29.1-44.6-14-14-28.1-22.6-44.6-29.1-16-6.2-34.3-10.5-61.2-11.7-27-1.1-35.6-1.4-104-1.4z"></path><path d="M256 126.6c-71.4 0-129.4 57.9-129.4 129.4s58 129.4 129.4 129.4 129.4-58 129.4-129.4-58-129.4-129.4-129.4zm0 213.4c-46.4 0-84-37.6-84-84s37.6-84 84-84 84 37.6 84 84-37.6 84-84 84z"></path><circle cx="390.5" cy="121.5" r="30.2"></circle></svg><span class="icon__fallback-text">Instagram</span>
                  </a>
                </li></ul>

y entiendo que esta sección del footer.liquid

<div class="grid__item {% if show_selectors or show_payment_icons %}one-half{% endif %} small--one-whole site-footer-item-tall">
        {%- if social_icons -%}
          <ul class="list--inline site-footer__social-icons social-icons site-footer__icon-list">
            {%- for social in socials -%}
              {%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
              {%- assign icon_link = social | prepend: 'icon-' | downcase -%}
              {%- if settings[social_link] != blank -%}
                <li class="social-icons__item">
                  <a class="social-icons__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message">
                    {%- include icon_link -%}
                    <span class="icon__fallback-text">{{ social }}</span>
                  </a>
                </li>
              {%- endif -%}
            {%- endfor -%}

            {%- if request.page_type == 'blog' or request.page_type == 'article' -%}
              <li>
                <a class="social-icons__link" href="{{ shop.url }}{{ blog.url }}.atom">
                  {% include 'icon-rss' %}
                  <span class="icon__fallback-text">RSS</span>
                </a>
              </li>
            {%- endif -%}
          </ul>
        {%- else -%}
          <div class="small--hide site-footer-item-align-right {% if show_selectors or show_payment_icons %}site-footer-item-center-vertically{% endif %}">
            <small class="site-footer__copyright-content">&copy; {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
            <small class="site-footer__copyright-content site-footer__copyright-content-powered-by">{{ powered_by_link }}</small>
          </div>
        {%- endif -%}
      </div>

Esa sección la copie y pegue en el header justo entre este div y este button.

 <div class="site-header__icons-wrapper">

          <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
    

después intenté de pegar todo lo que está antes de style del footer al header entendiendo que ahí debe estar el llamado a las variables de liquid pero no resultó. Solo se agrega el espacio vacío pero sin los logos (menos los links). 

{%- assign social_icons = false -%}
{%- assign inline_list = false -%}
{%- assign locale_selector = false -%}
{%- assign currency_selector = false -%}
{%- assign show_payment_icons = false -%}
{%- assign show_selectors = false -%}

{%- if section.settings.show_currency_selector and shop.enabled_currencies.size > 1 -%}
  {%- assign currency_selector = true -%}
{%- endif -%}

{%- if section.settings.show_locale_selector and shop.published_locales.size > 1 -%}
  {%- assign locale_selector = true -%}
{%- endif -%}

{%- if section.settings.show_payment_icons -%}
  {%- unless shop.enabled_payment_types == empty -%}
    {%- assign show_payment_icons = true -%}
  {%- endunless -%}
{%- endif -%}

{%- if currency_selector or locale_selector -%}
  {%- assign show_selectors = true -%}
{%- endif -%}

{%- if
  settings.social_twitter_link != blank
  or settings.social_facebook_link != blank
  or settings.social_pinterest_link != blank
  or settings.social_instagram_link != blank
  or settings.social_tumblr_link != blank
  or settings.social_snapchat_link != blank
  or settings.social_youtube_link != blank
  or settings.social_vimeo_link != blank
  or request.page_type == 'article'
  or request.page_type == 'blog'
-%}
  {%- assign social_icons = true -%}
{%- endif -%}

{%- assign payment_width_class = "one-half" -%}
{%- if show_selectors -%}
  {%- unless social_icons -%}
    {%- assign payment_width_class = "" -%}
  {%- endunless -%}
{%- endif -%}

{%- assign copyright_show_class = "medium-up--hide" -%}
{%- if social_icons -%}
  {%- unless show_selectors -%}
    {%- assign copyright_show_class = "" -%}
  {%- endunless -%}
{%- endif -%}

{%- case section.blocks.size -%}
  {%- when 1 -%}
    {%- assign footer_item = 'site-footer__item--full-width' -%}
    {%- assign inline_list = true -%}
  {%- when 2 -%}
    {%- assign footer_item = 'site-footer__item--one-half' -%}
    {%- assign inline_list = true -%}
  {%- when 3 -%}
    {%- assign footer_item = 'site-footer__item--one-third' -%}
    {%- for block in section.blocks -%}
      {%- if block.type == 'newsletter' -%}
        {%- assign footer_item = 'site-footer__item--one-quarter' -%}
        {%- break -%}
      {%- endif -%}
    {%- endfor -%}
  {%- when 4 -%}
    {%- assign footer_item = 'site-footer__item--one-quarter' -%}
  {%- when 5 -%}
    {%- assign footer_item = 'site-footer__item--one-fifth' -%}
{%- endcase -%}

{% comment %} Create an appropriate hover color based on text color and brightness {% endcomment %}
{%- assign footer_text_color = section.settings.color_footer_text -%}
{%- assign footer_text_color_brightness = section.settings.color_footer_text | color_brightness -%}
{%- if footer_text_color_brightness <= 26 -%}
  {%- assign footer_text_color_hover = footer_text_color | color_lighten: 25 -%}
{%- elsif footer_text_color_brightness <= 65 -%}
  {%- assign footer_text_color_hover = footer_text_color | color_lighten: 15 -%}
{%- else -%}
  {%- assign footer_text_color_hover = footer_text_color | color_darken: 10 -%}
{%- endif -%}

Mi idea es empezar a entender como funcionan los comandos con Liquid, que entiendo que hace llamados a distintas bbdd y páginas pero no se como relacionarlas cuándo quiero ingresar código (sin que sea con links fijos que solo con código se pueden cambiar).

el sitio es www.kissenbag.com y la clave de acceso es tahdey por si quieren revisar.

 

Espero que me puedan ayudar, muchas gracias a todos de antemano

 

 

3 RESPUESTAS 3

AlfredoMendoza
Shopify Partner
196 24 63

Hola @Alcercos 

Al principio entender liquid puede ser complicado, yo también llevo tiempo trabajando con varias tiendas y aun sigo buscando de vez en la documentación por alguna solución.
Te explico un poco el problema que tienes, 

1.- El código que intentas pegar en el header contiene variables liquid y solo existen en la sección del footer. Por ejemplo la linea 

settings.social_twitter_link != blank

el texto "settings.social_twitter_link" es un identificador que está contenido dentro de la sección "schemas" del footer por ello cuando intentas llamarlo desde el header te muestra el espacio vacio.

Lo ideal sería que separes la sección de redes sociales del footer y crees un nuevo archivo en la carpeta Snippets. Con eso puedes llamar con "include" ese nuevo archivo que construye la lista para las redes sociales.

Espero mi respuesta haya sido de ayuda, si fue así por favor dale Me gusta para hacérmelo saber.



WhatsApp:+52 5646279452


Email: alfredomendozamg@gmail.com

Alcercos
Nuevo miembro
6 0 0

Hola @AlfredoMendoza, gracias por tu respuesta. 

 

Claro, eso más o menos había identificado. aún así no pude sacar esas variables que está llamando provenientes de otro lado.
Tu me podrías compartir algún lugar donde pueda aprender a hacer este tipo de tareas?

 

Muchas gracias

AlfredoMendoza
Shopify Partner
196 24 63

Te recomiendo que busques en Shopify Developers viene mucha información sobre la construcción de temas, pero si habrá cosas en donde tu tendrás que ingeniártelas para solucionarlo.
 

Espero mi respuesta haya sido de ayuda, si fue así por favor dale Me gusta para hacérmelo saber.



WhatsApp:+52 5646279452


Email: alfredomendozamg@gmail.com