Код виджета < /p>
Код: Выделить всё
import React, { useEffect } from "react";
const BookingWidget = (props) => {
useEffect(() => {
// Load the widget script when the component mounts
const script = document.createElement("script");
script.onload = () => {
console.log("Widget script loaded and ready to initialize");
// state in the parent
// I was trying to force component to reload (doesn't work)
props.set_update_widget(true);
};
script.onerror = (error) => {
console.error("Error loading widget script:", error);
};
script.type = "text/javascript";
script.src = props.widget_src;
script.async = true;
const target = document.getElementById("bookeo-widget-container");
target.innerHTML = "";
target.appendChild(script);
return () => {
target.innerHTML = ""; // Remove widget if the component is unmounted
};
}, []);
return (
);
};
export default BookingWidget;
< /code>
родительский компонент < /pbr /> import React, { useEffect, useState } from "react";
import { useParams } from "react-router";
import { tour_data } from "../assets/data";
import BookingWidget from "../components/BookingWidget";
const TourPage = () => {
const [update_widget, set_update_widget] = useState(false);
let icon_filtering = {
smallgroup: (
),
duration3hours: (
),
skiptheline: (
),
smallgrouptour: (
),
mobileticketing: (
),
freecancellation: (
),
livetourguide: (
),
expressentrance: (
),
instantconfirmation: (
),
};
let { tourId } = useParams();
useEffect(() => {
// to insure that the page start from the top
window.scrollTo(0, 0);
// for the map view
const map = L.map("map").setView([0, 0], 2); // Initial placeholder view
// Fetch coordinates from Nominatim API
fetch(
`https://nominatim.openstreetmap.org/search?format=json&q=${tour_data.internal_ui.meeting_point
.split(",")[0]
.replaceAll(" ", "+")}`
)
.then((response) => response.json())
.then((data) => {
const lat = data[0].lat;
const lon = data[0].lon;
// Set the map to the location
map.setView([lat, lon], 12);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
}).addTo(map);
// Add marker
L.marker([lat, lon])
.addTo(map)
.bindPopup(tour_data.internal_ui.meeting_point.split(",")[0])
.openPopup();
})
.catch((error) => console.error("Error fetching location:", error));
}, []);
return (
[img]{tour_data.internal_ui.main_image} alt=[/img]
Experience Rome with
Tours of Rome
{tour_data.internal_ui.offers.map((offer, id) => (
{
icon_filtering[
`${offer.title.replaceAll(" ", "").toLowerCase()}`
]
}
{offer.title}
{offer.info}
))}
[img]{tour_data.external_ui.main_image} alt=[/img]
{tour_data.external_ui.title}
{tour_data.external_ui.introduction}
{tour_data.external_ui.stars}
{tour_data.external_ui.rating}
Tour Details
{tour_data.internal_ui.tour_details.map((tour_detials, id) => (
{
icon_filtering[
`${tour_detials.title.replaceAll(" ", "").toLowerCase()}`
]
}
{tour_detials.title}
{tour_detials.info}
))}
Full Description
Things To Know
{tour_data.internal_ui.description.things_to_know.map((info, id) => (
{info}
))}
Inclusions and Exclusions
{tour_data.internal_ui.inclusions.map((inclusion_data, id) => (
{inclusion_data}
))}
{tour_data.internal_ui.exclusions.map((exclusions_data, id) => (
{exclusions_data}
))}
Meeting Point
{tour_data.internal_ui.meeting_point}
);
};
export default TourPage;
Подробнее здесь: https://stackoverflow.com/questions/793 ... ct-project
