Sticky Add to Cart - Icon ausgeben

[TL-Andi]

Hallo zusammen,

in meinen Theme gibt es ein Add to Cart Sticky, dort wir dann ein Button mit dem Text "In den Warenkorb" ausgegeben.

Nun möchte ich aber, dass dort nur ein Warenkorbsymbol als Button ausgegeben wird.

Dachte ich bekomme das hin, aber irgend wie nicht.

Hier mal der Code mit dem der Button ausgegeben wird:

<div class="product-form__buttons sticky__form_button d-flex">
          <div class="product__add__cart__button mr-20">
            <button
              type="submit"
              name="add"
              class="button button--primary"
              {% if current_variant.available == false and product.has_only_default_variant %}
                disabled
              {% endif %}
            >
              {%- if current_variant.available == false and product.has_only_default_variant -%}
                {{ 'products.product.sold_out' | t }}
              {%- else -%}
               {{ 'products.product.add_to_cart' | t }}               
              {%- endif -%}
            </button>
          </div>
          <div class="d-sm-none">
            {{ form | payment_button }}
          </div>
        </div>

Ich weiß das man im meinen Theme mit  {% render 'icon-cart' %} ein Icopn ausgeben kann, aber wenn ich ihn anstatt von {{ 'products.product.add_to_cart' | t }}  einsetze dann wird nichts angezeigt.

Könnt Ihr mir sagen wie ich das am besten einfüge?

LG Andi

[Ben310]

Schwer zu sagen. Vielleicht ist das icon-cart Fragment nicht korrekt eingebunden.

Probiere mal:

<div class="product-form__buttons sticky__form_button d-flex">
  <div class="product__add__cart__button mr-20">
    <button
      type="submit"
      name="add"
      class="button button--primary"
      {% if current_variant.available == false and product.has_only_default_variant %}
        disabled
      {% endif %}
    >
      {%- if current_variant.available == false and product.has_only_default_variant -%}
        {{ 'products.product.sold_out' | t }}
      {%- else -%}
        {% render 'icon-cart' %} <!-- Icon wird hier korrekt eingefügt -->
      {%- endif -%}
    </button>
  </div>
  <div class="d-sm-none">
    {{ form | payment_button }}
  </div>
</div>

Wenn {% render 'icon-cart' %} nicht das gewünschte Icon rendert, könnte das auch an den Einstellungen oder der Struktur deines Themes liegen. Oder du verwendest ein direkt eingebettetes SVG-Icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
  <path d="M7 4v2H3v2h2l2.6 8H18v-2H9.42l-.38-1h9.19l1.5-4H7z"></path>
</svg>

Ersetze {% render 'icon-cart' %} mit diesem SVG-Code.

[Nordalux]

Du hast richtig erkannt, dass {{ 'products.product.add_to_cart' | t }} ein Text ausgibt. Sofern die Datei icon-cart.liquid unter Snippets nicht vorhanden ist, wird auch entsprechend nichts angezeigt.

Welches Theme nutzt du? Sofern ich das Theme im Kundenkreis habe, kann ich bereits den ersten Blick reinwerfen. Alternativ kontaktiere mich und ich setze es Dir entsprechend um. 🙂

[TL-Andi]

Sorry da habe ich mich wohl falsch ausgedrückt.

Die Icon-cart.liquid gibt es und wenn ich den Code neben der Testausgabe einfüge

{%- else -%}
               {{ 'products.product.add_to_cart' | t }} {% render 'icon-cart' %}              
{%- endif -%}

Dann wird mir das Icon auch angezeigt neben dem Text angezeigt (auch sehr groß)

Wenn ich aber nur den Icon-Code einfüge, dann wir mir nur ein leere Button angezeigt.

   {%- else -%}
              {% render 'icon-cart' %}              
    {%- endif -%}

 

Weiß aber nicht wo hier das Problem ist.

LG Andi