About the Dynamic carousels.


CMS PLUS+

About the Dynamic carousels.

Publish 2017-11-19 15:15:15 by admin

The basic template called Computer, we include two types of carousel, one mixed and one 100% dynamic.
both are included in different pages by "Master Objects". Below we will describe how they work order that you can customize them.

This tutorials is oriented to users with basic knowledge of PHP. IF you do not have a minimum notions of programming in php, we recommend you do not touch any line of code.


The first carousel is housed in the page called, "slider_a.php". 
It is a mixed carousel consists of 4 pages. 
the first two are fixed and editable from WB9. last 2 are dynamic content generated by php. 
we refer to them as page 3 and page 4. 

If we look at page 3 of the carousel. see if they contain the following elements:

if you look at the html code of the object "carrousel_layer_0" we can see the following code:

         require './backend/includes/dbconect.php';
    $sql = 'SELECT * FROM `CMS_SHOP_CONFIG` WHERE `id`= "1" ';  

$resultado = mysql_query($sql);

    $config = mysql_fetch_assoc($resultado);
    $cu = $config['currencysymbol'];

    $slsql = "SELECT * FROM `CMS_SHOPPAGES` WHERE `visible` = '1' AND `featured` = 'yes' ORDER BY `menu_index` DESC LIMIT 4 ";
    $result = mysql_query($slsql);
    $N = 0;
    while($fila = mysql_fetch_assoc($result)) {
    $img_product_S[$N] = $fila["extrafoto_1"];
    $img_product_S2[$N] = $fila["extrafoto_2"];
    $price_S[$N]=number_format($fila["price"],2).' '.$cu;
    $title_S[$N]=$fila["title"];
    $description_S[$N]=$fila["description"];
    $seo_url_S[$N] = $fila["seo_friendly_url"];
    $N++;
    }
    ?>

  

With this simple php code, we are getting the last 4 added products that meet the conditions of being "Visible" and have the "Featured" field enabled. then randomly show only one of the four. 

followed this act , we create variables with the information necessary to show , as the product name , price, etc. urls of the images ...

so now we have 4 items in memory. and the parameters needed to print them on screen.

Now we go to the next object found in page 3 is " php_foto_0 " .

This HTML object is the way it will print the background image .
if you look at the code , you can see it's a pretty long text string that contains the code to display the image , and the image url . Here we can play with various parameters .

Search within the following text string "& h = 600 & w = 950 & zc = 1".
h = 600 represents the height of the image in pixels.
W = 950 represents the width of the image in pixels.
zc = 1 represents the autozoom and intelligent autoscaling , where 1 is enabled and 0 is disabled.

if you change any of these parameters , do not forget to also change the css style that is at the end of the code:  style = " width : 950px ; height: 600px ; " 
so you can adjust the image size to desses you and best meets your needs.

the next element in the page 3 is " php_foto_1_0 " .
the principle is practically the same as the previous object.

Now the "title_slider_0". object the product name. to print the product and give the format you wish use a little trick. is a simple "Text" to which we have edited the html, and added the following code in the "Before Tag *" tab


and the "After Taf *" tab.

Then edit the text object and add the name of the variable you want to show. in this case the name of the product is so we add "'. $ title_S [O].' "

use this trick so you can print on screen any variable we want.

As you may have deduced, with the price do exactly the same.

and the button "Buy Now" what we do is add a variable to the url, like this:

so we have a simple way a dynamic page that will show us the result of a query to the database products.
You can add dynamic pages as you like, taking into account the number of records that will get the initial database query, just playing around with the parameters and you will get amazing things.

all dynamic carousels in the "Computers" template use this method.