AceShop Quick Guide. AceShop is the integration of two of the most popular open source projects in the world: OpenCart and Joomla!

Transcription

1 AceShop Quick Guide 1.1 What is AceShop? AceShop is a full-featured e-commerce component for Joomla with an easy to use, search engine friendly, visually appealing interface. AceShop is the integration of two of the most popular open source projects in the world: OpenCart and Joomla! We developed AceShop so you could enjoy the power & flexibility of OpenCart and ease-of-use of Joomla! right inside your Joomla! site. Notes: 1. Joomla 1.5 & 2.5 compatible 2. User synchronization between Joomla & OpenCart (single login) 3. AceShop (OpenCart) is a native Joomla! component (not bridge/iframe) 4. Joomla SEF URLs & SEO (Metadata) support, also with SEF components 5. Plugin for AceSEF component for better SEF URLs and automatic Metadata generation 6. All OpenCart extensions (modules, payment gateways etc. except themes) can be installed/used 7. All OpenCart modules can be used as Joomla modules 8. Joomla 2.5 & JoomFish multi-language support 9. Sitemap support, Xmap and internal sitemap 10. Integrated with Joomla search 11. Automatically integrated with Joomla templates, 0 conflicts 12. AceShop will inherit styles from your website template right out of the box ensuring it always matches yours site 13. Integrated with Joomla breadcrumbs 14. Content plugin to display products everywhere 15. Using Joomla editors (JCE, JCK etc) inside OpenCart 16. Migration tool for VirtueMart, HikaShop, redshop, Tienda, JoomShopping and RokQuickCart 17. Hack-free solution, no OpenCart files changed thanks to vqmod 18. GNU/GPL Licensed, installation & support for unlimited domains 1

2 1.2 What can you do? Catalog Management Unlimited & Nested Categories Unlimited Products Unlimited Manufacturers Product can be assigned to multiple categories Product Reviews Product Ratings Product Options Product Attributes Product Attribute Groups Product Tags Product Returns Downloadable (Digital) Products Related Products Compare Products Unlimited images possible for each product Automatic Image Resize Products & Options Stock Order & Sales One-page checkout Guest Checkout Custom Order Statuses Custom Stock Statuses Multi Store Multi Currency Multi Tax Rates Order History Printable Invoices Address Book Shipping Weight Calculation Advanced Sales Reports Google Analytics integration Internal Graphical Reporting Returns Coupons Gift Voucher Search and sort in orders Basic mailing system 2

3 1.2.3 Extensions & Systems 20+ Payment Gateways 8+ Shipping Methods Modular System (1000+ modules) Templatable Custom Reports (50+ reports) Translated in 50+ Languages Reward Point System RMA System Affiliate System Wishlist System Credits System Reorder System User Management Shopper groups Prices per shopper group Geolocation Multi Language B2B Internal ACL system SEO Optimization SEF URLs support including SEF components AceSEF plugin Custom meta and keywords for every products Google analytics support Designers & Developers MVC system Easily extendable Templatable 100% CSS (tableless) design Easy to customize the output HTML & CSS override similar to Joomla's one Semantic Structure & Others SSL support Internal search system RSS support (also Google Base) Built-in captcha system Social networks support (twitter, facebook, addthis) Bulk CSV import/export (products, categories etc.) Actively developed 3

4 1.3 AceShop Requirements These are the requirements expected from your web server. These are normally delivered by your hosting company. PHP Setting PHP or higher Register Globals: Off Magic Quotes: Off File Uploads: On Session Auto Start: Off PHP Extensions GD: On curl: On ZIP: On You have to ensure that: Joomla 1.5 Setting: System - Legacy plugin must be disabled 4

5 1.4 Obtaining AceShop You ll receive the download link via or download it from your subscriptions page. The subscription page URL: AceShop Installation This section will teach you how to install AceShop on your Joomla website. Log-in as Administrator and access your Joomla Admin panel. Diagram 1 As described in the screenshots above, complete all the following steps. Step 1: Go to Extensions -> Extension Manager Step 2, 3, 4: Browse and navigate to your AceShop directory and select the Component (com_aceshop_x.x.x.zip) which must be installed. Select it and then click Open. Step 5: When the component opens, click Upload & Install, this step may take a while. After the package file is installed in Joomla the screen as shown in diagram 2 is displayed in your Browser. 5

