{"id":7544,"date":"2025-05-03T05:40:11","date_gmt":"2025-05-03T05:40:11","guid":{"rendered":"https:\/\/reluggz.com\/?page_id=7544"},"modified":"2025-05-29T17:21:38","modified_gmt":"2025-05-29T17:21:38","slug":"ship-my-luggage","status":"publish","type":"page","link":"https:\/\/reluggz.com\/it\/ship-my-luggage\/","title":{"rendered":"Spedire Il Mio Bagaglio"},"content":{"rendered":"<div class=\"packlink-custom-shipping-container\">\n    <h2 class=\"packlink-form-title\">Calculate Shipping<\/h2>\n\n    <form id=\"packlink-custom-shipping-form\">\n        <input type=\"hidden\" id=\"packlink_nonce\" name=\"packlink_nonce\" value=\"dd07a2d7b2\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/it\/wp-json\/wp\/v2\/pages\/7544\" \/>                <input type=\"hidden\" id=\"packlink-ajax-nonce\" value=\"c63a3fa28e\">\n\n        <div class=\"progress-tracker\">\n            <div class=\"progress-step active\" data-step=\"1\">\n                <div class=\"step-icon\">1<\/div>\n                <div class=\"step-label\">Route<\/div>\n            <\/div>\n            <div class=\"progress-step\" data-step=\"2\">\n                <div class=\"step-icon\">2<\/div>\n                <div class=\"step-label\">Packages<\/div>\n            <\/div>\n            <div class=\"progress-step\" data-step=\"3\">\n                <div class=\"step-icon\">3<\/div>\n                <div class=\"step-label\">Shipping<\/div>\n            <\/div>\n            <div class=\"progress-step\" data-step=\"4\">\n                <div class=\"step-icon\">4<\/div>\n                <div class=\"step-label\">Details<\/div>\n            <\/div>\n            <div class=\"progress-step\" data-step=\"5\">\n                <div class=\"step-icon\">5<\/div>\n                <div class=\"step-label\">Review<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"form-section active\" id=\"route-section\">\n            <div class=\"section-header\">\n                <h3>Route Information<\/h3>\n                <p>Tell us where your package is going<\/p>\n            <\/div>\n\n            <div class=\"route-options\">\n                <label class=\"route-connect-option\">\n                    <input type=\"checkbox\" id=\"connect-locations\" checked>\n                    <span class=\"route-connect-text\">Connect routes (destination of one route becomes origin of next)<\/span>\n                <\/label>\n            <\/div>\n\n            <div id=\"routes-container\">\n                <!-- Routes will be added here dynamically -->\n            <\/div>\n\n            <div class=\"route-actions\">\n                <button type=\"button\" id=\"add-route\" class=\"btn-add\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-plus\">\n                        <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\n                        <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                    <\/svg>\n                    Add Another Route                <\/button>\n            <\/div>\n\n            <div class=\"form-navigation\">\n                <button type=\"button\" class=\"btn-next\" data-next=\"packages-section\">Continue to Packages<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"form-section\" id=\"packages-section\">\n            <div class=\"section-header\">\n                <h3>Package Details<\/h3>\n                <p>Tell us about what you're shipping<\/p>\n            <\/div>\n\n            <div id=\"packlink-packages-container\">\n                <!-- Packages will be added here dynamically -->\n            <\/div>\n\n            \n            <div class=\"form-navigation\">\n                <button type=\"button\" class=\"btn-prev\" data-prev=\"route-section\">Back<\/button>\n                <button type=\"button\" class=\"btn-next\" data-next=\"shipping-section\">Continue to Shipping Options<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"form-section\" id=\"shipping-section\">\n            <div class=\"section-header\">\n                <h3>Shipping Options<\/h3>\n                <p>Select your preferred shipping method for each route<\/p>\n            <\/div>\n\n            <div id=\"shipping-options-container\">\n                <div class=\"packlink-loading\">\n                    <div class=\"packlink-loading-spinner\"><\/div>\n                    <p>Loading shipping options...<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"form-navigation\">\n                <button type=\"button\" class=\"btn-prev\" data-prev=\"packages-section\">Back<\/button>\n                <button type=\"button\" class=\"btn-next\" data-next=\"details-section\" disabled id=\"shipping-continue-btn\">Continue to Details<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"form-section\" id=\"details-section\">\n            <div class=\"section-header\">\n                <h3>Contact Information<\/h3>\n                <p>Who's sending and receiving the package<\/p>\n            <\/div>\n\n            <!-- Add the contact connection switch -->\n            <div class=\"contact-options\">\n                <label class=\"contact-connect-option\" style=\"display: flex; align-items: center; cursor: pointer;\">\n                    <input type=\"checkbox\" id=\"connect-contacts\" checked style=\"position: relative; width: 40px; height: 20px; margin: 0 10px 0 0; appearance: none; background-color: #ccc; border-radius: 20px; transition: 0.4s; outline: none; cursor: pointer;\">\n                    <span class=\"contact-connect-text\" style=\"user-select: none;\">Connect contacts (recipient of one route becomes sender of next)<\/span>\n\n                <\/label>\n            <\/div>\n\n            <!-- This is the container for per-route contact forms -->\n            <div id=\"route-contacts-container\">\n                <!-- Route contact forms will be added here dynamically -->\n            <\/div>\n\n            <div class=\"form-navigation\">\n                <button type=\"button\" class=\"btn-prev\" data-prev=\"shipping-section\">Back<\/button>\n                <button type=\"button\" class=\"btn-next\" data-next=\"review-section\">Continue to Review<\/button>\n            <\/div>\n        <\/div>\n\n\n        <div class=\"form-section\" id=\"review-section\">\n            <div class=\"section-header\">\n                <h3>Review Your Shipment<\/h3>\n                <p>Check all details before submitting<\/p>\n            <\/div>\n\n            <div class=\"review-summary\">\n                <div class=\"review-item\">\n                    <h4>Routes Information<\/h4>\n                    <div class=\"review-details\" id=\"summary-routes\">\n                        <!-- Route summaries will be inserted here -->\n                    <\/div>\n                <\/div>\n\n                <div class=\"review-item\">\n                    <h4>Package Information<\/h4>\n                    <div class=\"review-details\" id=\"summary-packages\">\n                        <!-- Package summaries will be inserted here -->\n                    <\/div>\n                <\/div>\n\n                <div class=\"review-item\">\n                    <h4>Total Price<\/h4>\n                    <div class=\"review-details\">\n                        <p class=\"total-price\">Total: <span id=\"summary-total-price\"><span class=\"woocs_amount\">&euro;&nbsp;0,00<\/span><\/span><\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"form-navigation\">\n                <button type=\"button\" class=\"btn-prev\" data-prev=\"details-section\">Back<\/button>\n                <button type=\"submit\" class=\"btn-submit\">Checkout<\/button>\n            <\/div>\n        <\/div>\n    <\/form>\n\n    <!-- Route template for JavaScript to clone -->\n    <template id=\"route-template\">\n        <div class=\"route-set\" data-route-index=\"{ROUTE_INDEX}\">\n            <div class=\"route-header\">\n                <h4>Route #{ROUTE_NUMBER}<\/h4>\n                <button type=\"button\" class=\"btn-remove-route\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n                        <path d=\"M3 6h18\"><\/path>\n                        <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"><\/path>\n                        <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"><\/path>\n                        <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"><\/line>\n                        <line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"><\/line>\n                    <\/svg>\n                <\/button>\n            <\/div>\n\n            <div class=\"form-grid\">\n                <div class=\"form-column\">\n                    <h4>Origin<\/h4>\n                    <div class=\"form-group\">\n                        <label for=\"origin_country_{ROUTE_INDEX}\">Country<\/label>\n                        <div class=\"country-search-wrapper\">\n                            <input type=\"text\" class=\"country-search\" id=\"origin_country_search_{ROUTE_INDEX}\" placeholder=\"Search country\" autocomplete=\"off\">\n                            <input type=\"hidden\" name=\"origin_country_{ROUTE_INDEX}\" id=\"origin_country_{ROUTE_INDEX}\" required>\n                            <div class=\"country-options\" id=\"origin_country_options_{ROUTE_INDEX}\"><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"form-group\">\n                        <label for=\"origin_postal_code_{ROUTE_INDEX}\">Postal Code<\/label>\n                        <input type=\"text\" name=\"origin_postal_code_{ROUTE_INDEX}\" id=\"origin_postal_code_{ROUTE_INDEX}\" placeholder=\"Enter postal code\" required>\n                    <\/div>\n                    <input type=\"hidden\" name=\"origin_city_{ROUTE_INDEX}\" id=\"origin_city_{ROUTE_INDEX}\" required>\n\n                    <div class=\"form-group\">\n                        <label for=\"origin_address_{ROUTE_INDEX}\">Address<\/label>\n                        <input type=\"text\" name=\"origin_address_{ROUTE_INDEX}\" id=\"origin_address_{ROUTE_INDEX}\" placeholder=\"Enter full address\" required>\n                    <\/div>\n                <\/div>\n\n                <div class=\"form-column\">\n                    <h4>Destination<\/h4>\n                    <div class=\"form-group\">\n                        <label for=\"destination_country_{ROUTE_INDEX}\">Country<\/label>\n                        <div class=\"country-search-wrapper\">\n                            <input type=\"text\" class=\"country-search\" id=\"destination_country_search_{ROUTE_INDEX}\" placeholder=\"Search country\" autocomplete=\"off\">\n                            <input type=\"hidden\" name=\"destination_country_{ROUTE_INDEX}\" id=\"destination_country_{ROUTE_INDEX}\" required>\n                            <div class=\"country-options\" id=\"destination_country_options_{ROUTE_INDEX}\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label for=\"destination_postal_code_{ROUTE_INDEX}\">Postal Code<\/label>\n                        <input type=\"text\" name=\"destination_postal_code_{ROUTE_INDEX}\" id=\"destination_postal_code_{ROUTE_INDEX}\" placeholder=\"Enter postal code\" required>\n                    <\/div>\n                    <input type=\"hidden\" name=\"destination_city_{ROUTE_INDEX}\" id=\"destination_city_{ROUTE_INDEX}\" required>\n\n                    <div class=\"form-group\">\n                        <label for=\"destination_address_{ROUTE_INDEX}\">Address<\/label>\n                        <input type=\"text\" name=\"destination_address_{ROUTE_INDEX}\" id=\"destination_address_{ROUTE_INDEX}\" placeholder=\"Enter full address\" required>\n                    <\/div>\n                <\/div>\n\n                <div class=\"form-group full-width\">\n                    <label for=\"collection_date_{ROUTE_INDEX}\">Collection Date<\/label>\n                    <input type=\"date\" name=\"collection_date_{ROUTE_INDEX}\" id=\"collection_date_{ROUTE_INDEX}\" required min=\"2026-04-17\">\n                <\/div>\n                <input type=\"hidden\" name=\"collection_time_{ROUTE_INDEX}\" id=\"collection_time_{ROUTE_INDEX}\" value=\"12:00\">\n            <\/div>\n        <\/div>\n    <\/template>\n\n    <!-- Template for route contact information -->\n    <!-- Route contact template for JavaScript to clone -->\n    <template id=\"route-contact-template\">\n        <div class=\"route-contact-set\" data-route-index=\"{ROUTE_INDEX}\">\n            <div class=\"route-contact-header\">\n                <h4>Contact Information for Route #{ROUTE_NUMBER}<\/h4>\n            <\/div>\n\n            <div class=\"form-grid\">\n                <div class=\"form-column\">\n                    <h5>Sender Information<\/h5>\n                    <div class=\"form-group\">\n                        <label for=\"sender_name_{ROUTE_INDEX}\">Full Name<\/label>\n                        <input type=\"text\" name=\"sender_name_{ROUTE_INDEX}\" id=\"sender_name_{ROUTE_INDEX}\"\n                            placeholder=\"Enter full name\"\n                            data-default=\"\" required>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label for=\"sender_email_{ROUTE_INDEX}\">Email<\/label>\n                        <input type=\"email\" name=\"sender_email_{ROUTE_INDEX}\" id=\"sender_email_{ROUTE_INDEX}\"\n                            placeholder=\"Enter email address\"\n                            data-default=\"\" required>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label for=\"sender_phone_{ROUTE_INDEX}\">Phone Number<\/label>\n                        <input type=\"tel\" name=\"sender_phone_{ROUTE_INDEX}\" id=\"sender_phone_{ROUTE_INDEX}\"\n                            placeholder=\"Enter phone number\"\n                            data-default=\"\" required>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label for=\"sender_company_{ROUTE_INDEX}\">Company (Optional)<\/label>\n                        <input type=\"text\" name=\"sender_company_{ROUTE_INDEX}\" id=\"sender_company_{ROUTE_INDEX}\"\n                            placeholder=\"Enter company name\"\n                            data-default=\"\">\n                    <\/div>\n                <\/div>\n\n                <div class=\"form-column\">\n                    <h5>Recipient Information<\/h5>\n                    <div class=\"form-group\">\n                        <label for=\"recipient_name_{ROUTE_INDEX}\">Full Name<\/label>\n                        <input type=\"text\" name=\"recipient_name_{ROUTE_INDEX}\" id=\"recipient_name_{ROUTE_INDEX}\"\n                            placeholder=\"Enter full name\" required>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label for=\"recipient_email_{ROUTE_INDEX}\">Email<\/label>\n                        <input type=\"email\" name=\"recipient_email_{ROUTE_INDEX}\" id=\"recipient_email_{ROUTE_INDEX}\"\n                            placeholder=\"Enter email address\" required>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label for=\"recipient_phone_{ROUTE_INDEX}\">Phone Number<\/label>\n                        <input type=\"tel\" name=\"recipient_phone_{ROUTE_INDEX}\" id=\"recipient_phone_{ROUTE_INDEX}\"\n                            placeholder=\"Enter phone number\" required>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label for=\"recipient_company_{ROUTE_INDEX}\">Company (Optional)<\/label>\n                        <input type=\"text\" name=\"recipient_company_{ROUTE_INDEX}\" id=\"recipient_company_{ROUTE_INDEX}\"\n                            placeholder=\"Enter company name\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n\n    <!-- Drop-off location picker container -->\n    <div id=\"pl-drop-off-picker-container\" class=\"modal\">\n        <div class=\"modal-content pl-drop-off-picker\">\n            <div class=\"pl-drop-off-picker-header\">\n                <h3>Select Drop-Off Location<\/h3>\n                <button type=\"button\" class=\"pl-close-picker\">\u00d7<\/button>\n            <\/div>\n            <div class=\"pl-drop-off-picker-content\">\n                <div id=\"pl-drop-off-locations-container\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Success modal -->\n    <div id=\"success-modal\" class=\"modal\">\n        <div class=\"modal-content\">\n            <div class=\"modal-icon\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check-circle\">\n                    <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path>\n                    <polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline>\n                <\/svg>\n            <\/div>\n            <h3>Shipment Request Submitted!<\/h3>\n\n            <p>Your request has been successfully submitted. You will be redirected to checkout.<\/p>\n            <button type=\"button\" class=\"btn-close-modal\">Close<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\n    jQuery(document).ready(function($) {\n        \/\/ Enhanced function to display shipping rates with proper currency formatting\n        function displayShippingRatesWithCurrency(response) {\n            var rates = response.rates || response; \/\/ Handle both old and new response format\n            var currencyInfo = response.currency_info || {};\n\n            var container = $('#shipping-options-container');\n            container.empty();\n\n            if (!rates || rates.length === 0) {\n                container.html('<p class=\"no-shipping-options\">' + packlink_custom.no_shipping_options + '<\/p>');\n                return;\n            }\n\n            \/\/ Create shipping options HTML\n            var optionsHtml = '<div class=\"shipping-options-list\">';\n\n            $.each(rates, function(index, rate) {\n                var deliveryInfo = '';\n                if (rate.deliveryTime) {\n                    deliveryInfo = '<span class=\"delivery-time\">' + rate.deliveryTime + '<\/span>';\n                }\n                if (rate.firstDeliveryDate) {\n                    deliveryInfo += '<span class=\"delivery-date\">' + packlink_custom.estimated_delivery + ': ' + rate.firstDeliveryDate + '<\/span>';\n                }\n\n                \/\/ Format price using the global currency formatter\n                var formattedPrice = window.formatPacklinkPrice ? window.formatPacklinkPrice(rate.price, false) : rate.currency + ' ' + rate.price.toFixed(2);\n\n                var isDropOffRequired = rate.isDropOff ? 'data-drop-off=\"true\"' : '';\n                var dropOffIndicator = rate.isDropOff ? '<span class=\"drop-off-indicator\">' + packlink_custom.drop_off_point_required + '<\/span>' : '';\n\n                optionsHtml += '<div class=\"shipping-option\" data-rate-id=\"' + rate.id + '\" ' + isDropOffRequired + '>';\n                optionsHtml += '  <div class=\"option-header\">';\n                optionsHtml += '    <div class=\"carrier-info\">';\n                if (rate.logoUrl) {\n                    optionsHtml += '      <img decoding=\"async\" src=\"' + rate.logoUrl + '\" alt=\"' + rate.carrierName + '\" class=\"carrier-logo\">';\n                }\n                optionsHtml += '      <div class=\"carrier-details\">';\n                optionsHtml += '        <h4 class=\"carrier-name\">' + rate.carrierName + '<\/h4>';\n                optionsHtml += '        <p class=\"service-name\">' + (rate.serviceName || '') + '<\/p>';\n                optionsHtml += '      <\/div>';\n                optionsHtml += '    <\/div>';\n                optionsHtml += '    <div class=\"price-info\">';\n                optionsHtml += '      <span class=\"price\">' + formattedPrice + '<\/span>';\n                optionsHtml += '    <\/div>';\n                optionsHtml += '  <\/div>';\n                optionsHtml += '  <div class=\"option-details\">';\n                optionsHtml += '    ' + deliveryInfo;\n                optionsHtml += '    ' + dropOffIndicator;\n                optionsHtml += '  <\/div>';\n                optionsHtml += '  <div class=\"option-actions\">';\n                optionsHtml += '    <button type=\"button\" class=\"btn-select-shipping\" data-rate-id=\"' + rate.id + '\">';\n                optionsHtml += '      ' + packlink_custom.select_button_text;\n                optionsHtml += '    <\/button>';\n                optionsHtml += '  <\/div>';\n                optionsHtml += '<\/div>';\n            });\n\n            optionsHtml += '<\/div>';\n            container.html(optionsHtml);\n        }\n\n        \/\/ Update total price display with proper currency formatting\n        function updateTotalPrice(total) {\n            var formattedTotal = window.formatPacklinkPrice ? window.formatPacklinkPrice(total, false) : total.toFixed(2);\n            $('#summary-total-price').text(formattedTotal);\n        }\n\n        \/\/ Listen for currency changes (if WOOCS triggers events)\n        $(document).on('woocs_currency_changed', function(e, currency) {\n            \/\/ Refresh shipping rates if they were already loaded\n            if ($('.shipping-options-list').length > 0) {\n                \/\/ Trigger a refresh of shipping rates\n                $('.btn-next[data-next=\"shipping-section\"]').trigger('click');\n            }\n        });\n\n        \/\/ Extend existing form functionality\n        if (typeof window.packlinkFormExtensions === 'undefined') {\n            window.packlinkFormExtensions = {};\n        }\n\n        window.packlinkFormExtensions.displayShippingRates = displayShippingRatesWithCurrency;\n        window.packlinkFormExtensions.updateTotalPrice = updateTotalPrice;\n    });\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7544","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/reluggz.com\/it\/wp-json\/wp\/v2\/pages\/7544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reluggz.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/reluggz.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/reluggz.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reluggz.com\/it\/wp-json\/wp\/v2\/comments?post=7544"}],"version-history":[{"count":9,"href":"https:\/\/reluggz.com\/it\/wp-json\/wp\/v2\/pages\/7544\/revisions"}],"predecessor-version":[{"id":7789,"href":"https:\/\/reluggz.com\/it\/wp-json\/wp\/v2\/pages\/7544\/revisions\/7789"}],"wp:attachment":[{"href":"https:\/\/reluggz.com\/it\/wp-json\/wp\/v2\/media?parent=7544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}