Image base navigation with modx wayfinder menu

If you are interested in Content Management Systems (CMS) then most likely you have heard about MODx (modxcms.com). In this tutorial i will explore how we can use or create image based modx wayfinder menu, we can create or generate standard ul based menu calling wayfinder snippet and than style this menu using css, but sometime we don’t require standard ul base menu or ul list with images in, so below are the steps following we can create image base menu.

Step - 1

Create a template variable name it “menuImage” and attached to your desired or active template set the values use the following settings - ‘Input Type: Image’ and ‘Widget: Image’.

Step - 2

Edit your home page assign any desired image to menuImage TV.

Step - 3

In your active template call wayfinder snippet with rowtpl and outertpl papamater for detail about paramater please visit this site MuddyDogPaws

Step - 4

For your rowtpl chunk use this chunk
<li[+wf.classes+]>[+menuImage+]
[+wf.wrapper+]
</li>

Your are Done

View your page in browser and you will see image in place of your home link, create css to indent the link text, we can also do it using only classes and using rowtpl chunk wf.docid wf.classes together in rowtpl chunk now you will have known classes name like 1nav, 2nav where 1 and 2 are page id’s so hard code it in css create class name 1nav and add background attribute to this class you are done if you guys facing any difficulty please write in comment hopefully i will answer within day or with in hour

Treasurechest modx integration

TreasureChest is an easy to use eCommerce system for MODx CMS/F. It is a 100% MODx native shopping cart, product manager, inventory manager, shipping assistant, and sales tracking solution which uses PayPal Website Payments Standard for payment processing. Further Reading here Treasurechest

Step 1 Download Treasurechest

Please download TC using below link also read the installation guide its simple after download unzip and upload to your root directory of modx installation.

Download at TC site Download at MODX

Step 2 Install Treasurechest

