Clicked: in-store click-to-edit /
Installation
Installation
For Clicked to work each area to be edited must be wrapped by a Clicked page item. This tells the module what content it can edit. Each store could be different in this regard so if you have any questions be sure to contact us.
Step 1.
Install the module then access the admin in Utilities area and enter your license:
MENU > UTILITIES > CLICKED
Step 2: Editors Settings: Enter Editor Login Names
Enter the username/login of your customer account.
This will give your customer account editor privileges so when you are logged in you will be able to edit while browsing your store by clicking on areas to edit. You may assign as many editors as you want, one username per ine.
Step 3: Assign Page Item
Assign the clicked page item to each page you want to use Clicked on. Usually it would be on the Product Display page (PROD) and the Category Display Page (CTGY).
Assign page items by clicking on the ITEMS tab and finding CLICKED.
Step 4: Header CSS
Add the following code just before the closing </head> tag on each page you want to use Clicked.
<mvt:item name="clicked" param="head" />
Step 5: Footer JS
Add the following code just before the closing </body> tag on each page you want to use Clicked (PROD and CTGY to begin with):
<mvt:item name="clicked" param="foot" />
Step 6: Check for jQuery
Clicked requires jQuery to work. You can skip this step if you know you have jQuery loaded. Most Miva Merchant stores will already have it loaded.
However, some recent ReadyThemes (StoryTeller for one) "defer" loading javascript files which will break jQuery plugins that create content (such as Clicked.) Double check that you are not "deferring" jQuery by going into your MENU > USERINTERFACE > SETTINGS and taking a look at the global footer.
Search for jquery and then see if the word defer is in the javascript call. If so, remove it (it's unnecessary anyway) and save your settings. It will probably look something like:
<script src="&mvte:global:theme_path;/js/jquery.min.js" defer></script>
If you see the word defer in there, remove it and save your settings:
<script src="&mvte:global:theme_path;/js/jquery.min.js"></script>
Again, doing this will not cause any problem in your store in any way.
Step 7: Create Clickable Areas
Enclose editable areas with Clicked page items. This is accomplished by finding the page entity that is providing the text and enclosing it in a Cicked page item. The examples below will probably work in the majority of stores. The items below are all optional - use only the ones you need.
For example, to turn the product description into an editable area, find the page entity &mvte:product:name; and enclose it in the corresponding Clicked page item which in this case, is the first one below.
Product page items: to be used on the PROD (Product Display) page.
Each of these page items is an example of how they should be used on your page. Create editable areas by finding the page entity (starts with &mvt: or &mvte;) of the content you want to edit, then "wrapping" it with the Clicked page item.
Each line below is an example of how that might look in your page. If you have trouble finding the right page entity (it might be used in more than one place) you can test by adding a dash or a couple periods after the page entity and seeing where they show up on the screen in your store.
For example, to set up editing for the product description, find:
&mvt:product:descrip;
and "wrap" it with the clicked page item like this:
<mvt:item name="clicked" param="product-name">&mvte:product:name;</mvt:item>
Here's a list of the things you can edit with Clicked and how you would wrap them with the module page item. Don't hesitate to contact us if you have questions.
<mvt:item name="clicked" param="product-name">&mvte:product:name;</mvt:item>
<mvt:item name="clicked" param="product-price">&mvte:product:price;</mvt:item>
<mvt:item name="clicked" param="product-cost">&mvte:product:cost;</mvt:item>
<mvt:item name="clicked" param="product-description">&mvt:product:descrip;</mvt:item>
<mvt:item name="clicked" param="product-header"><mvt:item name="prod_ctgy_hdft" param="prod_header" /></mvt:item>
<mvt:item name="clicked" param="product-footer"><mvt:item name="prod_ctgy_hdft" param="prod_footer" /></mvt:item>
<mvt:item name="clicked" param="product-inventory">&mvt:product:inv_long;</mvt:item>
<mvt:item name="clicked" param="product-weight">&mvt:product:weight;</mvt:item>
<mvt:item name="clicked" param="my_custom_field cf">&mvt:product:customfield_values:customfields:my_custom_field;</mvt:item>
<span class="redactor-invisible-space"> </span><mvt:item name="clicked" param="my_custom_field cfnotags">&mvt:product:customfield_values:customfields:my_custom_field;</mvt:item>
Category page items: used on the CTGY (Category Display) page.
<mvt:item name="clicked" param="category-name">&mvt:category:name;</mvt:item>
<mvt:item name="clicked" param="category-header"><mvt:item name="prod_ctgy_hdft" param="ctgy_header" /></mvt:item>
<mvt:item name="clicked" param="category-footer"><mvt:item name="prod_ctgy_hdft" param="ctgy_footer" /></mvt:item>
Finished! All you need to do now is log into your customer account (one of the account usernames you put in the config settings in step 2) and browse your store. When you see something you want to edit, simply click on it, make your edits, then click the save button.
Product Description Example (LEVELS PROD page):
The standard page template code for displaying the product description in the LEVELS readytheme (and probably all the other readythemes) is:
<div class="product-description">
&mvt:product:descrip;
</div>
Setting it up for clicked is this easy:
<div class="product-description">
<mvt:item name="clicked" param="product-description">&mvt:product:descrip;</mvt:item>
</div>
Just wrap the content that you want to edit inside a clicked page item and you're done.
updated August 07, 2017
