This post covers integrating the custom fields created in the Viking Coders Additional Product Fields module with the Category Page Templates and Product Page Templates modules. All of these modules and the code below require the use of the OpenUI module.

In this tutorial, our client’s shopping cart needed to have two additional fields displayed with each product: one for free shipping and one for a lease to own payment amount. Using the Additional Product Fields module, I created the 2 new fields called FREESHIP and LEASE.

The next step is to actually insert the fields into the Product Page Template and Category Page Template designs. In the Product Page Templates module, you have to "register" the token for the additional product fields that were created. Under the "Third Party Tokens" tab, enter DEN_PRODFIELDS for the module code, and prodfields for the token. The token can be anything you want, I chose prodfields. When you click on the update button, the new token is created: %module|prodfields|xx|%.

Now, inside the custom product page template that you are using, go to the "Product Template" section of the design. To simply insert the new custom field wherever you want it to appear, add the line %module|prodfields|lease+|%. The plus (+) sign is optional and simply means that the label of the field will also be output. If you only want the contents of the field i.e. the data, then omit the + sign at the end. You can wrap this token code in any HTML you want to change the formatting, such as a font tag or color tag. The code for the free shipping field I created would simply be %module|prodfields|freeship|%. I omitted the + sign because for the free shipping, I only wanted the data "Free Shipping in the Cont. US" to show on the screen and not the custom field label.

Let’s add a little complexity to the code. I have some other text and an image that I want to display only if the new custom fields actually have data. So if my new Lease field has any information in it, i.e. isn’t blank, then I want to also display the link and graphic for the lease application. I can’t include all of this information and HTML in the actual product field so I need a way to check if it exists and then display the information on the product detail page. Here is the OpenUI if statement to check:

%SET(g.lease|%module1|prodfields|lease|%)%
%IF(g.lease)%
You can also lease this equipment.
<br>
<font color="#8F3535">
<strong>%module|prodfields|lease+|%</strong>
</font>
*approximate payment based on credit & 36 month lease
<br><br>
<a href="http:/link-to-lease-application.pdf" target="_blank"></a>
%IFEND%

The first %SET line creates a new variable with the contents of the custom lease product field. Then we use the %IF statement to check if there is any data in that variable. If there is data, we output the information about the lease payment. If the field is empty then the information is skipped and the customer never sees it on the page.

You can use this same block of code on any of the Viking Coders design template modules. The other important element you need to include at the very top of your page template is the %OUI% tag. This tells the MIVA engine that there is custom OUI tokens in the design template. The %OUI% needs to be the very first line in any of your custom templates. This is often overlooked and causes hours of frustrating troubleshooting.

I also used this code to check for the existence of data in the freeship field. If the item had text in the field, thereby indicating the product had free shipping, then I displayed the text FREE SHIPPING line. If the field was empty then I just displayed a link to the estimate shipping & information page.

For information on further extending this technique, contact me or visit the official MIVA user forums, either the old listserv archive or the new MIVA user forums.

All of the modules discussed here are available at Viking Coders. For more information see:
Additional Product Fields module
Easy Design Bundle - a discounted multi-pack of all 3 design modules, consisting of the Other Page Templates, Category Page Templates and Product Page Templates modules.

Tags: miva+merchant, miva, shopping+cart, miva+customization, miva+programming, ecommerce, e-commerce