WooCommerce-termékek a képválasztó mezőben

A WooCommerce termékadatait összekötheted a Gravity Forms űrlapokkal, így az űrlap mezői a termékek nevével és kiemelt képével tölthetők fel. Ez az útmutató egyedi kódrészletekkel mutatja meg, hogyan kérd le a termékeket, és hogyan töltsd fel velük a Képválasztás mezőt.

A kódot a téma functions.php fájljába, egyedi funkciók bővítményébe vagy kódrészlet-kezelő bővítménybe teheted. A példákban a 123 az űrlap azonosítója, az 1 pedig a képválasztó mező azonosítója: ezeket cseréld a sajátjaidra.

„Egy választható” képválasztó mező feltöltése

A példa egy Egy választható (rádiógomb-szerű) képválasztó mezőt tölt fel a közzétett termékekkel. Minden választási lehetőség képe a termék kiemelt képe, a szövege és az értéke a termék neve. A kép nélküli termékeket kihagyja.

add_filter( 'gform_pre_render_123', 'populate_image_choices' );
add_filter( 'gform_pre_validation_123', 'populate_image_choices' );
add_filter( 'gform_admin_pre_render_123', 'populate_image_choices' );
add_filter( 'gform_pre_submission_filter_123', 'populate_image_choices' );

function populate_image_choices( $form ) {
  $field_id = 1; // A képválasztó mező azonosítója.

  $posts = get_posts(
    array(
      'post_type'      => 'product',
      'post_status'    => 'publish',
      'posts_per_page' => -1,
    )
  );

  $choices = array();

  foreach ( $posts as $post ) {
    $product = wc_get_product( $post->ID );
    if ( ! $product ) {
      continue;
    }

    $image_id  = (int) $product->get_image_id();
    $image_url = $image_id ? wp_get_attachment_url( $image_id ) : '';
    if ( ! $image_url ) {
      continue;
    }

    $choices[] = array(
      'text'          => $product->get_name(),
      'value'         => $product->get_name(),
      'image'         => $image_url,
      'file_url'      => $image_url,
      'attachment_id' => $image_id,
    );
  }

  foreach ( $form['fields'] as &$field ) {
    if ( (int) $field->id === $field_id ) {
      $field->choices = $choices;
      break;
    }
  }

  return $form;
}

Négy szűrőre is szükség van: az űrlap megjelenítése előtt, az ellenőrzés előtt, a szerkesztőben és a beküldés előtt is fel kell tölteni a választási lehetőségeket.

Név és ár a képválasztó mezőben

Ez a változat a termék nevét és formázott árát is a felirat mellé teszi, és csak az első hat terméket kéri le. Az érték itt a termék azonosítója.

add_filter( 'gform_pre_render_123', 'populate_image_choices_with_prices' );
add_filter( 'gform_pre_validation_123', 'populate_image_choices_with_prices' );
add_filter( 'gform_admin_pre_render_123', 'populate_image_choices_with_prices' );
add_filter( 'gform_pre_submission_filter_123', 'populate_image_choices_with_prices' );

function populate_image_choices_with_prices( $form ) {
  $field_id = 1; // A képválasztó mező azonosítója.

  $posts = get_posts(
    array(
      'post_type'      => 'product',
      'post_status'    => 'publish',
      'posts_per_page' => 6,
    )
  );

  $choices = array();

  foreach ( $posts as $post ) {
    $product = wc_get_product( $post->ID );
    if ( ! $product ) {
      continue;
    }

    $image_id  = (int) $product->get_image_id();
    $image_url = $image_id ? wp_get_attachment_url( $image_id ) : '';
    if ( ! $image_url ) {
      continue;
    }

    $price           = wc_format_decimal( $product->get_price(), 2 );
    $name_with_price = $product->get_name() . ' (' . wc_price( $price ) . ')';

    $choices[] = array(
      'text'          => $name_with_price,
      'value'         => (string) $product->get_id(),
      'image'         => $image_url,
      'file_url'      => $image_url,
      'attachment_id' => $image_id,
    );
  }

  foreach ( $form['fields'] as &$field ) {
    if ( (int) $field->id === $field_id ) {
      $field->choices = $choices;
      break;
    }
  }

  return $form;
}

