Missing Elements - New project in 6.0.2 vs Old project from prior version

Wappler General How To
#1

I have a project created in a previous verision of Wappler (probably 6.0.0 or 6.0.1) that doesn’t allow me to add elements at the App level, and the available elements (at the App level) are different from elements I see when I create a new project in 6.0.2.

For example, the 6.0.2 project allows me to add a Dynamic Modal element at App level. But in the project created in the previous version doesn’t even list Dynamic Modal as an element. But if you looks at the ‘code’ for the previous version project, I had a ‘modal’ control already in the project.

Available (project created in 6.0.2):

image
image2019×738 114 KB

Not Available (project created in previous version):

image
image1889×630 46.8 KB

In addition, the elements display looks different between the two projects.

The 6.0.2 elements display looks like:

image
image780×498 24.8 KB

The previous verison project looks like:

image
image806×525 36.7 KB

2023: The Year in Review
#2

Can you check if your previous version has the Bootstrap framework?
You can check it on the code or in your app structure:

image
image793×555 46.3 KB

#3

It does.

image
image884×543 45 KB

#4

I don’t see any green check icon

Also you’re not showing this that you’re telling:

#5

How does the code of this page look, as it looks quite broken on your screenshot? If there are differences in the components picker, maybe some frameworks are not included on your page. The elements picker is also content-aware, so it depends where you clicked or what element is selected, the content will be different.

#6

Here is the green check…

image
image879×571 55.5 KB

#7

Can you show the code of the page like teodor says?

#8

Here is the code from the previous version project showing a modal control.

image
image858×464 24.3 KB

#9

That’s all the code?

#10

Do you want me to cut/paste all of the page’s code? Or is there a better way?

#11

You can just post the code from the beginning of the page, until the opening <body> tag, but you can just paste the whole code here.

#12 
<!doctype html>

<html>

<?php

  function echonl($title,$data) {

    echo '<br>'.$title.': '.$data;

  }

  $client_ip = $_SERVER['REMOTE_ADDR'];

  //echonl('client_ip:',$client_ip);

?>

<dmx-value id="client_ip" value="<?php echo $client_ip; ?>"></dmx-value>

