web-dev-qa-db-fra.com

WooCommerce: ajouter un champ de saisie à chaque article du panier

J'ai essayé d'ajouter un seul champ de saisie de texte à chaque article du panier et de soumettre cette entrée utilisateur aux métadonnées du produit. Cela fait 2 jours et je n'ai pas encore réussi.

Mon objectif est de:

  1. Prenez l'avis de l'utilisateur pour chaque article ajouté au panier.
  2. Affichez cette entrée dans les méta-informations de la commande.
  3. Affichez cette entrée dans l'e-mail de confirmation envoyé au client.

Jusqu'à présent, j'ai copié le fichier de modèle dans mon thème et ajouté un champ de saisie à l'intérieur d'une cellule. J'ai des problèmes avec les crochets, j'ai appris les crochets dont j'aurai besoin de WooCommerce Product Gift Wrap plugin comme indiqué dans ce problème de woocommerce .

Code que j'ai ajouté au modèle cart.php copié dans mon répertoire de thèmes:

$input_url_data = '<div class="input-url"><input type="text" name="cart-url" value="" title="" class="input-text cart-url text" /></div>';

echo apply_filters( 'woocommerce_add_cart_item_data', $input_url_data, $cart_item_key );

Code que j'ai ajouté aux fonctions de mon thème.php:

add_filter( 'woocommerce_add_cart_item_data','add_cart_item_data', 10, 2 );
add_filter( 'woocommerce_get_cart_item_from_session','get_cart_item_from_session', 10, 2 );
add_filter( 'woocommerce_get_item_data','get_item_data', 10, 2 );
add_filter( 'woocommerce_add_cart_item','add_cart_item', 10, 1 );
add_action( 'woocommerce_add_order_item_meta','add_order_item_meta', 10, 2 );

function add_cart_item_data( $cart_item_meta, $product_id ) {
    $input_url_key = "";
    $input_url_data['inputurl'] = $input_url_key;
    return $input_url_data;
}

function get_cart_item_from_session( $cart_item, $values ) {

if ( ! empty( $values['inputurl'] ) ) {
    $cart_item['inputurl'] = true;
}
return $cart_item;
}

function get_item_data( $item_data, $cart_item ) {

if ( ! empty( $cart_item['inputurl'] ) )
    $item_data[] = array(
    );
return $item_data;
}

function add_cart_item( $cart_item ) {
if ( ! empty( $cart_item['inputurl'] ) ) {

}
return $cart_item;
}

function add_order_item_meta( $item_id, $cart_item ) {
if ( ! empty( $cart_item['inputurl'] ) )
woocommerce_add_order_item_meta( $item_id, __( 'URL by buyer', 'custom_input_url' ), __( 'Yes', 'custom_input_url' ) );
}

La documentation sur le crochet woocommerce_add_cart_item_data n'est pas très utile et je suis coincé à cela. Comment dois-je procéder?

wordpresswoocommerce
21
Nix

Il existe un wordpress appelé WC Fields Factory dans le but exact.

Vous pouvez également y parvenir en utilisant les crochets woocommerce suivants woocommerce_before_add_to_cart_button, woocommerce_add_to_cart, woocommerce_cart_item_name,et 'woocommerce_add_order_item_meta'

comme pour ajouter un champ de texte à la page du produit

function add_name_on_tshirt_field() {
  echo '<table class="variations" cellspacing="0">
      <tbody>
          <tr>
          <td class="label"><label for="color">Name On T-Shirt</label></td>
          <td class="value">
              <input type="text" name="name-on-tshirt" value="" />
          </td>
      </tr>                             
      </tbody>
  </table>';
}
add_action( 'woocommerce_before_add_to_cart_button', 'add_name_on_tshirt_field' );

Pour afficher un champ personnalisé sur la table des articles du panier, utilisez les éléments ci-dessous

function render_meta_on_cart_item( $title = null, $cart_item = null, $cart_item_key = null ) {
    if( $cart_item_key && is_cart() ) {
        echo $title. '<dl class="">
                 <dt class="">Name On T-Shirt : </dt>
                 <dd class=""><p>'. WC()->session->get( $cart_item_key.'_name_on_tshirt') .'</p></dd>           
              </dl>';
    }else {
        echo $title;
    }
}
add_filter( 'woocommerce_cart_item_name', 'render_meta_on_cart_item', 1, 3 );

pour faire vos métadonnées personnalisées sur les détails de votre commande, faites quelque chose comme ça

function tshirt_order_meta_handler( $item_id, $values, $cart_item_key ) {
    wc_add_order_item_meta( $item_id, "name_on_tshirt", WC()->session->get( $cart_item_key.'_name_on_tshirt') );    
}
add_action( 'woocommerce_add_order_item_meta', 'tshirt_order_meta_handler', 1, 3 );

pour une implémentation détaillée, j'ai un article sur la façon de le faire sans utiliser de plugins. http://sarkware.com/how-to-pass-custom-data-to-cart-line-item-in-woocommerce-without-using-plugins/

20
Sark

