Отобразить пользовательскую форму выбора в окне «Быстрый просмотр» в WooCommerce

Question

Я использую код, который на странице редактирования продукта показывает флажок «Уровень жаркого». Когда менеджер нажимает на этот флажок, на странице отдельного продукта появляется поле выбора, позволяющее клиенту выбрать «Уровень обжарки».

При выборе и добавлении продукта в корзину появляется выбранное значение в самой корзине. Это значение также отображается на странице оформления заказа, на странице «Спасибо», в заказе, в уведомлении по электронной почте и на странице редактирования заказа в панели администратора.

Вот код:

// Display Checkbox Field
add_action('woocommerce_product_options_general_product_data', 'roast_custom_field_add');

function roast_custom_field_add() {
    global $post;

    // Checkbox
    woocommerce_wp_checkbox(
            array(
                    'id' => '_roast_checkbox',
                    'label' => __('Roast Level', 'woocommerce'),
                    'description' => __('Enable roast level', 'woocommerce')
            )
    );
}

// Save Checkbox Field
add_action('woocommerce_process_product_meta', 'roast_custom_field_save');

function roast_custom_field_save($post_id) {
    // Custom Product Checkbox Field
    $roast_checkbox = isset($_POST['_roast_checkbox']) ? 'yes' : 'no';
    update_post_meta($post_id, '_roast_checkbox', esc_attr($roast_checkbox));
}

/*---------------------------------------------------------------
*Display Select Box
---------------------------------------------------------------*/
add_action( 'woocommerce_before_add_to_cart_button', 'add_roast_custom_field', 0 );
function add_roast_custom_field() {
    global $product;

    // If is single product page and have the "roast_checkbox" enabled we display the field
    if ( is_product() && $product->get_meta( '_roast_checkbox' ) === 'yes' ) {

        echo '<div class="roast_select">';

        $select = woocommerce_form_field( 'roast_custom_options', array(
            'type'          => 'select',
            'class'         => array('my-field-class form-row-wide'),
            'label'         => __('Roast Level'),
            'required'      => false,
            'return'       => false,
            'options'   => array(
                ''      => 'Please select',
                'Blue'  => 'Blue',
                'Rare'  => 'Rare',
                'Medium Rare'   => 'Medium Rare',
                'Medium'    => 'Medium',
                'Medium Well'   => 'Medium Well',
                'Well Done' => 'Well Done'
            )
        ), '' );
        echo $select;
        echo '</div>';
    }
}
/*---------------------------------------------------------------
* Add as custom cart item data
---------------------------------------------------------------*/
add_filter( 'woocommerce_add_cart_item_data', 'add_custom_cart_item_data', 10, 21 );
function add_custom_cart_item_data($cart_item_data, $product_id, $variation_id ){

    if( isset( $_POST['roast_custom_options'] ) ) {
        $cart_item_data['roast_option'] = wc_clean( $_POST['roast_custom_options'] );
    }
    return $cart_item_data;
}
/*---------------------------------------------------------------
* Add custom fields values under cart item name in cart
---------------------------------------------------------------*/

add_filter( 'woocommerce_cart_item_name', 'roast_custom_field', 10, 21 );
function roast_custom_field( $item_name, $cart_item, $cart_item_key ) {
    if( ! is_cart() )
        return $item_name;

    if( isset($cart_item['roast_option']) ) {
        $item_name .= '<br /><div class="my-custom-class"><strong>' . __("Roast Level", "woocommerce") . ':</strong> ' . $cart_item['roast_option'] . '</div>';
    }
    return $item_name;
}

/*---------------------------------------------------------------
* Display roast custom fields values under item name in checkout
---------------------------------------------------------------*/

add_filter( 'woocommerce_checkout_cart_item_quantity', 'roast_custom_checkout_cart_item_name', 10, 21 );
function roast_custom_checkout_cart_item_name( $item_qty, $cart_item, $cart_item_key ) {
    if( isset($cart_item['roast_option']) ) {
        $item_qty .= '<br /><div class="my-custom-class"><strong>' . __("Roast Level", "woocommerce") . ':</strong> ' . $cart_item['roast_option'] . 'гр.</div>';
    }
    return $item_qty;
}

/*---------------------------------------------------------------
* Save chosen slelect field value to each order item as custom meta data and display it everywhere
---------------------------------------------------------------*/
add_action('woocommerce_checkout_create_order_line_item', 'save_order_item_product_fitting_color', 10, 21 );
function save_order_item_product_fitting_color( $item, $cart_item_key, $values, $order ) {
    if( isset($values['roast_option']) ) {
        $key = __('Roast Level', 'woocommerce');
        $value = $values['roast_option'];
        $item->update_meta_data( $key, $value ,$item->get_id());
    }
}   

add_action('wp_footer','add_footer_script');
function add_footer_script(){
    ?>
    <script>
       jQuery('#roast_custom_options').on('change',function(){
           var roast_level = jQuery(this).val();
           /*console.log(roast_level); */
           var button = jQuery(this).closest('form').find('.add_to_cart_button'); console.log(button); 
           jQuery(button).attr('data-roast_custom_options',roast_level);
        });

    </script>
    <?php
}

Мне нужно добавить форму выбора «Уровень обжарки» в окно быстрого просмотра, в файл content-product-quick-view. php.

При добавлении кода появились ошибки. Форма не отображается, или кнопка «Добавить в корзину» исчезает.

global $product;

// If is single product page and have the "roast_checkbox" enabled we display the field
if ( $product->get_meta( '_roast_checkbox' ) === 'yes' ) {

    echo '<div class="roast_select">';

    $select = woocommerce_form_field( 'roast_custom_options', array(
        'type'          => 'select',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Roast Level'),
        'required'      => false,
        'return'       => false,
        'options'   => array(
            ''      => 'Please select',
            'Blue'  => 'Blue',
            'Rare'  => 'Rare',
            'Medium Rare'   => 'Medium Rare',
            'Medium'    => 'Medium',
            'Medium Well'   => 'Medium Well',
            'Well Done' => 'Well Done'
        )
    ), '' );
    echo $select;
    echo '</div>';
}

В результате я не смог поместить этот код в файл php. Возможно, здесь необходимо добавить дополнительный код. И я прошу вашей помощи.

Answer 1

Измените ваш сценарий на add_footer_script следующим образом:

( function( $ ) {
   $( document ).ready( function() {
       $(document).on('change', '#roast_custom_options' ,function() {
           $('.add_to_cart_button').data('roast_custom_options', this.value)
       });
   });
 }( jQuery ) );

, если вы используете ajax, вы должны подписаться через родительский контейнер или документ. Для передачи настраиваемого поля используется атрибут данных.

Answer 2

В этом шаблоне уже есть переменная product, и вы изменили ее обозначение. Удалите global $product из него код, который вы добавили в файл content-product-quick-view. php, и вам будет хорошо до go.