---
myst:
html_meta:
"description": ""
"property=og:description": ""
"property=og:title": ""
"keywords": ""
---
# Exercise 8: Customizing Pattern
```{warning}
This exercise requires a working buildout using a fork of the `collective.jstraining` package.
```
In this exercise, we will be walking through customizing the livesearch pattern.
You will be working in the `exercise8` directory of the `collective.jstraining` package.
## Add Your Pattern File
In your `exercise8/static` directory, add a file named `pattern.js`.
Use this file to build your pattern.
This example will define a new pattern to overwrite the existing livesearch pattern:
```javascript
/* global require */
require([
'jquery',
'mockup-patterns-livesearch',
'pat-registry'
], function($, Livesearch, registry) {
'use strict';
/* combining bundle and pattern in same file this example */
// first, unregister existing pattern
delete registry.patterns.livesearch;
delete $.fn.patLivesearch;
// creating new pattern automatically registers it
Livesearch.extend({
name: 'livesearch',
trigger: '.pat-livesearch',
parser: 'mockup',
init: function() {
var that = this;
Livesearch.prototype.init.call(that);
// all we are doing in this customization is defaulting to searching
// current section
$('.searchSection input', that.$el)[0].checked = true;
}
});
});
```
Pay close attention to what we are doing here:
```javascript
(
...
delete registry.patterns.livesearch;
delete $.fn.patLivesearch;
...
)
```
We are deleting the existing registration of the livesearch pattern.
Next, we are extending the existing pattern:
```javascript
(
...
Livesearch.extend({
...
)
```
And overriding the `init` function to provide our customization(default search current section):
```javascript
(
...
$('.searchSection input', that.$el)[0].checked = true;
...
)
```
## Register Static Resource Directory
Next, let us register the static directory we just placed our script into.
To register it, you need to add ZCML registration for the static directory your script is in.
Add this to the `exercise8/configure.zcml` file:
```
```
## Register Your Bundle
Again, registration is done exactly the same as previous exercises:
```xml
++plone++exercise8/pattern.js
++plone++exercise8/pattern.less
exercise8
default
True
++plone++exercise8/exercise8-compiled.min.js
++plone++exercise8/exercise8-compiled.css
2016-10-04 00:00:00
jquery
mockup-patterns-livesearch
pat-registry
```
## Installation
We have all the files necessary to run the pattern now.
1. Start up your Plone instance
2. Install the `Exercise 8` add-on
## Running
At this point, we have no compiled version of the code that we are running with because of that our code does nothing.
1. Go into {menuselection}`Site Setup --> Resource Registries`
2. Check {guilabel}`Development Mode`
3. Select to develop JavaScript and CSS for the `exercise8` bundle
4. Click {guilabel}`Save`
Now, you should see the livesearch pattern default to searching the current section.
### Production
To build our bundle, we will utilize the `plone-compile-resources` script that ships with Plone.
```{warning}
If you are not running a ZEO setup, you will need to shut down your Plone instance since the ZODB in this mode does not allow multiple processes to access it at the same time.
```
An example command will look like this
```shell
./bin/plone-compile-resources --site-id=Plone --bundle=exercise8
```
Once this command finishes, your bundle is built and will be deployed with your package.