CMS Online Store Quick Start Guide. with Joomla, j2store

CMS Online Store Quick Start Guide with Joomla, j2store

Configuring Joomla P a g e 1 Table of Contents Introduction... 2 Installing Software... 2 Configuring Joomla... 2 Administrator login... 2 Installing j2store... 3 Creating the Website... 3 Creating Articles... 3 Setting Article Details... 3 Creating Menus... 4 Creating Categories... 4 Website Layout... 4 Displaying Positions... 5 Modifying Module Position... 5 Adding Templates... 5 Assigning Templates to Pages... 6 Modifying Templates... 6 Creating an Online Store... 7 Setting Product Options... 7 Setting a Tax Profile... 8 Setting Shipping Options... 9 Displaying Store Merchandise... 10 User Content Management... 11 Sample Online Store... 11 Introduction Last Updated: 1/16/2014

Configuring Joomla P a g e 2 Introduction A Content Management System (CMS) allows users to add and modify web page content with no need to write any program code. A CMS can therefore be used for an online store, so the owner can add and modify the products in the store. One of the popular CMS is Joomla and an extension, j2store, provides the further functionality of shopping and payment for the online store. This guide will get you started quickly developing the online store in this framework. Once you ve mastered this you can explore in product and third-party documentation other methods and functionality. Installing Software To install Joomla on your server follow the steps in Joomla documentation http://docs.joomla.org/j3.1:installing_joomla. Assuming you have the server on the client Windows machine, the server domain address is http://localhost/<joomla folder> and the physical location is C:\inetpub\wwwroot\<Joomla folder>. We suggest for a first time user that you include the sample data in your install and then remove it later once you have gained some experience. Configuring Joomla It is suggested to modify the settings of these attributes. The configuration is accessed from System- >Global Configuration. Click on Articles in the Component list to modify these settings. Configuring Articles In the Articles tab, select Hide for these settings since it is not useful to display them to the user. Show Category Show Author Show Publish Date In the Category tab, select Show for these settings. Category Title Category Description Administrator login Introduction Last Updated: 1/16/2014

Installing j2store P a g e 3 To create and manage the site you will login as administrator. Navigate to the site <server domain>/administrator and login with the administrator user and password you created during the installation. Installing j2store NOTE: You can choose to install j2store later, after you have created the site where you will build the store. To install j2store: 1. Download the latest stable version of j2store from http://j2store.org/download.html. 2. Click Extensions-> Extension Manager to open the Extension Manager: Install window. 3. In the Extension Manager: Install window, click Choose File and navigate to your download folder. 4. Select the file you downloaded. 5. Click Upload & Install to install the extension. Creating the Website A Joomla website consists of articles which are associated to menus for access. We will describe how to create and associate these components, along with related components to manage the site. Creating Articles Content is created in articles which are accessed from Content->Article Manager. Click on New to open the window to create an article. Setting Article Details You can enter the formatted text, images and links. The article can be displayed over multiple pages by inserting either Page Break or Read More. If you want to include the article in a group of articles to present under the same menu, then select a Category which you have created. Publishing Options If you don t want to publish the article yet, you can set Status to Unpublished and optionally enter the Start Publishing date. Likewise you can optionally enter a Finish Publishing date to limit the period the article will be published. Article Options Creating the Website Last Updated: 1/16/2014

Creating Menus P a g e 4 Most of these options and the options in Configure Edit Screen will be set in Global Configuration, but you can set a specific different value for an article. Article Permissions Set specific editing permissions for users or groups of users. Details Change the default if needed for the publishing status of the article and the access permission level. Creating Menus Once you have created an article which you want to present, add the article to a menu for user selection from Menus-><one of the listed menus>->add New Menu Item. Details To put the article in the new menu: 1. In the New Menu item window, click Select in Menu Item Type to open a new window. 2. In the window, click Articles to display the articles list. 3. Click Single Article and the window closes. A few other items to consider in this section: Parent Item Choose from the list to place the new menu in a sub-menu Ordering Choose location in the menu list Default Page Click Yes to have this the default menu item that is displayed Template Style Choose a style other than default if you want a special template for this menu There are other options for Menu Item Type->Articles. To automatically display a list of all articles in a category choose either Category Blog or Category List, depending on the desired list format. Module Assignment Optionally select a module for the menu. Creating Categories Articles can be assigned to categories and then automatically included in a menu list associated to the category. To create a category, Click New under Content->Category Manager. Similar to Setting Article Details, you can add text and image to display with the category. (They are set to display by default in System Configuration.) Permissions and Details are the same as in article Details and Article Permissions. Website Layout Website Layout Last Updated: 1/16/2014

