Summary

In this post, I share how I built a dynamic JavaScript dropdown that pairs prices with readable text, auto-selects single options, and keeps inputs clean and consistent.

When building complex order forms, sometimes you need more than just numbers.

I wanted a way to store both the price and the readable text for each selected option — clean, trimmed, and paired with its corresponding add-on name. Later, this logic evolved into a dynamic dropdown that automatically selects the only available option.

Here’s how I done the whole thing.

Step 1: Retrieving the Price and Text from the Selected Option

It all started with a simple goal:

I can get the price, but I also want the corresponding text.

Initially, my code looked like this:

layersPriceSum += parseInt($(this).find('option:selected').data('price'));
layersPriceSumText += parseInt($(this).find('option:selected'));

That second line obviously didn’t work — parseInt() can’t handle a jQuery object, so it returned NaN.

The fix was simple:

layersPriceSumText += $(this).find('option:selected').text();

This gave me the visible text from the dropdown instead of NaN.

Step 2: Cleaning Up the Text

Raw .text() can often include unwanted whitespace or line breaks.

So I normalized everything with a single, reliable regex:

let priceText = $(this).find('option:selected').text().trim().replace(/\s+/g, ' ');

Now, no matter how messy the HTML was, my output was always clean: Extra chocolate layer

Step 3: Including the Add-on Name

The next step was to make the stored text more descriptive – not just “Extra large”, but “Chocolate coating – Extra large”.

Each add-on had this structure:

<div class="addon" data-template="szalgyertya" data-price="80">
  <div class="addon__badge">
    <span class="addon__title">Szál gyertya</span>
  </div>
  <select>…</select>
</div>

So, I extracted the add-on name like this:

let addonName = $addon.find('.addon__title').text().trim().replace(/\s+/g, ' ');
let priceText = addonName + ' – ' + $addon.find('option:selected').text().trim().replace(/\s+/g, ' ');

That produced clean, contextual strings like: “Szál gyertya – Extra large”

Step 4: Writing the Result into a Hidden Field

Since I wanted to pass this data through the form without showing it to the user,

I created a hidden <textarea> field:

<textarea name="price_comment" maxlength="1000" style="display:none;"></textarea>

Then, instead of saving the text to an internal variable, I simply updated the textarea:

$('textarea[name="price_comment"]').val(sumText);

This way, the field stays invisible but still gets submitted with the form – never use disabled, because those values aren’t sent.

Step 5: Dynamic Dropdown with Auto-Select

Next, I built a dynamic <select> that pulls options from a flavors array:

let options = '<option value="">Choose a flavor</option>';

for (const i in flavors) {
  const flavor = flavors[i];
  const price = flavor.price + topDecorationPrice + waferPrice;

  options += '<option data-price="' + price + '" value="' + flavor.variation_id + '">' +
             flavor.name + ' (' + CakeOrder.formatPrice(price) + ')</option>';
}

$row.find('select').append(options);

If there was only one flavor, it made sense to auto-select it immediately:

if (flavors.length === 1) {
  $row.find('select').prop('selectedIndex', 1).trigger('change');
  // additional logic could run here
}

Step 6: Updating and Displaying the Selection

Finally, whenever the user picked something, I updated both the total and the readable text:

$row.find('select').on('change', function() {
  const selected = $(this).find('option:selected');
  const price = parseInt(selected.data('price'));
  const text  = selected.text().trim().replace(/\s+/g, ' ');

  layersPriceSum += price;
  layersPriceSumText += text + '<br>';
});

Everything was clean, readable, and automatic.

What I Learned

1. Never parse DOM elements as numbers. .data() is for data, .text() is for humans.
2. Whitespace cleanup is gold. A simple regex makes dynamic text perfectly consistent.
3. Hidden fields beat disabled inputs. They submit silently without breaking logic.
4. Small UX details matter. Auto-selecting the only flavor turns a clunky step into a seamless one.
5. Readable data structure = maintainable code. Having both price and text stored together simplified later debugging immensely.

Final Thoughts

This small system turned into a surprisingly powerful and clean workflow — prices, add-on names, and user-readable strings all handled dynamically, safely, and elegantly.

It’s a great example of how improving tiny technical details can make the overall user experience feel polished and professional.

The less the user has to think, the smarter your interface feels.

The post [10] How I Built a Smart Price and Text Handling System and Dynamic Dropdowns first appeared on Digital Nomad Blog.

“Is there a WordPress plugin that lets me send the current page’s text to any email entered in a form?”

From there, things evolved – quite a lot.

What began as a theoretical idea turned into a fully functional, bilingual plugin that detects the site language, integrates with SMTP, and securely delivers any page’s content to a recipient’s inbox.

This post documents how that happened.

Step 1: The Initial Idea

The original concept was minimalistic:

• Add a single input field to a WordPress page.
• When the visitor enters an email, send the full text of that page to them.

At first, I tried to use Contact Form 7 for this, but soon realized it would require too many hooks and workarounds.

A custom plugin would be cleaner – just one PHP file, one function, no external dependencies.

Step 2: Building the Core Plugin

I started by creating a folder inside wp-content/plugins/:

/wp-content/plugins/email-page-sender/
and added a file named email-page-sender.php.

The first working version looked like this:

<?php
/**
 * Plugin Name: Email Page Sender
 * Description: Sends the current page content to a user-provided email address.
 */

add_action('the_content', function($content) {
    if (is_page()) {
        $form = '
        <form method="post" class="email-page-sender">
            <input type="email" name="eps_email" placeholder="Enter your email" required>
            <button type="submit" name="eps_submit">Send</button>
        </form>';
        return $content . $form;
    }
    return $content;
});

add_action('template_redirect', function() {
    if (isset($_POST['eps_submit']) && isset($_POST['eps_email'])) {
        $email = sanitize_email($_POST['eps_email']);
        if (is_email($email)) {
            global $post;
            $subject = 'Page: ' . get_the_title($post->ID);
            $body = wpautop(apply_filters('the_content', $post->post_content));
            wp_mail($email, $subject, $body);
        }
    }
});

This minimal version worked – but only under ideal conditions.

If your server didn’t support PHP mail or lacked SMTP configuration, nothing was actually sent.

Step 3: Adding SMTP and Proper Headers

After testing, the first email failed due to Gmail’s DMARC policy:

“Unauthenticated email from gmail.com is not accepted…”

That’s when I integrated WP Mail SMTP and switched the “From” address to my domain (noreply@online-dentist.hu).

The fixed mail section became:

$headers = [
  'Content-Type: text/html; charset=UTF-8',
  'From: Online Dentist <noreply@online-dentist.hu>',
  'Reply-To: schulmann.istvan@gmail.com'
];

$sent = wp_mail($email, $subject, $body, $headers);

Now the email passed DMARC and SPF validation perfectly.

The plugin also displayed a small JavaScript alert confirming success or failure.

Step 4: Handling Page Context Correctly

Originally, the plugin hooked into init, but that ran before WordPress loaded the $post object –
resulting in empty emails.

Switching to template_redirect solved this neatly:

add_action('template_redirect', function() {
  // email logic here
});

At that point, $post was fully accessible, and the content sent correctly every time.

Step 5: Adding Dual-Language Support

My site has both Hungarian and English sections (URLs like /en/…),
so I wanted the form labels and alerts to match the current language.
To detect the language, I used a simple URL check:

function eps_get_language() {
    $url = $_SERVER['REQUEST_URI'] ?? '';
    return (strpos($url, '/en/') !== false) ? 'en' : 'hu';
}

Then I used this helper to localize text dynamically:

$lang = eps_get_language();

if ($lang === 'en') {
    $label = 'Would you like to receive this page by email?';
    $button = 'Send';
} else {
    $label = 'Szeretnéd megkapni ezt az oldalt emailben?';
    $button = 'Küldés';
}

and finally output the localized form:

<form method="post" class="email-page-sender">
    <p><strong><?php echo esc_html($label); ?></strong></p>
    <input type="email" name="eps_email" placeholder="Add meg az email címet" required>
    <button type="submit" name="eps_submit"><?php echo esc_html($button); ?></button>
</form>

Step 6: Showing Confirmation Alerts

To make it user-friendly, I added success/error messages injected into the footer:

add_action('wp_footer', function() use ($sent, $lang) {
    $msg = $sent
      ? ($lang === 'en' ? ' The page content has been sent!' : ' Az oldal tartalmát elküldtem!')
      : ($lang === 'en' ? ' Error sending email.' : ' Hiba történt az email küldése közben.');
    echo "<script>alert(" . json_encode($msg) . ");</script>";
});

It’s simple, but surprisingly effective.

What I Learned

• Never rely on PHP’s mail() in production. SMTP authentication is a must, especially when using Gmail or custom domains.
• DMARC and SPF records matter. Without proper DNS setup, even valid emails may bounce or be marked as spam.
• Hook placement in WordPress is critical. init might be too early; template_redirect ensures post data is ready.
• Internationalization doesn’t always need heavy plugins. For simple bilingual sites, even URL-based logic can be lightweight and effective.

Final Thoughts

This started as a quick “can I do this?” experiment – but became a small, elegant plugin that I’ll actually use on my personal introduction pages.

Sometimes the most satisfying builds aren’t the big, complex systems.

They’re the small, human-focused touches – like letting someone you just met receive your page with one click.

And that’s exactly what Email Page Sender does: a tiny but polished detail in the bigger story of how I built IT.

The post [9] How I Built a Dual-Language Email Page Sender Plugin for WordPress first appeared on Digital Nomad Blog.

cd /home/onlinedentist/public_html && /usr/local/bin/php /home/onlinedentist/public_html/wp-cron.php

Step 2: The Real Culprit – AIOSEO, Polylang, and a Broken Sitemap

Step 3: Switching to Google XML Sitemaps

Step 4: The Next Problem – Double Sitemaps

“One or more plugins are affecting your site’s ability to be indexed.”

• /sitemap.xml (from the plugin, correct)
• /wp-sitemap.xml (from WordPress core, unnecessary)

Step 5: Disabling the WordPress Core Sitemap

add_filter( 'wp_sitemaps_enabled', '__return_false' );

add_action( 'init', function() {
    remove_action( 'init', 'wp_sitemaps_get_server' );
    add_filter( 'wp_sitemaps_enabled', '__return_false', 9999 );
}, 0 );

# --- Disable WordPress core sitemap ---
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/wp-sitemap\.xml$ [OR]
RewriteCond %{REQUEST_URI} ^/wp-sitemap-index\.xml$ [OR]
RewriteCond %{REQUEST_URI} ^/wp-sitemap-posts-[0-9]+\.xml$
RewriteRule .* - [R=404,L]
</IfModule>

Step 6: Verifying the Robots.txt and Cache Integration

User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php

Sitemap URL: https://online-dentist.hu/sitemap.xml
Update interval: 1800 seconds
Pages per interval: 10

What I Learned

• Scheduled cache preloading only works if the sitemap works.
• A broken or plugin-conflicted sitemap silently breaks the preload job.
• AIOSEO and Polylang don’t play well together.
• The sitemap index looks correct, but the sub-sitemaps are often invalid.
• Google XML Sitemaps still works best for multilingual static sitemaps.
• It doesn’t overthink language folders – it just lists every URL.
• The WordPress core sitemap must be disabled when using a custom sitemap plugin, or you’ll confuse both Google and W3TC.
• Virtual files are fine.
• You don’t need physical robots.txt or sitemap.xml – WordPress can handle them dynamically.

Final Thoughts

• One active sitemap (/sitemap.xml)
• One dynamic robots.txt
• A fully working cache preload system

The post [8] When a Scheduled Cache Task Broke My Sitemaps, and How I Rebuilt the Whole System first appeared on Digital Nomad Blog.

There has been a critical error on this website!

No WordPress admin.
No cPanel access.
No FTP connection.

A great starting point, right? Because when everything collapses, that’s when real debugging begins.

Step 0: Contact the hosting provider

The website owner contacted the service provider first. He received this response:

You informed us that your website is unavailable, a security update has been made on our web server, unfortunately very old websites may no longer appear this way! Please contact the website developer to update your site! These old PHP-based sites already posed a very high security risk.

I joined the conversation here:

I am the web developer. It seems that you did not look at the owner’s website, you just wrote the answer above. Please forgive me if I am wrong! I simply do not understand what you mean when you write in your service provider’s response that “these old PHP-based sites…” The website – like your website! – is a WordPress-based site. It is not an old site at all, although you are right that it is PHP-based, like all WP sites. I assume that you did not mean “high security risk” for this type of site either! In my experience, the server’s security update rarely affects the display of a WordPress site, so your answer is not a reassuring, acceptable answer, but rather raises further questions. If the security update is the cause of the error, I think we have exhausted the concept of service provider risk bearing! Please, inform me exactly what security update was made? Maybe we can start from this.

I tried not to be offensive, but I was still a little surprised by the answer:

I apologize, I really didn’t check the website more thoroughly. We switched from CentOs to Alma Linux and only PHP 8.0 or higher versions are available here, this caused problems for several websites, so I wrote such a template answer. I changed the access password of the site and checked it, I was able to log in to cPanel and access the hosting with FTP.

I thanked for the answer and I was able to start working.

Step 1: Regain Access to the Server

Since the cPanel and FTP were initially unreachable, I contacted the hosting provider and asked for temporary SSH access. Once in, I navigated to the WordPress directory:

cd /storage/something/public_html

To get the site back online, I needed to disable all plugins manually. The simplest trick:

mv wp-content/plugins wp-content/plugins_disabled

Reload the website – and boom, the WordPress core loads again (though without plugins).

Step 2: The First Fatal Error

Once I could see the original error, it was a PHP fatal error caused by a plugin named tabs-shortcode:

Fatal error: Uncaught Error: Non-static method OLT_Tab_Shortcode::add_shortcode() cannot be called statically in tabs-shortcode.php on line 79

That means the plugin was trying to call a non-static function statically – something like this:

OLT_Tab_Shortcode::add_shortcode();

But it should’ve been called via an instance:

$olt = new OLT_Tab_Shortcode();
$olt->add_shortcode();

Fixing this (or just removing the plugin) solved the first fatal crash.

Step 3: The Second Plugin Trap

After disabling that one, another plugin immediately failed. Same strategy: rename its folder, refresh, and move on.

When dealing with legacy WordPress installs, this “rinse and repeat” cycle is common – outdated plugins often aren’t compatible with modern PHP 8+.

In this specific case, the provider also improperly prepared one of the 8+ PHP versions, and if this is chosen, the developer may face even more serious errors. I reported this to the provider, but I did not receive a response to this report.

Step 4: The Theme Takes Over (Meris Widget Error)

Next, the error shifted to the theme itself:

Fatal error: Too few arguments to function WP_Widget::__construct(), 0 passed and at least 2 expected

This pointed to the Meris theme’s theme-widget.php.
In that file, each widget class looked like this:

class meris_home_service_widget extends WP_Widget {
    function meris_home_service_widget() {
        parent::WP_Widget(false, $name = __('Meris: Service', 'meris'));
    }
}

This is outdated PHP 5 code.

Here’s the modernized PHP 8 version:

class meris_home_service_widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'meris_home_service_widget',
            __('Meris: Service', 'meris'),
            array('description' => __('Displays home service items', 'meris'))
        );
    }
}

Once all widget constructors were rewritten, the theme finally loaded… almost.

Step 5: The Final Boss – count() TypeError

Then came this beauty:

Fatal error: Uncaught TypeError: count(): Argument #1 ($value) must be of type
Countable|array, string given in index.php on line 76

The problem was this snippet:

$columns = isset($home_sections_array['widget-area-column-item'][$sanitize_areaname])
    ? $home_sections_array['widget-area-column-item'][$sanitize_areaname]
    : "";
$column_num = count($columns);

If $columns wasn’t an array, count() failed.

Here’s the fixed version:

$columns = isset($home_sections_array['widget-area-column-item'][$sanitize_areaname])
    ? $home_sections_array['widget-area-column-item'][$sanitize_areaname]
    : array();

if (!is_array($columns)) {
    $columns = array($columns);
}

$column_num = count($columns);

That simple is_array() guard finally stabilized the site.

Step 6: Clean Up and Prevent Future Chaos

Once everything worked again:

• I deleted the broken plugins permanently.
• Updated PHP to the latest stable version.
• Switched error logging on for future issues:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

And finally, I set up automatic offsite backups using a remote cron job – because no one wants to go through this twice.

What I Learned

• Old WordPress themes often contain ancient PHP 5 code that breaks under PHP 8+.
• Static vs. non-static method calls are one of the most common causes of fatal errors in legacy plugins.
• Always wrap count() in is_array() when you can’t guarantee the variable type.
• Having SSH access is worth gold when FTP and cPanel fail.
• The real debugging starts only after you’ve seen five different errors in a row.

Final Thoughts

Recovering a WordPress site from complete blackout teaches you patience, precision, and humility.

Sometimes, it’s not about rewriting code – it’s about understanding the story each error tells you.

When your site just says “There has been a critical error on this website!,” take it as an invitation.

The deeper you dig, the more you learn about the invisible architecture holding everything together.

Because as I like to remind myself on How I Built IT:

The post [7] How I Fixed a Broken WordPress Site When Everything Went Dark first appeared on Digital Nomad Blog.

One of my latest projects did exactly that: I built a dynamic popup window that doesn’t just display information but also communicates directly with WooCommerce, sending data back to the system in real time and influencing the order process itself.

The Goal

The goal was to replace a static “extra options” form (for example: cake box, candles, adult extras, etc.) with an interactive popup interface where users could make selections and instantly see updated prices and combinations.

Behind the scenes, JavaScript listens to user interactions and sends updates to the WooCommerce backend via AJAX.

How It Works

On the frontend, jQuery monitors each user selection.

When someone chooses a specific cake add-on (like a candle type, color, or decoration), the script:

• Collects the relevant data- attributes (such as data-price or data-type),
• Builds a JSON object from the selection,
• Sends it back to the WooCommerce backend via AJAX,
• Where a PHP function saves it as custom order meta data.

In other words, the popup isn’t just a visual element – it’s an active UI layer that communicates directly with WooCommerce.

Key Technologies

• JavaScript / jQuery – to manage dynamic elements, events, and value changes.
• AJAX PHP bridge – to send and receive data between frontend and backend.
• WooCommerce hooks (do_action, add_action) – to integrate data into the checkout and order flow.
• Custom order meta fields – to store all additional product information (flavor, size, box type, color, etc.).

The Result

The final product delivers a truly interactive ordering experience:

• The customer instantly sees updated prices and options.
• Once the popup is confirmed, all selected data is automatically transferred to the cart.
• The same data appears in the order confirmation emails and in the WooCommerce admin panel.

All of this works fully within WooCommerce’s architecture – no third-party plugins or core file modifications required.

Summary

This project demonstrates that WooCommerce is not just an e-commerce engine – it’s a powerful development framework.

By leveraging WordPress hooks, WooCommerce actions, JavaScript, and AJAX, we can build experiences that feel seamless, dynamic, and deeply integrated.

Here, the popup isn’t just decoration – it became a vital part of the data flow itself.

Code Examples

1) Minimal popup UI (HTML)

<!-- Popup modal (example) -->
<div id="cake-extras-popup" class="popup" hidden>
  <h3>Choose extras</h3>

  <label>Symbol</label>
  <select id="jel_gyertya">
    <option value="sziv"> Heart</option>
    <option value="X"> X</option>
    <option value="?"> Question</option>
  </select>

  <label>Color</label>
  <select id="jel_gyertya_szin">
    <option value="csillámos pink">Glitter Pink</option>
    <option value="csillámos arany">Glitter Gold</option>
    <option value="csillámos ezüst">Glitter Silver</option>
  </select>

  <label>Box</label>
  <select id="tortadoboz" class="box-selector">
    <option value="0" data-price="0">No box</option>
    <option value="1" data-price="500">5-slice box (500 Ft)</option>
    <option value="2" data-price="1000">10-slice box (1000 Ft)</option>
  </select>

  <button id="cake-extras-confirm">Add to order</button>
</div>

Your real popup can be any UI; what matters is we can read the selections when “Confirm” is clicked.

2) Enqueue JS and pass AJAX settings (functions.php)

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'cake-extras',
        get_stylesheet_directory_uri() . '/js/cake-extras.js',
        ['jquery'],
        '1.0',
        true
    );

    wp_localize_script('cake-extras', 'CakeAjax', [
        'url'   => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('cake_extras_nonce'),
    ]);
});

3) Frontend JS: collect → send via AJAX → store in session

jQuery(function ($) {
  // Example: read price of the selected box
  function getSelectedBoxPrice() {
    const price = $('#tortadoboz option:selected').data('price') || 0;
    return Number(price);
  }

  $('#cake-extras-confirm').on('click', function () {
    const payload = {
      symbol: $('#jel_gyertya').val(),                 // sziv | X | ?
      color:  $('#jel_gyertya_szin').val(),            // e.g. "csillámos arany"
      box:    $('#tortadoboz').val(),                  // 0/1/2...
      box_price: getSelectedBoxPrice(),                // 0 / 500 / 1000
    };

    $.post(CakeAjax.url, {
      action: 'save_cake_extras',
      _ajax_nonce: CakeAjax.nonce,
      data: payload
    }).done(function (res) {
      if (res && res.success) {
        alert('Extras saved for this order. Now add the product to cart!');
        // Close your modal here.
      } else {
        alert('Could not save extras.');
      }
    });
  });
});

4) PHP AJAX handler: save extras to session

add_action('wp_ajax_save_cake_extras', 'save_cake_extras');
add_action('wp_ajax_nopriv_save_cake_extras', 'save_cake_extras');

function save_cake_extras() {
    check_ajax_referer('cake_extras_nonce');

    if (empty($_POST['data']) || !class_exists('WC_Session')) {
        wp_send_json_error();
    }

    $raw = (array) $_POST['data'];

    // Sanitize
    $extras = [
        'symbol'    => sanitize_text_field($raw['symbol'] ?? ''),
        'color'     => sanitize_text_field($raw['color'] ?? ''),
        'box'       => sanitize_text_field($raw['box'] ?? ''),
        'box_price' => floatval($raw['box_price'] ?? 0),
    ];

    if (function_exists('WC') && WC()->session) {
        WC()->session->set('cake_extras', $extras);
        wp_send_json_success();
    }

    wp_send_json_error();
}

We temporarily keep the popup data in the WooCommerce session until the product is added to the cart.

5) Inject session data into the cart item (so it travels through checkout)

// Attach extras when a product is added to the cart
add_filter('woocommerce_add_cart_item_data', function ($cart_item_data, $product_id, $variation_id) {
    if (function_exists('WC') && WC()->session) {
        $extras = WC()->session->get('cake_extras');
        if (!empty($extras) && is_array($extras)) {
            $cart_item_data['cake_extras'] = $extras;

            // Optional: add the box price to the line item price
            if (!empty($extras['box_price'])) {
                $cart_item_data['cake_extras']['_adjust_price'] = (float) $extras['box_price'];
            }

            // Clear session so it doesn't leak to another add_to_cart
            WC()->session->__unset('cake_extras');
        }
    }
    return $cart_item_data;
}, 10, 3);

6) Adjust the cart line price (optional: if extras add cost)

add_action('woocommerce_before_calculate_totals', function ($cart) {
    if (is_admin() && !defined('DOING_AJAX')) return;
    if (empty($cart) || empty($cart->get_cart())) return;

    foreach ($cart->get_cart() as $cart_item_key => $item) {
        if (!empty($item['cake_extras']['_adjust_price'])) {
            $extra = (float) $item['cake_extras']['_adjust_price'];
            $price = (float) $item['data']->get_price('edit');
            $item['data']->set_price($price + $extra);
        }
    }
});

7) Show extras under the product name in Cart/Checkout

add_filter('woocommerce_get_item_data', function ($item_data, $cart_item) {
    if (empty($cart_item['cake_extras'])) return $item_data;

    $x = $cart_item['cake_extras'];
    if (!empty($x['symbol'])) {
        $item_data[] = [
            'name'  => __('Symbol', 'your-textdomain'),
            'value' => esc_html($x['symbol']),
        ];
    }
    if (!empty($x['color'])) {
        $item_data[] = [
            'name'  => __('Color', 'your-textdomain'),
            'value' => esc_html($x['color']),
        ];
    }
    if (isset($x['box']) && $x['box'] !== '') {
        $item_data[] = [
            'name'  => __('Box', 'your-textdomain'),
            'value' => esc_html($x['box']),
        ];
    }
    if (!empty($x['box_price'])) {
        $item_data[] = [
            'name'  => __('Box price', 'your-textdomain'),
            'value' => wc_price((float) $x['box_price']),
        ];
    }
    return $item_data;
}, 10, 2);

8) Persist extras into the Order Items (so they appear in admin & emails)

add_action('woocommerce_checkout_create_order_line_item', function ($item, $cart_item_key, $values, $order) {
    if (empty($values['cake_extras'])) return;

    $x = $values['cake_extras'];
    if (!empty($x['symbol'])) {
        $item->add_meta_data(__('Symbol', 'your-textdomain'), $x['symbol']);
    }
    if (!empty($x['color'])) {
        $item->add_meta_data(__('Color', 'your-textdomain'), $x['color']);
    }
    if (isset($x['box']) && $x['box'] !== '') {
        $item->add_meta_data(__('Box', 'your-textdomain'), $x['box']);
    }
    if (!empty($x['box_price'])) {
        $item->add_meta_data(__('Box price', 'your-textdomain'), wc_price((float) $x['box_price']));
    }
}, 10, 4);

WooCommerce will render order item meta in the admin order screen and in customer/admin emails automatically. If you need a custom layout, hook into the email templates (e.g., woocommerce_email_order_meta or override an email template).

9) (Optional) Toggle an “adults only” label based on selected extras

jQuery(function ($) {
  $(document).on('change', '.step[data-step="2"] .addon[data-adult="1"] input[type="checkbox"]', function () {
    let hasAdult = false;
    $('.step[data-step="2"] .addon[data-adult="1"] input[type="checkbox"]').each(function () {
      if ($(this).is(':checked')) hasAdult = true;
    });
    window.CakeOrder = window.CakeOrder || {};
    CakeOrder.hasAdultExtra = hasAdult;
    $('#cake-order label.adult')[hasAdult ? 'show' : 'hide']();
  });
});

Why these examples matter