„Több választható” képválasztó mező feltöltése

Ha a mező Több választható típusú, a choices mellett az inputs tömböt is fel kell tölteni, és minden párnak ugyanaz a key értéke kell legyen, így kapcsolja össze őket a Gravity Forms. A példa azokat a képválasztó mezőket tölti fel, amelyeknek a CSS-osztálya wc_products, így nem kell mezőazonosítót megadnod.

add_filter( 'gform_pre_render_123', 'populate_image_choices_by_class' );
add_filter( 'gform_pre_validation_123', 'populate_image_choices_by_class' );
add_filter( 'gform_admin_pre_render_123', 'populate_image_choices_by_class' );
add_filter( 'gform_pre_submission_filter_123', 'populate_image_choices_by_class' );

function populate_image_choices_by_class( $form ) {
  foreach ( $form['fields'] as &$field ) {
    if ( false === strpos( $field->cssClass, 'wc_products' ) ) {
      continue;
    }

    $posts = get_posts(
      array(
        'post_type'      => 'product',
        'post_status'    => 'publish',
        'posts_per_page' => -1,
      )
    );

    $choices = array();
    $inputs  = array();
    $index   = 1;

    foreach ( $posts as $post ) {
      $product = wc_get_product( $post->ID );
      if ( ! $product ) {
        continue;
      }

      $image_id  = (int) $product->get_image_id();
      $image_url = $image_id ? wp_get_attachment_url( $image_id ) : '';
      if ( ! $image_url ) {
        continue;
      }

      // A 10 többszörösei foglaltak a Gravity Forms számára, ezeket átugorjuk.
      if ( 0 === $index % 10 ) {
        $index++;
      }

      $name = $product->get_name();
      $key  = wp_generate_password( 14, false, false );

      $choices[] = array(
        'text'          => $name,
        'value'         => $name,
        'image'         => $image_url,
        'file_url'      => $image_url,
        'attachment_id' => $image_id,
        'key'           => $key,
      );

      $inputs[] = array(
        'id'    => $field->id . '.' . $index,
        'label' => $name,
        'name'  => '',
        'key'   => $key,
      );

      $index++;
    }

    $field->choices = $choices;
    $field->inputs  = $inputs;
  }

  return $form;
}

A mező CSS-osztály beállításába írd be a wc_products értéket.

A kiválasztott termék kosárba tétele beküldés után

Ez a példa a beküldés után a WooCommerce-kosárba teszi az űrlapon kiválasztott terméket. Az empty_cart() sor nem kötelező: ha benne hagyod, a korábbi kosártartalom törlődik. A mező értékének a termék azonosítójának kell lennie, ezért ezt a példát a névvel és árral feltöltött változattal együtt használd.

add_action(
  'gform_after_submission_123',
  function ( $entry ) {
    $product_id = (int) rgar( $entry, '1' ); // A képválasztó mező azonosítója.
    if ( ! $product_id ) {
      return;
    }

    $product = wc_get_product( $product_id );
    if ( ! $product ) {
      return;
    }

    WC()->cart->empty_cart(); // Nem kötelező: törli a korábbi kosártartalmat.
    WC()->cart->add_to_cart( $product_id, 1 );

    do_action( 'woocommerce_add_to_cart', $product_id );
  }
);

A beküldés után átirányíthatod a látogatót a pénztár oldalra egy egyedi, Oldal típusú visszaigazolással. A visszaigazolásokról a Visszaigazolások beállításai fejezetben olvashatsz, a képválasztó mezőről a Több választós és képválasztó mezők fejezetben.