Displaying Positions P a g e 5 Once the Content is defined in articles and available from menus, you want to define the layout look and feel to your web page design. Joomla provides capability to define your layout by selecting a template, modifying it using the Joomla options and finally directly modifying the template s Cascade Style Sheets (CSS). Displaying Positions Each component of the layout is at a defined position on the page, depending on your template. In order to access the component at its position, you can view the page showing the position of each component. To display the positions: 1. Click Extensions->Template Manager to open the Template Manager: Styles window. 2. In the Template Manager: Styles window, click Templates to open the template list. 3. Click on Preview of the template used on the page to open the page, with positions displayed. Modifying Module Position Modules are Joomla content that resides in a defined position on the page and can have associated behavior. The position of a component can be changed by modifying its module position. This can be used, for example, to change the position of a Search box that is included in the template. To modify the position of a module: 1. Click Extensions->Module Manager to open the Module Manager: Modules window. 2. In the Module Manager: Modules window, click on the module whose position you want to modify. 3. Select the new position from the Position dropdown menu. 4. Click Save or Save & Close. Adding Templates As mentioned, the basic design of a web page is based on its template. Joomla comes with some templates, but you might want to use a different template to achieve the look you ve designed. There are thousands of templates available, many free. Search the internet for a template that matches your design and is available for your version of Joomla. To add the template to your Joomla site: 1. Download the template to your server. 2. Click Extensions->Extension Manager to open the Extension Manager: Install window. Website Layout Last Updated: 1/16/2014

Assigning Templates to Pages P a g e 6 3. In the Extension Manager: Install window, click Choose File and navigate to your download folder. 4. Select the template file, which will usually be a compressed zip folder and click Open. 5. Click Upload & Install to install the template. Assigning Templates to Pages A site can have a single template for all pages or assign different templates to certain pages. A default template is assigned at Joomla installation and you can change that template. All template management is from Extensions->Template Manager. Click on the star in Default column of the template you want to make default. It will turn yellow and is now your default template. To assign a template, other than default, to menus: 1. In the Template Manager, click Styles. 2. Click on the style you want to assign to a page to open the Edit Style window. 3. In the Edit Style window, click Menus Assignment. 4. Click on the menu to check the box. 5. Click Save or Save & Close. The pages accessed from that menu will now be displayed with the assigned template. Modifying Templates To modify attributes of a template from the template manager: 1. In the Template Manager, click Styles. 2. Click on the style you want to modify to open the Edit Style window. 3. Click Options. 4. Modify any of the options. 5. Click on Save or Save & Close. The attributes that can be modified differ for each template. Other attributes can be modified directly in the css file, again depending on the template. To edit a template css file: 1. In the Template Manager, click Templates. 2. Click on the template you want to modify to open the Customize Template window. 3. Click on the Stylesheets file you wish to edit to open the css file for edit. 4. Modify the css file and click Save. Creating an Online Store Last Updated: 1/16/2014

Setting Product Options P a g e 7 Creating an Online Store You create an online store with the j2store extension that is added to the Joomla framework. Articles are created and assigned to menus and categories as described in Creating the Website. Within that framework, the store merchandise is presented with the capability to order and purchase the merchandise. In this section we will present the store specific configuration and presentation within the Joomla framework with the extensions. Setting Product Options Select Components->J2Store to open the Dashboard window and then each of the following from the dashboard. Setting Options This opens the J2Store Global Configuration. The following items under Cart Settings might have to be modified from the default setting. Thumbnail image in the cart Show SKU field in cart block Price display options Select the option corresponding to where you place merchandise images in the articles Set to No if you prefer not to show the SKU number Modify if you prefer to also show the tax amount NOTE: Modify other settings as needed for your preferred merchandise display. Creating Product Options A product option must be created for each option that you will want to present for your merchandise. (These will be assigned to each applicable product article). If you want to allow choice of various sizes, for example, then create an option for size and then some size values. To create a new option: 1. Click New to open the Product options: [New] window. 2. In the Product options: [New] window, enter the Unique Name and Display Name. If you want to change the default, select different values from the dropdown lists. 3. Click Save & Close. 4. Click Set Option Values for the option just created to open the Option value window. 5. For each option value Enter an Option Value Name. Click Create option value. Creating an Online Store Last Updated: 1/16/2014

