Welcome to CMShoprocket’s documentation!

CMShoprocket is a Joomla! component for building an ecommerce website powered by Shoprocket and Joomla! CMS.

This documentation gives your instruction for how to install and setup CMShoprocket on your Joomla! website.

Contents:

Overview

CMShoprocket is a Joomla! component for building an ecommerce website powered by Shoprocket and Joomla! CMS.

Shoprocket is a complete ecommerce solution that can be added to any website with a single line of code. That line of code is a link to our Shoprocket that then feeds all of your products, payment gateway, and complete checkout process into your website, seamlessly. Shoprocket ony takes 2% fee of your transaction, no setup or monthly, yearly fees.

Although you can enable Shoprocket easily with just 1 link of code, however to do that and to be able to show your products, you need to know programming. This is why we build CMShoprocket, CMShoprocket helps you setup Shoprocket on your Joomla! website with no coding required.

CMShoprocket includes:

• CMShoprocket component: the main component for showing your products.
• CMShoprocket System plugin: inserting Shoprocket code into Joomla! pages to load Shoprocket API.
• CMShoprocket Content plugin: inserting Shoprocket buy button and re-order button into Joomla! article and custom HTML module.
• Re-order module: showing re-order button as a module.
• Basket module: showing basket (shopping cart) link.
• Products module: showing list of products horizontally or vertically.

Technical Requirements

CMShoprocket is compatible with Joomla! 3.x.x. The latest version of Joomla! is recommended. CMShoprocket is NOT compatible with Joomla! 1.x.x and 2.5.x.

Please check Joomla!’s Technical Requirements for more information of Joomla!’s requirements.

Features

Front-end

• Show list of all products or products in a specific category (meta).
• Like/share buttons for Facebook, Twitter, Pinterest and Google+.
• Zoom product’s image.
• Basket module, re-order module.
• Products module to show a list of products horizontally or vertically.
• Shoprocket doesn’t support metadata. CMShoprocket helps you insert meta keyword and meta description into your product detail page to improve your site’s SEO.

Back-end

• Manage product’s metadata.

Installation

Installation

In your Joomla! back-end, you navigate to Extensions -> Manage

In “Upload Package File” tab, you click “Browse” button and select the installation package of CMShoprocket on your computer, click “Upload & Install” button to upload the package to your server and install it.

If the package is installed successfully, you receive the message “Installion of the package package was successful.”

You can see CMShoprocket in Components menu item.

Update

In order to updating CMShoprocket to a greater version, you just need to install the new package, there is no extra steps required.

Configuration

In your Joomla!’s back-end, you go to Components -> CM Shoprocket to access CMShoprocket component.

The default page is the dashboard.

You click the “Options” button on the toolbar to configure CMShoprocket. You can find 6 configuration tabs: Authentication, Layout, Buy Button, Re-order Button, Notification and Permissions.

Authentication

In “Authentication” tag you enter your company ID into “Company ID” field.

To get your company ID, you log into Shoprocket, go to Settings -> Integration Code.

Layout

In “Layout” tab we have the folling options:

• Bootstrap: The Bootstrap version available in front-end. Bootstrap is often loaded by your template.
• Load Override CSS File: Load override CSS file to override Shoprocket default styles. You need to create components/com_cmshoprocket/assets/css/shoprocket.css file and add your override CSS styles.
• Show Branches: Enable this option if your shop has many branches and you already create these branches in your Shoprocket Dashboard.
• Branch Dropdown Label: You can customize the label of branch dropdown list. By default we use “Locations”.

Buy Button

In “Buy Button” tab we have the folling options:

• Check And Show Buy Button In Content: Enable this option if you want to add buy button to Joomla! article, custom HTML module or to any Joomla! extension which use Joomla! plugin events. You also need to enable CMShoprocket Content plugin.
• Buy Button’s Label: You can customize the label of buy button by entering your own label into this field.
• Buy Button’s CSS Classes: This option gives you ability to customize your buy button to fit into your template’s styles. For example, if you use a Bootstrap 2 template, you can enter “btn” to create standard Bootstrap button.

