FROM CACHE - es_header

Image picker no agrega la imágen en bloque custom

Viiictoria
Shopify Partner
11 0 3

Buenos dias,

Tengo un pequeño problema. Estoy creando un componente custom y necesito agregar tanto una imagen como un icono (Que lo paso como imagen). Pero una vez adjunto la imagen desde el entorno de personalización, la imagen aparece como un link roto + el texto alt. Véase la imagen de lo que ocurre:

Viiictoria_0-1709629543587.png

Mi código no parece tener nada extraño y pasa sin ningún tipo de problema. pero no entiendo por que no funciona. aquí paso parte del código:

 <body>
    <main class="rowSalePoint">
      <section class="sale-point-section">
        <p>{{ section.settings.desc }}</p>
      </section>
      {% for block in section.blocks %}
        <section class="contentBlock">
          {% if block.settings.img %}
            <img
              class="saleImg"
              src="{{ block.settings.img | asset_url }}"
              alt="Sale Image"
              width="276px"
              height="189px"
            >
          {% endif %}
          {% if block.settings.icon %}
            <img
              class="saleIcon"
              src="{{ block.settings.icon | asset_url }}"
              alt="Icon"
              width="43.56px"
              height="43.56px"
            >
          {% endif %}
          <p class="cost">
            {{ block.settings.numbPercent -}}
            <span>%</span>
          </p>
          <h5 class="titleSP">{{ block.settings.saleTitle }}</h5>
          <p class="descSP">{{ block.settings.salesDesc }}</p>
        </section>
      {% endfor %}
    </main>
  </body>
</html>

y el schema:

{% schema %}
{
  "name": "BWQuickPoints",
  "settings": [
    {
      "type": "richtext",
      "label": "General Description",
      "id": "desc",
      "default": "<p>Add description for this section</p>"
    }
  ],
  "presets": [
    {
      "name": "BW - Sale Points"
    }
  ],
  "blocks": [
    {
      "type": "salepoint",
      "name": "Sale point",
      "settings": [
        {
          "type": "image_picker",
          "label": "Sale image",
          "id": "img"
        },
        {
          "type": "image_picker",
          "label": "Icon",
          "id": "icon"
        },
        {
          "type": "text",
          "label": "Percentage Number",
          "id": "numbPercent",
          "default": "100"
        },
        {
          "type": "text",
          "label": "Sale title",
          "id": "saleTitle",
          "default": "Here's the column sale title"
        },
        {
          "type": "richtext",
          "label": "Sale Description",
          "id": "salesDesc",
          "default": "<p>Here's the column sale description</p>"
        }
      ]
    }
  ]
}
{% endschema %}

Agradezco mucho la ayuda 🙂

1 RESPUESTA 1

Teo
Shopify Staff
2131 485 300

Hola, @Viiictoria:

 

Gracias por escribirnos. Entiendo que estás desarrollando un componente personalizado con una imagen. Sin embargo, esta no se visualiza correctamente, ¿cierto? Será un placer ofrecerte los siguientes pasos.

 

Antes de nada, ¿podrías confirmarme si estás desarrollando esta sección directamente desde el código del tema de tu tienda o mediante una sección del propio editor de temas? Te comento esto porque es importante tener en cuenta que cualquier pregunta relacionada con el lenguaje de código avanzado Liquid, Scripts o la API de Shopify queda fuera del alcance de nuestro conocimiento en el equipo de soporte en redes y la Comunidad. Dicho esto, me alegra informarte de que existe un foro en nuestra Comunidad que se llama  Shopify Partners and Developers  que está controlado por expertos en el tema.

 

Si te surge cualquier pregunta técnica con respecto a personalizaciones de código; te recomendaría buscar hilos en dicho foro para ver si alguien ha experimentado una situación similar y se ha resuelto. En este, encontrarás temas especializados como el  subforo de Online Store & Theme Development . Si no encuentras lo que estás buscando, puedes subir tu pregunta de nuevo. Así, uno de los desarrolladores o participantes podrán darte más orientación. El idioma de interacción en estos foros es el inglés. No obstante, puedes optar por utilizar el  traductor de Google  para mostrar el contenido en español si lo necesitas.

 

Dicho esto, si te has registrado en nuestro  programa de Shopify Partner , puedes contactar con nuestros  especialistas de soporte de Partners . Desde allí, podrán revisar con más detenimiento el posible origen del problema con este código. Si no te has registrado como Partner, también tienes la opción de contratar a uno a través de  este enlace  para hacer una consulta con ellos sobre por qué la imagen devuelve un error. Este es un portal de expertos, especialistas y desarrolladores que pueden darte un presupuesto para cualquier tipo de consulta, implementación o desarrollo que quieras hacer con una tienda de Shopify.

 

Mientras revisas estas alternativas que te comento, ¿cómo está siendo tu experiencia con Shopify hasta el momento? ¿Qué tipo de personalización específica deseas crear con este código que nos envías?

Teo | Social Care @ Shopify 
 - ¿Te resultó útil mi respuesta? Dale Me gusta para hacérmelo saber 
 - ¿Resolvimos tu pregunta? Dale a Aceptar como solución
 - Para saber más visita el Centro de ayuda de Shopify o nuestro Blog de Shopify