Name des Metafields in Shopify 2.0 anzeigen

[SMEG]

Ich habe Produkt-Attribute als Metafields definiert.

Mit folgendem Code iteriere ich durch die Metafields mit den Namespace "attribute" und lasse mir den "key" und die "Werte" anzeigen:

{% for field in product.metafields.attribute %}
     <div class="product-page__spec-row">
               <span class="product-page__spec-title subtitle"> {{ field | first }} </span>
               <span class="product-page__spec-title body"> {{ field | last }}</span>
     </div>
{% endfor %}

Da funktioniert soweit auch gut, außer dass ich nicht den Key, sondern den Namen den ich beim Erstellen des Metafields angegeben habe anzeigen möchte.

Ein Metafield hat z.B. den Namen "Länge der Kette" und den key "laenge".

Also im Moment ist die Ausgabe:

laenge : 20cm

Und ich möchte Ausgeben:

Länge der Kette : 20 cm

Gibt es eine Möglichkeit, dass ich den Code so ändern kann, dass mir in dem Loop der Name des Metafields ausgegeben wird?

Danke

[Gabe]

Hey @SMEG 

Danke für den Code Snippet und unser Experte Mario kann dir ggf. damit helfen -> @r8r 

[r8r]

@SMEG – ich glaube nicht, dass Du die Metafields-Bezeichnung rausbekommst … das hier ist die Objektstruktur, die vom JSON ausgespuckt wird – die Bezeichnung findet sich darin nicht:

Ich hab mir dazu mal ein Helferlein gebaut, das nicht sonderlich schön, aber praktisch ist – in dem Fall die Datei /snippets/metafields-labels.liquid:

{% case string %}
  {% when "drying" %}
    Trocknen
  {% when "ironing" %}
    Bügeln
  {% when "washing" %}
    Waschen
  {% else %}
    [Unbekannt: {{ string }}]
{% endcase %}

… und aufrufen tust Du's dann so …

{% render 'metafields-labels', string: dein_metafields_key %}

wobei dein_metafields_key natürlich nur ein platzhalter für den jeweiligen Key ist und du den da rein übergeben kannst.

LG, Mario

[SMEG]

Vielen Dank Mario,

das ist ein interessanter Ansatz. Ich habe jetzt doch alles in einzelne Anweisungen gepackt und die for-schleife verworfen. Also schreibe ich jetzt für jedes Metafield

{% unless product.metafields.attribute.chain_length == blank %}
      <div class="product-details__spec-row">
               <span class="product-details__spec-title meta-key">Chain Length </span>
               <span class="product-details__spec-title meta-value"> {{ product.metafields.attribute.chain_length }}</span>
       </div>
 {% endunless %}

Eigentlich hatte ich mir vorgestellt nicht jedesmal in den Code gehen zu müssen, wenn ein Metafield neu hinzukommt. Aber weder bei deiner noch bei meiner Lösung lässt sich das vermeiden.

Ich habe auch versucht den Key im Metafield schon so zu erstellen wie ich ihn später verwenden möchte und ihn mit "replace" und mit "capitalize" umzuschreiben, aber auch da bin ich nicht weiter gekommen. Ich bekomme zwar den Unterstrich durch ein Leerzeichen ersetzt, aber dann nur das erste Wort groß geschrieben.

Zudem birgt diese Lösung die Gefahr, dass man die Bezeichnung der Attribute, wenn sie aus dem Metafield-Key stammen nicht mehr nachträglich ändern kann. Mann müsste dann das Metafield neu erstellen und die Attribute kopieren. Das ist ja dann noch mehr Arbeit als im Code zu wurschteln.

In der Summe ist es eigentlich Schade, dass es nicht geht den Namen oder die Beschreibung des Metafields anzuzeigen. Produkt-Attribute sind eine ganz klare Anwendung hierfür und z.B. Woocommerce hat sogar eine spezielle Attributs-Funktion bei Produkten (zusätzlich zu Kategorien und Tags).

Gruß
Mirko

[r8r]

@SMEG  … kann Dir da nur voll beipflichten, Mirko

Das wär eventuell was für die Shopify Feature Requests …

[Gabe]

@r8r @SMEG 

Wenn ihr mir einen verständlichen Text hier zusammenfasst nach der folgenden Vorlage, dann kann ich das an unsere Product Teams weiterleiten die das dann für die Entwickler Teams übersetzen werden.

Wenn nach dem folgenden Schema und Beispiel wäre super:

Clear problem description, use-cases, and what is needed

• Beispiel: One major column of information is missing from the finances report when you click on Total Sales and export the full report. The field "Tax Rate" with a breakdown of whether the item has 20%, 0%, 10%, etc. in taxes would be great if it was there.

Why is this important?

• It's a hassle to go back to a 3rd party app now, even though this data breakdown is actually natively included in Shopify.

What workaround(s) are there?

• 3rd party app

[SMEG]

@Gabe hier, auch direkt in englisch
Mario (@r8r ) kann es ja ergänzen, wenn er meint das fehlt was.


Clear problem description, use-cases, and what is needed

