brozra

@luciamarinescu I think @galbaras originally wanted the 4,6,8,10,12 options along with a non-selectable blank or “filler” option above those options. At least that’s how I eventually interpreted his original question. As far as what what you proposed, absolutely it works, but it’s not what he wanted.

In the heydays of the Internet ( back in the 1990’s ) it was necessary to add further options / instructions on just about everything to make it easier for non-technical people to understand what an element on a website page was for. So a disabled “Choose an option” option at the top of a select element is a throwback from the past to help people identify what is clickable and what is not. Some people just prefer to have those there.

I installed the latest version of PPOM v32.0.8 (free plugin only – no Pro plugin installation) on a WordPress v6.2.2 install with WooCommerce v7.8.1 and an unmodified Storefront theme (v4.3.0) on my local development server. I’m not sure when the custom class “ppom-option_{data_name}” was added to each standard select element option but it’s there now with the latest version of PPOM.

This is what I see when I inspect the option element on my dev site with the “Choose an option” option:

<option value="Choose an option" class="ppom-option-choose_an_option ppom-simple-option " data-price="" data-optionid="choose_an_option" data-percent="" data-label="Choose an option" data-title="Style" data-onetime="" data-taxable="" data-without_tax="" data-data_name="style" data-option_weight="" selected="selected" disabled="">Choose an option</option>

Your website clearly doesn’t show that so you must be on an older version of PPOM.

Go with your other solution but wrap it with $(document).ready and that should fix you up.

jQuery(function($) {
	$(document).ready(function(){
		$('.ppom-field-wrapper select > option').each(function() {
			if ($(this).text() === 'Choose an option') { $(this).prop('disabled',true); }
		});
	});
});

This works, at least in a test dev environment with just WooCommerce, PPOM and a code snippet plugin.

jQuery(function($) {
	$(document).ready(function(){
		$('.ppom-option-choose_an_option').each(function() {
			$(this).prop('disabled',true); 
		});
	});
});

And don’t forget to purge your cache!

• This reply was modified 1 year, 5 months ago by brozra. Reason: didn't need the if statement due to PPOM code naming convention
• This reply was modified 1 year, 5 months ago by brozra. Reason: additional suggestion

That should work for the disabling of the options that contain that specific text. You might have a JS conflict / error somewhere on your website.

You could also try wrapping it with $(document).ready to wait until the DOM has finished loading.

$(document).ready(function(){
$('.ppom-field-wrapper select > option:first-child').each(function() {
	if ($(this).text() === 'Choose an option') {
		$(this).prop('disabled',true);
	}
});
});

Off the top of my head & untested…

jQuery(function ($) {
    $("select > option").each(function(i,v){
        if ($(v).text() === "Choose an option") {
            $(v).prop('disabled',true);
        }
    });
});

I don’t know if there is a shortcode that will get you all the PPOM data stored with a particular product in one convenient call. I haven’t checked the source code but I doubt it exists.

You can, however, get the data from the WooCommerce cart array by looping through the WC cart array like so:

foreach (WC()->cart->get_cart() as $cart_item_key => $cart_item) {
$ppom_data = $cart_item["ppom"]["fields"];
var_dump($ppom_data);
}

The code above will give you a visual reference to the data stored when a customer uses the PPOM plugin fields on a product. So if you have a PPOM option called “size” then you should be able to reference it by using $cart_item["ppom"]["fields"]["size"]. If the data you want to reference has a space in the PPOM field name, then replace the spaces with underscores. Use the data name that PPOM generates when you save a field.

This is just an example of how to reference and find how the data is stored in the cart. This code shouldn’t be used anywhere on a production website open to the public.

BUMP, +1, #metoo

I’ve noticed this as well. Ever since ThemeIsle took over the PPOM plugin the “pre-selection” field in the PPOM meta groups don’t work as expected for HTML select elements. And of course it won’t show the updated price on page load because the pre-selection function clearly isn’t being done before theppom_update_option_prices() call.

