DotNetNuke Ecommerce Store Integration Guide

Making it Easy to Sell From Your DotNetNuke Website

Adding an online store and shopping basket/cart to your DNN website is simply a matter of copying and pasting the ShopIntegrator ecommerce plugin script in to a DNN Telerik Rich Text Editor module as set out in this guide.

ShopIntegrator allows your customers to create orders directly from your DNN website. Your ShopIntegrator store checkout processes your shopper's debit and credit card payments through any of the following supported payment gateways: PayPal, CardSave, SagePay, eway United Kingdom, eway Australia and eway New Zealand

DNN Store Ecommerce Plugin Integration

  Register for a Free No Obligation 30 Day ShopIntegrator Account
Quickly register for your Free No Obligation 30 Day ShopIntegrator Account by clicking on the Get Started Free button to open a new window with the registration page.

Once you have registered for your ShopIntegrator account you will be sent an email with an account activation link, click on the link in your email to activate your account. Check your SPAM folder in case you think it has not arrived as your email software may not recognise ShopIntegrator as a sender in your address book and place it in the SPAM folder by mistake.

  Add Ecommerce To Your Website
Logon to your ShopIntegrator admin console using the account you registered for in step 1. Follow this logon page link here: ShopIntegrator Admin Logon and once you've logged on, click on the Getting Started Guide link from the Shop Admin Homepage to take you through the simple steps for creating your product and adding it in to your website.

When you reach the stage in the Getting Started Guide where you copy and paste the generated header text and generated ecommerce plugin text in to your website, you may follow the extended DNN instructions below to achieve this:

2.1 ShopIntegrator Admin Console: Add Ecommerce To Your Website 'Part (i) - Copy and Paste Hidden Script Once Into Your Web Page'
This step inserts the master ShopIntegrator script for your account in to your entire website. This master script allows all your ecommerce plugins to work. This will mean you only need to perform this step once to add the master header script to your entire website.

Add a DNN Text/HTML module to the top of the content section of the DNN page to hold your accounts specific ShopIntegrator master header script in a way which adds this to every content page on your website.



2.1.1. Add a new DNN Text/HTML module to the top of your content page of your site
2.1.2. Edit the text of the module to contain no text
2.1.3. Enter the module settings from the SolPart Action Menu
2.1.4. Expand the "Advanced Settings" section
2.1.5. Check the box next to "Display Module On All Pages?"
2.1.6. Insert the Javascript code in the "Header" box. This will ensure that the data is always retained
2.1.7. Now under "Page Settings" -> "Basic Settings" un-check the following boxes
   * Display Container
   * Allow Print
   * Allow Syndicate
2.1.8. Ensure that the "Cache Time" is set to 0
2.1.9. Click "Update" to save your changes


2.2 ShopIntegrator Admin Console: Add Ecommerce To Your Website 'Part (ii) - Copy and Paste Your Ecommerce Plugin Into Your Web Page'
By default, the DNN Telerik Rich Text Editor constantly removes the ShopIntegrator script from the Rich text editor when you save the Text/HTML module content. This is a pain, sorry about this! It is however the default behaviour of the DNN rich text editor, it is filtering HTML tags from what it feels should just be rich text. There are two approaches that you may take to avoid this being an issue when inserting the ShopIntegrator ecommerce plugin script in to your content module, either:

• (A) Deactivate DNN Telerik rich text editor module content filter
  OR
• (B) Use a DNN Telerik rich text editor in a Basic Text Box HTML mode

Either:
(A) Deactivate DNN Telerik rich text editor module content filter
This approach will allow you to paste your product specific ShopIntegrator ecommerce script in to your DNN Telerik rich text editor without any special treatment. You will need to have access to the DNN installation filesystem and deactivate the DNN Telerik rich text editor module content filter.

Edit the DNN software installation ConfigDefault.xml file for the HtmlEditor provider and adding the follow entry:
<property name="ContentFilters">0</property>

Reference: Deactivating the the DNN content filter is from this DNN forum article:
http://www.dotnetnuke.com/tabid/795/forumid/199/postid/409611/scope/posts/default.aspx

Once you have deactivated the content filter, you will be able to copy and paste the ecommerce plugin script straight in to to your rich text editor without it being removed when you save the module content, e.g.



OR

(B) Use a DNN Telerik rich text editor in a Basic Text Box HTML mode

If you don't have access to the DNN installation filesystem or do not wish to deactivate the rich text editor content filter you may still proceed with the ecommerce integration. The key to a successful DNN store implementation using ShopIntegrator and DNN is to separate the page content from the ShopIntegrator code script by creating a Text/HTML module in your web page specifically to hold the ShopIntegrator plugin script. This avoids the need for having to frequently edit the Text/HTML module in the Basic Text Box HTML mode because of text content changes unrelated to the ShopIntegrator script part of the web page.

Despite putting the DNN Rich Text editor in to HTML mode, it still strips out the JavaScript code used for the ShopIntegrator ecommerce script when you preview the page or save the page. Instead, you have to switch the DNN editor to Basic Text box mode, then for the Render Mode click the Html radio button underneath that editor panel as shown below.

When you paste in the product specific eccommerce plugin in to the editor and click the save for the page, the ecommerce plugin will then be properly saved by DNN and will show up in your web page. See the example screen shot below (you will need to paste your specific accounts client account code & product stock code for your chosen ecommerce plugin rather than the exact text shown in the screen shot)