Creating Dynamic content using Factory

In this use case, we will see how create dynamic content using Factory .


First of all, we will be interested in the back end.
For the needs of the case, we will create the database table ourselves by creating 'Testimonials'  

We created a new table 'Testimonials'
 

We will create an new function API of type 'VISUAL SELECT' like this : 


 


Now our backend is configured, let's doing our front end part 
 

 We will, however, use the page builder to generate for us a cool-looking code block. 
Clicking on 'Add component' icon, and drag & drop your testimonials section in your page builder




 

Click on the testimonial element, click on the 'source code' icon  and copy the entire code into a new jQuery Source Code placed just below and now you can delete the testimonial entirely, let's see what happens. Refresh, and there it is. 



Copy the entire code




Delete the testimonial section





So now we have a good-looking testimonial, all in code. And this time, we're going to use jQuery and AJAX to manufacture each testimonial.


Let's analyze this HTML and find at which point the code repeats itself per testimonial. And there it is. We will insert each testimonial in our 'parent' testimonial block in which we will add a class 'testimonialBlock'






Let's visit the backend for a brief second and open the documentation.  Select the jQuery language, find the 'getAllTestimonials' API.  Copy it and go back to the front. 






In response, I get a JSON, so let's parse that and Iteration through each testimonial to create our html block using 'createTestimonial' function

Each testimonial will be create in our div variable and append in our container which is the div with the class 'testimonialBlock' :
In our testimonial you can add the concatenating pluses, and drop the URL parameter inside like   :


See the Pen Factory by David (@DavidAppdrag) on CodePen.



📘  Note : We use substring method to format our date 


Save and close. Click on preview and you will see your new testimonial block !