6 Diagram 2 NOTE: After the installing the component, it s necessary to install the System AceShop jquery plugin and enable it, in order that AceShop functions correctly. 6

7 1.6 AceShop jquery Plugin Installation Go to Extensions -> Extension Manager in order to install the System AceShop jquery. Follow the steps described below: Step 1: Click on Extensions - > Extension Manager Diagram 3 Step 2,3,4: Click Browse and navigate to your AceShop directory and select the Plugin file (plg_aceshop_jquery.zip) that must be installed. Select it and click Open. Step 5: Click Upload & Install, this step may take a while. After the package file is installed the screen as shown diagram 4 in will be displayed in your Browser. Diagram 4 Do the following to enable the Plugin. Then you will have to make the settings described below. 7

8 Diagram 5 On the screenshot above the plugin System AceShop jquery is disabled. Locate the Status column and click of the red icon to enable the plugin. When you do Joomla will enable the plugin. NOTE: The advanced search function is disabled, it can be activated following exactly thr same steps but this time for Search AceShop. Step 1: Go to plugin manager Step 2: Press the Status icon to enable the plugin When this is done the screen as shown in diagram 6 will be displayed in your Browser where it says that the plugin is successfully enabled. Diagram 6 8

9 1.7 The First Settings of AceShop After the AceShop plugin installation is completed, it s necessary to insert the following information about the AceShop site details which are related to General, Store, Local, Options and so on. i.e Data settings that AceShop needs. Go set this information within AceShop, use Joomla admin panel -> Components ->AceShop -> System -> Settings. In settings its simple to Give the store a name, Set the owner of the store Set such details as: address, ID, Telephone and Fax number And so on, as shown in diagram 7. Diagram 7 In the Settings section replace Your Store with a name for your store, select a template, choose the country that you are based in, choose its region / state and other such details. Select the administration language, set the default currency, the default item number(s) per page of in the Front and Back-End, display the prices with tax or not, and so on. Once complete click Save to save this information. If desired you can set and customize the store logo. Resize the default store logo. Set customize IDs and various server settings via this interface. 9

10 1.8 Make A Menu Link For AceShop In this section, you will learn How to assign a menu item to AceShop in order to display AceShop within the Joomla content area. Diagram 8 To create a Joomla Menu item, which when clicked, will display AceShop in the Joomla template content area, do the following: Step-1: In Menus - > Click Main Menu Step-2: In the screen that opens click Add New to add a new menu item the Joomla site as shown in diagram 8. The screen as shown in diagram 9 is displayed in your Browser when you do. Diagram 9 Step1: Enter the Menu Item name you desire in the text box Menu Title. Step2: Click Select adjacent to the text box Menu Item Type. 10

11 Both of these steps are clearly shown in diagram 9. On click of Select the screen as shown in diagram 10, is displayed in the Browser. Diagram 10 On click of Select, from the pop-up screen, select Home under the AceShop head as shown in diagram 10. Diagram 11 The text box Menu Item Type will be automatically loaded with Home. When that is finished, click Save & Close in the upper right hand corner. Both steps are shown in diagram 11. Once these steps are finished, go to the website s Front-end ( i.e. Home page ) and check if your Store Name has been successfully added as a menu item or not as shown in diagram

12 Diagram 12 When you on the menu item Your Shop Name a screen as shown in diagram 13 will be displayed in your Browser. The installation of AceShop within your Joomla website is completed. Diagram 13 Now that your AceShop plugin is installed and displayed successfully, the next section will discuss, describe and document the AceShop Dashboard and its features. 12

13 1.9 The AceShop Dashboard From AceShop Dashboard permits the viewing of: Total sales Total sales per year for the current year Total orders Number of customers Customers awaiting approval Reviews awaiting approval No of affiliates Number of affiliates awaiting approval As shown in diagram 14. Diagram 14 On the right section of the dashboard, view and compare the statistics of total orders, total customers by per day (today), weekly, monthly and per year. At the bottom section of the Dashboard the details of the Latest 10 Orders can be viewed.] The next part is about OPTIONS on top of the corner. 13

