VP-ASP Shopping Cart - Online Help Guides - Upgrading Header and Footer Template from VPASP 6.50 to VPASP 7.00

Upgrading Header and Footer Template from VPASP 6.50 to VPASP 7.00

Note : If you choose to keep your existing header and footer template, the new Layout Manager cannot be used. Layout Manager features can only be used if you utilise the header and footer template provided in the VP-ASP 7.0 package as they are basically different compared to the old version header and footer template.

Before you apply the changes for the templates, make sure you copy the existing templates from your site to a temporary directory. Please follow these steps below:

Go to the root directory of your 6.50 site.
Copy these files below :
- shoppage_header.htm
- shoppage_trailer.htm
Create a new temporary directory to store the existing templates in your local computer e.g. my650templates.

• Header template

These steps below explain to you how to apply your existing header template to the new VP-ASP 7.00 site :

1. Open the file shoppage_header.htm from the temporary directory using notepad.

2. Please insert the code below after <head> :

<%generatebaseurl%>

3. Locate these code below:

4. Directly after the code above, please insert these code :

5. Locate the CSS link somewhere in your site e.g. (if exist):

Please see where is the CSS file stored in your existing site by looking in the above code and copy the CSS file into your new VP-ASP 7.00 site.

As you can see in the step 5, the shop.css is located in the “stylesheets” directory of your existing site.

Then please copy the file shop.css into folder “ templates/default-2cols/css ” (if using 2 columns layout) or “ templates/default-3cols/css ” folder (if using 3 columns layout) in your VP-ASP 7.00 site.

If you have any other CSS files that you have created in your own, please also copy the CSS files into folder “ templates/default-2cols/css ” (if using 2 columns layout) or “ templates/default-3cols/css ” folder (if using 3 columns layout) in your VP-ASP 7.00 site.

6. Please change the location of your CSS files to read from the new directory as you have copied above in step 5. For example, please locate these code below :

Please change to (make sure the code below in one line) :

If you have any other CSS files, please also change the location to point to the new directory, for example :

7. Insert these code below above (before) the </head> tag :

function clearfield(pform){

if (pform.keyword.value == "<%=GetLang("langsearchboxdefault")%>")

pform.keyword.value = "";

}

</script>

function toggleMe(a){

var e=document.getElementById(a);

//if(!e)return true;

if(e.style.display=="none"){

e.style.display="block"

} else {

e.style.display="none"

}

//return true;

}

</script>

function checkjavascriptstatus(){

var checkingurl="shopcheckjavascript.asp";

var pars = '';

var url = checkingurl + '?' + pars;

new Ajax.Request(url, {method: 'post',

onSuccess: function(transport) {

}

});

}

</script>

8. Insert these code below after the code <title><%shopdynamictitle "title"%></title> :

Note : This layout.css may mix up your existing design with default 7.00 design. However, you will still need to include this CSS file as most parts of the site layout use this CSS file. You may need to customise this file to suit your existing site.

Please refer to VP-ASP Design Guide chapter 2.4.1. Change CSS for the Background of the Site if you wish to change the background display.

VP-ASP 7.00 Design Guide can be found at:

http://www.vpasp.com/virtprog/VPASP_700_Design_Guide.zip

9. Copy your existing logo image file into the VP-ASP 7.00 site.

For example, if your header file contains the company logo code as below :

Then please upload the image logo.gif into appropiate directory of your VP-ASP 7.00 site so that the logo can display properly.

You would also need to copy any of the existing images in the header file into your new VP-ASP 7.00 site so that all the images in the header file can display correctly.

10. Replace the homepage default link to default.asp . If you found somewhere in your header file contains homepage link, e.g. index.html, default.htm or default.html or etc.. you need to replace it to use default.asp as this is the default page of VP-ASP 7.00.

11. Locate these code below (if exist):

12. Please replace with :

<%horomenu%>

Note : You may need to change the top navigation menu design to suit your needs.

Please refer to VP-ASP 7.00 Design Guide chapter 2.4.5. Change CSS for the Header Navigation Menu for more information.

VP-ASP 7.00 Design Guide can be found at:

http://www.vpasp.com/virtprog/VPASP_700_Design_Guide.zip

13. Locate any of these code below (if exist):

<%Navigateshowminicartright "short"%>

<%Navigateshowminicartright ""%>

OR

<%Navigateshowminicart ""%>

<%Navigateshowminicart "short"%>

14. Please replace any of the code above to :

<%NavigateShowMiniCartCssStyled%>

15. Locate any of these code below (if exist):

<%NavigateShowCategoriesStyled%>

OR

<%NavigateShowCategoryList%>

16. Please replace any of the code above to:

<%NavigateShowCategories%>

Note : For more option snippets in displaying the categories, please refer to VP-ASP Design Guide chapter 2.2.2. Display Categories with Styled Format Somewhere in Your Site .

VP-ASP 7.00 Design Guide can be found at:

http://www.vpasp.com/virtprog/VPASP_700_Design_Guide.zip

17. Locate these codes below (if exist) :

<%Navigateshowcurrencies%>

18. Please replace with :

<%Navigateshowcurrencies "yourprefixdivname"%>

19. Locate these code below (if exist):

<%navigateshowlanguages%>

20. Please replace with :

<%Navigateshowlanguages "yourprefixdivname" %>

21. Locate these code below (if exist):

<%NavigateTopTen%>

22. Please replace with :

<%NavigateTopSeller "3"%>

Note : 3 means you will display three top seller products.

For more option snippets in displaying the Top Seller Products, please refer to VP-ASP Design Guide chapter 2.2.6. Display Top Seller Products Somewhere in Your Site .

VP-ASP 7.00 Design Guide can be found at:

http://www.vpasp.com/virtprog/VPASP_700_Design_Guide.zip

23. If you would like to add any of snippet/tag functionality into your header e.g. adding currencies selector, featured products, top sellers section etc.. you can refer to VP-ASP Design Guide chapter 2.2 Code Snippets / Tags to Customize Your Site.

VP-ASP 7.00 Design Guide can be found at:

http://www.vpasp.com/virtprog/VPASP_700_Design_Guide.zip

24. Open file layout.css using notepad in your VP-ASP 7.00 site located in the folder “ templates\default-2cols\css ” (if using 2 columns layout) or folder templates/default-3cols ” (if using 3 columns layout).

Then, locate these code below:

#main{

float:left;

width:540px;

margin:3px 0 0 0;

padding: 0;

font-size:12px;

}

Please replace with :

#main{

}
Note : You can also modify the CSS code above to suit your design.

You can also refer to VP-ASP Design Guide chapter 3. Changing the Home Page Welcome Box .

VP-ASP 7.00 Design Guide can be found at:

http://www.vpasp.com/virtprog/VPASP_700_Design_Guide.zip

25. Upload the file layout.css into your VP-ASP 7.00 site under the folder “ templates\default-2cols\css ” (if using 2 columns layout) or folder templates/default-3cols ” (if using 3 columns layout).

26. After all the changes above, you can now copy the file shoppage_header.htm from the temporary directory to the folder “ templates/default-2cols ” (if using 2 columns layout) or “ templates/default-3cols ” (if using 3 columns layout) in your VP-ASP 7.00 site.

• Footer template

These steps below explain to you how to apply your existing footer template from VP-ASP 6.50 to the new VP-ASP 7.00 site :

1. Open file shoppage_footer.htm (old version) using notepad.

2. Replace the homepage default link to default.asp . If you found somewhere in your footer file contains homepage link, e.g. index.html, default.htm or default.html or etc.. you need to replace it to use default.asp as this is the default page of VP-ASP 7.00.

3. Copy your image files into the VP-ASP 7.00 site.

You would need to copy any of the existing images in the footer file into your new VP-ASP 7.00 site so that all the images in the footer file can display correctly.

For example, if in your footer file contains image code as below :

Then you will need to copy the image file “myownimage.gif” to the “images” folder of your VP-ASP 7.00 site.

4. If you would like to add any of snippet/tag functionality into your footer e.g. adding currencies selector, featured products, top sellers section etc.. you can refer to VP-ASP Design Guide chapter 2.2 Code Snippets / Tags to Customize Your Site.

VP-ASP 7.00 Design Guide can be found at:

http://www.vpasp.com/virtprog/VPASP_700_Design_Guide.zip

5. After all the changes above, you can now copy the file shoppage_footer.htm from the temporary directory to the folder “ templates/default-2cols ” (if using 2 columns layout) or “ templates/default-3cols ” (if using 3 columns layout) in your VP-ASP 7.00 site.

Times Viewed:
5512

Added By:
wilson

Date Created:
1/29/2010

Last Updated:
1/29/2010

Back

Search other topics

Submit a Ticket

Search Helpnote Topics

Upgrading Header and Footer Template from VPASP 6.50 to VPASP 7.00

Upgrading Header and Footer Template from VPASP 6.50 to VPASP 7.00

• Header template

• Footer template

PRODUCTS

UPGRADE VP-CART

HOSTING

RESELLERS

SERVICES

SUPPORT

FAQ

FEATURED SITES

DOWNLOADS