The only solution I have found is to create custom scripts to pre-select the proper option in each select field after the DOM has finished loading and then run the PPOM price calculation script again. A fix for this would be appreciated since it is an available option for select elements in PPOM meta.

Also, @galbaras, what you are trying to do with the “Choose an option” can’t be done with the PPOM plugin. There is no way to disable an option within a select element within a PPOM meta group. You would have to do it programmatically with JavaScript / jQuery. It would be a nice feature to have though, hint hint @themeisle.

Use “+2d” in the minDate field instead of just “2”. jQuery UI datepicker does have its limitations. You may also have to check the disable past dates as well with the way the script is configured within PPOM right now.

Make sure you have jQuery datepicker selected in the PPOM meta as well.

More information can be found here:
https://api.jqueryui.com/datepicker/#option-minDate

Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

I had forgotten about the defaultDate and a few other specific instances for the minDate. Here is an updated copy of the code that should work for most everyone who uses the jQuery datepicker date meta field in PPOM. This update adds back the “+” and “d”, “w”, “m” or “y” back to the minDate when applying it to the datePicker field. It also adjusts the defaultDate if it is set to the exact same thing as the minDate and will accommodate the change if the date falls on a disabled weekend.

case 'date':
    if ( input.jquery_dp === 'on' ) {

        InputSelector.datepicker("destroy");
        InputSelector.datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: input.date_formats.ppom_js_stripSlashes(),
            yearRange: input.year_range
        });

        if( typeof input.first_day_of_week !== 'undefined' && input.first_day_of_week.trim().length > 0 ){
            var first_day_of_week = input.first_day_of_week.trim();
            InputSelector.datepicker('option', 'firstDay', first_day_of_week);
        }

        if ( typeof input.no_weekends !== 'undefined' && input.no_weekends === 'on' ) {
            InputSelector.datepicker('option', 'beforeShowDay', jQuery.datepicker.noWeekends);
        }

        if ( typeof input.past_dates !== 'undefined' ) {
            if( input.past_dates === 'on' ){
                InputSelector.datepicker('option', 'minDate', 0);
            }
        }

        if( typeof input.min_date !== 'undefined' && input.min_date.trim().length > 0 ){
            var min_date = input.min_date.trim();
            var original_min_date = min_date;

            /* make sure the requested min_date doesn't fall on a weekend in the event noWeekends is set */
            if ( typeof input.no_weekends !== 'undefined' && input.no_weekends === 'on' ) { /* disabling of weekends IS enabled */

                const incrementLetterArray = ["d","w","m","y"];
                var incrementLetterToUse = null;
                for ( var iltu = 0; iltu < incrementLetterArray.length; iltu++ ){
                    if ( min_date.indexOf( incrementLetterArray[iltu] ) > -1 ){
                        incrementLetterToUse = incrementLetterArray[iltu];
                    }
                }
                const futureDate = new Date(); /* today's date for calculation purposes only */

                /* clean out any unnecessary characters from the min_date stored in the DB by the user
                 * this may not anticipate everything the user put in this field. */
                var min_date_int = min_date.replace(/[dwmy\+]/g,'');
                const actualMinDateDay = parseInt( futureDate.getDate() ) + parseInt( min_date_int );
                futureDate.setDate( actualMinDateDay );

                /* add as many days as are needed if the minDate falls on a Saturday / Sunday */
                switch ( futureDate.getDay() /* the numeric day of the week */ ) {
                    case 0: /* add one(1) extra day because the day falls on a sunday */
                        min_date_int = parseInt(min_date_int) + 1; 
                    break;
                    case 6: /* add two(2) extra days because the day falls on a saturday */
                        min_date_int = parseInt(min_date_int) + 2;
                    break;
                }

                // add a plus sign if the original specified min date doesn't start with a minus sign
                if ( min_date.charAt(0) !== "-" ) { min_date = "+"+min_date_int; }

                // add back any increment letter specified in the original min_date
                if  ( incrementLetterToUse !== null ) { min_date = min_date+incrementLetterToUse; }

            } InputSelector.datepicker('option', 'minDate', min_date);
        }

        if ( typeof input.default_value !== 'undefined' && input.default_value.trim().length > 0 ){
            var default_date = input.default_value.trim();

            /* again, we need to check to make sure the date doesn't fall on a weekend if weekends are disabled
             * check to see if disabled weekends is true, the original_min_date is not the same as the min_date
             * that actually gets set after checking for weekend conflicts
             */
            if (
                    /* make sure the user elected to disable weekends */
                    ( typeof input.no_weekends !== 'undefined' && input.no_weekends === 'on' ) && 

                    /* make sure the original_min_date is the same as the user-specified default date */
                    ( original_min_date === default_date ) &&

                    /* check to make sure the original_min_date is not the same as the new min_date */
                    ( original_min_date !== min_date )
            ) {
                console.log("Setting default_date to non-weekend falling min_date.");
                default_date = min_date;
            }

            InputSelector.datepicker('option', 'defaultDate', default_date);
            InputSelector.datepicker('setDate', default_date);
        }

        if ( typeof input.max_date !== 'undefined' ) {
            var max_date = input.max_date.trim();
            InputSelector.datepicker('option', 'maxDate', max_date);
        }
    }
    break;