• Make Name of Metafields available in liquid. 
  When setting up Metafields for product attributes (think e.g. a watch. It has wristband color, wristband size, wristband material, clock face material, clock face color, frame material, frame color, water resitance, calender, size and many more) I have them all under one namespace "attributes". I want to iterate through this namespace with a for loop like shown below (last paragraph) and be able to display the value of the Metafield and the name of the Metafield. The Name serves as the attribute label, which is displayed in an attribute list like so:
  
  
  Right now I can only display Metafield key and Metafield value in the for loop. The key doesn't provide the necessary flexibility as the Metafield name does. Once the Metafield has been defined the key ist set and can not be changed. Also the String filter aren't flexibel enough to format the key to the display I want. If I set the key e.g. to nose_gap, I can replace the underscore with whitespace but only capitalize the first letter with "capitalize" (I could do it with CSS, but that would be a workaround again and still wouldn't make the key flexibel as explained in the next paragraph).

Why is this important?

• Product Attributes are an important part of any product. They can easily be set up through the Metafields, but they need to be more flexibel. If an attribute label has to be changed the Merchant has either to set up a new Metafield (if he somehow can get the key to display in a properly format, which I couldn't manage to do in liquid alone) and copy all values to the new Metafield or the label has to be changed in the code, which is not the best solution, since changing the Metafield name could easily change the attribute label in code (if it was available in code).

What workaround(s) are there?

• right now the code becomes messy because the above mentioned for loop can not really be used and the combination of attribute label and Metafield/attribute value has to be put into code for each attribute/Metafield. Just imagine having a bloated code with attributes for the watch mentioned in the first section.
  
  If we could access the Metafield name and use it as a label we could write more efficient code to display a specification/attributes list.
  
  What I would like to code:
  
  

{% for field in product.metafields.attribute %}
     <div class="product-page__spec-row">
               <span class="product-page__spec-title label"> *** Metafield Name *** </span>
               <span class="product-page__spec-title value"> {{ product.metafields.attribute.chain_length }} </span>
     </div>
{% endfor %}
​

What I need to Code now for each attribute/product specification:

{% unless product.metafields.attribute.chain_length == blank %}
      <div class="product-details__spec-row">
               <span class="product-details__spec-title meta-key">Chain Length </span>
               <span class="product-details__spec-title meta-value"> {{ product.metafields.attribute.chain_length }}</span>
       </div>
 {% endunless %}​

I have to use this code for every attribute I want to display. So imagine writing this 10 times for the watch example given in the first paragraph.

Every other major shopping system (woocommerce, shopware, presta shop, magento) has a working system for product attributes.

[Gabe]

Klasse Danke!

[Gabe]

Might be interesting also for @Neethan 

[Neethan]

Hi @Gabe! I'll take this feature request back to the team for discussion.

[freelancegerman]

Hallo Gabe,

wir haben gerade festgestellt, dass die Namen der Metafields nicht ermittelt werden können. Schade!

Ich frage mich, wie wir das Ganze bei mehrsprachigen Shops so integrieren können, dass die Mehrsprachigkeits-App das erkennt, dass der Begriff ebenfalls übersetzt werden muss.

Aus anderen Systemen kenne ich es so, dass hier der Name bzw. die festgelegte Bezeichnung des Attributs/Metafields gelesen und global übersetzt werden kann.

Es wäre toll zu erfahren, wie wir das am besten und nachhaltig integrieren können, sodass beispielsweise der von uns festgelegte Name von Drittanbieter-Apps als zu übersetzende Bezeichnung erkannt wird.

Vielen Dank für die Rückmeldung.

VG

[Gabe]

Wenn ich mich recht erinnere, ist der Name nicht übersetzbar, aber das kann sich mit der translate and adapt App geändert haben..

Habe ich an die Entwickler weitergeleitet. Mal schauen ob sich da was tut! 

VG,

[freelancegerman]

Vielen Dank.

Zu dem Thema bzgl. Möglichkeit Name des Metafields zu zeigen gibt es keine Neuigkeiten bzw. Pläne korrekt?

 

[Gabe]

Ggf. aber kann ich leider nicht sagen. Sende das an unseren Support und die können dir eine definitive Antwort geben!

VG,

[supernichao]

@r8r 

currently i am using

uuml for ü

auml for ä

ouml for ü

szlig for ß

for metafields key

replacing them like so

<li>{{ field | first | replace: 'auml','ä'| replace:'ouml','ö'|replace:'uuml','ü'|replace:'szlig','ß' }}: {{ field | last }}</li>

My question will be, what if there is new items with new properties?

with your code

<span class="product-details__spec-title meta-key">Chain Length </span> <span class="product-details__spec-title meta-value"> {{ product.metafields.attribute.chain_length }}</span>

you have to update properties manually, oder?

[r8r]

@supernichao not sure if i got this corretly, but no, I don't think you would be required to make any manual modifications.

Mario

[NickUnique]

Ich habe eine elegantere Lösung gefunden. Und zwar mit Lokalisation. In de.json einfach mehrere Felder hinzufügen und dann wie folgt verwenden:

<div>
  {% for field in product.metafields.custom %}
    {% assign attribute_code = field | first %}
    {% assign attribute_value = field | last %}
    {% assign attribute_localization_path = "products.product.metafields." | append: attribute_code %}

    <tr height="px | %">
      <td>
        <span class="custom-attribute-name">{{ attribute_localization_path | t }}</span>
      </td>
      <td>
        <span class="custom-attribute-value">{{ attribute_value }}</span>
      </td>
    </tr>
  {% endfor %}
</div>