Vi kommer att gå igenom två filter till att börja med:
- woocommerce_add_cart_item_data
- woocommerce_add_to_cart_validation
Med hjälp utav dessa kan vi validera ett anpassat fält, för att sedan lägga till det som metadata i får varukorg och ordern.
Så här lägger du till anpassad kundvagnsinformation i WooCommerce
I denna rubrik kommer vi koncentrera oss på att lägga till ett fält för meta-data utifrån ett vanligt textfält på vår produktsida, det skall följa med till kundens E-postbekräftelse.
Vi kommer att gå igenom:
- Lägga till ett anpassat fält till en produkt
- Förstå hooks, actions och filter
- Åtgärden woocommerce_before_add_to_cart_button
- Lägga till de anpassade fältet efter köpknappen
- Validera den anpassade meta-datan
- Lägga till fältet i varukorgen
- Spara meta-data i order
- Visa anpassade data på beställningsgranskningssidan
- Visa anpassade data på WooCommerce-beställningsskärmen
- Inkluderar anpassade data i order-e-postmeddelandet som skickas till administratören och kunden
Infoga fältet på produktsidan
[bild]
För att uppnå detta kommer vi att infoga ett textfält på produktsidan där kunden kommer kunna ange sitt namn.
function amp_add_product_fields() { ?>
<div class="row">
<label for="custom_name"><?php _e( 'Ditt namn', 'plugin-name' ); ?></label>
<input type="text" name='custom_name' id='custom_name' value=''>
</div>
<?php }
add_action( 'woocommerce_before_add_to_cart_button', 'amp_add_product_fields' );
Notera att denna kod läggs i ditt plugin alt. tema.
plugin-name: Se Wordpress dokumentation gällande detta
Lägg även märke till att använder en åtgärden (action) woocommerce_before_add_to_cart_button för att skjuta in vårt textfält. Och som du kan gissa från namnet, så utförs denna åtgärd precis innan "Köp nu" knappen är synlig på produktsidan.
Lägga till ett anpassat fält efter Köpknappen
Om vi skulle vilja justera vår position på köpknappen så att den hamnar nedanför köpknappen, så kan vi ersätta följande:
woocommerce_before_add_to_cart_button ==> woocommerce_after_add_to_cart_button
Notera att detta krokar för vår HTML innanför <form> elementet. Oerhört viktigt att vårt fält är innanför formuläret.
Annars följer ej informationen i textfältet när formuläret postas
Validera vårt anpassade fält
När en besökare nu klickar på Köpknappen så skickas produktformuläret till servern. Denna data innehåller normalt saker såsom product_id, quantity.
Men, eftersom vi har tillämpat vårt fält i formuläret så skickar vi även vårt fälts innehåll till servern.
All denna data passeras igenom några WooCommerce krokar, för att tillåta oss att kontrollera fältets innehåll. Och till sist infoga det till ordern.
Validera anpassat fälts data med woocommerce_add_to_cart_validation
Låt oss anta att vi kräver kunden att ange sitt namn i det anpassade fältet, annars skall man ej kunna lägga till produkten.
Då kan vi tillämpa vår validering, så vi kommer då kontrollera fältets innehåll när produkter ska läggas i varukorgen. Skulle fältet vara tomt, ska vi faila valideringen. Vi gör detta igenom woocommerce_add_to_cart_validation kroken.
I avsnittet länkat ovan där vi läste mer om Förstå Wordpress så kallade hooks, actions och filters.
woocommerce_add_to_cart_validation kroken är ett filter.
Den tar en parameter, som vi kan ändra hur vi vill, innan parametern studsar tillbaka.
I fallet med woocommerce_add_to_cart_validation, så kallas parametern $passed, utav typen Boolean och han antingen vara true eller false .
Om den skickas tillbaka som sann, då kan kunden lägga sin produkt i varukorgen och gå vidare.
Om den skickas tillbaka som falsk, så kommer den inte läggas till och då kan vi visa ett meddelande.
Här är vår valideringsfunktion:
function amp_validation( $passed, $product_id, $quantity, $variation_id=null ) {
if( empty( $_POST['custom_name'] ) ) {
$passed = false;
wc_add_notice( __( 'Ditt anpassade fält är tomt.', 'plugin-name' ), 'error' );
}
return $passed;
}
add_filter( 'woocommerce_add_to_cart_validation', 'amp_validation', 10, 4 );
Låt oss gå igenom funktionens parametrar nedan för att göra det tydligt:
woocommerce_add_to_cart_validation 's olika parametrar
$passed- Detta är utav typen Boolean, värde som används för att avgöra om produkten har godkänts eller inte$product_id- Detta är ID:et utav produkten$quantity- Antalet utav produkten som ska läggas i varukorgen$variation_id- Denna parameter kommer endast ha ett värde om produkten är utav typen Variabla Produkter
Använda $_POST objektet i validering
När Köpknappen avfyrats så skickas all data och samlas in utav $_POST objektet.
Detta innebär att vi kan leta efter $_POST objektet efter vårt anpassade fält. Så funktionen kollar custom_name om vore tom. Vore den tom så hade värdet utav $passed resulterat i false.
Visa ett felmeddelande när valideringen misslyckas
Om det anpassade fältet vore tomt så ska valideringen misslyckas, och då kan det vara bra att förklara för kunden/besökaren om varför de inte kunde lägga produkten i sin varukorg.
Detta kan vi göra enkelt igenom funktionen wc_add_notice.
Första parametern i denna funktion är felmeddelandet att visa kunden, och den andra parametern är vilken typ utav meddelande.
wc_add_notice( __( 'Ditt anpassade fält är tomt.', 'plugin-name' ), 'error' );
Returnera parametern $passed
Eftersom woocommerce_add_to_cart_validation återigen var ett filter, så behöver vi returnera parametern $passed.
Om valideringen gick igenom, så kommer värdet utav $passed inte ändras.
Men om den misslyckades igenom att kunden ej fyllde i sitt namn i vårt anpassade fält så behöver vi ändra värdet på $passed till falskt.
[bild]
Lägga till det anpassade fältets data i WooCommerce
Nu kommer vi till det primära - Hur man ska lägga till informationen som meta data i varukorgen.
Nät produkten har passerad valideringen så vill vi spara fältet som metadata, så att vi kan använda det vid checkout och även till ordern, när den blivit beställd.
Filtret woocommerce_add_cart_item_data
Vi kommer att använda oss utav det nämnda filtret ovan för att spara vår data. Läs igenom nedanstående funktion.
function amp_add_cart_item_data( $cart_item_data, $product_id, $variation_id ) {
if( isset( $_POST['custom_name'] ) ) {
$cart_item_data['custom_name'] = sanitize_text_field( $_POST['custom_name'] );
}
return $cart_item_data;
}
add_filter( 'woocommerce_add_cart_item_data', 'amp_add_cart_item_data', 10, 3 );
Denna gång så passerar filtret oss $cart_item_data, som är utav typen Array och innehåller data för varje produkt i varukorgen.
Notera att återigen använder vi $_POST objektet för att samla vår data från de anpassade fälten. Vi använder också santitize_text_fieldför att sanera användarens inmatning. Därefter skjuter vi in vår sanerade data till Arrayen $cart_item_data. Vi kommer ha användning utav det senare.
Om kunden köper samma produkt flera gånger
Om kunden skulle lägga till produkter i varukorgen två gånger men med olika värden i det anpassade fältet så kommer WooCommerce inse att de anpassade värdena är olika och skapa två separata produkter i vår varukorg. (A.k.a två line items)
I andra hand, om kunden skulle lägga till produkter två gånger med samma värde i fältet så vår kunden istället en produkt, två i kvantitet.
Visa det anpassade fältet i varukorgen
Med vårt anpassade fält sparat som meta i $cart_item_data objektet, så kan vi enkelt visa det med hjälp utav ett filter.
[bild]
Filtret woocommerce_get_item_data
För att vi skall kunna visa vår nya data i varukrogen så använder vi ovanstående filter, se funktionen nedan:
function amp_get_item_data( $item_data, $cart_item_data ) {
if( isset( $cart_item_data['custom_name'] ) ) {
$item_data[] = array(
'key' => __( 'Ditt namn', 'plugin-name' ),
'value' => wc_clean( $cart_item_data['custom_name'] )
);
}
return $item_data;
}
add_filter( 'woocommerce_get_item_data', 'amp_get_item_data', 10, 2 );
Första parametern $item_data är platsen vi lagrar information per produkt i varukorgen. Den andra parametern är $cart_item_data, där vi redan har lagrat vårt anpassade fält.
Så allt vi behöver göra är att överföra vårt fälts värde från Arrayen $cart_item_data till $item_data Arrayen. Vi formaterar det något annorlunda och tilldelar etiketten vi vill använda i kungkorgen till "nyckel"-elementet. Därefter tilldelas värdet på själva fältet elementet ”värde”.
$item_data[] = array(
'key' => __( 'Ditt namn', 'plugin-name' ), // etikett
'value' => wc_clean( $cart_item_data['custom_name'] ) // värde
)
Uppdatera befintligt anpassat fält i varukorgen
Det ovanstående funkar utmärkt när en kund lägger till en ny produkt i varukorgen. Men vad skulle ske när de vill uppdatera en produkt med ett anpassat fält, som redan är i varukrogen?
Läs mer: Uppdatera befintlig WooCommerce cart meta data
Lägga till meta datan till ordern
Anpassad meta-data är verkligen endast användbart för oss om vi kan extrahera det utifrån en order.
För att hjälpa oss här så kommer vi använda oss utav åtgärden woocommerce_checkout_create_order_line_item, vilket tillåter oss att uppdatera en produkt samtidigt som de sparas till ordern.
Notera att detta är en åtgärd, och inget filter, så vi returnerar inget värde.
function amp_checkout_create_order_line_item( $item, $cart_item_key, $values, $order ) {
if( isset( $values['custom_name'] ) ) {
$item->add_meta_data(
__( 'Ditt namn', 'plugin-name' ),
$values['custom_name'],
true
);
}
}
add_action( 'woocommerce_checkout_create_order_line_item', 'amp_checkout_create_order_line_item', 10, 4 );
Återigen så tillåter detta oss att applicera en etikett, den första parametern i funktionen add_meta_data. Parametern $values är produktdata från varukorgen. Vi kontrollerar om vårt anpassade fält ej är tomt, om det har data så passerar vi Arrayen $item för att sparas som order meta.
Visa fältet från bekräftelsesidan
Du kan se hur vårt fält visas på bekräftelsesidan till vår kund när de har checkat ut.
[bild]
Visa det anpassade fältet i e-post från WooCommerce
Tillslut så vill vi nog visa fältet i e-postmeddelanden mellan e-handlaren och kunden.
För att utföra detta så kommer vi filtrera namn bland produkter, och vid rätt linje i loopen. Tillämpa vårt anpassade fält.
function amp_order_item_name( $product_name, $item ) {
if( isset( $item['custom_name'] ) ) {
$product_name .= sprintf(
'<ul><li>%s: %s</li></ul>',
__( 'Ditt namn', 'plugin-name' ),
esc_html( $item['custom_name'] )
);
}
return $product_name;
}
add_filter( 'woocommerce_order_item_name', 'amp_order_item_name', 10, 2 );
Här har vi två parametrar, först HTML för produktens namn och den andra, data för respektive line_item (Produkter i varukorgen/ordern).
Existerar det anpassade fältet, visar vi det.