• This reply was modified 1 year, 6 months ago by brozra.

This has been an issue with PPOM for a very long time. I’m surprised that ThemeIsle didn’t take the time to fix it.

These untranslatable labels are stored in the database and can be set on the PPOM settings page on the General Settings tab and then under the Label Settings.

/wp-admin/admin.php?page=wc-settings&tab=ppom_settings

Just remember that if you use Espa?ol in those labels then it will always be in Espa?ol.

B<span class=”HwtZe” lang=”es”><span class=”jCAhz ChMk0b”><span class=”ryNqvb”>uena suerte</span></span></span>!

If anyone wants to update their site with the minDate as a temporary fix without having to rollback PPOM to a different version, as I have for a client, then add this code in woocommerce-product-addon/js/ppom.inputs.js at line 145 just below the if (input.no_weekends === 'on') { ... } if statement:

if( input.default_value.trim().length > 0){
     var min_date = input.default_value.trim();
     InputSelector.datepicker('option', 'minDate', min_date);
}

Then use the “Default Date” field in your PPOM meta group to add the min date back into the fold. I prefer the relative date (e.g. +10d or +10 for days).

/* ===================== */
I have no idea why @nmedia changed minDate to defaultDate. It isn’t even being used in the JavaScript code to generate the jQuery date field. Also, the example shown in the PPOM meta group doesn’t show the full usage of defaultDate and has incorrect information as well. defaultDate can be a specified date (2022-02-21) or a relative date (+1m +7d). A date format, as shown in the PPOM meta editor of YYYY-MM-DD, won’t work for the defaultDate option.

https://api.jqueryui.com/datepicker/#option-defaultDate

If you aren’t using a child theme then use Code Snippets to add that code. It’s a great plugin to add customized code without having to worry about theme / plugin overrides and a bloated functions.php file.

If you have access to the MYSQL database for the website you can delete the table named ‘wp_nm_personalized’ and it will remove all the meta groups for PPOM. If you chose a different prefix other than ‘wp_’ for your WP database then just look for whatever your prefix is plus ‘nm_personalized’.

Make sure to backup your SQL database before deleting anything just in case you break something and need to restore something. ??

You’re welcome. Glad to help.

Just keep in mind that N-Media may change the PPOM price script in the future and that function may get renamed or even removed ( hopefully not ).

What you are doing is fine to check a checkbox / radio button but you need to update the PPOM price table. The simplest solution would be to add this to the end of your script’s call after the filling / setting of PPOM fields:

ppom_update_option_prices();

Just be sure that your custom script is loaded after PPOM by giving it a lower priority in the WP enqueue.