Интеграционный виджет Mondial Relay Js

Вопрос или проблема

<!--Подключаем Google Map API-->  
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>  

 <!--Подключаем виджет mondial relay с их серверов-->  
<script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/v3_0/scripts/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>  

$(document).ready(function () {  
       // Загружаем виджет в DIV с id "Zone_Widget" с указанными параметрами  
       // и возвратит выбранный пользователем пункт выдачи в поле с ID "Retour_Widget"  
        $("#Zone_Widget").MR_ParcelShopPicker({     
                Target: "#Retour_Widget", // Селектор JQuery элемента, в который будет возвращен ID выбранного пункта выдачи (обычно скрытое поле ввода)  
                Brand: "BDTEST  ", // Ваш клиентский код Mondial Relay  
                Country: "FR" // ISO код страны из 2 букв, используемый для поиска  
        });  
}); 

add_action('wp_footer', function(){
    if(is_checkout())
    {
    ?>      
    <!--Подключаем Google Map API-->  
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>  

    <!--Подключаем виджет mondial relay с их серверов-->  
    <script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/v3_0/scripts/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>  
    <script>
    $(document).ready(function () {  
        // Загружаем виджет в DIV с id "Zone_Widget" с указанными параметрами  
        // и возвратит выбранный пользователем пункт выдачи в поле с ID "Retour_Widget"  
        $("#Zone_Widget").MR_ParcelShopPicker({     
                Target: "#Retour_Widget", // Селектор JQuery элемента, в который будет возвращен ID выбранного пункта выдачи (обычно скрытое поле ввода)  
                Brand: "BDTEST  ", // Ваш клиентский код Mondial Relay  
                Country: "FR" // ISO код страны из 2 букв, используемый для поиска  
        });  
    }); 
    </script>
    <?php
    }
});

Ответ или решение

Интеграция виджета Mondial Relay JS: Полное руководство

Если вы намереваетесь интегрировать код Mondial Relay на ваш веб-сайт, в частности на страницу оформления заказа, данный гид поможет вам сделать это правильно и эффективно.

Шаг 1: Понимание кода

Вы предоставили следующий код для интеграции:

<!--On charge Google Map API-->  
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>  

<!--On charge le widget mondial relay depuis leurs serveurs-->  
<script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/v3_0/scripts/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>  

$(document).ready(function () {  
    $("#Zone_Widget").MR_ParcelShopPicker({     
        Target: "#Retour_Widget", // ID элемента, куда будет возвращен ID выбранного пункта
        Brand: "BDTEST", // Ваш код клиента Mondial Relay  
        Country: "FR" // Код ISO 2 буквы используемого для поиска  
    });  
});

Шаг 2: Добавление кода в WordPress

Если вы работаете с WordPress и хотите интегрировать виджет Mondial Relay на страницу оформления заказа, вам нужно добавить код в файл functions.php вашей темы. Вот как это сделать:

1. Откройте файл functions.php вашей активной темы.
2. Добавьте следующий код:

add_action('wp_footer', function(){
    if(is_checkout())
    {
    ?>
        <!--On charge Google Map API-->  
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>  

        <!--On charge le widget mondial relay depuis leurs serveurs-->  
        <script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/v3_0/scripts/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>  
        <script>
        $(document).ready(function () {  
            $("#Zone_Widget").MR_ParcelShopPicker({     
                Target: "#Retour_Widget", 
                Brand: "BDTEST", // Убедитесь, что заменили на ваш код клиента
                Country: "FR" 
            });  
        }); 
        </script>
    <?php
    }
});

Шаг 3: Добавление необходимых HTML-элементов

Для корректной работы виджета вам также необходимо убедиться, что на странице оформления заказа присутствуют HTML-элементы с ID Zone_Widget и Retour_Widget. Например:

<div id="Zone_Widget"></div>
<input type="hidden" id="Retour_Widget" />

Шаг 4: Использование плагина Mondial Relay

Хотя вы можете интегрировать виджет вручную, также рекомендуем использовать официальный плагин Mondial Relay для WooCommerce, который вы можете найти по следующей ссылке: Mondial Relay WooCommerce Plugin. Этот плагин может значительно упростить процесс интеграции и управления доставкой, предлагая более полный функционал и меньшую вероятность ошибок.

Полезные советы

• Убедитесь, что у вас есть актуальная версия jQuery, так как виджет построен на этой библиотеке.
• Тестируйте виджет на разных браузерах и устройствах, чтобы убедиться в его правильной работе.
• Настройте параметры в функции MR_ParcelShopPicker согласно вашим требованиям, особенно код клиента (Brand) и страну (Country).
• Проверьте консоль разработчика на наличие ошибок JavaScript, если виджет не работает должным образом.

Заключение

Интеграция виджета Mondial Relay может значительно улучшить опыт ваших клиентов, предлагая удобные варианты доставки. Следуя описанным шагам, вы сможете эффективно настроить виджет на вашем сайте. Не забывайте о регулярном обновлении плагина и проверки его совместимости с вашей темой и другими установленными плагинами.