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;
}

Toon de knop Toevoegen aan winkelwagen aan de rechterkant van het hoeveelheidveld

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

Foutmelding drukt op de knop Toevoegen aan winkelwagentje

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:
Voeg placeholder-element toe voor foutmelding

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

Placeholder-element toont foutmelding

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. 🙂

badges

Let’s connect

We hebben altijd zin in nieuwe en uitdagende projecten. We gaan graag met je in gesprek!