کد اکشن تغییر عکس آواتار ووکامرس در پروفایل

کد با ما - کد ووکامرس
کد با ما – کد ووکامرس

فرض کنید در woocommerce form-edit-account.php ما یک فرم اضافی داریم که به کاربران اجازه می دهد عکس پروفایل خود را تغییر دهند. روال کار اینطوریست هنگامی که کاربر روی آپلود آواتار کلیک می کند باید تابعی اجرا شود که تصویر meta_key کاربر را از طریق update_user_meta به روز کند.

روش اول

پلتفرم بوی اجرا شدن خروجی صحیح قطعه کد زیر را تایید می کند

قطعه کدی که در زیر مشاهده می کنید توسط برنامه کامپایلر به جهت تست آزمایش شده و خروجی صحیح مدنظر را بدست آورد.

کد برای اضافه کردن آواتار :

add_action( 'woocommerce_edit_account_form', 'add_avatar_to_edit_account_form' );
function add_avatar_to_edit_account_form() {
    $user = wp_get_current_user();
    $user_id = $user->ID;
    //Add all other relevant variables you need here to prefill the fields like $attachment_id etc.
    ?>
        <!-- Avatar Section -->
  <div class="global_container avatar">

    <div class="avatar_col_1"><?php
      // Visualizza Avatar  
      if ($attachment_id) {
        $original_image_url = wp_get_attachment_url($attachment_id);
        // Display Image instead of URL
        echo wp_get_attachment_image($attachment_id, $size = array('150', '150')); // Invece dell'array size, stava 'full' come parametro.
      } else {
        ?><img style="" src="<?php echo get_avatar_url($user_id, array ('size' => 150)); ?>" alt=""><?php
      }
    ?></div>

    <div class="avatar_col_2">
      <div class="upload-field">
        <p class="form-row avatar">
          <div class="field-settings upload">
            <label for="file" class="chose_file_button">Scegli immagine</label>
            <label id="file-name" for="file" class="chose_file_input">Nessuna immagine selezionata</label>
          </div>  
          <input id="file" type="file" style="display:none;" class="field-settings avatar" name="image" accept="image/x-png,image/gif,image/jpeg">
          <input id="current_image" type="text" style="display:none;" name="current_image" value="<?php if($attachment_id){echo $attachment_id;} ?>">
          
          <span class="t4-light avatar"><?php esc_html_e( "File consentiti: png/gif/jpeg, dimensione massima 1MB. L'immagine del tuo profilo verrà visualizzata nelle recensioni dei prodotti e nei commenti.", 'woocommerce' ); ?></span>
        </p>
      </div>
      
      <!-- Show file name inside label avatar -->
      <script>
        $("#file").change(function(){
          $("#file-name").text(this.files[0].name);
        });
      </script>

      <div class="avatar_button">
        <!-- Upload Avatar -->
        <p style="margin-bottom: 0px!important;">
          <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce-avatar' ); ?>
          <button type="submit" class="edit-account-button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Upload Avatar', 'woocommerce' ); ?></button>
          <input type="hidden" name="action" value="save_account_details" />
        </p>
      
        <?php
          // Rimuovi immagine Button
          if (isset($_GET['rm_profile_image_id'])) {
            if ($attachment_id == $_GET['rm_profile_image_id']) {
              wp_delete_attachment($attachment_id);
              
              if (delete_user_meta($user_id, 'image')) {
                wp_delete_attachment($attachment_id);
              }

              ?><script>window.location='<?php echo wc_get_account_endpoint_url('impostazioni') ?>';</script><?php
              exit();
            }
          } else {
            echo '<a href=' . wc_get_account_endpoint_url('impostazioni') . '?rm_profile_image_id=' . $attachment_id . '> ' . __('Remove') . ' </a>';
          } 
        ?>
      </div>
    </div>
  </div>      
    <?php
}

قدم بعدی ذخیره آواتار :

add_action( 'woocommerce_save_account_details', 'save_avatar_account_details', 12, 1 );
function save_avatar_account_details( $user_id ) {
    if (isset( $_POST['current_image'] ) && !isset($_FILES['image'])) {
        update_user_meta( $user_id, 'image', sanitize_text_field( $_POST['current_image']) );
    } else if ( isset( $_FILES['image'] ) ) {
    require_once( ABSPATH . 'wp-admin/includes/image.php' );
    require_once( ABSPATH . 'wp-admin/includes/file.php' );
    require_once( ABSPATH . 'wp-admin/includes/media.php' );

    // Imposta la cartella in cui salvare gli avatar degli utenti
    function wp_set_custom_upload_folder($uploads) {
      $uploads['path'] = $uploads['basedir'] . '/avatar-upload';
      $uploads['url'] = $uploads['baseurl'] . '/avatar-upload';    
      if (!file_exists($uploads['path'])) {
        mkdir($uploads['path'], 0755, true);
      }
      return $uploads;
    } add_filter('upload_dir', 'wp_set_custom_upload_folder');     
      
    $attachment_id = media_handle_upload( 'image', 0 );

    if ( is_wp_error( $attachment_id ) ) {
      update_user_meta( $user_id, 'image', $_FILES['image']['error'] . ": " . $attachment_id->get_error_message() );

    } else {
      $old_attachment_id = get_user_meta( $user_id, 'image', true );
      wp_delete_attachment($old_attachment_id);
      update_user_meta( $user_id, 'image', $attachment_id );
    } 
    remove_filter('upload_dir', 'wp_set_custom_upload_folder');
  }
}

اضافه کردن multipart/form-data به فرم :

// Add enctype to form to allow image upload
function add_multipart_to_woocommerce_edit_account_form_tag() {
    echo 'enctype="multipart/form-data"';
} 
add_action( 'woocommerce_edit_account_form_tag', 'add_multipart_to_woocommerce_edit_account_form_tag' );

کدهای ووکامرس بیشتر

آیا این مطلب برای شما مفید بود؟

بله
نه اصلا
از اینکه بازخورد خود را در اختیار ما گذاشته اید متشکریم. تا بعد 🙂

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *