Produkt Konfigurator Tooltip an Eigenschaften hinzufügen

Shopware 6 (German) Programmierung
1

Hallo zusammen,

ich setze gerade das erste Mal einen Shop mit Shopware 6, also seht mir meine Unwissenheit nach. Dazu sei gesagt, dass ich kein Entwickler von Beruf bin :sweat_smile:.

Folgendes Ziel: Auf der Produktseite kann der Kunde zwischen 6 verschiedene Eigenschaften des Produkts konfigurieren. Hinter dem Namen der Eigenschaft soll nun ein kleiner runder Infobutton platziert werden, welcher beim mouseover einen Tooltip zu der jeweiligen Eigenschaft erscheinen lassen soll.

Was habe ich bisher getan?

  1. Zusatzfeld für die Eigenschaften angelegt (customFields.custom_tooltip_Zusatzfeld)
  2. In der Eigenschaft „Farbe“ das Zusatzfeld ausgefüllt mit einem Tooltip
  3. In das Template /component/buy-widget/configurator.html.twig navigiert und dort einen Block so erweitert:
 {% block buy_widget_configurator_group_title %}
   <div class="product-detail-configurator-group-title">
    {% block buy_widget_configurator_group_title_text %}
    {{ group.translated.name }}
    {% endblock %} 
   **{{ customFields.custom_tooltip_Zusatzfeld }}**
     </div>
{% endblock %}

Jetzt ist mir schon klar geworden, dass {{ customFields.custom_tooltip_Zusatzfeld }} nichts ausgibt, da der Pfad zu den Eigenschaften fehlt. Wie lautet dieser? Findet man dazu irgendwo eine Auflistung dieser Pfade? Mit dump() kann ich gar nix anfangen, das hat mir irgendwie nicht geholfen.

Zweite Frage: Bin ich mit der Vorgehensweise auf dem richtigen Dampfer? Wird nun für jede Eigenschaft das jeweilige in der Eigenschaft beschriftete Textfeld ausgegeben? Natürlich würde ich dann den Text noch mittels CSS im Tooltip verpacken.

Vielen Dank für eure Unterstützung im Voraus.

VG
reeny

2

Ich habe es inzwischen etwas anders lösen können:

/component/buy-widget/configurator.html.twig

{% block buy_widget_configurator_group_title %}
                                        <div class="product-detail-configurator-group-title">
                                            {% block buy_widget_configurator_group_title_text %}
                                                {{ group.translated.name }}
                                            {% endblock %} 
                                            {% block tooltip_ausgeben %}
                                     <div class="tooltip-custom"><span class="information-icon">i</span>
                                             <span class="tooltiptext">{{ group.translated.description }}</span>
                                       </div>
                                            {% endblock %}

Custom CSS:

.information-icon {
   display:block;
   padding-top:0px;
   padding-bottom:0px;
   padding-left:6px;
   padding-right:6px;
   background:#186496;
   border-radius:100px;
   color:#fff;
}

/* Tooltip container */
.tooltip-custom {
  position: relative;
  display: inline-block;
  border-bottom: 0px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip-custom .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 20px;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip-custom:hover .tooltiptext {
  visibility: visible;
}

Ich benutze also das Eigenschaften Beschreibungsfeld. Mich würde trotzdem noch interessieren, wie ich an mein Zusatzfeld gekommen wäre?

Vielleicht hilft das dem ein oder anderen Anfänger, danke euch =)

VG
reeny

3

Ich hoffe ich spamme euch hier nicht zu, aber noch ein Nachtrag von mir:

Auf mobilen Geräten ist das mit den Tooltips nicht so schön, insbesondere wenn man etwas mehr Text schreiben möchte. Deshalb hab ich mich nun noch an einer anderen Variante versucht über die modal box und bin damit sehr zufrieden:

/component/buy-widget/configurator.html.twig

{% block Property_Tooltip %}
                                            {% if group.translated.description == null %}
                                            {% else %}
                                            <a title="Infobox" href="/widgets/cms/{{ group.translated.description }}" data-url="/widgets/cms/{{ group.translated.description }}" data-bs-toggle="modal" data-toggle="modal" class="productpage-property-infobox">?</a>
                                            {% endif %}
{% endblock %}

Dann lege ich für die jeweiligen Eigenschaften ein Template an und schreibe dort den Beschreibungstext rein. In das Beschreibungsfeld der jeweiligen Eigenschaft kommt dann dementsprechend die ID des Layouts z.B. 33847885ab824896a1b1f2d3fa52665b, so wird für jede Eigenschaft das richtige Template ausgegeben.

Keine Ahnung, ob das ne elegante Variante ist, funktioniert aber für mich sehr gut =).

VG
reeny