Het validatiefoutbericht 'Voeg toe aan winkelwagen' verplaatsen op de productpagina • Proudnerds

Een die vaak over het hoofd wordt gezien, maar een zeer belangrijk probleem kan gebeuren vanwege ontwerpwijzigingen in het gedeelte Toevoegen aan winkelwagen op de productdetailpagina (PDP) in Magento 2.

Deze sectie zal hoogstwaarschijnlijk van project tot project verschillen, maar ongeacht de omvang van het werk en de omvang van deze wijzigingen, mag foutvalidatie in het veld Hoeveelheid geen enkel probleem veroorzaken.

In dit artikel laat ik je zien wat er in zo’n geval moet gebeuren, wat heel gemakkelijk en duidelijk zou moeten zijn om in je aangepaste thema te implementeren. 🙂

Overweeg het volgende (en vereenvoudigde) scenario: de knop Toevoegen aan winkelwagen bevindt zich aan de rechterkant van het veld Hoeveelheid. U kunt dit bereiken met de volgende twee CSS-regels:

.box-tocart .fieldset {
display: flex;
align-items: center;
}
 
.box-tocart .actions {
margin-left: 16px;
}

In het geval dat er een fout optreedt (zoals hoeveelheid 0 als Hoeveelheid), zal het de knop wegduwen, wat er niet goed uitziet.

U kunt een dergelijke situatie heel gemakkelijk oplossen door twee kleine wijzigingen aan te brengen in: addtocart.phtml bestand in een aangepast thema:

1. voeg een HTML-element toe met een specifieke ID (het zal worden gebruikt als doelelement als het eenmaal is gedefinieerd in stap 2)

   <p id="qty-error-message"><!--?= $block--->escapeHtml('Error message will appear here') ?></p>

2. Aan input#qty element, voeg dan het volgende data-attribuut toe:

   <input id="qty" name="qty" type="number" ...="" data-errors-message-box="#qty-error-message">

   Merk op dat uw selector zoals gedefinieerd in data-errors-messsage-box moet in uw opmaak voorkomen (dit is gedaan in stap 1)

Als u de pagina nu opnieuw laadt, zou u het volgende moeten zien:

En als u de fout genereert (aantal = 0), blijft de knop op dezelfde plaats. 🙂

Dat is het! Tijdelijke aanduiding voor foutmeldingen kan worden geplaatst waar u maar wilt, u bent klaar om te gaan zolang het ergens op de pagina is gedefinieerd. 🙂