delivery

content-delivery.php

<?php
add_action('get_footer', function () {
    wp_enqueue_script( 'selectWoo' );
    wp_enqueue_style( 'select2' );
	wp_enqueue_script( 'delivery-js' );
}); ?>
<section class="delivery position-relative">
	<?php
	$bg = get_sub_field('bg');
	if( isset($bg) && !empty($bg) ) {
		echo wp_get_attachment_image($bg, 'full', '', ['class' => 'delivery__bg w-100 h-100']);
	}
	?>
	<div class="delivery__content container position-relative text-center">
        <div class="delivery__form__wrapper">
            <h2 class="h1 font-weight-bold"><?php the_sub_field('title'); ?></h2>
            <h3 class="h4 font-weight-normal"><?php the_sub_field('sub_title'); ?></h3>
            <form class="delivery__form d-flex" method="post" action="#">
                <label class="delivery__form__label d-flex">
                    <span class="sr-only"><?php _e('שם ישוב/עיר', 'mozi'); ?></span>
                    <select name="city"
                            class="delivery__form__input"
                            data-placeholder="<?php _e('שם ישוב/עיר', 'mozi'); ?>">
                        <option></option>
                        <?php $args = [
                            'post_type'         => 'shipping_cities',
                            'posts_per_page'    => -1,
                            'meta_key'          => 'city_type',
                            'meta_value'        => 'shipping',
                            'orderby'           => 'title',
                            'order'           => 'ASC'
                        ];
                        $citiesQuery = new WP_Query($args);
                        if( $citiesQuery->have_posts() ){
                            while ( $citiesQuery->have_posts() ) {
                                $citiesQuery->the_post();
                                //update_field('city_type', 'shipping', get_the_ID());
                                echo '<option>'. get_the_title() .'</option>';
                            }
                            wp_reset_query();
                        }
                        ?>
                    </select>
                </label>
                <button type="submit" class="btn bg-orange delivery__form__submit"><?php _e('בדיקה', 'mozi'); ?></button>
            </form>
        </div>
        <div class="delivery__success" style="display: none;">
            <?php the_sub_field('success'); ?>
        </div>
    </div>
</section>

delivery.js

jQuery(document).ready(function ($) {

    $('.delivery__form__input').selectWoo({
        allowClear: true,
        language: {
            noResults : function () {
                return 'לא נמצאו תוצאות';
            }
        }
    });

    $(document.body).on('submit', '.delivery__form', function (e) {

        e.preventDefault();
        e.stopPropagation();

        if( $('.delivery__form__input').val() ) {
            $('.delivery__form__wrapper').fadeOut(350, function (){
                $('.delivery__success').fadeIn();
            });

        }

    });

});

delivery.scss

@import '../scss/vars';
@import '../scss/mixin';

.delivery {
	padding: calcPercentVw(140) 0 calcPercentVw(200);
	h2 {
		margin-bottom: 0.1em;
	}
	&__bg {
		position: absolute;
		left: 0;
		top: 0;
		object-fit: cover;
	}
	&__form {
		width: 90%;
		max-width: 704px;
		height: 60px;
		padding: 0;
		border: 0;
		border-radius: 30px;
		margin: 70px auto 0;
		background: $white;
		&__label {
			width: calc(100% - 84px);
			margin: 0;
			padding: 0 4px 0 22px;
			@media all and (min-width: 576px) {
				width: calc(100% - 114px);
			}
			@media all and (min-width: 768px) {
				width: calc(100% - 154px);
			}
			@media all and (min-width: 1024px) {
				width: calc(100% - 194px);
			}

			.select2-container {
				margin-top: 0 !important;
			}
			.select2-container--default .select2-selection--single {
				background: transparent;
				border: 0;
				border-radius: 0;
				height: 100%;
			}
			.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
				height: 58px;
				display: flex;
				align-items: center;
			}
			.select2-container--default .select2-selection--single .select2-selection__arrow {
				display: none;
			}
		}
		&__input {
			background: $white !important;
			color: $dark_green;
			font-size: 18px;
			padding: 0;
			outline: none;
			width: 100%;
			border: 0;
			-moz-appearance: none;
			-webkit-appearance: none;
			appearance: none;
			border-radius: 0 30px 30px 0;
			&::placeholder {
				color: $grey;
			}
		}
		&__submit {
			width: 84px;
			background: $yellow;
			border-radius: 30px;
			@media all and (min-width: 576px) {
				width: 114px;
			}
			@media all and (min-width: 768px) {
				width: 154px;
			}
			@media all and (min-width: 1024px) {
				width: 194px;
			}
		}
	}
}

.select2-container {
	margin-top: -20px !important;
	.select2-dropdown {
		border-radius: 0 !important;
	}
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	height: 46px;
	background: $white;
	font-size: 18px;
	padding: 0 10px !important;
	color: $dark_green;
}

.select2-search--dropdown {
	padding: 0 !important;
	background: $white;
}

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: $dark_green !important;
}