12 - Using themes - HPC

Themes, which are only available in the HikaPrice Calculator paid(PRO) version, allow you to customize the graphics look of the calculator, using HTML/CSS coding.
Available themes are either made by using Bootstrap and Uikit or without using any frameworks.

Example themes are located in: “/administrator/components/com_hikapricecalculator/resources/themes”

Available themes are:

• example.php: It's a simple example, just iterate through all fields and print them
• example_bootstrap.php: How to use Bootstrap. Bootstrap is autoloaded with WPC
• example_custom.php: It's a more advanced custom theme, you can edit every field aspect
• example_uikit.php: How to use UIkit. Uikit is autoloaded with WPC

If you want to use an example just copy the file you want through FTP from the folder: "/administrator/components/com_hikapricecalculator/resources/themes" to "/media/com_hikapricecalculator/themes"

If you want a new theme from scratch, create a new file in: “/media/com_hikapricecalculator/themes”

like "your_theme.php". A theme is set up like this:

<?php

/* THEME_NAME: Your Theme Name */


?>

<h2>This is a template example</h2>

<div class="wpc-product-form">
    
    <div class="awspc-output-product">
        <?php echo $this->view['outputResults']; ?>
    </div>
    
    <table>
            <?php foreach($this->view['data'] as $key => $data): ?>
                <tr class="awspc-field-row" data-field-id="<?php echo $data['field']->id; ?>" 
						style="<?php echo ($this->view['conditionalLogic'][$data['field']->id] == true)?"":"display:none"; ?>">
                    <td id="<?php echo $data['labelId']; ?>">
                        <?php echo $this->userTrans($data['field']->label); ?>
                    </td>

                    <td id="<?php echo $data['inputId']; ?>">
                        <?php echo $data['widget']; ?>
                    </td>
                </tr>
            <?php endforeach; ?>

    </table>
</div>

In "Your Theme Name" type a name because this will be used to identify the theme in the backend of Wordpress (Themes field in your calculator settings).

You can iterate through the calculator fields as follow:

<?php foreach($this->view['data'] as $field): ?>
	//Your code here
<?php endforeach; ?>

If you want to print the field label:

<?php echo $field['field']->label; ?>

To translate the field labels or other things as described in the "Translations" chapter:

<?php echo $this->userTrans("language_key"); ?>

You can draw the whole field using:

<?php echo $field['widget']; ?>

You can draw the default autogenerated calculator view. This is useful if you don't want to redraw it:

<?php echo $this->view['defaultView']; ?>

You can check if the field should be displayed by the conditional logic:

if($this->view['conditionalLogic'][$data['field']->id] == true){
	//Display the field
}else{
	//Hide the field
}

The fields used can be defined through HTML:

• Checkbox:

  <input type="checkbox" id="aws_price_calc_n" class="aws_price_calc_checkbox" />

• Numeric:

  <input type=”input” id=”aws_price_calc_n” name=”aws_price_calc_n” class=”aws_price_calc_numeric” />

• List:

  <select id=”aws_price_calc_n” name=”aws_price_calc_n” class=”aws_price_calc_list”></select>

• Text:

  <input type=”input” id=”aws_price_calc_n” name=”aws_price_calc_n” class=”aws_price_calc_text” />

• Date:

  <input type=”input” id=”aws_price_calc_n” name=”aws_price_calc_n” class=”aws_price_calc_date” />

• Time:

  <input type=”input” id=”aws_price_calc_n” name=”aws_price_calc_n” class=”aws_price_calc_time” />

• Date & Time:

  <input type=”input” id=”aws_price_calc_n” name=”aws_price_calc_n” class=”aws_price_calc_datetime” />

• Radio Group:

  <input type=”radio” id=”aws_price_calc_n” name=”aws_price_calc_n” class=”aws_price_calc_radio” />