Re-order Button

In “Re-order Button” tab we have the folling options:

• Check And Show Buy Re-Order In Content: Enable this option if you want to add re-order button to Joomla! article, custom HTML module or to any Joomla! extension which use Joomla! plugin events. You also need to enable CMShoprocket Content plugin.
• Re-order Button’s Label: Your custom label for re-order button.
• Re-order Button’s CSS Classes: CSS classes for your button. For example, if you use a Bootstrap 2 template, you can enter “btn” to create standard Bootstrap button.

Notification

“Notification” tab contains the options for AJAX notifications in back-end, these notifications notify you if a task is done successfully or if there is any errors.

• Notification position Where notification is displayed on the page.
• Notification’s timeout (seconds) The number of seconds a notification is visible after disappears.

Persmissions

“Permissions” tab allows you to configue what users in specific user groups can do.

If you are the only one can access Joomla! back-end or if all the users who can access Joomla! back-end have the same rights, you can leave these options with default settings. However if you allow other users to access Joomla! back-end and want to limit their rights in CMShoprocket component, you can adjust these settings to suit your needs.

Plugins

In your Joomla! back-end, navigate to Extensions -> Plugins, search for “cmshoprocket”, you will find 2 plugins of CMShoprocket.

You need to enable “System - CMShoprocket” plugin in order to connect and load Shoprocket’s API on your site.

If you want to show buy button and re-order button in Joomla! article or custom HTML module, you need to enable “Content - CMShoprocket” plugin, you also need to configure in CMShoprocket’s configuration.

Products

Products Menu Items

To show Shoprocket’s products on your site, you need to create a menu item for Products menu item type from CMShoprocket.

In your Joomla! back-end, go to the a menu where you want to put your Products menu item.

Click “New” button to create a new menu item. Select “Products” for “Menu Item Type” field.

Switch to “Options” tab, you select the quantity of the columns in your product list.

If you want to get the products from specific metas, you enter the metas into “Categories/Keywords/Meta Tags” field, seperate them by a comma. For example: tshirt,clothes,jackets.

Product Detail Menu Items

In order to provide SEO for your product detail page and to control the modules in this page, we need to create a hidden menu item for Product menu item type of CMSnipcart.

Product menu item can’t be accessed directly, it requires product’s slug so we need to hide it from public. To do that we need to put it in a menu which is not assigned to any menu module (hidden menu), then the menu and its menu items are not displayed in front-end.

If you don’t have any menu like this yet, you can create one by access Menus -> Manage in your back-end’s top menu. Click “New” button on the toolbar to create a new menu. Give your new menu a title and a menu type.

Go to your new menu, click “New” button to create a new menu item. Select “Product (Hidden menu item)” as “Menu Item Type”.

Access the product list in front-end, you can see your products are showed.

Click on a product to see its detail.

Click on product image to view it in fullscreen and have ability to zoom it to see it in detail.

Basket Module

In Modules section in your Joomla! back-end you find the module “CM Shoprocket - Basket module” or click “New” button on the toolbar to create one.

There are 2 options for this module:

• Style: You can use the default style of Shoprocket which shows the basket on the top right corner of web page. If you use your template style you may need to add your own CSS styles if the basket doesn’t look good.
• Label: The label of your basket, like “Shopping cart” or “Your cart”,...

If you use the default style, you may see an empty space where you put the basket module.

The reason of this is what the module shows is already showed on the top right corner. To solve this you edit the module, switch to “Advanced” tag, switch to the last option “Modle Style” to “none”.

Go back to front-end, the empty space now disappears.

Products Module

In Modules section in your Joomla! back-end you find the module “CM Shoprocket - Products module” or click “New” button on the toolbar to create one.

There are 3 options to configure this module:

