I am an EC Novices, no matter how many templates EC makes, they will definitely not be able to meet our needs. What’s more, each industry has its own approach, and the templates unified by EC may not be suitable for our industry. Therefore, only we can truly master our own. Only by making templates and modifying them can you truly create an e-commerce platform that suits you and that is in line with the habits of customers in your industry.
First of all, welcome everyone to browse this tutorial. Congratulations to everyone for using ECshop! How good is EC? ECshop is built with PHP. I don’t want to say more about PHP applications (Amazon: http://www.020jz.org/, Yahoo: yahoo.com, Baidu: baidu.com Taobao: http:/ /www.020jz.org/Sina: sina.com, Tencent: qq.com), (ps: ECshop succeeded! At this moment, he is the inheritance of great e-commerce, he is not fighting alone, he is not alone -_-!!! ) I won’t go into too much detail, everyone knows it, but sometimes I, who love diving, really can’t help but jump out and say a few words.
This tutorial is suitable for understanding Before viewing ECshop and ECshop template DIY and their daily use, you need to be able to use at least one editor (exp: Dreamweaver, editplus, emacs, vi, ee...meaning a visual HTML editor or a direct text editor, I When talking about it, I will use Dreamwaver, which is more suitable for beginners and designers). This tutorial is currently maintained by me alone, but I believe that it won’t be long before many people will continue to maintain it. The content needs to be constantly updated. If you are interested in participating, PM me. Let's serve everyone together.
By studying this tutorial, as long as you follow it while watching it, you will definitely be able to learn to make your own templates. :)
The following chapters apply to the ECshop program. At the same time, a lot of content here is related to some Smarty. If you are already familiar with these contents, you can skip reading. If you are new to ECshop and want to DIY your own store, you should read these chapters carefully and in detail from beginning to end. (ps: Don’t be nervous, I will try my best to communicate with you in human language. I will only show it to you in machine language as a last resort.) I hope that everyone can pass this tutorial and make any template you want. Ha ha! let's work hard together!
Chapter One:
Read these contents, you will understand:
##
1. The template page corresponding to each front-end page and the directory structure of the template file.
2. Some of the most basic ECshop template modification methods.
3. The path of the template and the method of including related files (in-depth understanding of Dreamweaver template production).
4. Explanation of some common template examples.
Template storage path: ecshop/themes/xxxxx Where xxxxx is a certain A set of templates. For example, the template file that comes with the system is generally called default, (i.e.: ecshop/themes/default). What is placed in it is the default template when it is installed. All the following instructions are for the default template.
We find a random gif picture, name it logo.gif and put it in the images directory, and then we refresh the homepage. did you see? The homepage logo has been modified. If you think the size is inappropriate, then we open page_header.lib in the library directory to view the source code, then search for images/logo.gif and then look behind it width="130″ height="56″ and change 130 and 56 to the corresponding ones. The value is enough, go to the front desk to refresh and see. Refresh the browser to see if there are any changes to the page. Shrimp? Didn't find it? Look at the browser header. Haha, has the title of the website been changed?
Haha, yes, {$page_title} is the tag of the website title (note: the tag starts from {to} and ends, {and} are part of the tag). The entire ECshop template is like this one by one Tags are composed of tags that control the dynamic display of website content and data.
For example,
({$keywords}) controls the keyword tag of the website,
{$description}: website description tag, (this is the tag in the template, each Each tag will correspond to a value in the program. When the website is running, the template engine will read the template page, and then replace the corresponding tag with the corresponding value, and the website page we see will be displayed. Got it. This For novices, this piece of content may not be fully digested at once. If you have any questions, please leave a message and I will update it here.) Don’t worry, haste makes waste, haha, let’s really start to make the ECshop template now. (Viewers who don’t understand HTML should prepare Dreamweaver)
Prerequisite: adjust the template you are currently using to the default template, and then clear the cache.
Next we enter the default directory and you can see the following file directory:
*.dwt (indicating other .dwt files)
Xiaomi? Don't you believe these are templates? Okay, let me prove it to you.
We change the name of the logo.gif file in images to logo2.gif, and then
Okay, then we use Dreamweaver to open the index .dwt file, search for {$page_title} in the source code. After finding it, modify {$page_title} to Super Invincible Hypermarket. Then go to
It’s very simple 8, haha, everyone is really smart, Kong Ming Reincarnation, I learned it so quickly. If your previous step was super, very simple, the next step will be the same. How should I change it next? We continue after commercials.
…Golden advertising space…Welcome to buy…PM me if necessary…(PS: People can’t be so shameless)…Haha…
1. We go to the /themes/default directory, rename index.dwt to index_bak.dwt, then use Dreamweaver to create a new HTML file, then save it to the /themes/default directory and name it index.dwt. OK, let’s refresh the front desk Look, haha, there is nothing. Okay, find
in our newly created index.dwt, we replace the content between andwith: {$page_title}, in Also put a {$page_title} betweenand, refresh the front desk and take a look. Hey, what do you see? Is the website title printed?
If a dialog box pops up during operation:
Just click OK, :)
2. Next we select the visual interface editor: then click after {$page_title} Enter key to change the line, and then enter: Store announcement: {$shop_notice} Go to the browser to refresh the homepage to refresh and see, haha. The store announcement has been called up. You can go to the website backend
System Settings->Store Settings->Online Store Information->Store Announcement to modify the content, and then go to the browser and refresh the website homepage to see, haha , the store announcement is dropped out dynamically.
3. You can continue to press the Enter key after {$shop_notice} to change the line, and then enter
Press the Enter key at the line break, so you can refresh the front desk and take a look. Haha, the website alert is brought up. Oh.
Okay, let’s go to the backend of the website->Article Management->Website List->Add article, select the category "Website News", add a piece of content at will, and refresh the frontend after completion. Both articles were dropped out of the feed.
##{foreach from=$new_articles item=article } : The beginning of the loop,
{/foreach} : The end of the loop
##$new_articles: For the things to be looped, here is the website News
##{$article.short_title} : The tag
of the news title is in the pattern: {foreach from=$post item=name} content {/foreach}
{foreach from=$post item=name} and {/foreach} tags can add any content to be looped (can be anything), loop The number of times is limited by $post (I will tell you what to fill in here.) name is the object of the current cycle. Convenient to call data.
Used for"Backend management->Template management->Template Select”to display the template thumbnail.
Unchangeable
style.css
cssStyle sheet
Cannot be changed
Remarks: Template There are a total of22files(format:.dwt).Reminder: 1,Changing the contents of the library file in the template file is invalid. When the page is refreshed, the program automatically reloads the contents of the library file into the template file(Subject to the content of the library file).2,Allidvalues starting withECS_in the template must be retained(is related toajax).3,Non-library file content cannot be placed in the editable area, otherwise the non-library file content will be overwritten and deleted when setting the template.
##brand.dwt
Template file
Template file
Article content page
Cannot be changed
article_cat.dwt
Template file
Article list page
Cannot be changed
##catalog.dwt
Template file
All category pages
Cannot be changed
##Template file
Shopping Cart and Shopping Process Page
Cannot be changed
gallery.dwt
Template file
Product album page
Cannot be changed
goods.dwt
Template file
Product details page
Cannot be changed
##group_buy_goods.dwt
Template file
Group purchase product details page
Template file
Group purchase product list page
Cannot be changed
Template file
Homepage
Cannot be changed
message.dwt
Template file
Information prompt page
Cannot be changed
##pick_out.dwt
Template file
Shopping center page
Cannot be changed
receive.dwt
Template file
Receipt confirmation information page
Cannot be changed
Template file
Product search page
Cannot be changed
snatch.dwt
Template file
Raiders of the Lost Ark page
Cannot be changed
tag_cloud.dwt
Template file
Tag cloud page
Cannot be changed
##user_clips.dwt
Template file
User center page (including: welcome page, my message, my tags, favorite products, out-of-stock registration list, add missing items Cargo registration.)
Cannot be changed
Remarks: There are40library files in total(Format.lbi)Reminder: Try to keep the default file name, otherwise the background management will not be able to manage the library file or there will be unforeseen errors.
ad_position.lbi
Library file
Advertising position
Unchangeable
##bought_goods.lbi
Library file
What products have been purchased by people who have purchased this product
Cannot be changed
brand_goods.lbi
Library file
Brand’s goods
cannot be changed
brands.lbi
Library file
Brand area
Cannot be changed
Library file
Shopping cart
Cannot be changed
cat_articles.lbi
Library file
Article list
Unchangeable
##cat_goods.lbi
Library file
Category The items below
cannot be changed
category_tree.lbi
Library file
Product classification tree
Cannot be changed
comments .lbi
Library file
User comment list (
ajaxLoadingcomments_list.lbilibrary file.)
cannot be changed
Library file
User comment content
cannot be changed
consignee.lbi
Library file
Shipping address form
Unchangeable
##goods_article.lbi
Library file
Related articles
Cannot be changed
##Library file
Related accessories
Cannot be changed
Gallery file
Product Album
Cannot be changed
##goods_list.lbi
Library file
Product list
Cannot be changed
goods_related.lbi
Library file
Related goods
Not available Change
goods_tags.lbi
library file
goods tags
Cannot be changed
group_buy.lbi
Library file
Home page group purchase products
cannot be changed
help.lbi
Library file
Online store help
Cannot be changed
history.lbi
Library file
Product browsing history
Unchangeable
invoice_query.lbi
Library file
Invoice Query
Cannot be changed
##member.lbi
Library file
Member login
(ajaxLoadingmember_info.lbiLibrary file.)
Cannot be changed
member_info. lbi
##Library file
Latest articles
Unchangeable
order_total.lbi
Library file
Total order fee
Cannot be changed
##page_footer.lbi
Library file
Page footer
Cannot be changed
page_header.lbi
Library file
Top of page
Unchangeable
recommend_hot.lbi
Library file
Hot-selling items
Cannot be changed
##recommend_new.lbi
Library file
New product recommendation
Library file
Promotion items
Cannot be changed
Library file
Search form
cannot be changed
Library file
Raiders of the Lost Ark Bidding Form(must beid="ECS_SNATCH"contains implementationajaxRefresh.)
Cannot be changed
snatch_price.lbi
##Library file
Raiders of the Lost Ark latest bid list
(must beid="ECS_PRICE_LIST"Contains the implementation ofajaxrefresh.)