• Popup → AJAX → Session keeps the UI responsive while safely handing off data to WooCommerce.
• Cart item data + order item meta ensures data survives the entire checkout and lands in emails/admin.
• Price adjustment hook keeps the total correct without hacking product data.
• No core edits: everything is done via hooks and a tiny script, which is update-safe.

If you want, I can bundle these into a single paste-ready mini-plugin structure so you can drop it into /wp-content/plugins/ and activate.

The post [6] Taking WooCommerce Further: When a Popup Window Sends Data Back to the System first appeared on Digital Nomad Blog.

Straightforward, right? Until I realized Contact Form 7 – the plugin I’ve trusted for a decade – doesn’t natively allow dynamic field groups. Once you fill out a form, that’s it. No “Add another” button. No logic to replicate fields dynamically.

That’s when I went hunting for a better way.

The Problem

I wanted a form that would:

• Collect the sender’s name and email (as personal data).
• Let them add multiple recommended persons, each having:
  • Name
  • Phone number
  • Email address
• Remain fully GDPR-compliant.
• Be easy to manage and export (via Flamingo).

At first, I considered a JavaScript-based solution that cloned <div> blocks when the last email field was filled in – but that quickly became messy, especially with validation, IDs, and Flamingo’s data storage.

The Discovery

The solution came with a small but powerful plugin:

Contact Form 7 – Repeatable Fields. 

This plugin adds a new tag type – [repeatable] – which lets you define a group of fields that can be repeated with + / – buttons directly inside your Contact Form 7 editor.

The Implementation

Here’s what my setup looked like inside the CF7 form editor:

[repeatable group-ajanlott min:1 max:5]
  [text* ajanlott_nev placeholder "Ajánlott személy neve"]
  [tel ajanlott_tel placeholder "Ajánlott telefonszám"]
  [email ajanlott_email placeholder "Ajánlott email cím"]
[/repeatable]

Just like that, a clean “Add (+)” and “Remove (–)” button appeared.

The plugin handled the field naming, numbering, and submission logic automatically – no manual JavaScript cloning required.

And to make it visually elegant, I styled the buttons using a few lines of CSS:

/* css */

