Jul 31, 2025
0
Level 1
wordpress WP Configurator @click attribute is not working
In WP Configurator, I have the code for snow-helmet plugin and I am creating a custom plugin based on my requirements. I added this code above the sidebar where the layers are selected. After that, the dropdown stopped working, whereas it was working fine in another place. I inspected the code and found that the @click attribute is not showing. What should I do, and where exactly should I make the changes so that this code works properly?
<div class="wpc-banner-content wpc-banner-content-right">
<div class="wpcp-doorconfigurator-manager-recall" style="max-width: 300px;">
<template x-if="<?php echo esc_attr($wpc->store . '.saveDoorConfiguratorModalOpen'); ?>">
<div
x-show="<?php echo esc_attr($wpc->store . '.saveDoorConfiguratorModalOpen'); ?>"
x-transition
@click.self="<?php echo esc_attr($wpc->store . '.toggleSaveDoorConfiguratorModal'); ?>"
style="position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; justify-content: center; align-items: center;"
class="save_door_configurator_modal">
<div class="modal-content model-recall" x-show="open" x-transition style="background: white; border-radius: 8px; padding: 20px; min-width: 400px; max-width: 90%;">
<button class="modal-close close-recall" style="float: right; font-size: 20px; border: none; background: none;" x-on:click="<?php echo esc_attr($wpc->store . '.toggleSaveDoorConfiguratorModal'); ?>">×</button>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="green" class="bi bi-save-fill" viewBox="0 0 16 16" style="margin-bottom: 10px;">
<path d="M8 0a2 2 0 0 1 2 2v1h3.5A1.5 1.5 0 0 1 15 4.5v10A1.5 1.5 0 0 1 13.5 16h-11A1.5 1.5 0 0 1 1 14.5v-13A1.5 1.5 0 0 1 2.5 0H6a2 2 0 0 1 2 0zM6.5 0A1.5 1.5 0 0 0 5 1.5v1h3v-1A1.5 1.5 0 0 0 6.5 0z" />
</svg>
<div class="modal-title model-recall-data" style="font-size: 20px; font-weight: bold; margin-bottom: 10px;">Save Door Configurator</div>
<div class="modal-body" style="margin-bottom: 20px;">
<label for="configName">Enter a name:</label>
<input type="text" id="configName" x-model="<?php echo esc_attr($wpc->store . '.doorconfiguratorName'); ?>" class="modal-input" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" />
</div>
<div class="modal-footer submit-recall" style="display: flex; justify-content: flex-end; gap: 10px;">
<button class="btn btn-secondary_recall" style="padding: 8px 16px;" x-on:click="<?php echo esc_attr($wpc->store . '.toggleSaveDoorConfiguratorModal'); ?>">Cancel</button>
<button
class="btn btn-success"
style="padding: 8px 16px;background-color: #3ac03ad4;color: white; border: aliceblue;"
x-on:click="<?php echo esc_attr($wpc->store . '.saveDoorConfigurator'); ?>"
x-bind:disabled="<?php echo esc_attr($wpc->store . '.loading'); ?>">
Save
</button>
</div>
</div>
</div>
</template>
<div class="box recall-box">
<div class="recall__data">
<h2>Recall a Saved Custom DoorConfigurator (by ID)</h2>
<input type="text" class="wpc-input recall-input full-width" placeholder="Enter DoorConfigurator ID"
x-model="<?php echo esc_attr($wpc->store . '.recallId'); ?>">
</div>
<button class="btn full-width"
x-on:click="<?php echo esc_attr($wpc->store . '.recallDoorConfigurator()'); ?>">
Recall
</button>
</div>
<!-- Dropdown -->
<template x-if="<?php echo esc_attr($wpc->store . '.doorconfiguratorList.length > 0'); ?>">
<div x-data="{ open: false }" class="doorconfigurator-dropdown_recall " style="margin-top: 10px;">
<button type="button"
class="btn doorconfigurator-dropdown-toggle full-width"
@click="open = !open">
<span>Recall Saved DoorConfigurator</span>
<template x-if="open">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="float: right;">
<path d="M7.646 4.646a.5.5 0 01.708 0l6 6a.5.5 0 01-.708.708L8 5.707l-5.646 5.647a.5.5 0 01-.708-.708l6-6z" />
</svg>
</template>
<template x-if="!open">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="float: right;">
<path d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z" />
</svg>
</template>
</button>
<ul x-show="open" x-transition class="doorconfigurator-dropdown-menu">
<template x-for="doorconfigurator in <?php echo esc_attr($wpc->store . '.doorconfiguratorList'); ?>" :key="doorconfigurator.id">
<li class="dropdown-item">
<span x-text="doorconfigurator.name"
@click="<?php echo esc_attr($wpc->store . '.recallDoorConfiguratorByID(doorconfigurator.id)'); ?>"></span>
<button class="delete-doorconfigurator"
@click.stop="<?php echo esc_attr($wpc->store . '.deleteDoorConfiguratorModal(doorconfigurator.id)'); ?>">
×
</button>
</li>
</template>
</ul>
</div>
</template>
<template x-if="<?php echo esc_attr($wpc->store . '.doorconfiguratorListModalOpen'); ?>">
<div
x-show="<?php echo esc_attr($wpc->store . '.doorconfiguratorListModalOpen'); ?>"
x-transition
@click.self="<?php echo esc_attr($wpc->store . '.toggleDoorConfiguratorListModal'); ?>"
style="position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; justify-content: center; align-items: center;"
class="delete_layer">
<div class="modal-content model-recall" x-show="open" x-transition>
<button class="modal-close close-recall" x-on:click="<?php echo esc_attr($wpc->store . '.toggleDoorConfiguratorListModal'); ?>">×</button>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2" />
</svg>
<div class="modal-title model-recall-data">Delete Saved DoorConfigurator?</div>
<div class="message-recall">
Are you sure you want to delete this saved doorconfigurator? This action cannot be undone.
</div>
<div class="modal-footer" id='fotter_toggle'>
<button class="btn btn-secondary_recall" x-on:click="<?php echo esc_attr($wpc->store . '.toggleDoorConfiguratorListModal'); ?>">Cancel</button>
<button
class="btn btn-danger_recall"
x-on:click="<?php echo esc_attr($wpc->store . '.deleteDoorConfigurator'); ?>"
x-bind:disabled="<?php echo esc_attr($wpc->store . '.loading'); ?>">
Delete
</button>
</div>
</div>
</div>
</template>
</div>
</div>
Please or to participate in this conversation.