14 1.10 AceShop Options The options button has some settings for AceShop. How to: Show/hide header widgets Show/hide footer links Show categories menu Load Plugins in AceShop And so on. As shown in diagram 15. Diagram Show Header Widgets By clicking on the Options menu tab we are able to show/hide header widgets. If set to Show the header menus Home/Wish List/My Account/Shopping Cart/Checkout are shown in the front end Show Footer Links When Footer links is set to Show this shows us Information/ Customer Service/ My Account in the front end as links in the footer section Show Categories Menu When set to Show the categories menu is shown at the top of the store vqmod Cache You may get more information about VQMod at the following links bellow: Load Plugins AceShop plugin offers you the possibility to sell AceShop products from every component.you may find more information at the link bellow: 14

15 1.16 Fix IE caching issues This option will fix some IE caching issues with Ajax, especially during the checkout process Button CSS class Here you can enter the CSS class of your template for buttons. button_oc is the default CSS class of AceShop for buttons. Check the following article for more details: The front end Header and Footer positions are show in diagram 16. Diagram 16 15

16 1.18 How Install A Theme NOTE: We use the latest version of OpenCart so make sure that the Joomla template is x compatible. NOTE: The website template is the hardest to make compatible with AceShop. While we've seen templates that are AceShop compatible out-of the box, most templates require some custom work & patience. There are many OpenCart themes available for free as well as for purchase. Regretfully most do not work directly ( i.e. out of the box ) with AceShop so we recommend you to use our AceShop themes or create your own theme by overriding the default theme. This section will teach you - How to install a theme. Please use the following link: to download a theme(s) for AceShop Diagram 17 Locate Downloads among the top menu items in the page displayed in your Browser as shown in diagram 17. Select the theme(s) you desire and click Free Download. Save the download file to a folder on your hard disk. Navigate to this folder and unzip the downloaded zip file there. 16

17 Run your FTP manager (Filezilla e.g) and connect to your FTP server. After a successful connection navigate to: components\com_aceshop\opencart\catalog\view\theme Upload all the unzipped files of the AceShop theme into this folder Diagram 18 Now do the following steps, in the order shown to apply the new theme to AceShop. Go the AceShop Admin Dashboard => Components => AceShop => System => Settings => In the settings page, from the drop down list box Template, select the template you want as shown in diagram 19. Diagram 19 Now go back to your Joomla website Front-End and click the - MY STORE NAME - menu link as shown in diagram

18 Diagram 20 The new template is applied to AceShop. After having completed these steps do the following: Go to - AceShop => Extensions => Modules to install the necessary AceShop modules. These modules usually are: Login Shopping Cart Categories Manufacturers If a module is not installed the link displayed will be Install. If a module is already installed the link displayed will be Edit / Uninstall. As shown in diagram

19 Diagram 21 After installing the modules that are required edit these modules one by one. Let s take the Shopping Cart module as an example. Enable / Disable attributes as desired and finally click Save in the top right hand corner as shown in diagram 22. Diagram 22 Once we ve installed and edited all the modules we require, generally the Login, Shopping Cart, Categories and Manufacturers modules, go back and refresh the front end of the website. It should look like diagram

20 Diagram 23 Next disable the Main Menu module of Joomla to view AceShop full screen. To do the following: Login to the Joomla Admin panel: Admin Panel -> Extensions -> Module Manager and disable Main Menu. As shown in diagram 24. Diagram 24 20

21 The front page of the website will now look like the one shown in diagram 25. Diagram 25 AceShop has now been successfully installed, configured and setup ready for use.s NOTE: While it visually appears that AceShop has taken over Joomla completely, any Joomla module can be applied and setup. 21

22 How to show an OpenCart module like a Joomla module? Go to AceShop =>Extensions =>Modules as shown in diagram 26. Diagram 26 Make all the necessary settings to the related module and set the Layout of the module as shown in diagram 27. Diagram 27 22