Open your web browser and navigate to your MODx website url /install/ (e.g. http://www.yoursite.url/install/) and enter your MODx Manager credentials to authenticate and authorize the installation. Agree to the license then click the “Install” button. After installation is complete, log into the MODx Manager, you will see module treasurechest added.

Step 3 Create Cart Document

Create new resource (new page or document) name it cart or any name you like and follow the settings below i also set the paramater cart_template for cart layout chunk when you will click later on view cart you will see this chunk in action.

uncheck the searchable from the setting of resource or page, remember the id of the card or newly created resource it will be used in configuration of treasurechest in next step.

Step 4 Configure TreasureChest

To configure TC click on modules than on treasurechest you will see product manager and sales manager icons click on product manager on this page you will see list of products and paypal email configuration on top right corner find the Edit Configuration button and click on it. change the cart id field with your newly (cart) document id and save that’s it your cart is setup

Step 5 Create chunk for Cart

Remember i used the cart_template paramater in cart document snippet call in Step 3 now its time to create that chunk[!TreasureChest? &service=`cart` &cart_template=`tcCartItem`!]
Create new chunk name it tcCartItem and paste below code in chunk code field.
<tr id="cart_item_[+cart.id+]" class="cart_item[+cart.alt+]">
<td class="cart_item_name[+cart.alt+]">
[+cart.item_name+]
</td>
<td class="cart_item_quantity[+cart.alt+]">
<input type="text" name="[+cart.id+]"
value="[+cart.quantity+]" size="3" maxlength="3" />
</td>
<td class="cart_item_amount[+cart.alt+]">
$[+cart.amount+] ea.
</td>
<td class="cart_item_remove[+cart.alt+]">
Remove
</td>
</tr>
<tr>
<td colspan="2">
[+cart.option_name_0+] [+cart.option_value_0+]
</td>
<td colspan="2">
[+cart.option_name_1+] [+cart.option_value_1+]
</td>
</tr>

Step 6 Create a product page

Create new resourse name it product_name fill the longtitle and summary field with some dummy data and paste below code in resource content field.
[!TreasureChest?&item=`1`!]
<div>
<div class="heading_maroon">Product Details</div>
<br />
<p>[+introtext+]</p>
<div>[+treasure.image.thumb.thickbox+]</div>
<div>Item Name:&nbsp;[+treasure.item_name+]</div>
<div>Price:&nbsp;$[+treasure.amount+]</div>
<div>Shipping Cost:&nbsp;$[+treasure.shipping+]</div>
<div id="product_view">
[+treasure.add+]
</div>
</div>

Thant’s all your treasurechestcart is ready to go live

Unpacked treasurechest.js for modx

Got chance to work on modx treasurechest cart integration Thanks to scotty who built this usefull package but as read on modx forum so many people having trouble to integrate and customizing the TC mostly asking how they can change the view cart and empty cart buttons of TC (TreasureChest ) answer is they need unpacked treasurechest.js

on line 2188 replace this ‘ + cart_view + ‘ to your image path and replace this ‘ + cart_empty + ‘ for cart empty image path, That’s it

Download Here

MODx Tutorial and Resources

Working With a Content Management Framework: MODx

If you are interested in Content Management Systems (CMS) then most likely you have heard about MODx (modxcms.com). MODx is not just an extremely flexible CMS that makes managing website content a breeze, it is also a powerful Content Management Framework with an extensive API that makes it a developer’s dream.
“MODx is an open source PHP Application Framework with Powerful Features that help you take control of your online content. It empowers developers and advanced users to give as much control as desired to whomever they desire for day-to-day website content maintenance chores.”

Official Link

Where to find MODx Help? – MODx Resources and Tutorials on the Web

Today I’m going to start on a new series of tutorials that will teach you how to build a website using MODx CMS. As always, I invite you to add comments and share your knowledge as we learn and build together. I also encourage you, as you follow these tutorials, to work along with me, installing a local copy of MODx on your computer so that you can follow along and see MODx in action.

Official Link

Exploring MODx from the inside

MODx is dead! Long live MODx!
Well, no, not really. MODx as we know it now, MODx Evolution, is far from becoming obsolete.
While MODx 2.0 Revolution is in its first public beta, being used initially to support a new generation MODx CMS and representing a quantum leap in web application frameworks, its older brother MODx Evolution will continue to be a sturdy supporter of web developers everywhere for a long time.
You could say that MODx Evolution is a content manager with application framework support, while MODx Revolution is an application framework with content management support.

Official Link

The MODx Content Management System

MODx is a content management system that helps you create superlative web sites. There are two key benefits to MODx. First, it makes web sites easy for you and others you designate as site admins to maintain. Second, once you get used to it, it allows you to create very complex web sites in a very short time. Things that would take many lines of code for you to do yourself can often be accomplished with a line or two in MODx. Of course there are many other benefits as well, but we’ll get to those later.

Official Link

MODx Cheat Sheet

an excellent resource to have as you work with MODx, developed by Brandon Booth, This document applies to Modx 0.9.6.

Official Link

The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

Those who know me from the forums probably know that my favourite snippet is Wayfinder. This e-book started out as a tutorial that I thought I’d post in the wiki but it ended up as an e-book! This is the culmination of about 5-6 months writing and is quite detailed. The e-book explains the logic behind and the workings of almost all the Wayfinder parameters. This is all done practically by building a fictitious Restaurant website. The e-book also provides examples of building some common menus such as an accordion menu, using UltimateParent with Wayfinder, etc. Because of this, it makes for quite some long reading, 148 pages! However, there’s lots of graphics so it is not all text and boring, at least I hope not. I hope it serves newbies and experts a like, either as a guide, a reference, an inspiration or just a challenge to contribute to the MODx project in one way or the other.

Official Link

How to Build a Beautiful Site With MODx CMS (Content Management System)

I spent months testing out various content management systems (CMS), and have to admit that no other software came close to the flexibility of MODx. I will have you know that I am by no means a MODx CMS guru, but I have built several sites on this beautiful piece of software and thought I’d share this treasure.

Official Link

How to make website with MODx CMS in 10 minutes

In this MODx CMS tutorial, I will show you how to install MODx, find and install MODx template, add or modify your content. On the way you will explore the backend interface and a number of the standard MODx features. In the end you should get a MODx driven website with your own content. It’s just the beginner MODx guide, so don’t expect I’ll go too much into the details: the purpose is to quickstart your first MODx site as soon and as easy as possible. In the next MODx tutorials I’ll go deeper into building websites with this powerful CMS, so stay tuned.

Official Link

Basic Integration of Foxy Cart into MODx

This is the first of several Screencast I’m going to do to explain how to integrate Ecommerce into MODx using Foxy Cart. MODx is our favorite CMS at My619.com and we have found that Foxy Cart allows us to set up Ecommerce for our clients at a very affordable price.

Official Link

Multiple domains / sub sites with MODx

In this tutorial, I would like to show how multiple domains can be managed with one MODx installation (one database and one manager). You need only a few plugins, snippets, chunks, a template variable (TV) an some entries to the .htaccess. For advanced users or for lazy people I also will show how to use only one template for handling individual designs for each domain.

Official Link

Basic Blog with modx

Here’s how to use the MODx CMF to create a simple blogging system with comments, and an easy to use method of adding “blog” entries. In this tutorial, we will use two chunks, and two documents.

Official Link

Friendly URLs Guide: modx

This article covers various techniques and methods for representing these parameters in the URL in a clean and “friendly” manner, as well as then how to read the parameters.

Official Link