Setting a Tax Profile P a g e 8 6. Click Save all Changes. 7. Click x in the top right corner to close the window. Applying Product Options Create an article for a merchandise item as described in Creating Articles and then click on the J2Store Cart tab to set option values. First make sure that Enable cart is set to Yes. To set product options follow these steps for each option for the product. 1. Enter an option name, as instructed, in the Choose a product option box. 2. If the option value must be chosen, set Required to Yes. 3. Click Save at the top of the window. 4. Click on the J2Store Cart tab again. 5. Click Set price to open the Set Options window 6. In the Set Options window, for each Option value: Select the value from the drop down list Optionally set a price or weight to adjust up or down (+ or -) Click Create Option 7. Click Save All Changes. 8. Click x in the top right corner to close the window. 9. Click Save or Save & Close. Setting a Tax Profile Create a tax profile that sets the sales tax rate to charge based on the address of the order. Select Components->J2Store to open the Dashboard window and then each of the following from the Settings dropdown list. Creating GeoZones Create a zone for each geographic area that has a separate sales tax rate. In the example of United States create a zone for each state that has a sales tax. NOTE: There is further need to have zones for entities within the state, but that is not yet supported. To create GeoZones: 1. Click New to open a Geo Zone window. 2. In the Geo Zone window enter the name. 3. Click Save. 4. In the Countries and Zones pane, select country and optionally a zone. 5. Click Add Country/Zone. Creating an Online Store Last Updated: 1/16/2014

Setting Shipping Options P a g e 9 Creating Tax Rates Create a tax rate for each GeoZone that you created. The sales tax will be calculated with that percentage. To create Tax Rates: 1. Click New to open a Tax Rate window. 2. In the Tax Rate window enter the required fields. 3. Click Save & Close. Creating Tax Profiles Create a tax profile, comprised of the tax rates, which you will apply to articles. To create a Tax Profile: 1. Click New to open a Tax Profile window. 2. In the Tax Profile window enter Tax Profile Name 3. Click Save. 4. In the Tax Rates pane, add each rate to include in the profile. Select the Tax rate and Address. Click Add Tax Rate. 5. Click Save & Close. 6. Click Published column for the profile to ensure it is checked. Applying Tax Profile Create an article for a merchandise item as described in Creating Articles and then click on the J2Store Cart tab to set option values. First make sure that Enable cart is set to Yes. To set the tax profile: 1. Select the tax profile from the Item Tax dropdown list. 2. Click Save or Save & Close. Setting Shipping Options Create a shipping method for each method you want to have available to customers. Select Components->J2Store to open the Dashboard window and then Shipping from the Settings dropdown list. Creating Shipping Methods Create a method for each geographic area that has a separate shipping rate. Creating an Online Store Last Updated: 1/16/2014

Displaying Store Merchandise P a g e 10 To create Shipping Methods: 1. Click Create from the first shipping method displayed on the list to open a Shipping Methods window. 2. In the Shipping methods window click New to open a Add a standard shipping method window. 3. In the Add a standard shipping method window enter the required fields. NOTE: The shipping methods are described well in this window and this document won t cover each of the types. 1. Click Save & Close. 2. In the Shipping Methods window click Set Rates for the shipping method you created to open the Set Rates window. 3. In the Set Rates window add each GeoZone that you will ship to. Enter the required rate information (dependent on the shipping method). Click Create Rate. 4. Click Save All Changes. 5. Click x in the top right corner to close the window. Displaying Store Merchandise Once everything is configured and the articles ready, it is time to set up a menu and page to display the products and a menu to view the shopping cart. NOTE: Of course, you can set up multiple menus for different categories of merchandise. To create the menu at the top and displaying all articles in a category: 1. Click Menus->Top->Add New Menu Item to open the New Menu item window. 2. In the New Menu Item window, click Select in Menu Item Type to open a window. 3. In the window, click Articles to display the articles list. 4. Click Category Blog or Category List and the window closes. 5. In the Choose a category dropdown list, choose the category you had assigned to the articles. 6. Click Save & Close. To create a menu for the shopping cart follow the same steps, except select a different article, J2Store- >Cart. Adjust the display layout under System->Global Configuration->Articles. If using the Blog category, set the number of articles and columns under the Blog/Featured Layouts tab. User Content Management Last Updated: 1/16/2014

Displaying Store Merchandise P a g e 11 User Content Management Since the purpose is to create a framework where the user can easily add or modify content, products can now be created or modified easily by just adding articles as described in the sections: Setting Article Details Applying Product Options The new products will then be displayed in the store under the same menu and available for ordering. Sample Online Store To check that this procedure produces a site you will like, following are screenshots of a store and the shopping cart after a few orders. Aren t the bunnies cute! Hope you will enjoy the results for your site. User Content Management Last Updated: 1/16/2014

Displaying Store Merchandise P a g e 12 Sample Online Store Last Updated: 1/16/2014

Displaying Store Merchandise P a g e 13 Sample Online Store Last Updated: 1/16/2014