<?php

  function clearCookies() {

    setcookie("ecwid_store_id", "", time()-3600);

    setcookie("fixed_amount", "", time()-3600);

    setcookie("payer_first_name", "", time()-3600);

    setcookie("payer_last_name", "", time()-3600);

    setcookie("payer_company", "", time()-3600);

    setcookie("payer_phone", "", time()-3600);

    setcookie("payer_email", "", time()-3600);

    setcookie("payer_reference_transaction_id", "", time()-3600);

    setcookie("payer_address_line_1", "", time()-3600);

    setcookie("payer_address_city", "", time()-3600);

    setcookie("payer_address_state_code", "", time()-3600);

    setcookie("payer_address_state_name", "", time()-3600);

    setcookie("payer_address_zip_code", "", time()-3600);

  }

  function getEcwidPayload($app_secret_key, $data) {

    // Get the encryption key (16 first bytes of the app's client_secret key)

    $encryption_key = substr($app_secret_key, 0, 16);

    //echonl('$encryption_key', var_dump($encryption_key));

    // Decrypt payload

    $json_data = aes_128_decrypt($encryption_key, $data);

    //echo '$json_data: ';

    //var_dump($json_data);

    //echonl('$json_data', var_dump($json_data));

    // Decode json

    $json_decoded = json_decode($json_data, true);

    //echo '<br>$json_decoded: ';

    //var_dump($json_decoded);

    //echonl('$json_decoded', var_dump($json_decoded));

    return $json_decoded;

  }

  function aes_128_decrypt($key, $data) {

    // Ecwid sends data in url-safe base64. Convert the raw data to the original base64 first

    $base64_original = str_replace(array('-', '_'), array('+', '/'), $data);

    // Get binary data

    $decoded = base64_decode($base64_original);

    // Initialization vector is the first 16 bytes of the received data

    $iv = substr($decoded, 0, 16);

    // The payload itself is is the rest of the received data

    $payload = substr($decoded, 16);

    // Decrypt raw binary payload

    $json = openssl_decrypt($payload, "aes-128-cbc", $key, OPENSSL_RAW_DATA, $iv);

    //$json = mcrypt_decrypt(MCRYPT_RIJNDAEL_128, $key, $payload, MCRYPT_MODE_CBC, $iv); // You can use this instead of openssl_decrupt, if mcrypt is enabled in your system

    return $json;

  }

  // qPgKzlOEq1nBPGfVaDoloNBvmJpwyBXu - Store 95642502

  $client_secret = "qPgKzlOEq1nBPGfVaDoloNBvmJpwyBXu";

  //$client_secret = "CurePayCurePay00";

  // This is a dummy value. Place your client_secret key here.

  //  You received it from Ecwid team in email when registering the app

  //$client_secret = "CurePayCurePay00"; Y

  //$cipher = "AES-128-CBC";    

  // this can be generated random if you plan to store it for later

  //  but in this case e.g. openssl_random_pseudo_bytes($ivlen);

  //$iv = "abcdefghijklmnopqrstuvwx";

  $iv = "qPgKzlOEq1nBPGfV";

  //$cipher = "aes-128-gcm";

  $cipher = "aes-128";

  $ivlen = openssl_cipher_iv_length($cipher="AES-128-CBC");

  $tag = 0;

  // If this is a payment request

  if (isset($_POST["data"])) {

    // Get payload from the POST and decrypt it

    $ecwid_payload = $_POST['data'];

    //echo $ecwid_payload;

    //echonl('$ecwid_payload', var_dump($ecwid_payload));

   

    // The resulting JSON from payment request will be in $order variable

    $order = getEcwidPayload($client_secret, $ecwid_payload);

    //var_dump($order);

    //echonl('$order', var_dump($order));

    $json_pretty = json_encode($order, JSON_PRETTY_PRINT);

    //echonl('$json_pretty:',$json_pretty);

    // Debug preview of the request decoded earlier

    //echo "<h3>REQUEST DETAILS</h3>";

    // Account info from merchant app settings in app interface in Ecwid CP

    //$cureclickuid = "";

    if (isset($order['merchantAppSettings']['apiKey'])) {

      $cureclickuid = $order['merchantAppSettings']['apiKey'];

    }

    //$cureclickuid = "22222";

    $storeid = $order['storeId'];

    $fixed_amount = $order['cart']['order']['usdTotal'];

    $payer_full_name = $order['cart']['order']['shippingPerson']['name'];

    $payer_company = $order['cart']['order']['shippingPerson']['companyName'];

    $payer_phone = $order['cart']['order']['shippingPerson']['phone'];

    $payer_email = $order['cart']['order']['email'];

    $payer_reference_transaction_id = $order['cart']['order']['referenceTransactionId'];

    //$payer_address_line_1 = $order['cart']['order']['billingPerson']['street'];

    //$payer_address_city = $order['cart']['order']['billingPerson']['city'];

    //$payer_address_state_code = $order['cart']['order']['billingPerson']['stateOrProvinceCode'];

    //$payer_address_state_name = $order['cart']['order']['billingPerson']['stateOrProvinceName'];

    //$payer_address_zip_code = $order['cart']['order']['billingPerson']['postalCode'];

    setcookie("ecwid_payment", 'true');

    if (isset($cureclickuid)) {

      setcookie("cureclickuid", $cureclickuid);

    }

    setcookie("ecwid_store_id", $storeid);

    setcookie("fixed_amount", $fixed_amount);

    setcookie("payer_first_name", substr(urldecode($payer_full_name), 0, strpos(urldecode($payer_full_name), ' ')));

    setcookie("payer_last_name", substr(urldecode($payer_full_name), strpos(urldecode($payer_full_name), ' ')+1));

    setcookie("payer_company", urldecode($payer_company));

    setcookie("payer_phone", urldecode($payer_phone));

    setcookie("payer_email", urldecode($payer_email));

    setcookie("payer_reference_transaction_id", urldecode($payer_reference_transaction_id));

    //setcookie("payer_address_line_1", urldecode($payer_address_line_1));

    //setcookie("payer_address_city", urldecode($payer_address_city));

    //setcookie("payer_address_state_code", urldecode($payer_address_state_code));

    //setcookie("payer_address_state_name", urldecode($payer_address_state_name));

    //setcookie("payer_address_zip_code", urldecode($payer_address_zip_code));

  } else {

    if (isset($_GET["cureclickuid"])) {

      clearCookies();

      setcookie("cureclickuid", $_GET["cureclickuid"]);

      setcookie("ecwid_payment", "false");

    } else {

      if (isset($_COOKIE["ecwid_payment"]))

      {

        if ($_COOKIE["ecwid_payment"] == "false") {

          clearCookies();  

        }

      } else {

        clearCookies();  

      }

    }

  }

?>

<head>

  <base href="/cureclick">

  <script src="dmxAppConnect/dmxAppConnect.js"></script>

  <meta charset="UTF-8">

  <title>CureClick by CurePay</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="css/style.css" />

</head>

<!--ADD PHP VARIABLE TO APP CONNECT VARIABLE-->

<!-- <dmx-value id="client_ip" value="<?php echo $client_ip; ?>"></dmx-value> -->

<!-- <dmx-value id="ecwid_payload" value="<?php echo $ecwid_payload; ?>"></dmx-value> -->

<!--CALL THE APP CONNECT VALUE TO DISPLAY IT-->

<!-- {{var1.value}} -->
#13

Well i don’t see the bootstrap include in this part of the code. Try adding the Bootstrap framework again.

#14

I added it again.

image
image953×233 7.12 KB

Still didn’t change available elements.

#15

There must be something broken on your page or in your project settings. I can’t tell what is it, as i don’t see the whole code of the page.

#16

I agree…there certainly is something broken. It’s been this way for a couple weeks, but I’ve been making do. I’ll re-start this project from scratch using the 6.0.2 project as I’m not too far into the project.

#17

What about deleting the line
<base href="/cureclick">

#18

Having the line in the code is the only way I was able to get the code to work on our server.

#19

Can you inspect the page on your browser?

Right click -> Inspect - Network
image
Reload it again and show us

#20

Sorry I just saw that:

image
image1780×591 89.3 KB

The “Forms” tab is selected and by typing “modal” of course can’t find it… You have to select the “Components” tab for the Modal

Just saying…