Adding fields to the ZOO category

-

This article is about the ZOO component for Joomla CMS. First of all consider adding a simple text field to the right side of the admin panel category ZOO.

1. Open media/zoo/applications/blog/aplication.xml and after the line

<param name="image" type="zooimage" label="Image" description="Choose a category image." />

add:

<param name="ourname" type="text" label="Our field name" description="Our tip" />

2. Output in category template media/zoo/applications/blog/templates/default/category.php

<?php echo $this->category->getParams()->get('content.ourname'); ?>

ourname is our unique name. You can add a picture field ZOO instead of a text field. Сhange type="text" to type="zooimage". We get src of the picture in the output.

Adding fields to the main area of the ZOO category admin panel

What to do if we need to add another field with the editor? Standard solutions are not provided for this. But it is quite possible to do it.

1. First, add it to the admin page. Open a file administrator/components/com_zoo/views/category/tmpl/edit.php. Add a block.
<div class="element element-description">
    <strong title="Hint">New field with editor</strong>
    <div>
        <?php
            echo $this->app->system->editor->display('description1', $this->category->description1, null, null, '60', '20', array('pagebreak', 'readmore', 'article')) ;
        ?>
    </div>
</div>

We named the field description1. It appeared, but it does not save information. 

 2. You need to create a cell in the database. Open phpMyAdmin. Open DB, find the table zoo_category. Open the table. Click the tab Structure. Click add. Write our name, in our case it is description1. Choose type TEXT. Set the comparison, utf-8_general_ci. Now our field saves text, but cuts out HTML tags. Fix it. 

 3. Open the file administrator/components/com_zoo/controllers/category.php. Find the line

$post['description'] = $this->app->request->getVar('description', '', 'post', 'string', JREQUEST_ALLOWRAW);
and after it add
$post['description1'] = $this->app->request->getVar('description1', '', 'post', 'string', JREQUEST_ALLOWRAW);

Now everything is saved correctly in admin panel. It remains only to display the data in the template. 

4. Open media/zoo/applications/blog/templates/default/category.php Insert the output in the right place:

<?php echo $this->category->getText($this->category->description1); ?>
Adding a simple text field to the main area of the ZOO category admin panel If you need to add a simple text field to the ZOO category admin panel (input type="text"). We do almost the same. 

1. Open the file administrator/components/com_zoo/views/category/tmpl/edit.php This code is inserted in the right place:

<div class="element element-name">
    <strong>Caption</strong>
    <div id="name-edit">
        <div class="row">
            <input class="inputbox" type="text" name="mycaption"  size="60" value="<?php echo $this->category->mycaption; ?>" />
        </div>
    </div>
</div>
We named our field mycaption. 

 2. Add in DB. Open the table zoo_category. Click the tab Structure. Add a line with our name. Choose type VARCHAR 

 3. Output in category template 

<?php echo $this->category->mycaption; ?>

Comments

Post a Comment

Popular posts from this blog

JavaScript Inheritance and Classes

-
In many programming languages implemented inheritance. And it also exists in JavaScript. First, consider prototype inheritance. We describe the function constructor function Animal(name, weight, color){ this.name = name || 'someAnimal'; this.weight = weight; this.color = color; //do some actions during initialization console.log(this.name + ' construct animal'); } // write the method to the prototype Animal.prototype.sayName = function(){ console.log(this.name); } We describe the constructor function that inherits the Animal class. And we will expand it, we will add in addition own properties and methods function Mammal(name, weight, color, limbs){ Animal.apply(this, arguments); this.limbs = limbs || 4; console.log(this.name + ' construct mammal'); } Mammal.prototype = Object.create(Animal.prototype); Mammal.prototype.constructor = Mammal; Mammal.prototype.run = function(){ console.log('run'); } Cre
Read more

Typical gulpfile.js

-
The file is written for Gulp 4 . The file is designed to work with styles ( SCSS ) and JavaScript . All minify and compile sourcemaps for debugging. Third-party scripts and styles are in separate files. const production = ( process.env.NODE_ENV == 'production' ); //base part let {src, dest, parallel, series, watch} = require('gulp'), rename = require('gulp-rename'), sourcemaps = require('gulp-sourcemaps'); //css part let sass = require('gulp-sass'), cleanCSS = require('gulp-clean-css'), autoprefixer = require('gulp-autoprefixer'); const babel = require('gulp-babel'), uglify = require('gulp-uglify-es').default, include = require("gulp-include"); let pathFiles = { build: { css: './css/', js: './js/' }, src: { css: './src/scss/**/*.scss', js: './src/js/**/*.js' } }; function swallowError(error){
Read more

Swipe events on touch devices

-
Every day sensory devices are being introduced into our lives. These devices have specific events, unlike the desktop. One of these events is the swipe . Especially often have to deal with it when developing a mobile version of the site. Code: (() => { let initialPoint; let finalPoint; document.addEventListener('touchstart', function(event) { initialPoint=event.changedTouches[0]; }, false); document.addEventListener('touchend', function(event) { finalPoint=event.changedTouches[0]; let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX); let yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY); if (xAbs > 20 || yAbs > 20) { if (xAbs > yAbs) { if (finalPoint.pageX < initialPoint.pageX){ // to left } else{ // to right } } else { if (final
Read more