Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Not being able to load map #287

Open
UsamaTheDev opened this issue Jul 2, 2024 · 13 comments
Open

Not being able to load map #287

UsamaTheDev opened this issue Jul 2, 2024 · 13 comments

Comments

@UsamaTheDev
Copy link

UsamaTheDev commented Jul 2, 2024 •
edited by jwcobb
Loading

Hi @jwcobb @mxweaver,

I'm trying to use this library on my WordPress site but it not displaying the map getting the below error in the console could you please help.

jsdelivr-header.js:7 Uncaught ReferenceError: require is not defined
    at jsdelivr-header.js:7:1
(anonymous) @ jsdelivr-header.js:7Understand this error
2467264/:126 Uncaught TypeError: Tevomaps is not a constructor
    at HTMLDocument.<anonymous> (2467264/:126:31)

<?php

require get_template_directory() . '/vendor/autoload.php';

use TicketEvolution\Client as TEvoClient;

$url = $_SERVER['REQUEST_URI'];
$path = parse_url($url, PHP_URL_PATH);
$categories = explode('/', $path)[2];

$apiClient = new TEvoClient([
    'baseUrl'     => 'https://api.sandbox.ticketevolution.com/',
    'apiVersion'  => 'v9',
    'apiToken'    => 'xxxxxxxxxxxxxxxxx',
    'apiSecret'   => 'yyyyyyyyyyyyyyyyyyyy',
]);

// Fetch event data
$response = $apiClient->showEvent([
    'event_id' => (int)$categories,
]);

// Debugging output
$event = $response; // Assign response directly to event

// Fetch listings data
$listingsResponse = $apiClient->listings([
    'event_id' => (int)$categories,
]);

// Debugging output
$tickets = isset($listingsResponse['listings']) ? $listingsResponse['listings'] : [];

?>

<!DOCTYPE html>
<html>
<head>
    <title><?php echo $event ? $event['name'] : 'Event Not Found'; ?></title>
</head>
<body>
    <h1><?php echo $event ? $event['name'] : 'Event Not Found'; ?></h1>
    <p>Date and Time: <?php echo $event ? $event['occurs_at_local'] : 'N/A'; ?></p>
    <p>Venue: <?php echo $event ? $event['venue']['name'] . ' in ' . $event['venue']['location'] : 'N/A'; ?></p>
    <?php if ($event && isset($event['configuration']['seating_chart']['large'])) : ?>
        <img src="<?php echo $event['configuration']['seating_chart']['large']; ?>" alt="Seating Chart">
    <?php else: ?>
        <p>No seating chart available.</p>
    <?php endif; ?>

    <h2>Available Tickets</h2>
    <?php if (!empty($tickets)) : ?>
        <table>
            <thead>
                <tr>
                    <th>Section</th>
                    <th>Row</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($tickets as $ticket) : ?>
                <tr>
                    <td><?php echo $ticket['section']; ?></td>
                    <td><?php echo $ticket['row']; ?></td>
                    <td><?php echo $ticket['available_quantity']; ?></td>
                    <td>$<?php echo $ticket['retail_price']; ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    <?php else : ?>
        <p>No tickets available.</p>
    <?php endif; ?>

    <?php if ($event && isset($event['venue']['id'], $event['configuration']['id'])) : ?>
        <div id="my-map" style="height: 500px; width: 100%;"></div>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var seatmap = new Tevomaps({
                    venueId: "<?php echo $event['venue']['id']; ?>",
                    configurationId: "<?php echo $event['configuration']['id']; ?>",
                    ticketGroups: [
                        <?php foreach ($tickets as $ticket) : ?>
                        {
                            tevo_section_name: "<?php echo $ticket['section']; ?>",
                            retail_price: <?php echo $ticket['retail_price']; ?>,
                        },
                        <?php endforeach; ?>
                    ],
                });

                var seatmapApi = seatmap.build("my-map");
            });
        </script>
    <?php else : ?>
        <p>Seatmap not available.</p>
    <?php endif; ?>
</body>
</html>

<?php get_footer(); ?>

Thanks.
@UsamaTheDev
Copy link
Author

Hi @coneybeare,

Hopefully, you are doing great.

In the Readme file, you mentioned downloading tevomaps.js from https://raw.githubusercontent.com/ticketevolution/seatmaps-client/master/build/tevomaps.js but there is no file found could you please help me with this?

Thanks.

@jwcobb
Copy link
Contributor

jwcobb commented Jul 2, 2024

I've disabled your API credential since you posted it publicly. Please contact your sales contact and ask for another one and secure it properly.

@UsamaTheDev
Copy link
Author

@jwcobb Sorry I overlooked that. Can you please give me any information about my issue??

@jwcobb
Copy link
Contributor

jwcobb commented Jul 2, 2024

The issue appears to be with your JS. The seatmaps are up and running on hundreds of sites so I do not believe it is a bug in the project code.

@UsamaTheDev
Copy link
Author

UsamaTheDev commented Jul 2, 2024 •
edited
Loading

@jwcobb I followed all the instructions using the Window Object method, but the tevomaps.js file mentioned by @coneybeare in the README resulted in a 404 error.
bfc4fd8

Some assistance from you would be really helpful.

@coneybeare
Copy link
Member

404 from https://cdn.jsdelivr.net/npm/@ticketevolution/seatmaps-client/cjs/index.min.js ? Can you not access that url?

@coneybeare
Copy link
Member

It seems that you are reading the deleted code as part of that PR, not the updated code. You can find instructions on the readme

@UsamaTheDev
Copy link
Author

@coneybeare Thanks for the reply.

only using this code results to these errors:

jsdelivr-header.js:7 Uncaught ReferenceError: require is not defined
    at jsdelivr-header.js:7:1
(anonymous) @ jsdelivr-header.js:7Understand this error
2467264/:126 Uncaught TypeError: Tevomaps is not a constructor
    at HTMLDocument.<anonymous> (2467264/:126:31)

<div id="my-map"></div>
<script src="https://cdn.jsdelivr.net/npm/@ticketevolution/seatmaps-client/cjs/index.min.js"></script>
<script>
  // create a new seatmap
  var seatmap = new Tevomaps({
    venueId: "10",
    configurationId: "1046",
    ticketGroups: [
      {
        tevo_section_name: "upper end zone 232",
        retail_price: 100,
      },
    ],
  });

  // turn element with ID of 'my-map' into a seatmap for config 1046
  var seatmapApi = seatmap.build("my-map");

  // perform some actions, like highlighting section "upper end zone 232"
  seatmapApi.highlightSection("upper end zone 232");
</script>

@UsamaTheDev
Copy link
Author

Can anyone help??

@coneybeare
Copy link
Member

We will likely need to repackage that version for client side require if you need it. As a workaround until we can do that, you can try adding something like https://www.npmjs.com/package/clientside-require before ours.

@UsamaTheDev
Copy link
Author

@coneybeare with this I will be able to use the "Window Object" method right?

@coneybeare
Copy link
Member

You can try it out and see. You can also try this old version, though not sure it it will work for your scenario: https://cdn.jsdelivr.net/npm/@ticketevolution/[email protected]/build/tevomaps.min.js

@UsamaTheDev
Copy link
Author

Thanks for your help, I really appreciate it. @coneybeare

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@coneybeare @jwcobb @UsamaTheDev