23 Next go to Joomla Extensions => Module Manager => AceShop-All-in-one (mod_ayelshop) and make the required edits on the AceShop module as shown in diagram 28. Diagram 28 Then refresh the Home page of AceShop. See the changes displayed as shown in diagram 29. Diagram 29 23

24 1.19 Adding Products To AceShop Learning how to add products is probably one of the more important aspects, of running an AceShop store. After all, if you cannot add a product and have it display in your AceShop store how are you going to sell this product? This section will describe in detail the steps you need to take to add a product to your AceS hop store. NOTE: It is a good idea to have a grasp on how to add categories before you add a product, because you re probably going to want to add a product to a particular category. It is not required that you do this, but it helps keep your store organized. Diagram 30 To add a product to AceShop: 1- Sign in to your administration panel. 2- Hover over the AceShop => Catalog menu item and select Products 3- To add a new product, click Insert at the top right hand side of the page The page as shown in diagram 31 will be displayed in your Browser. Diagram 31 24

25 THE GENERAL TAB Product name Enter the name of the product here. This field is required Meta Tag Description The Meta tag description and appears in the header of your website. The text is not visible anywhere in the page itself. To however this text may be visible in search engine results pages underneath the link when people search for your store using Google, Yahoo, or Bing. Just describe what the product is. It is recommended that you use 160 characters or less Meta Tag Keywords The Meta tag description and appears in the header of your website. The text is not visible anywhere in the page itself. It is used by some search engines, but is not visible as text. If the product was, for example, an iphone, you would enter keywords such as: phones, iphone, Apple, ios, iphone4, iphone 5, etc. You ll want to separate each keyword with commas (as was shown) Description The description text of the product that gets entered here will appear in the description tab box (if the current theme you are using supports this) and will contain information on the product and further details about it. You can put whatever you like in here. You can enter text, HTML, and even embed Flash if you like Product Tags Enter tags to describe the product. Tags are generally words that you have used in your description of the product that people might enter into a search engine to find your product. For example, a Mac book, might have tags such as laptop, Mac, ios, itunes or other descriptive tags. Tags are sometimes shown in the web page. It just depends on whether or not you are using a theme that displays the tags. Diagram 32 25

26 DATA TAB Model Enter a unique model number of the product here. This field is required. This have any value. For example, if it is a shirt the model number might be CLOTHING Or you might have a strictly numerical code such as It doesn t matter what you put here just as long as it s unique and is not the same as another product Price Set the price of the product here (e.g ) Tax Class If you don t plan on charging any taxes you can set the tax class to None in the drop-down. If you do, you can set this setting to the particular tax class that you have set up in AceShop Quantity Set the number of items that you have in stock here. The quantity will decrease after each purchase if you have the subtract stock and setting set to a Yes (see below). You will want to keep track of your stock. So when you get a new supply of stock in you ll want to add it to the number of current items you have in stock here Minimum Quantity If you wish to force customers to purchase a minimum number of items, specify the minimum number of items here. So for example if you want the customer to purchase a minimum of five t-shirts, for example, you would set the value here to Subtract Stock If you wish to track stock select Yes, otherwise select No Out of Stock Status This field sets the message that the customer will see in the webpage when is no more stock left. The good thing is that this will be done automatically for you. There are ways you can configure stock status messages if you require different messages to be displayed for different products Requires Shipping this setting sets whether or not the user requires shipping. You ll want to set this to No if the product using downloadable product or the user will come and pick up the product in the store SKU A SKU is a Stock Keeping Unit, a unique and arbitrary number for this product. This can be any value that you want that makes sense within the system of tracking that you have set up for inventory. This can be the same value as the model number or it can be something different if you have a different system set up UPC Universal Product Code, a unique code and manufacturer number assigned by The UPC is a way to standardize product tracking numbers across international borders Location Set the location of the product here. 26