• Product Per Row: If you select “1” your products are shown in 1 column (vertically).
• Max Products To Show: You can limit the quantity of products to show with this option.
• Categoryies/Keywords/Meta Tags: If you want to only show the products from specific metas, you enter them into this field and seperate them by comma. For example: phone,iphone,mobile,android.

In the below screenshot, you can see how the products are showed in horizontal and vertical layout.

Re-Order Module

In Modules section in your Joomla! back-end you find the module “CM Shoprocket - Reorder module” or click “New” button on the toolbar to create one.

Similar to the options in CMShoprocket component’s configuration, in this module you can customize the label of re-order button and apply CSS classes to it.

Your re-order module could be displayed similar to this

Buy Button & Re-Order Button

You can show the buy button of a specific product in Joomla! article, custom HTML module or any extension which uses Joomla! plugin event.

This is perfect when you mention your product in an article and want to show the buy button for that product right inside the article.

Shoprocket has feature to allow customers to purchase what they purchased again by using re-order button. Similar to buy button, you can show re-order button anywhere.

To show buy button, you insert the tag “{buy XYZ}” where you want the button to show (replace XYZ with the ID of your product). You can get the ID of your product in your product form’s URL, you can get this URL when you edit a product, for example if your product form’s URL is “https://dashboard.shoprocket.co/products/edit/68359” then your product ID is 68359 and your buy button’s tag is “{buy 68359}”.

For re-order button, you insert the tag “{reorder}”.

You also need to enable CMShoprocket Content plugin and enable showing buy and reorder button in CMShoprocket component’s configuration.

Your buttons could be showed similar to this screenshot:

Translation

CMShoprocket only comes with English by default however you can always translate CMShoprocket to other languages.

Installation

Before translating CMShoprocket to another language, you need to know install that new language.

In your Joomla! back-end, you go to Extensions -> Language(s). You can see the list of installed languages on your site. Click “Install Language” button on the toolbar to install a new language.

Search for the language you want to install, select it in the list and click “Install” button.

After installing new language, go back to the installed language list, you can see your new language in the list.

You need to remember the language tag of your new language. In the above screenshot, French language package is installed, and “fr-FR” is the language tag of French.

Preparation

You can use your favorite FTP software or file managers available in your hosting control panel to navigate to <Joomla! root folder>/components/com_cmshoprocket/language/ folder. In this folder you can see the folder “en-GB”, this is where the language files of English are stored.

In this “language” folder, you create a new folder for your new language, the name of the folder is the language tag. Follow the above example, you create a new folder “fr-FR”.

Go to “en-GB” folder, copy “en-GB.com_cmshoprocket.ini” file in this folder to the new language folder that you just create (“fr-FR” as in the example).

In the new language folder folder, rename “en-GB.com_cmshoprocket.ini” to “xx-YY.com_cmshoprocket.ini”, “xx-YY” is the language tag of your new language, eg “fr-FR”.

Translate

Open “xx-YY.com_cmshoprocket.ini” with a text editor and translate the English strings in this file to your new language.

Important note: Joomla! language INI files must be saved as UTF-8 without the Byte Order Mark (BOM). For more information on Byte Order Mark see http://unicode.org/faq/utf_bom.html#BOM

The above instruction is for translating the front-end of CMShoprocket component. To translate the back-end and other extensions, you need to repeat the above steps for the following folders:

• CMShoprocket component’s back-end: <Joomla! root folder>/administrator/components/com_cmshoprocket/language/
• CMShoprocket System plugin: <Joomla! root folder>/plugins/system/cmshoprocket/language/
• CMShoprocket Content plugin: <Joomla! root folder>/plugins/content/cmshoprocket/language/
• Products module: <Joomla! root folder>/modules/mod_cmshoprocket_products/language/
• Basket module: <Joomla! root folder>/modules/mod_cmshoprocket_basket/language/
• Re-order module: <Joomla! root folder>/modules/mod_cmshoprocket_reorder/language/