在Woocommerce结帐中添加弹出窗口和基于国家/地区的自定义消息 [英] Add pop up and a custom message based on country in Woocommerce checkout

问题描述

我正在使用以下代码，当客户选择国家/地区时，该代码很好地将消息添加到woocommerce结帐中.但我也想使用此短代码添加一个弹出窗口

I am using the below code which works well to add a message to the woocommerce checkout when customers choose a country. But i also want to add a pop up using this shortcode

echo do_shortcode('[sg_popup id=3839] ');

但是当我将其添加到短信下方时，总是显示弹出窗口，即是否添加以下内容

But when i add it below the text message the pop up always shows, i.e. if i add the following

`echo '<div class="shipping-notice woocommerce-info"   style="display:none">Please allow 5-10 business days for delivery after order processing.'; echo do_shortcode('[sg_popup id=3839] '); echo '</div>'

我想像是因为它只是隐藏代码，所以它实际上正在运行简码?但是我还有其他选择吗?

I imagine its because it is only hiding the code so it is actually running the shortcode? But what other options do I have?

感谢您的帮助.

add_action( 'woocommerce_before_checkout_billing_form', 'display_shipping_notice' );
function display_shipping_notice() {
    echo '<div class="shipping-notice woocommerce-info" style="display:none">Please allow 5-10 business days for delivery after order processing.</div>';
}

add_action( 'woocommerce_after_checkout_form', 'show_hide_shipping_notice' );
function show_hide_shipping_notice(){
    ?>
    <script>
        jQuery(document).ready(function($){
            // Set the country code (That will display the message)
            var countryCode = 'FR';

            $('select#billing_country').change(function(){
                selectedCountry = $('select#billing_country').val();

                if( selectedCountry == countryCode ){
                    $('.shipping-notice').hide();
                }
                else {
                    $('.shipping-notice').show();
                }
            });
        });
    </script>
    <?php
}

推荐答案

以下代码将根据所选国家/地区显示或隐藏自定义装运通知(该代码同时处理开票和装运国家/地区)…

The following code will show or hide a custom shipping notice depending on the chosen country (the code handle both billing and shipping country)…

要替换您的简码，您可以使用弹出窗口，例如使用 Sweet Alert 2 (灯箱):

To replace your shortcode, you can use instead a popup like using Sweet Alert 2 (a lightbox):

// Displaying a custom shipping notice
add_action( 'woocommerce_checkout_before_customer_details',  'checkout_country_shipping_notice' );
function checkout_country_shipping_notice() {
    ?>
    <style>.shipping-notice.hidden{display:none;}</style>
    <?php
    $country = WC()->customer->get_shipping_country();
    $country = empty($country) ? WC()->customer->get_billing_country() : $country;

    $text  = __("Please allow 5-10 business days for delivery after order processing.", "woocommerce" );
    $class = 'woocommerce-info shipping-notice';

    // Hidden if France or empty
    if( empty($country) || $country == 'FR' )
        $class .= ' hidden';

    echo '<div class="'.$class.'">'.$text.'</div>';
}

// The jQuery code to show / hide the custom shipping notice
add_action( 'wp_footer', 'checkout_country_script' );
function checkout_country_script() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):
    ?>
    <script src="https://unpkg.com/sweetalert2@8.8.1/dist/sweetalert2.all.min.js"></script>
    <script src="https://unpkg.com/promise-polyfill@8.1.0/dist/polyfill.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
        var fc  = 'form.checkout',              sn = '.shipping-notice',
            bc  = 'select#billing_country',     sc = 'select#shipping_country',
            sda = 'input#ship-to-different-address-checkbox';

        // Function that show hide the shipping notice
        function showHideNotice(t){
            if( $(t).val() == 'FR' || $(t).val() == undefined ){
                $(sn).hide( function(){
                    $(this).removeClass('hidden');
                });
            } else {
                $(sn).hide( 'fast', function(){
                    if( ! $(this).hasClass('hidden') )
                        $(this).addClass('hidden');
                    $(sn).show();

                    // Add a Sweet alert 2 popup
                    swal({
                        title:  '<?php _e("Custom popup title", "woocommerce"); ?>',
                        text:   '<?php _e("This is the text for my popup", "woocommerce"); ?>',
                        type:   'info' // can be: warning, error, success, info or question
                    });
                });
            }
        }

        // Billing and shipping country change
        $(bc+','+sc).change(function(){
            if($(sda).prop('checked'))
                showHideNotice(sc);
            else
                showHideNotice(bc);
        });
    });
    </script>
    <?php
    endif;
}

代码进入您的活动子主题(或活动主题)的function.php文件中.经过测试，可以正常工作.

Code goes in function.php file of your active child theme (or active theme). Tested and works.

这篇关于在Woocommerce结帐中添加弹出窗口和基于国家/地区的自定义消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！