C'est facile. Essayez de rechercher et de lire le code de Woocommerce.

Cette quantité de code m'a amené à indiquer où je peux ajouter Url @ Cart. Et je peux le voir dans la revue des commandes en tant que client et administrateur.

Je ne peux pas tester les e-mails parce que je suis paresseux. Je suis désolé.

Quelque chose comme ça va dans templates\cart\cart.php (il y a besoin de plus de code car c'est une colonne séparée)

<td class="product-url">
    <?php
        $html = sprintf( '<div class="url"><input type="text" name="cart[%s][url]" value="%s" size="4" title="Url" class="input-text url text" /></div>', $cart_item_key, esc_attr( $values['url'] ) );
        echo $html;
    ?>
</td>

Functions.php

// get from session your URL variable and add it to item
add_filter('woocommerce_get_cart_item_from_session', 'cart_item_from_session', 99, 3);
function cart_item_from_session( $data, $values, $key ) {
    $data['url'] = isset( $values['url'] ) ? $values['url'] : '';
    return $data;
}

// this one does the same as woocommerce_update_cart_action() in plugins\woocommerce\woocommerce-functions.php
// but with your URL variable
// this might not be the best way but it works
add_action( 'init', 'update_cart_action', 9);
function update_cart_action() {
    global $woocommerce;
    if ( ( ! empty( $_POST['update_cart'] ) || ! empty( $_POST['proceed'] ) ) && $woocommerce->verify_nonce('cart')) {
        $cart_totals = isset( $_POST['cart'] ) ? $_POST['cart'] : '';
        if ( sizeof( $woocommerce->cart->get_cart() ) > 0 ) {
            foreach ( $woocommerce->cart->get_cart() as $cart_item_key => $values ) {
                if ( isset( $cart_totals[ $cart_item_key ]['url'] ) ) {
                    $woocommerce->cart->cart_contents[ $cart_item_key ]['url'] = $cart_totals[ $cart_item_key ]['url'];
                }
            }
        }
    }
}

// this is in Order summary. It show Url variable under product name. Same place where Variations are shown.
add_filter( 'woocommerce_get_item_data', 'item_data', 10, 2 );
function item_data( $data, $cart_item ) {
    if ( isset( $cart_item['url'] ) ) {
        $data['url'] = array('name' => 'Url', 'value' => $cart_item['url']);
    }
    return $data;
}

// this adds Url as meta in Order for item
add_action ('woocommerce_add_order_item_meta', 'add_item_meta', 10, 2);
function add_item_meta( $item_id, $values ) {
    woocommerce_add_order_item_meta( $item_id, 'Url', $values['url'] );
}

400 $ est un bon prix.

7
ViszinisA

Vous pouvez le faire assez facilement avec le plugin Woocommerce Product Add-ons

Depuis le site Web WooThemes:

Permettez à vos clients de personnaliser vos produits en ajoutant de nouvelles options telles que des zones de saisie, des listes déroulantes ou des cases à cocher. Avec l'extension Product Add-ons, les messages cadeaux, les dons, la gravure au laser et tout autre produit pouvant nécessiter une intervention de la part des utilisateurs sont désormais une option pour vos clients!

Les modules complémentaires de produit prennent en charge les champs obligatoires, les zones de texte, les cases à cocher, les radios, les zones de sélection, les entrées de prix personnalisées et les zones de téléchargement de fichiers.

Je l'ai déjà utilisé pour ajouter un champ de don supplémentaire à un achat de produit et l'afficher sur la page de remerciement/l'e-mail de réception.

C'est environ 50 $ US et vous serez opérationnel en un rien de temps pour ajouter la saisie de texte et afficher le champ sur la page/e-mail de remerciement comme vous le souhaitez. 50 $ valent vraiment le temps que vous économiseriez pour le séchage pour développer cette fonctionnalité vous-même.

Voici le flux du point de vue des utilisateurs finaux:

L'utilisateur final entre dans les données de terrain et ajoute le produit au panier End User enters in field data and adds product to cart

Lorsque l'utilisateur visualise le panier, les données saisies dans le champ personnalisé s'affichent avec le produit When User views cart the data they entered into the custom field displays along with the product

Après l'achat, l'utilisateur final accède à la page de remerciement et reçoit un e-mail de réception avec les données de champ incluses avec l'article du produit. After purchase, end user lands on thank you page and receives receipt email with field data included with the product item.

Sur le backend:

Créez un champ personnalisé pour chaque produit. L'option se trouve dans l'onglet de menu des modules complémentaires.

  1. Créer un nouveau groupe d'extensions
  2. Entrez un nom de groupe (pour une organisation plus facile)
  3. Ajoutez une nouvelle option et entrez l'étiquette (c'est ce que l'utilisateur final voit et est lié au produit)
  4. Mettre à jour/publier le produit.

Create custom field for each product

Pour les commandes terminées, voici ce que vous verrez dans l'administrateur Détails de la commande:

product order details page also displays the field

J'espère que cela vous aide et vous fait gagner une tonne de temps dans le développement!

0
Ian