00:00:13:20 - 00:00:14:01
In this
00:00:14:01 - 00:00:17:08
tutorial, we will introduce Infigo's
chameleon functionality.
00:00:18:13 - 00:00:20:09
The Chameleon module allows you
00:00:20:09 - 00:00:24:05
to change the look and feel
of your storefront based on the user
00:00:24:05 - 00:00:28:02
that's signed in the pages
that they're on, the URL
00:00:28:02 - 00:00:31:16
that they're using, and more.
00:00:31:17 - 00:00:35:10
Using Chameleon, you're able
to give different users different versions
00:00:35:21 - 00:00:39:06
of certain
configurable areas of your storefronts.
00:00:39:18 - 00:00:43:00
So this could be message templates,
it could be editable content,
00:00:43:10 - 00:00:46:28
and it could be CSS Override.
00:00:48:13 - 00:00:51:08
This module allows you
to give different users
00:00:51:09 - 00:00:54:09
an entirely different view
of the same storefront,
00:00:54:24 - 00:00:57:23
especially when they are paired
with access permissions.
00:00:58:12 - 00:01:02:01
Now, I must really point out that access
permissions
00:01:02:01 - 00:01:04:23
and chameleon are different things.
00:01:05:04 - 00:01:08:12
Access permissions,
which were covered in previous tutorials,
00:01:08:24 - 00:01:12:19
are controlling
which products a certain customer can see.
00:01:13:11 - 00:01:18:17
Chameleon is just changing the look
and the feel of a particular storefront.
00:01:18:18 - 00:01:21:17
It is not controlling access
to certain products.
00:01:22:06 - 00:01:24:28
So for example, in Chameleon
would be able to change
00:01:24:28 - 00:01:28:05
the logo based on the customer
that's logged in.
00:01:28:05 - 00:01:31:29
We could change text,
we could change various bits of imagery.
00:01:32:27 - 00:01:33:27
And that's just the.
00:01:33:27 - 00:01:36:01
That's just the start.
00:01:36:12 - 00:01:38:16
Please note
that Chameleon is a paid module.
00:01:38:27 - 00:01:39:27
If you'd like to inquire
00:01:39:27 - 00:01:44:07
about purchasing Chameleon,
please do get in touch with us.
00:01:49:04 - 00:01:49:27
So after
00:01:49:27 - 00:01:53:05
purchasing chameleons,
I go to my back end.
00:01:53:28 - 00:01:58:24
You'll need to write a support ticket
for user access to this module.
00:01:58:24 - 00:02:01:11
We need to enable it from our end.
00:02:01:11 - 00:02:05:25
And once you have access you to enable
that module.
00:02:07:00 - 00:02:09:26
Safari starts off
by going to configuration
00:02:12:28 - 00:02:17:00
settings, general settings,
00:02:18:04 - 00:02:20:02
and then you'll see the option
to the bottom there,
00:02:20:02 - 00:02:23:09
which is to enable chameleon
00:02:24:26 - 00:02:27:13
and then save.
00:02:30:06 - 00:02:30:20
Next,
00:02:30:20 - 00:02:33:27
we need to create or manage
a chameleon group.
00:02:34:15 - 00:02:38:09
So chameleon groups are
00:02:38:29 - 00:02:40:18
how you actually define
00:02:40:18 - 00:02:46:03
the look of a page and the different
chameleon groups have different uses
00:02:46:14 - 00:02:49:24
or departments, for example,
assigned to them.
00:02:50:03 - 00:02:54:16
So that particular user will see the code,
all the text
00:02:54:16 - 00:02:57:00
that's written in that particular
chameleon group.
00:02:58:12 - 00:03:00:10
So if I go to content management
00:03:03:18 - 00:03:10:09
and Chameleon, so
00:03:10:09 - 00:03:14:05
in order to create variations
of the editable areas listed
00:03:14:18 - 00:03:19:24
earlier in the tutorial, you will need
to create one or more chameleon groups.
00:03:20:11 - 00:03:24:26
Each group will have its own
alternative version of the editable area
00:03:25:19 - 00:03:28:22
and you are able to configure up
to ten different groups,
00:03:28:22 - 00:03:32:14
meaning you can have ten alternatives
to each editable area.
00:03:33:02 - 00:03:35:23
Doesn't have to be ten, it can be
fewer ten
00:03:35:23 - 00:03:39:04
is just your current maximum.
00:03:39:09 - 00:03:40:10
Please note, however,
00:03:40:10 - 00:03:44:20
that excessive amounts of Chameleon groups
can be fairly difficult to manage.
00:03:45:03 - 00:03:48:27
It might also result in a slower site
speed when a large amount of groups
00:03:48:27 - 00:03:50:03
are configured.
00:03:50:03 - 00:03:52:23
So please do try to limit
the number of groups you have
00:03:53:16 - 00:04:01:29
and try and balance it with the speed
you're trying to obtain on your site.
00:04:01:29 - 00:04:03:29
So I'll begin
by adding a new chameleon group
00:04:05:20 - 00:04:08:23
and then just assigning a name
00:04:15:05 - 00:04:16:11
enabled
00:04:16:11 - 00:04:21:05
and Insert
00:04:21:05 - 00:04:24:18
Now we need to access
some additional configuration settings
00:04:24:29 - 00:04:29:05
so to determine whether a user falls
into a chameleon group or not,
00:04:29:05 - 00:04:33:04
you must create rules against each
of those chameleon groups that you create.
00:04:34:03 - 00:04:37:20
Each rule is effectively
a set of conditions which has to be met,
00:04:38:03 - 00:04:41:25
and if a user meets all conditions
for any of the rules you create,
00:04:42:08 - 00:04:47:25
then they will be considered
part of that chameleon group.
00:04:47:25 - 00:04:51:29
So in the note on this,
if a user meets one or more rules
00:04:51:29 - 00:04:54:06
for separate groups,
then they will be considered
00:04:54:06 - 00:04:57:16
part of the group
which they meet the most rules for.
00:04:58:14 - 00:05:01:14
If a user meets an equal number of rules
for two
00:05:01:14 - 00:05:04:23
or more groups, then this is considered
an invalid configuration.
00:05:05:02 - 00:05:08:13
As your group should have unique
rules or rules
00:05:08:13 - 00:05:13:02
that are unique enough
to prevent this from occurring.
00:05:13:02 - 00:05:18:21
So to create rules for the Chameleon
Group, we expand the icon here
00:05:19:20 - 00:05:21:08
and you'll see that we have the option
00:05:21:08 - 00:05:27:18
to add a new chameleon configuration.
00:05:27:18 - 00:05:31:03
Now, the rule that we're going to create
here is to do with departments.
00:05:31:13 - 00:05:35:11
So we're going to make sure
that this Chameleon Group is
00:05:37:18 - 00:05:38:25
containing users
00:05:38:25 - 00:05:43:16
within the red company department
so I can give it an associated name.
00:05:43:16 - 00:05:49:03
This is just so I can identify it later.
00:05:49:03 - 00:05:55:26
Enable and insert.
00:05:55:26 - 00:06:00:09
Next I'm going to go to configuration
a separate screen now loads up
00:06:01:20 - 00:06:04:22
and what will see from here is
there are multiple fields
00:06:05:05 - 00:06:08:07
which can be used to determine
whether or not a user should fall
00:06:08:07 - 00:06:12:19
into this particular chameleon group.
00:06:12:19 - 00:06:15:09
So again, in order to
00:06:15:11 - 00:06:17:12
meet the rules requirements,
00:06:17:21 - 00:06:20:22
they must pass
every configured fields test.
00:06:21:13 - 00:06:24:07
For example,
if you configure both departments
00:06:24:18 - 00:06:27:24
and customer role
than the usual need to be
00:06:28:02 - 00:06:32:27
both in the configured department and
have the configured role assigned to them.
00:06:33:28 - 00:06:34:07
So in
00:06:34:07 - 00:06:36:09
this case, we're just
going to choose a relevant department.
00:06:37:11 - 00:06:40:17
So if I go to the department dropdown
and say Red Co.
00:06:40:17 - 00:06:45:21
Department, click on Save,
00:06:47:11 - 00:06:48:25
and that rule is now defined
00:06:48:25 - 00:06:53:28
for us, I'm
then going to repeat those same steps
00:06:53:28 - 00:06:56:19
for the two other chameleon groups
that I want to create.
00:06:56:29 - 00:07:02:16
So for my blue company
and my green company.
00:07:02:16 - 00:07:05:09
So all three of our chameleon groups
have now been configured.
00:07:06:11 - 00:07:09:08
Now that Chameleon is enabled
and you have one or more groups
00:07:09:09 - 00:07:14:00
configured, you can configure what's known
as context variance for each group.
00:07:14:18 - 00:07:18:18
The context variant is simply
a group's version of that editable item.
00:07:19:24 - 00:07:23:28
And as we mentioned earlier
on, you can configure context variants
00:07:23:28 - 00:07:27:07
for CSS, overwrite editable content
00:07:27:20 - 00:07:31:10
and message templates.
00:07:31:10 - 00:07:32:12
So for our example,
00:07:32:12 - 00:07:36:28
we will utilize our chameleon groups
on one of our editable content blocks.
00:07:37:13 - 00:07:40:12
So those are access
through content management
00:07:41:28 - 00:07:42:21
and editable
00:07:42:21 - 00:07:48:18
content.
00:07:48:18 - 00:07:52:23
And what I want us to actually do here,
so if I go back on my storefront is now
00:07:53:03 - 00:07:56:24
as a basic example for modifying
00:07:57:16 - 00:07:59:18
content using all chameleon groups.
00:07:59:29 - 00:08:02:26
I want to just change
some of the text that appears here.
00:08:02:26 - 00:08:06:07
So we'll keep it nice and simple,
but it will show the methodology.
00:08:07:09 - 00:08:08:20
This is our homepage banner.
00:08:08:20 - 00:08:11:09
So if I just go back
to my editable content,
00:08:12:21 - 00:08:15:00
find the home page banner
00:08:15:00 - 00:08:18:27
and click on edit.
00:08:18:27 - 00:08:22:26
The code that we have available
will appear and by default
00:08:22:26 - 00:08:25:24
it will be under
what's called the Editable Content Tab.
00:08:26:07 - 00:08:29:29
So this is the content
that will appear by default.
00:08:30:11 - 00:08:34:05
And if someone sits outside
of all of your defined chameleon groups,
00:08:34:12 - 00:08:42:04
then this is also what they will see. So
00:08:43:19 - 00:08:45:27
in order to actually define
00:08:45:27 - 00:08:48:08
that, we want to use
one of our chameleon groups.
00:08:48:15 - 00:08:51:18
I click on this plus icon here
00:08:51:18 - 00:08:55:17
that comes up with a new dropdown list
showing me my chameleon groups
00:08:55:17 - 00:08:59:20
that we've just created.
00:08:59:20 - 00:09:03:06
So if I add the Blue company, for example,
00:09:03:06 - 00:09:04:15
and create
00:09:08:21 - 00:09:10:06
now, if I go to the Blue Company
00:09:10:06 - 00:09:13:14
Chameleon Group, you can see that
there is now a separate editor.
00:09:14:20 - 00:09:16:23
Now at the moment this is in rich editor.
00:09:17:13 - 00:09:20:07
What I would suggest
if you want to just make minor changes
00:09:20:07 - 00:09:23:16
between the chameleon groups,
you want to copy and paste
00:09:23:16 - 00:09:25:29
what you've got
from the editable content tab.
00:09:26:23 - 00:09:29:20
So if I just select all that in copy
00:09:29:20 - 00:09:33:10
and all my new Chameleon group,
I'll switch to Code Mirror editor.
00:09:33:24 - 00:09:35:21
So it's actually looking for our HTML
00:09:38:21 - 00:09:42:06
and then paste.
00:09:42:06 - 00:09:45:23
So as we mentioned for this one, we're
just going to modify our welcome message.
00:09:46:04 - 00:09:49:09
So I'm just going to find the bit which
00:09:49:09 - 00:09:50:24
mentions my company name.
00:09:50:24 - 00:09:53:04
So the company that we're currently on
which is Red Company,
00:09:53:21 - 00:09:55:22
and I'm going to change that
to the current Chameleon Group.
00:09:56:12 - 00:10:08:22
So Blue Company.
00:10:08:22 - 00:10:13:04
And now I'm going to repeat those same
steps for my other two chameleon groups.
00:10:14:13 - 00:10:14:27
Okay.
00:10:14:27 - 00:10:18:02
And then just to make sure that we have
00:10:18:02 - 00:10:20:24
users covered
who don't sit within our chameleon groups,
00:10:20:24 - 00:10:23:21
I'm going to change my editable content
as well
00:10:24:01 - 00:10:27:04
at the moment on my storefront
that just references red co.
00:10:27:15 - 00:10:30:00
I want to make it more generic
so it doesn't sit within
00:10:30:00 - 00:10:33:21
these chameleon groups.
00:10:33:21 - 00:10:35:11
So I'll put that as our parent company
00:10:40:08 - 00:10:49:12
and save.
00:10:49:12 - 00:10:53:26
Okay, so what we want to do
now is to view our storefront
00:10:54:18 - 00:10:57:14
as various customers that are on our site.
00:10:57:25 - 00:11:00:23
So we've linked our Chameleon Group
to departments.
00:11:01:01 - 00:11:04:01
So I want to view our frontend storefront
00:11:04:29 - 00:11:07:22
as these customers
from different departments.
00:11:07:22 - 00:11:10:23
So different customers,
essentially different companies
00:11:11:09 - 00:11:13:21
and see if the text changes
as I expect it to.
00:11:14:24 - 00:11:18:08
So we'll start off
just by using my administrator account.
00:11:18:08 - 00:11:20:15
So if I refresh that,
00:11:20:15 - 00:11:22:29
we'll see that it's referencing
00:11:24:03 - 00:11:27:18
our text which sits outside
of the chameleon groups.
00:11:28:14 - 00:11:33:14
So what's present on the Editable
Content tab?
00:11:33:14 - 00:11:36:21
Now, if I go to customers,
customer management
00:11:37:15 - 00:11:42:03
and then I'm going to impersonate users
from my different departments,
00:11:42:03 - 00:11:49:00
so let's try the blue company.
00:11:49:00 - 00:11:50:18
You can see it's referencing Blue Company
00:11:57:02 - 00:11:58:15
and we'll try it with
00:11:58:15 - 00:12:06:26
Green Company.
00:12:06:26 - 00:12:08:24
So that is a very basic example.
00:12:08:24 - 00:12:11:09
All we're doing
is changing some simple text,
00:12:11:09 - 00:12:14:02
but that same methodology
can be applied to
00:12:15:07 - 00:12:18:20
all of those contacts blocks
that we've mentioned. So
00:12:18:20 - 00:12:23:10
all of those different areas where we can
add those Chameleon Group variations.
00:12:24:08 - 00:12:33:05
So just as a reminder
as to where they are,
00:12:33:05 - 00:12:35:14
wherever you see an icon
or a setup like this,
00:12:36:05 - 00:12:39:05
we have the ability to add extra
chameleon groups to change the tab.
00:12:39:18 - 00:12:42:07
That's where you will be able to assign
different content
00:12:42:16 - 00:12:45:21
based on Chameleon Group.
