Save and load product

Saving your product in a database so that you can reuse it later is a feature that you would surely like to implement, for example when you want to create a product from your administration, then your users can use it from the frontend. For this you will need to use two API methods.

Since the plugin doesn’t work using jQuery, if you haven’t integrated it yourself, you won’t have access to jQuery’s ajax methods, you will either have to use vanilla ajax, or you can use axios which is integrated into the plugin (what I advise you to do, and what I will use in this example).

First of all, create a database shop, with a table called products, a column id auto-incremented, and a column value of longtext type.

Then, to pass the fabric state to a PHP script, after clicking on a button, we will proceed as follows:

<button id="save-product"></button> <!-- The button to save the state to the database -->
<div id="myId"></div> <!-- The designer container -->

<script>
var instance = new AsukaDesigner('#myId'); // Create an instance of the main plugin class

var product = instance.getState(); // Get the fabric state for the current product
var axios = instance.util.axios // Get axios instance

document.getElementById("save-product").addEventListener("click", function(){
    var data = new FormData();
    data.append('product', product);

    axios.post('http://link-to-your-php-script', data).then(function (response) {
        console.log(response); // Should return the id of the product added to the database
    }).catch(function (error) {
        console.log(error);
    });
});

</script>

Now that we have passed the state of the product to our PHP script, we can save it in the database :

<?php

//connect and select database
$connection = mysqli_connect($host, $user, $pwd, $db /* shop in our case */);

if($connection === false){
    die("ERROR: Could not connect. " . $connection->connect_error());
}

//insert product in database
$query = "INSERT INTO products(value) VALUES ('".addslashes($_POST['product'])."')"; // Don't forget to apply the addslashes function to have a correctly formatted JSON.
$connection->query($query);

if($query) {
  $id = $connection->insert_id;
  echo json_encode($id);
}

exit;

To load our product after clicking on a button, we add a button and the following code :

<button id="load-product"></button>
<script>
var instance = new AsukaDesigner('#myId'); // Create an instance of the main plugin class

var axios = instance.util.axios // Get axios instance

document.getElementById("load-product").addEventListener("click", function(){
    var data = new FormData();
    data.append('id', 0 /* or any product id you want to load */);

    axios.post('http://link-to-your-php-script', data).then(function (response) {
        var product = JSON.parse(response.data)
        // We import the product once the ajax call is finished
        instance.designer.import(product)
    }).catch(function (error) {
        console.log(error);
    });
});
</script>

And the corresponding PHP code :

<?php

//connect and select database
$mysqli = mysqli_connect($host, $user, $pwd, $db /* shop in our case */);

if($connection === false){
    die("ERROR: Could not connect. " . $connection->connect_error());
}

//insert product in database
$query = "SELECT value FROM products WHERE id=".$_POST['id']."";
$result = $connection->query($query);

if($result) {
    $row = $result->fetch_assoc();
    echo json_encode($row['value']);
}

exit;

Of course this code is only a basic example, you can modify it to better meet your expectations!

How can we help?