Isotope eCommerce Blends CMS Content with your eCommerce shop.
No bridges here. Just pure integration.

Intro to Isotope

Welcome to the wonderful world of CMS/eCommerce Hybrids. Now throw out everything that you previously learned about building eCommerce shops, as Isotope takes an entirely new approach to building an online store, but one that we hope will allow for maximum flexibility and customization for a variety of customer situations.

If you are familiar with Contao, these tutorials should make a lot of sense. We are creating modules for the different components of the eCommerce system and dropping them into either our page layouts or page articles depending on how we will be using them or need them to display.

If you aren't super-familiar with TYPOLight, you may be scratching your head a little bit. Don't worry. We'll try and break it down into easy to follow steps that also explain a bit of how Contao works, and we will reference any other tutorials that may help explain things a bit more.

On to the tutorial!

1. Basic Setup - Site Structure

The first step in getting your store set up is to create the pages that you will need in your site structure. The site structure is where we create the virtual "site map" for the pages on the site and determine their hierarchy in relation to each other. If you have an existing site, you may need to do some re-arranging to put these where they most make sense in terms of navigation for your layout, and you may or may not need some of the included modules, but these are the basics:

  • Store Main Pages/Navigation
    • Product Category 1
    • Product Category 2
    • Product Category 3 (you get the idea)
  • My Account
    • My Order History
      • Order Details (reader)
    • My Address Book
    • Forgot Password (if you want people to be able to retrieve it)
      • Password Reset - Sent
      • Password Reset - Confirmation
  • My Cart
  • Checkout
    • Order Summary Page
  • Product Details Page

    2. Basic Setup - Store Configuration

    Now that you have the site structure set up, we need to create the basic configuration for your base store. Under "Store Configuration" create a new store and fill out the fields for each section for your specific configuration. They are:

    Shipping: Fill out the address information that will be used as a default for sending packages. This is used for some of the shipping modules that need to retrieve live shipping rates, such as UPS & USPS (for our US developers).

    Configuration: Set the default weight measurement for packages. Again, this will be used for shipping calculations. Also, you have the ability to set the duration for cookie persistence, as some session information about a user's cart is stored using cookies. If this is your default store setup, check the box marked "Set as default store."

    Pricing: Select the field that will contain your base price for each product. The default is "Price," but you can select any integer or decimal-based product attribute. You also have the ability to set a "Price Override" field which will display a block of text instead of the price, such as "Call for Price." Then you have some other basics such as a price factor (useful for doing currency conversion between store setups) and details such as rounding precision and increment (useful for international stores).

    Currency Settings: These basic settings let you configure the store's default currency and let you format it's display. We included some options here for international store setup.

    Billing and Shipping Address: Here you'll find options for setting the store's default country as well as allowed countries and displayed address fields during checkout. Again, these options are useful for international stores who may or may not want to display a given address configuration. I know it's shocking, but not all countries use a US Postal code, believe it or not.

    Invoice Logo: Here you can upload an image for use on your spiffy invoice printouts, for that professional and sophisticated look.

    Images: Here you can set a default image placeholder for products with missing images, as well as define the image sizes for product images. Each image can have 4 size settings:

    • Gallery: Useful to display a thumbnail in a product gallery on the product reader
    • Thumbnail: Useful for displaying on a general product listing page with multiple products
    • Medium: Useful for displaying as the primary product image on the product reader
    • Large: Useful for displaying in a Lightbox/Mediabox popup for closer inspection

    Once all the options are set up, now we can begin creating the modules that will make up the store.

    3. Basic Setup - Modules

    Now we're ready to begin creating our modules. These are the individual parts/engines of the eCommerce shop that we will assemble with our page layouts and site structure in order to make a complete store.

    Keep in mind that you may or may not need all of these, but it is a good reference for getting your store up and running. I like to use the following naming conventions as well so that I can keep them organized within the module tab, but feel free to use your own system if it helps.

    Account Modules

    Useful for allowing logged in customers/members to view past orders/manage their personal info. Not required if you want a cart that uses only guest checkout.

    • ACCOUNT - Address Book - This allows a member to view and update their stored addresses for use in the checkout process, similar to how Amazon.com saves all your addresses for easy reference. Nothing to really configure here.
    • ACCOUNT - Forgot Password - Allows a member to reset their password for their account. The redirect page is the "Password Reset - Sent" page that we set up in the Site Structure, and the confirmation page is the "Password Reset - Confirmation".  You can manually add text to these pages later that provide instructions on the process.
    • ACCOUNT - Login - Basic login module. You can choose whether it redirects to another page or stays on the current page. What I like to do is put this module on the "My Account" page and then have two types of content on the page - one set for guests and one set for logged in users. It's really up to you.
    • ACCOUNT - Order History - This is a handy module that let's logged in members view their order history. The redirect page will be set to the "Order Details" page we set up earlier.
    • ACCOUNT - Order Details - This is the "reader" module for the Order History. The redirect page should go back to the Order History page.

    Isotope Modules

    These are the main components behind the store.

    • ISO - Cart Full - This is the full-page version of the shopping cart to be placed on the "My Cart" page. I set the Cart JumpTo page to the "My Cart " page and the Checkout JumpTo page to "Checkout." This module will be based on the "full" template.
    • ISO - Cart Mini - This is a mini-sidebar cart that just keeps a running tab on the cart items and can be dropped in the page layout. Same settings as above only we select the "mini" template.
    • ISO - Checkout - This is the checkout module. There will be a lot more to configure here when we set up our payment and shipping settings, but for now just select some of the basics such as the completed order JumpTo page (order Summary) and the page used for login prior to checkout if you are using Login for checkout.
    • ISO - Filter Module - This module is used in conjunction with the Product Listing module below to filter/search within the product results. You need to assign each filter to a listing module, which we will create next.
    • ISO - Product Lister - Here you can define the properties of the product lister. The columns will define when a "clear" div is placed for use in a "grid" format, and you can set the jumpTo page to the Product Details page.
    • ISO - Product Reader - This is the reader module for the products. Very similar to the Newsreader and Eventreader modules. Provides the full product detail for an individual product record.

    Other Modules (optional)

    • SSL Redirect - If you will be using a SSL certificate on your Contao install to pass sensitive info (which we highly recommend unless you are using a 3rd party gateway such as SwissPost) you should install the "Redirect" module available in the extension repository. The SSL version should be placed on SSL-specific page layouts that will contain the modules that drive the checkout process, as well as any that you wish to secure, such as Account pages, etc.
    • Non-SSL Redirect - If you are using the SSL redirect on any page layouts you should have equivalent non-SSL page layouts with this module added to the included modules in order to switch back to the http:// version of the page.

    That's pretty much the basics. You may want to set up a couple Navigation modules if you haven't already in order to display the store nav and account nav on your pages, but we can go into that in more detail later on.