Custom widget: How to get the custom property 'campaign_code' value and check if the campaign_code is correct

[neemeeller]

Hi,

I have created a custom widget that displays a buy button with 'campaign_code' (with a possibility to change the number of tickets sold (-/+)). Please see screenshot.

I would like to check if the inserted campaign_code is correct when editor inserts it on the Elementor admin panel. I have inserted a javascript file for that. The code runs every time when the campaign_code input field changes:

onElementChange(propertyName) {
    if ((propertyName = 'campaign_code')) {
      ...
    }
  }

I manage to get the change event and know when campaign_code value has changed. However, I struggle to to get the value for the property 'campaign_code'. CAMPAIGN_CODE_VALUE is always null.

onElementChange(propertyName) {
    if ((propertyName = 'campaign_code')) {
      const CAMPAIGN_CODE_VALUE = this.getSettings(propertyName);
      console.log('onElementChange', propertyName, CAMPAIGN_CODE_VALUE);
      checkIfCampaignCodeIsValid(CAMPAIGN_CODE_VALUE);
    }
  }

Can anyone help me to get the value of campaign_code (CAMPAIGN_CODE_VALUE)?

[neemeeller]

The full JS file is like this

class WidgetHandlerClass extends elementorModules.frontend.handlers.Base {
  // getDefaultSettings() {}

  // getDefaultElements() {}

  // bindEvents() {}

  onElementChange(propertyName) {
    if ((propertyName = 'campaign_code')) {
      const CAMPAIGN_CODE_VALUE = this.getSettings(propertyName);
      console.log('onElementChange', propertyName, CAMPAIGN_CODE_VALUE);
      this.checkIfCampaignCodeIsValid(CAMPAIGN_CODE_VALUE);
    }
  }

  checkIfCampaignCodeIsValid(camapign_code) {
    // run custom checks
  }
}

jQuery(window).on('elementor/frontend/init', () => {
  const addHandler = $element => {
    elementorFrontend.elementsHandler.addHandler(WidgetHandlerClass, {
      $element,
    });
  };

  elementorFrontend.hooks.addAction('frontend/element_ready/paymentmodule-button.default', addHandler);
  elementorFrontend.hooks.addAction('frontend/element_ready/paymentmodule-button-with-counter.default', addHandler);
});

[neemeeller]

I managed to solve the issue following this thread #8258 (comment).
Seems that 'frontend_available' => true was missing from the campaign_code parameter in widgets. After setting the frontend_available parameter the const CAMPAIGN_CODE_VALUE = this.getElementSettings('campaign_code'); started working

[aaliyahfraser]

I have also posted a blog on this topic. This is because Elementor has so many free amazing add-ons. Easy-to-use features made creating websites a breeze. Here we talk about “Best Elementor Addons and Plugins for WordPress 2023 – Compared” You can check out it at – https://quomodosoft.com/best-elementor-addons-and-plugins/