27 SEO Keyword If you have SEO keywords enabled, you can enter a unique key word here that will make up the URL of your category. Be sure that you do not choose a keyword that this the same as another category, manufacturer, or product! Click here for more information on SEO keywords Image In this location you can also had an image. The image will be visible as the main image when people go to the product page. You use the AceShop image uploader UI to add images. Note that there is also an Image tab where you can add additional images. How all of these images are displayed depends on the template/theme that you are using Data Available Set the date when you want the product to show up on your site. It will not be visible to customers otherwise but if you plan on having the product available at an upcoming future time, you could set this here Dimensions(L x W x H) If you ship by a method that charges by package dimensions, the length, width and height of the product can be entered in here. Note that this is dependent on the Length Class setting (see below) Length Class This is the unit of dimension that gets used to measure packages. Dimensions are inches, millimeters etc. If you are outside of the United states you are probably using the metric system. If you are inside the United States, but shipping internationally, you might want to set this value to metric units to keep things consistent across international borders. This value also depends on the shipping company that you use as well Weight If you ship your products using a shipping company or method that charges by weight, you can enter the the weight of the product here. It will be used to calculate shipping Weight Class This setting sets what unit is used to weigh various items. This setting could be set to pounds or kilograms. Make sure that unit you use coincides with the shipping company or method you are using to ship your products. It will make your life a lot easier Status Select Enabled for product to appear in your store, or Disabled to hide products in your store. This allows for quick on/off toggling on whether or not a product is displayed in your store Sort Order The sort order setting sets the order that the product will appear in when it is displayed in a list of a particular category. So for example, if the product was an iphone, and the sort order was set to 1, the iphone would be one of the first items displayed in the Phones category page of an AceShop store. 27

28 Diagram LINKS TAB The links tab categorizes different products under respective categories as well as connects different products together as related items Manufacturer You can choose a manufacturer here. To add a manufacturer to the list of available options, see the section on how to add a manufacturer in AceShop Categories You can choose one or multiple categories to categorize your products here. To add a category to the list of available options, see the section on how to add a category in AceShop Stores Choose the stores that you want to add this product to. This is only really app licable if you have a multistore install Downloads Choose the download to distribute to the user if this is a digital product. You ll have to do this under the Downloads section (also found underneath the Catalog menu item) Related Products ( Autocomplete ) In this location you can set other products that you want to be related to this product to establish a relationship between the 2. In some templates/themes the related products will appear as a list in the tab box on the product s page. Other themes might have the related products displayed elsewhere. All you have to do here is start typing. The field should autocomplete with the product you are looking for 28

29 . Diagram ATTRIBUTE TAB Product attributes are essentially a list additional features of a product that provide benefit. An example of this would be something like the amount of RAM included or the clockspeed of a processor that comes with a computer that you are selling in your AceShop store. For a detailed breakdown on attributes, attribute groups, and how to add them see this post on AceShop attributes and attribute groups. Diagram DISCOUNT TAB A discount is basically a sale price that you give to a certain customer group (e.g. Wholesalers) when they buy up to a certain quantity of the product. You can set the discount that the customer gets, the quantity they need to buy to get the discount and the dates when the discount(s) are available. For a detailed breakdown on discounts and how to add them see this post on Customer Groups, Discounts, & Specials in AceShop. 29

30 Diagram IMAGE TAB In the Image tab, you can add additional images of your product. Note that these are different images from the main image that you added in the Data Tab. How these additional images get displayed depends on the theme that you are using. Diagram REWARD POINTS TAB Reward points are points that your customers get when they purchase different products at your store. For a more detailed breakdown on this see this post on reward points in AceShop. Diagram 38 30

31 DESIGN TAB In the Design tab, you can choose a different layout for the product s page (i.e. different modules than the ones currently set for the Product layout). For a more detailed breakdown on this see this post on Layout Override in AceShop. It might also help you to read Understanding the AceShop Layout and Modules post to learn more about how this all fits together How To Set Up A Payment Gateway? Extensions -> Payments takes you to a list of payment gateways that are included in the default AceShop component. You will find a complete listing of payment gateways available at the following URL: Go to AceShop => Extensions => Payments to set a payment gateway as shown in diagram 39. Diagram How to set to a Shipping method? You will find a complete listing of shipping methods available at the following URL: Go to AceShop => Extensions => Shipping to set a shipping method as shown in diagram 40. Diagram 40 31