Konvertieren Sie mehrere konfigurierbare Produkte. Wählen Sie Kästchen in das Kontrollkästchen aus

Question

Ich habe ein konfigurierbares Produkt, das durch 2 Attribute konfigurierbar ist:

product_type
product_size

Standardmäßig zeigt Magento dies als 2 ausgewählte Felder an.

Das ist in Ordnung.

Ich möchte dies jedoch ändern, um Optionspunkte für jede Option Typ/Größe anzuzeigen.

Zum Beispiel gibt das X eine ausgewählte Option an, die die Striche angeben

                     small  medium  large  x-large
short-sleeved          -       -      -      -     
long-sleeved           -       x      -      -

Der Code ist in der Vorlage:catalog/product/view/type/options/configurable.phtml

Meine Frage ist, wie Sie die beiden ausgewählten Felder konvertieren und stattdessen mehr Tabellenstruktur machen?

Ich suche keinen genauen Code, sondern eher eine Vorstellung davon

Answer 1

Die allgemeine Empfehlung, die konfigurierbaren Optionen (insbesondere diejenigen, die die Pivot-Attribute sind, die im Allgemeinen vom Typ Global / Dropdown zu sein müssen), folgen dieser Art von Workflow:

• Verwenden Sie JavaScript, um die ursprünglichen Formularelemente über CSS zu "ausblenden" style: display: none
• Erstellen Sie neue Formularelemente, die die UX, die Ihr Kunden verwenden soll, enger modellieren
• Überwachen Sie erneut mit JavaScript die Aktualisierung der neuen Formularelemente und aktualisieren Sie die verborgenen (realen) konfigurierbaren Elemente entsprechend

Was HTML -Markup betrifft - es ist dasselbe wie in jeder anderen Tabelle:

<table>
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">small</th>
            <th scope="col">medium</th>
            <th scope="col">large</th>
            <th scope="col">xlarge</th>
        </tr>
    </thead>
    <tfoot></tfoot>
    <tbody>
        <tr class="row">
            <th scope="row">Red</th>
            <td class="cell"><label for="small">small</label><input type="radio" value="red-small" name="red"></td>
            <td class="cell"><label for="medium">medium</label><input type="radio" value="red-medium" name="red"></td>
            <td class="cell"><label for="large">large</label><input type="radio" value="red-large" name="red"></td>
            <td class="cell"><label for="xlarge">xlarge</label><input type="radio" value="red-xlarge" name="red"></td>
        </tr>
        <tr class="row">
            <th scope="row">Blue</th>
            <td class="cell"><label for="small">small</label><input type="radio" value="blue-small" name="blue"></td>
            <td class="cell"><label for="medium">medium</label><input type="radio" value="blue-medium" name="blue"></td>
            <td class="cell"><label for="large">large</label><input type="radio" value="blue-large" name="blue"></td>
            <td class="cell"><label for="xlarge">xlarge</label><input type="radio" value="blue-xlarge" name="blue"></td>
        </tr>
        <tr class="row">
            <th scope="row">Green</th>
            <td class="cell"><label for="small">small</label><input type="radio" value="green-small" name="green"></td>
            <td class="cell"><label for="medium">medium</label><input type="radio" value="green-medium" name="green"></td>
            <td class="cell"><label for="large">large</label><input type="radio" value="green-large" name="green"></td>
            <td class="cell"><label for="xlarge">xlarge</label><input type="radio" value="green-xlarge" name="green"></td>
        </tr>
    </tbody>
</table>