.wpcf7-field-group-add {
  background: #4f46e5;
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.wpcf7-field-group-add:hover {
  background: #4338ca;
  transform: translateY(-2px);
}

.wpcf7-field-group-remove {
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 20px;
  cursor: pointer;
}

Simple, clean, and user-friendly.

Data Handling & GDPR

Because each “recommended person” involves third-party personal data, I made sure the form also included:

An explicit consent checkbox: “I confirm that the recommended persons have consented to sharing their data for this purpose.”

A dedicated section in the privacy policy describing how these data are handled and stored.

The Flamingo plugin safely logged all submissions, and exporting them to CSV worked flawlessly – even with multiple repeated field groups.

The Result

What started as a frustrating limitation turned into one of my favorite small discoveries in WordPress development this year.

The combination of Contact Form 7 + Repeatable Fields + Flamingo delivers a flexible, privacy-compliant solution for multi-entry forms – without writing a single line of backend code.

Sometimes, solving a problem isn’t about reinventing the wheel – it’s about finding the right plugin and shaping it to your workflow.

Final Thoughts

• If your WordPress form ever needs to collect variable-length data (e.g. multiple attendees, passengers, team members, or – like in my case – recommended persons), the Contact
• Form 7 – Repeatable Fields plugin is an elegant, lightweight answer.
• No JavaScript headaches.
• No shortcode chaos.
• Just a simple “+” button that makes your form smarter.

The post [5] Dynamic Forms in WordPress: How I Solved the “Add Another Person” Problem first appeared on Digital Nomad Blog.

This project started as a simple task tracker for animal health programs. It evolved into a full-blown Excel-based ERP-like system, complete with automated forecasting, daily logging, and VBA-driven workflows for multiple farm sites.

The result – summary interpretation

This file is practically a customized ERP mini-system in Excel that:

• programs and tracks production at the farm level,
• automates data collection and logging,
• predicts yield and performance,
• and connects all data sets (farm, program, hybrid, log).

In other words:

A macro-supported livestock management system built into Excel, covering everything from planning to daily reporting.

Step 1: Defining the Problem

Each farm was managing different hybrids – broilers, layers, growers – all with their own weekly schedules and health control programs. The biggest challenge was centralizing the data while keeping it flexible enough for local use.

I needed one workbook that could:

• Handle multiple farms (telephelyek)
• Store and forecast production programs
• Log daily operational data
• Predict outcomes weeks ahead

So I built _program.xlsm – a macro-enabled Excel system that ties together every stage of the production and monitoring process.

Step 2: Structuring the Workbook

Every sheet had a clear role in the workflow:

What started as a set of templates became a living system that could plan, record, and predict.

Step 3: Automating the Forecast

The core of the logic lives inside one macro:

Since I designed the applicable health programs and the templates for each site with a fixed number of rows, sequential processing was given a serious shortcut. Thus, the data for the 30 sites is processed in seconds. The weekly forecast sorts the tasks to be completed and the tasks that have not been completed according to the number of weeks set on the Helper worksheet, starting from the current week.

‘ Visual Basic

Sub elorejelzes()

    Application.ScreenUpdating = False
    Application.Calculation = xlManual
        
    ' Törlöm az előrejelzés munkalap fejlécen kívüli részét
    sh_elorejelzes.Rows("2:5000").Delete
    hova_irok = 2

    ' Hány hetet nézünk előre
    hetek = sh_seged.Range("Q3").Value
    
    ' a: munkalap ciklus
    For A = 1 To 2
    
        If A = 1 Then
            Set ws = sh_prog_novendek_telep
            meddig = 1363
            tipus = "növendék"
        Else
            Set ws = sh_prog_tojo_telep
            meddig = 683
            tipus = "tojó"
        End If
        
        hanyadik_het_van = ws.Range("A2").Value
        akt_ev = Year(Date)
        
        ' b: a munkalapon meddig vannak sorok
        For b = 4 To meddig
        
            oF = ws.Range("F" & CStr(b)).Value
            
            ' Fejléc meghatározása:
            If (oF = "Telephely:") _
            Then
            
                szerepel_a_tervezesben = ws.Range("Q" & CStr(b + 2)).Value
                
                If szerepel_a_tervezesben = False _
                Then
                    ' Ha nem szerepel a napló a tervezésben, skippelem
                    b = b + 67
                Else
                    telephely = ws.Range("H" & CStr(b)).Value
                    
                    If telephely = "" _
                    Then
                        ' Ha nincs megadva a telephely, skippelem a naplót
                        b = b + 67
                    Else
                    
                        ' Van telephely, szerepel a tervben => beolvasom a fejléc többi sorát
                        prog_mintavetel = ws.Range("H" & CStr(b + 1)).Value
                        prog_vakcina = ws.Range("H" & CStr(b + 2)).Value
                        istalo_tol = ws.Range("K" & CStr(b)).Value
                        istalo_ig = ws.Range("L" & CStr(b)).Value
                        telepites = ws.Range("K" & CStr(b + 1)).Value
                        allomany_1 = ws.Range("K" & CStr(b + 2)).Value
                        allomany_2 = ws.Range("L" & CStr(b + 2)).Value
                        allomany_3 = ws.Range("M" & CStr(b + 2)).Value
                        het = ws.Range("M" & CStr(b + 1)).Value
                        kor = ws.Range("Q" & CStr(b + 1)).Value
                        
                        'MsgBox telephely
                        
                        ' A napló felső fele a mintavétel
                        program = "mintavétel"
                        
                        For c = b + 6 To b + 66
                        
                            ' Innentől vakcina sorok
                            If c = b + 36 Then program = "vakcina"
                            
                            akt_het = ws.Range("C" & CStr(c)).Value
                            prg_het = ws.Range("M" & CStr(c)).Value
                            teny_datum = ws.Range("Q" & CStr(c)).Value
                            allapot = ws.Range("P" & CStr(c)).Value
                            megjegyzes = ws.Range("R" & CStr(c)).Value
                            
                            
                            ' Ezzel a feléc sorokat skippelem
                            If IsNumeric(akt_het) _
                            Then
                                
                                sor_ev = Year(ws.Range("B" & CStr(c)).Value)
                                
                                kell_a_sor = False
                            
                                ' Ezek már tisztán az adat sorok. A paraméterek alapján döntjük el, hogy szerepel -e az előrejelzésben.
                                If prg_het >= akt_het And prg_het <= akt_het + hetek Then kell_a_sor = True 
                                If teny_datum <> "" Then kell_a_sor = False
                                If prg_het <> 0 And prg_het < hanyadik_het_van And teny_datum = "" And sor_ev <= akt_ev Then kell_a_sor = True
                                
                                If kell_a_sor _
                                Then
                                
                                    ' A fejléc adatok minden sorba bekerülnek:
                                        sh_elorejelzes.Range("A" & CStr(hova_irok)).Value = telephely
                                        sh_elorejelzes.Range("B" & CStr(hova_irok)).Value = istalo_tol
                                        sh_elorejelzes.Range("C" & CStr(hova_irok)).Value = istalo_ig
                                        sh_elorejelzes.Range("D" & CStr(hova_irok)).Value = telepites
                                        sh_elorejelzes.Range("E" & CStr(hova_irok)).Value = "'" & het
                                        sh_elorejelzes.Range("F" & CStr(hova_irok)).Value = allomany_1
                                        sh_elorejelzes.Range("G" & CStr(hova_irok)).Value = allomany_2
                                        sh_elorejelzes.Range("H" & CStr(hova_irok)).Value = allomany_3
                                        sh_elorejelzes.Range("I" & CStr(hova_irok)).Value = prog_mintavetel
                                        sh_elorejelzes.Range("J" & CStr(hova_irok)).Value = prog_vakcina
                                        sh_elorejelzes.Range("K" & CStr(hova_irok)).Value = kor
                                        sh_elorejelzes.Range("L" & CStr(hova_irok)).Value = tipus
                                    
                                    'Az adat sorok másolással kerülnek át:
                                        ws.Range("F" & CStr(c) & ":L" & CStr(c)).Copy
                                        sh_elorejelzes.Range("M" & CStr(hova_irok)).PasteSpecial Paste:=xlPasteValues, Operation:=xlNone, SkipBlanks:=False, Transpose:=False
                                        
                                        sh_elorejelzes.Range("T" & CStr(hova_irok)).Value = prg_het
                                        sh_elorejelzes.Range("U" & CStr(hova_irok)).Value = allapot
                                        sh_elorejelzes.Range("V" & CStr(hova_irok)).Value = megjegyzes
                                    
                                    hova_irok = hova_irok + 1
                                
                                
                                End If
                                
                            End If
                        
                        Next c
                        
                        b = b + 67
                        
                    End If
                End If
                 
            End If
        
        Next b
       
    Next A

    Application.ScreenUpdating = True
    Application.Calculation = xlAutomatic

    Call elorejelzes_rendezes(hanyadik_het_van)

    MsgBox "Végeztem az előrejelzéssel."


End Sub

Step 4: The Sorting Issue

At one point, a simple task – sorting a list of records – became the biggest roadblock.

The macro crashed with:

“Too few arguments to function”

and later:

“Argument #1 ($value) must be of type Countable|array, string given.”

The culprit?

Merged cells. Excel’s sorting engine simply refuses to work on merged ranges.

After some minutes of debugging, I rewrote the routine:

‘ Visual Basic

.SortFields.Clear
.SortFields.Add2 _
    Key:=rendezni.Range("L37:L66"), _
    SortOn:=xlSortOnValues, _
    Order:=xlAscending, _
    DataOption:=xlSortNormal
.SetRange rendezni.Range("A37:N66")
.Header = xlNo

Once I unmerged the range and used the modern .Add2 method, the problem disappeared.

That fix wasn’t just a patch – it was a reminder: Excel doesn’t forgive structural shortcuts.

Step 5: Connecting It All

After that, the system finally worked seamlessly:

• New programs can be created from templates
• Data flows from daily logs to forecasts
• Reports are updated automatically with one click
• And every farm’s lifecycle is reflected in a single file

It’s not just an Excel file anymore – it’s a data-driven management tool.

What I Learned

• Merged cells are the enemy of automation.
• VBA macros need a clear separation between data, logic, and output sheets.
• Building an ERP-like system in Excel is absolutely possible – if you respect structure.
• Every small bug (like that sorting issue) hides a deeper design lesson.

Final Thoughts

What started as a weekend experiment became a living ecosystem for animal health management.

This project taught me that even inside the “limited” world of Excel, there’s room for real engineering.

You just need to think like a developer – and debug like one too.

The post [4] How I Built an Excel System to Manage Animal Health Tasks first appeared on Digital Nomad Blog.

Place four option buttons on a WordPress page. Each button represents an Ft/m² price. Combine it with a slider that sets the square meters, and display the total cost instantly.

That was the initial scope – simple enough on paper.
But as usual, real development begins where simplicity ends.

Step 1: From Idea to Specification

Before writing a single line of code, I turned the initial concept into a development specification.

This meant clarifying every detail with the client – what exactly needed to happen when each element was changed, and what additional logic would be required behind the scenes.

During this conversation it became clear that we weren’t just calculating price per square meter.

There was another component involved – a device called the “distributor ring”.

Its quantity also influenced the final price, which meant that the calculator had to integrate an additional pricing table based on the number of these units.

So the project evolved from a two-element formula into a more complex multi-field pricing model, where logic, thresholds, and dynamic values all interacted.

Step 2: Choosing the Right Plugin

Initially, I tested three plugins for the job:

• Cost Calculator Builder
• Calculated Fields Form
• Forminator

The Cost Calculator Builder looked great visually, but as soon as I tried to set up the core calculations, I hit a limitation – all logic-based features were locked behind the Pro version.

Since the goal was to build a fully functional calculator using only free tools, I switched to Calculated Fields Form.

This plugin turned out to be incredibly flexible. It allows custom JavaScript formulas, conditional logic, and even user-defined functions – all within the free tier.

Step 3: Implementing the Dynamic Logic

The core logic was simple in concept:

• Select an option (price per m²)
• Set the square meters (via slider)
• Define the number of distributor ring units
• Multiply, adjust, and display the result instantly

At first, the function looked like this:

// Javascript

(function(){
IF(fieldname7>0) return 30500;
IF(fieldname7>2) return 35750;
IF(fieldname7>3) return 40000;
})();

It worked – but it was repetitive, hard to maintain, and far from elegant.
So I restructured it into a clean, scalable JavaScript function that uses threshold bands instead of stacked conditions:

// Javascript

(function () {
var x = +fieldname7 || 0;

var bands = [
{ t: 11, p: 88000 },
{ t: 10, p: 81000 },
{ t: 9, p: 74000 },
{ t: 8, p: 68000 },
{ t: 7, p: 62800 },
{ t: 6, p: 57000 },
{ t: 5, p: 50600 },
{ t: 4, p: 47000 },
{ t: 3, p: 40000 },
{ t: 2, p: 35750 },
{ t: 0, p: 30500 }
];

for (var i = 0; i < bands.length; i++) {
if (x > bands[i].t) return bands[i].p;
}

return 0;
})();

This version allowed the calculator to dynamically select the appropriate price based on the “osztókör” count – effectively turning a static form into a small, reactive pricing engine.

Step 4: Testing and Fine-Tuning

Once the logic was implemented, I tested edge cases – what happens if no option is selected, if the slider is at minimum or maximum, or if invalid input is entered.

The plugin handled it gracefully. The form dynamically updated the total price in real time without page reloads.

With just a few more field connections and a bit of CSS fine-tuning, the calculator was ready to go live.

What I Learned

• Even the simplest-looking calculator hides layers of logic once real client requirements surface.
• Calculated Fields Form is a powerful, underrated plugin for free dynamic calculations in WordPress.
• Structuring logic into data-driven “bands” (thresholds and prices) makes the code cleaner and far easier to maintain.
• Client clarification is key – turning a vague request into a technical specification prevents confusion later.

Final Thought

What started as “four option buttons and a slider” turned into a small but satisfying piece of engineering.

It reminded me that in web development, the real skill lies not in complexity – but in clarity: knowing what the client truly needs, choosing the right tool, and writing logic that feels simple, even when it isn’t.

The post [3] Setting Up a Visual Calculator in WordPress first appeared on Digital Nomad Blog.

When you build websites for a living, you eventually face the same paradox I did: Your optimization plugin becomes the bottleneck.

That’s exactly what happened to me while optimizing my WordPress site – online-dentist.hu. This post is a deep-dive case study of how I went from “cache doesn’t work at all” to a fast, stable, and fully automated setup, combining the best of modern WordPress performance practices.

The Background

My site was running WP Rocket, one of the most popular speed optimization plugins.
However, despite correct configuration and a valid license, the cache never activated.

The response headers always returned:

# yaml

cache-control: no-cache, no-store, must-revalidate
x-powered-by: PHP/8.4.12

The WP Rocket “Cache” tab was missing, and even though the plugin created cache files under
/wp-content/cache/wp-rocket/, the server never served them.
So began a deep technical journey into headers, .htaccess rules, and server-level cache control.

Step 1: Debugging WP Rocket

Over several rounds of testing, I:

• verified headers through DevTools and WebPageTest,
• inspected .htaccess, advanced-cache.php, and wp-config.php,
• reinstalled WP Rocket cleanly,
• and even wrote a custom PHP header plugin to override Cache-Control.

Despite all this, the cache remained inactive – no x-rocket-cache: hit, no static file delivery.

The final clue came from my hosting provider’s support team:

“Your server uses Apache. LiteSpeed (Accelerate WP) is available, but the Rocket rewrite rules won’t apply here.”

In other words, WP Rocket was operating in PHP-only mode – optimizing assets, but not caching statically.

Step 2: Switching to LiteSpeed Cache

Following the provider’s advice, I activated Accelerate WP, which is essentially LiteSpeed Cache. Initially, I was optimistic – the plugin integrated well, and PageSpeed scores jumped slightly.

However, when inspecting response headers, I saw:

# yaml

x-litespeed-cache-control: no-cache
x-litespeed-server-type: NONE

That second line said it all:

The site wasn’t running on a real LiteSpeed server – it was still Apache behind the scenes. The plugin worked only as a frontend optimizer, not as a true server-level cache.

Step 3: The Aha Moment: W3 Total Cache

So I made a final switch to W3 Total Cache, a plugin I had used many years ago –
and it instantly clicked (literally).

The response headers finally looked like this:

# yaml

cache-control: max-age=3600, public
etag: "44af3fc372e6e07881169370dc86fed2"
last-modified: Wed, 15 Oct 2025 10:50:41 GMT
x-powered-by: W3 Total Cache/2.8.1

At last – proper caching, full gzip compression, and predictable static file handling.

WebPageTest confirmed it:

It wasn’t just faster – it was consistent.

Step 4: Fixing Mobile and Post Pages

After celebrating, I noticed a new issue: Blog post pages sometimes failed to load on mobile devices.

The reason?

By default, W3 Total Cache serves a single static HTML version for all devices – unless you manually enable Mobile User Agent Groups.

Solution:

• Navigate to Performance → User Agent Groups.
• Enable “Mobile” and “Create a separate cache group.”
• Purge all caches.

That fixed it instantly – mobile visitors now get their own cached version, and posts render perfectly.

Step 5: Preloading the Cache

By default, W3 builds cache files on first visit, which means the first user after a purge always triggers a slow load.

To automate this, I enabled:

• Automatic page cache priming (sitemap preload) under Performance → Page Cache
• Sitemap: https://online-dentist.hu/sitemap.xml
• Interval: every 15 minutes, 20 pages per batch

Additionally, I tested WP Warm Cache, a simple but powerful plugin that preloads all URLs in the background.

Now, the cache stays warm 24/7 – even when no one visits.

Results & Key Takeaways

After the final setup:

• TTFB: 0.4–0.6 s
• LCP: < 2.5 s
• Speed Index: ~4 s
• Mobile PageSpeed: 90+ consistently
• Server load: Stable, low CPU usage

What I Learned

• Not all cache plugins can work on every server.
  • WP Rocket expects write access and proper .htaccess rewriting – not always possible on shared Apache hosting.
• LiteSpeed Cache ≠ LiteSpeed Server.
  • Unless your host runs LSWS or OLS, the plugin can’t deliver cached HTML.
• W3 Total Cache remains a powerhouse
  • especially for Apache-based WordPress sites that need predictable caching and full control.
• Always verify with response headers, not assumptions.
  • The truth is in cache-control and x-powered-by.
• Preload is everything.
  • A cache is only useful if it’s ready before your visitors arrive.

Final Thought

It took patience, dozens of tests, and some friendly frustration, but I finally turned a stubborn WordPress install into a finely tuned, high-performing system.

The takeaway?

Speed doesn’t come from a single plugin – it comes from understanding how they interact with your server.

The post [2] From Cache Chaos to Performance Clarity first appeared on Digital Nomad Blog.

If you’re facing “it used to work on their machine,” grab a coffee. Here’s the field guide I wish I had.

The Starting Point

What I had

• Source tree: src, node_modules (stale), dist (old build), plus angular.json, package.json, tsconfig*, etc.
• Tooling installers mentioned by the previous dev: Node 20.10.0, VS Code 1.85.
• Windows 10.

What I actually used

• nvm-windows to manage Node versions.
• Node 16.20.2 for maximum compatibility with older Angular/Webpack stacks.
• VS Code with Angular Language Service, ESLint, Prettier.
• Why Node 16? Older Angular toolchains can be allergic to OpenSSL 3 (Node 18/20). Node 16 is the “safe mode” for legacy builds.

Step 1: Clean, Predictable Tooling

# Powershell

# Install and select Node 16
nvm install 16.20.2
nvm use 16.20.2
node -v
npm -v

In VS Code, I enabled Format on Save with Prettier and kept ESLint fixes on save. Not strictly required—but little guardrails help.

Step 2: Fresh Dependencies

Old node_modules is not a time capsule—it’s drift. I removed it and reinstalled:

# Powershell

rd -r -fo node_modules 2>$null
del package-lock.json 2>$null
npm install

If your first npm install fails with peer dependency noise (mine did: jasmine-core vs karma-jasmine-html-reporter), you have two options:

• Quick unblock:

npm install --legacy-peer-deps

• Clean fix: bump the offending dev deps to compatible ranges (e.g., jasmine-core >= 3.8).

I went “quick unblock” to get the project running, then circled back for tidying.

Step 3: ng serve… and the Unexpected Traps

Trap A — The NODE_OPTIONS flag

I initially had –openssl-legacy-provider baked into npm scripts. With Node 16 that flag is not allowed.
Fix: remove it from package.json scripts and from your shell:

# Powershell

# package.json scripts → keep it simple
"start": "ng serve -o",
"build": "ng build --configuration=production"

# clear in the current shell
$env:NODE_OPTIONS = $null

Trap B — Webpack hates ! in paths

Webpack treats the exclamation mark as loader syntax. My project sat in a folder like:

A:\!_work\…\…\

Fix: move the project to a path without ! or spaces, e.g.:

A:\work\…\…\

Then reinstall once to clear cached absolute paths:

# Powershell

rd -r -fo node_modules 2>$null
del package-lock.json 2>$null
npm install

Trap C — “Can’t resolve ‘querystring’”

Legacy dev-server tried to load querystring (a Node core polyfill no longer auto-provided).

Fix: install the browser-friendly package:

# Powershell

npm i querystring

(If you hit more missing shims like url, buffer, util, add them similarly. In my case only querystring was needed.)

After these, ng serve -o finally launched on http://localhost:4200

Step 4: Production Build & Windows-ism

The first prod build succeeded. The second threw:

# bash

EPERM: operation not permitted, mkdir '...\dist\SOMETHING'

That’s Windows blocking writes (locked folder, Defender’s Controlled Folder Access, sync client, or a stale Node process).

Fix checklist

1. Kill dev server: Ctrl+C (then Y if prompted).

Optionally nuke stray processes:

# Powershell

taskkill /IM node.exe /F 2>$null

2. Remove dist cleanly:

# Powershell

cmd /c 'attrib -r -h -s dist\* /s /d' 2>nul
Remove-Item .\dist -Recurse -Force 2>$null

3. Rebuild:

# Powershell

npm run build

4. As a workaround, you can output elsewhere:

# Powershell

npx ng build --configuration=production --output-path .\build-out

If Defender’s Ransomware Protection is on, either add node.exe, VS Code, and your project folder as allowed apps/paths, or temporarily disable that protection for the build.

Deploy: What to Upload

Only upload the contents of dist/<project-name>/ (HTML/JS/CSS/assets).

Don’t upload src, node_modules, or config files.

If your site lives under a sub-path (e.g., /app/), build with:

# Powershell

npx ng build --configuration=production --base-href /app/ --deploy-url /app/

If you use Angular Router and direct links 404 on the server, add a rewrite so unknown routes fall back to index.html.

What I Learned

• Pin a Node LTS that matches your toolchain. Node 16 is a lifesaver for older Angular/webpack stacks.
• Paths matter. Avoid special characters (!, ?, #) and spaces in project paths on Windows.
• Legacy polyfills are not automatic. If dev-server barks for querystring (or friends), add the package explicitly.
• Windows can lock folders. Kill stray Node processes, clear dist, and watch Defender/backup tools.
• Keep scripts boring. The fewer environment flags in package.json, the fewer “it works on my shell” mysteries.

Copy-Paste Quickstart

# Powershell

# 1) Node
nvm install 16.20.2
nvm use 16.20.2
$env:NODE_OPTIONS = $null

# 2) Fresh deps
rd -r -fo node_modules 2>$null
del package-lock.json 2>$null
npm install

# 3) Dev
npm run start # http://localhost:4200

# If 'querystring' error:
npm i querystring
npm run start

# 4) Prod build
# (close dev server first: Ctrl+C)
cmd /c 'attrib -r -h -s dist\* /s /d' 2>nul
Remove-Item .\dist -Recurse -Force 2>$null
npm run build

# 5) Deploy
# Upload the contents of dist/<project-name>/ via FTP/SFTP

Final Thought

Resurrecting an old Angular app isn’t about luck; it’s about sequencing: pick the right Node, clean your deps, remove magical flags, and keep the path clean. Once you tame those three, most of the “mysterious” build errors disappear—and you can get back to actually building the thing.

The post [1] Reviving a “Lost” Angular Dev Environment on Windows (2025) first appeared on Digital Nomad Blog.