Image picker no agrega la imágen en bloque custom

Viiictoria · ‎03-05-2024

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:

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 🙂

Teo · ‎03-12-2024

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

Image picker no agrega la imágen en bloque custom

Image picker no agrega la imágen en bloque custom

Artículos del Blog de la Comunidad