Vinacart Documentation Release 1.0 VinaCart 07/08/2017

Contents 1 Hng dn cài dt Vinacart 3 1.1 Cu hình Server.............................................. 3 1.2 Cài dt................................................... 3 2 Cu trúc theme 5 2.1 config.xml................................................ 6 2.2 main.php................................................. 7 2.3 theme.xml................................................ 7 3 Getting start 9 3.1 Ði tên file và th mc............................................ 9 3.2 Sa ni dung................................................ 9 4 Cu hình theme 11 4.1 Configuration............................................... 12 4.2 Settings.................................................. 12 4.3 Assets................................................... 13 4.4 Templates................................................. 15 4.5 Layout.................................................. 16 4.6 Blocks.................................................. 17 4.7 Image Configuration........................................... 22 5 Cài dt chung 25 5.1 Credential................................................ 25 6 S dng layout blocks 27 6.1 Tùy chnh giao din block......................................... 27 6.2 Assets................................................... 29 6.3 Options.................................................. 30 7 Template 33 7.1 Bin s dng trong template......................................... 33 8 Dch v thit k website Hoangweb 37 8.1 Chúng tôi xây dng doanh nghip trc tuyn................................. 37 8.2 Công ty thit k website Hoàng Web.................................... 37 8.3 Lên k hoch trang web ca bn ngay t du.................................. 37 8.4 Chúng tôi thit k trang web - bn qun lý ni dung............................. 37 8.5 Ti sao chn Hoàng Web?......................................... 38 i

Xem chi tit source code: codex.vinacart.net Ðây là tài liu hng dn thit k theme VinaCart Ecommerce cho ngi s dng và phát trin. Tài liu này bao gm nhiu khía cnh liên quan vi vic thit lp ca hàng ca bn, cũng nh hng dn phát trin giao din ngi s dng. Tài liu hng dn cho bn qua các phn ca giao din qun lý và cung cp các gii pháp và gi ý vi hu ht các khu chc năng ca thng mi din t ca bn. Bn s có th hiu VinaCart hot dng nh th nào, làm th nào bn có th sa di và thit lp các blocks, giao din ca hàng d tùy chnh theo nhu cu ca bn. Sau khi dc hng dn này, bn có th d dàng s dng nn tng VinaCart d thit lp ca hàng trc tuyn và bán hàng theo cách ca bn. Di dây là mc lc d bn có th bt du làm quen và s dng hiu qu VinaCart. Ni dung: Contents 1

2 Contents

CHAPTER 1 Hng dn cài dt Vinacart Home: http://www.vinacart.net/p/download.html Cu hình Server Apache: Yêu cu bt modules & extension di dây: PHP version 5.6+ Module: mod_rewrite Extension: mysql mysqli pdo_mysql : Original MySQL API gd : a graphics library used to manipulate images curl : client for URL handling used by GPM zlib : read and write gzip (.gz) compressed files mbstring : multibyte encoding mcrypt : mcrypt library pcntl : Process Control support signal handling and process termination openssl : encrypting & decrypting data Chú ý: Không h tr LiteSpeed Web Server. Cài dt 1. Chun b Domain. Cài dt trên localhost, s dng xampp, wamp.. bn to alias (vd: vinacart.dev) thay vì s dng tên localhost. Tuy nhiên diu này không bt buc. Ví d: Edit file c:/xampp/conf/extra/httpd-vhosts.conf <VirtualHost *:80> ServerName vinacart.dev ServerAlias www.vinacart.dev DocumentRoot "C:\xampp\htdocs\vinacart" <Directory "C:\xampp\htdocs\vinacart"> Order allow,deny 3

Allow from all </Directory> ErrorLog C:\xampp\htdocs\error.txt </VirtualHost> 2. To database. 3. Thit lp quyn truy cp Files. Nu chy web trên h diu hành Window + xampp/wamp thì b qua bc này. Trng hp s dng Linux, d thit lp chmod dy d cho các file chúng ta chy file caidat.php trên trình duyt: http://vinacart.dev/caidat.php 4. Tin hành cài dt. M trình duyt, truy cp trang cài dt: http://vinacart.dev/install/ Làm theo trình t các bc (wizard). Ðin thông tin dy d ri nhn cài dt, ch trong vài phút d trình cài dt hoàn tt. Chú ý: nu bn mun cài dt li vinacart, s dng URL sau: http://vinacart.dev/install/?rt=install&force=1 S dng tin t www Nu bn mun s dng tin t www, và chuyn hng URL sang subdomain này sau khi cài dt xong, truy cp vào trang qun tr sa li dng dn ca hàng. Vd: http://www.example.com Chú ý: bn cn xóa cache và tt cache nu URL hot dng không chính xác. Nu URL dã hot dng bn có th bt cache tr li. Lúc này admin vn hot dng vi URL cũ (không có www), tuy nhiên d storefront và admin t dng chuyn hng sang www khi ngi dùng gõ tên min ca bn không cha www. Bn thêm dòng sau vào file.htaccess.. RewriteRule ^(.*)\?*$ index.php?_route_=$1 [L,QSA] # if want to redirect non-www to www RewriteCond %{HTTP_HOST}!^www\. [NC] RewriteRule ^(.*)$ http://www.%{http_host}/$1 [L,QSA].. Nu to nhiu ca hàng vi cùng mt domain, (vd: store2.example.com) hãy lit kê trong danh sách loi b d www dc chuyn hng dúng. RewriteCond %{HTTP_HOST}!^www\. [NC] RewriteCond %{HTTP_HOST}!^store2\. [NC] RewriteRule ^(.*)$ http://www.%{http_host}/$1 [L,QSA] 4 Chapter 1. Hng dn cài dt Vinacart

CHAPTER 2 Cu trúc theme Theme dc vit di dng extension, cu trúc ca mt theme ging vi cu trúc 1 extension gm có: admin/ - cu trúc MVC s lý phn backend. controller/ - cha files php (controllers) model/ - cha files php (models) view/ - files.tpl hin th d liu language/ - files.xml cha ngôn ng dch. core/ - cha hooks. storefront/ - cu trúc MVC s lý frontend (website) Cu trúc tng t admin/ language/ - cha ngôn ng dch. view * english/ * vietnamese/ * <theme_name>/ - chú ý cn trùng vi tên th mc theme. Bn s làm vic vi th mc này d thit k template. data/ - cha d liu mu ca theme (s dng trong quá trình cài dt). image/ blocks.xml - lu toàn b khai báo blocks. layout.xml - lu layout & pages. datasets.xml - lu cu hình blocks. icon.png - icon ca theme. cha các nh khác. config.xml - thông tin theme install.php - code s lý khi cài dt theme. install.sql - import sql data khi cài dt theme. uninstall.php - code s lý khi hy cài dt theme. uninstall.sql - chy lnh sql khi hy cài dt theme. 5

main.php - Khai báo các files php,.tpl có s dng icon.png - nh di din ca theme. theme.xml - thông tin c bn v theme. Xem extension mytheme (extensions/mytheme) d tham kho cách vit mt theme mu. config.xml <?xml version="1.0" encoding="utf-8"?> <extension> <id>mytheme</id> <version>1.0.0</version> <type>template</type> <category>template</category> <cartversions> <item>1.2</item> </cartversions> <priority>0</priority> <dependencies> <item >vinacart</item> </dependencies> <settings> <item id="mytheme_status"> <type>checkbox</type> <default_value>0</default_value> </item> <item id="mytheme_slogan"> <type>textarea</type> <default_value></default_value> </item> </settings> <additional_settings><![cdata[setting/setting&active=appearance]]></additional_settings> <preview> <item>preview.jpg</item> <item>preview1.jpg</item> <item>preview2.jpg</item>... </preview> <install> <sql>install.sql</sql> <trigger>install.php</trigger> </install> <uninstall> <sql>uninstall.sql</sql> <trigger>uninstall.php</trigger> </uninstall> </extension> Bn sa các thông tin sau dây: id - id ca theme là tên th mc ca theme (vit lin không cha du cách). version - phiên bn theme preview - thêm nh di din cho theme. nh nm trong th mc image/ 6 Chapter 2. Cu trúc theme

Các thông s khác d nguyên. VD: type - kiu template category - nm trong danh mc template. main.php Ti dây bn khai báo toàn b các files *.php, *.tpl thuc controller, model, template & language. storefront & admin dành cho admin và frontend. Mi bin có 2 phn //quy dnh template không vit hành dng $controllers = array( 'storefront' => array(), 'admin' => array() ); //quy dnh template không vit model $models = array( 'storefront' => array(), 'admin' => array()); $templates = array( 'storefront' => array( 'blocks/account.tpl', 'blocks/bestseller.tpl',.. ), 'admin' => array( //quy dnh template thì không vit cho admin ) ); Chú ý: to thêm file (php, tpl) khác phi khai báo dy d vào dây. theme.xml <theme> <name><![cdata[mytheme]]></name> <description><![cdata[theme description]]></description> <version>1.0</version> <screenshot>screenshot.jpg</screenshot> </theme> Phn ni dung này dc hin th trên themes stores ca chúng tôi, mt khi theme dc public lên server. Bn khai báo tên, mô t, version và hình xem trc. Xem tip Thit lp file cu hình cho theme 2.2. main.php 7

8 Chapter 2. Cu trúc theme

CHAPTER 3 Getting start To theme mi có tên (vd: theme1) bng cách nhân bn mytheme/. Ði tên file và th mc Chú ý sau khi copy theme mu, bn cn di tên th mc và file cho khp vi theme mi (theme1). Ði mytheme thành theme1 vi files và th mc sau: admin/language/english/mytheme/ admin/language/english/mytheme/mytheme.xml admin/language/vietnamese/mytheme/ admin/language/vietnamese/mytheme/mytheme.xml storefront/language/english/mytheme storefront/language/vietnamese/mytheme storefront/view/mytheme Sa ni dung Tìm và di tên mytheme thành theme1 trong các file nu có. File cu hình theme Tìm và di tên mytheme thành theme1 trong file config.xml và main.php Ngôn ng admin/language/english/theme1/theme1.xml admin/language/vietnamese/theme1/theme1.xml S dng file ngôn ng cho c admin & frontend. Admin dành cho trang cu hình extension ca Theme. Tin hành sa 2 file trên: 9

<?xml version="1.0" encoding="utf-8"?> <definitions> <definition> <key>theme1_name</key> <value><![cdata[my theme]]></value> </definition>... core/themeextension.php Ðây là file gi du tiên khi theme dc kích hot s dng. Trong file khai báo class có tên Extension<theme_name>. vd: mytheme -> ExtensionMytheme, theme1 -> ExtensionTheme1 Sa tên class phù hp vi tên theme ca bn. Ok bc này dã hoàn tt, tip theo chúng ta s tp trung vit template cho theme này. 10 Chapter 3. Getting start

CHAPTER 4 Cu hình theme File cu hình ca theme cho phép bn thit lp tùy bin v giao din hin th các trang, cũng nh khai báo các files assets (.js,.css) cn thit s dng trong các pages. Ngoài ra bn có th tùy chnh thêm layout hin th riêng cho các page c th và diu chnh v trí ca các blocks. Bn sa file này ti storefront/view/<theme>/config/theme.xml Ví d: <?xml version="1.0" encoding="utf-8"?> <theme> <assets> <file type="css"><![cdata[https://fonts.googleapis.com/css?family=lato:400,700,30 <file type="css"><![cdata[/assets/css/bootstrap.min.css]]></file>  <file type="js" bottom="1"><![cdata[/mytheme/themes/js/jquery.scrolltotop.js]]></ <file type="js" bottom="1"><![cdata[/javascript/bootstrap.min.js]]></file> <file type="js" bottom="1"><![cdata[/assets/js/wow.min.js]]></file>  <file type="js" bottom="1"><![cdata[/assets/js/fancybox/jquery.fancybox.pack.js]]  <file type="js" bottom="1"><![cdata[/assets/js/main.js]]></file> <file type="js" bottom="1"><![cdata[/javascript/respond.min.js]]></file> <file type="js" bottom="1"><![cdata[/javascript/jquery.validate.js]]></file> <file type="js" bottom="1"><![cdata[/javascript/jquery.caroufredsel-6.1.0-packed. <file type="js" bottom="1"><![cdata[/javascript/jquery.mousewheel.min.js]]></file <file type="js" bottom="1"><![cdata[/javascript/jquery.touchswipe.min.js]]></file <file type="js" bottom="1"><![cdata[/javascript/jquery.ba-throttle-debounce.min.j <file type="js" bottom="1"><![cdata[/javascript/jquery.onebyone.min.js]]></file> <file type="js" bottom="1"><![cdata[/javascript/custom.js]]></file>  <file type="lib"><![cdata[sliders/bxslider]]></file> </assets> <assets page="index/home"> </assets> <assets page="about_us"> 11

</templates>  <layout>  </layout>  <blocks>  </blocks> </theme> Configuration <?xml version="1.0" encoding="utf-8"?> <theme>  <configuration> <item name="version" value="1.2"/> <item name="sample_data" value="thoitrang"/> <item name="name" value="mytheme"/> <item name="image_product_width_small" value="100"/> <item name="image_product_height_small" value="95"/> </configuration> Khai báo các thông tin cu hình th <configuration nh version, sample_data, name.. Trong dó: - version: phiên bn hin ti ca vinacart - sample_data: tên d liu mu bn dang vit theme này. Danh sách d liu mu gm có: thoitrang, dulich,...(bn có th b xung tùy ý, lu ý không vit cách & cha ký t UTF-8). - name: tên th mc theme. Xem tip phn di có gii thích chi tit cách dùng cu hình. Settings Phn này s sa li toàn b thông s cài dt ca Vinacart dc lu vào database. Trên giao din qun tr, d sa các cài dt này bn truy cp ti?rt=setting/setting/all. Do mi theme giá tr cài dt cu hình có th khác nhau tùy vào giao din theme mà tùy chnh cho phù hp, thay vì sa trc tip trong admin bn có th sa trc tip các giá tr dó file theme.xml này. <?xml version="1.0" encoding="utf-8"?> <theme> <settings> <item name="config_storefront_api_status" value="1"/> <item name="config_admin_api_status" value="0"/> <item name="storefront_width" value="80%"/> </settings> </theme> Trng hp ly giá tr khai báo <configuration. 12 Chapter 4. Cu hình theme

<?xml version="1.0" encoding="utf-8"?> <theme> <configuration> <item name="image_product_width_small" value="100"/> <item name="image_product_height_small" value="95"/> </configuration> <settings> <item name="config_image_product_height" value="image_product_height_small"/> </settings> </theme> Vi cách trên s hu ích khi export/import theme. Assets Khai báo chèn các files.js và.css s dng trong theme ca bn vào dây trong cp th <assets. <assets> <file type="css"><![cdata[https://fonts.googleapis.com/css?family=lato:400,700,300]]></file> <file type="css" media="all"><![cdata[/asset/css/style.css]]></file> <file type="js" bottom="1"><![cdata[/javascript/bootstrap.min.js]]></file> </assets> thuc tính type ch dnh kiu file, vd type="css" dành cho file.css, nu file bn mun load cui trang thì thêm bottom="1" vào th <file ging nh trên không thì mc dnh chúng hin th trong th <head (ch dành cho file js). Ði vi file css, bn có th b xung thuc tính media bng cách khai báo thêm thuc tính media. vd: media= all Ð cho dn gin và d qun lý tôi da toàn b các files assets ca theme vào mt th mc assets nm ti storefront/view/<theme_name>/. Lu ý: dng dn dc bt du trong th mc theme. Các files css và js h thng bn không dc xóa dc bit là *.js chúng s lý hành dng ca vinacart. vd: /javascript, /stylesheet Bên cnh dó chúng ta có th chèn URL ngoài nh th vin jquery,...google font. Ðng dn (Path) Các files cha trong theme thì dc bt du trong th mc storefront/view/<theme_name>/ và URL bt du bng du / ging nh sau: <file type="css"><![cdata[/assets/style.css]]></file> Nhng files h thng thì cũng ging nh vy nhng ti th mc theme h thng mc dnh. Load assset page ch dnh Ðôi khi bn ch mun load các file.css, js các page nào dó d tránh load nhiu files không cn thit vi mc dích tăng tc d hin th website. Chng hn th vin phóng nh ch dùng trong trang sn phm chi tit, d thc hin bn khai báo thêm th <assets nh sau. <assets page="product/product"> <file type="css" bottom="0"><![cdata[/assets/custom-slider/css/nivo-slider.css]]></file> <file type="css" bottom="0"><![cdata[/assets/custom-slider/css/preview.css]]></file>  <file type="js" bottom="1"><![cdata[/assets/custom-slider/js/jquery.nivo.slider.js]]></file> <file type="js" bottom="1"><![cdata[/assets/custom-slider/home.js]]></file> </assets> 4.3. Assets 13

Thuc tính page cha thông tin da ch page ( da ch controller). Ví d: storefront/controller/blocks/banner_block.php thì da ch page s là blocks/banner_block. Ða ch là tham s rt khi bn view site, có th tìm thy bng cách view 1 trang sn phm. Chú ý: Mc dnh site không bt ch d SEO Url, d bn thun tin cho vic debug. Bn có th khai báo nhiu th assets nu mun, các th không có thuc tính page s load mi trang. Bn cũng có th ch dnh page bng tên da ch seo url (alias). VD: Ta có trang about: http://your-domain/about_us <assets page="about_us"> <file type="css" ><![CDATA[/assets/css/file1.css]]></file> --> <file type="js" bottom="1"><![cdata[/assets/js/file1.js]]></file> --><!-- `buttom` attribute </assets> Load assets tùy vào ng cnh Ði vi các file js/css/lib bn mun s dng cho mt s block dc gi, vd quickview.css ch dc chèn vào page khi hin th lit kê sn phm. Trng hp này không ch dnh vào page nào, mà có th áp dng cho nhiu trang. Xem ví d di: <assets context="productslisting=1"> <file type="css" ><![CDATA[/asset/css/quick_view_popup.css]]></file> <file type="lib" ><![CDATA[zoom/cloud-zoom]]></file> </assets> ví d trên chúng ta s dng thuc tính context thay cho thuc tính page. Chú ý: không s dng dng thi 2 thuc tính dó. Th vin Vinacart tích hp sn các th vin javascript/jquery ph bin. Vi mc dích s dng tin li, lý do mt s th vin bao gm nhiu file css & js, bn s khó qun lý khi chèn tng file dôi khi mt s th vin s dng chung file rt d b nhân bn nu không s dng cn thn. Do vy cách d dàng nht là s dng th vin mc dnh ca vinacart (Chú ý: bn cũng có th khai báo thêm th vin, nu mun). Ví d: gi th vin bootstrap. <file type="lib"> <param name="name"><![cdata[ui/bootstrap]]></param> </file> Mc dnh s load các files: bootstrap.min.css, bootstrap.min.js Xem dy d th vin ti http://tailieu.vinacart.net/?p=js_lib&tp=file&view=code Bn cũng có vit ngn gn nh sau: <file type="lib"><![cdata[ui/bootstrap]]></file> Tuy nhiên, trng hp nu trong th vin có thêm mt s file (vd: file b xung cho th vin dó) không dc mc dnh load. VD: nivoslider có nhiu skins khác nhau. Chúng ta khai báo dy d theo cú pháp trên và thêm tên file bn mun np, mi file cách nhau du : <file type="lib"> <param name="name"><![cdata[sliders/nivoslider]]></param> <param name="styles"><![cdata[light.css]]></param> </file> Ví d: np các plugin ca jquery: 14 Chapter 4. Cu hình theme

<file type="lib"> <param name="name"><![cdata[jquery-libs]]></param> <param name="scripts"><![cdata[jquery.mousewheel.min.js jquery.touchswipe.min.js jquery.ba-thrott </file> Ð b xung thêm th vin, bn vit vào file core/config/library.php <?php return array( 'menu/smartmenus' => array( 'scripts'=> array( 'jquery.smartmenus.min.js'=> array( 'file'=> 'jquery.smartmenus.min.js', 'required'=> 1, 'bottom'=> 1 ), 'jquery.smartmenus.bootstrap.js'=> array( 'file' => 'addons/bootstrap/jquery.smartmenus.bootstrap.min.js', 'required'=> 1, 'bottom'=> 1 ) ), 'styles'=> array( 'sm-core-css.css'=> array( 'file'=> 'css/sm-core-css.css', 'required'=> 1 ), 'jquery.smartmenus.bootstrap.css' => array( 'file'=> 'addons/bootstrap/jquery.smartmenus.bootstrap.css', 'required'=> 1 ), 'sm-blue.css'=> array( 'file'=> 'css/sm-blue/sm-blue.css', 'required'=> 0 ), 'sm-clean.css' => array( 'file'=> 'css/sm-clean/sm-clean.css', 'required'=> 1 ), 'sm-mint' => array( 'file'=> 'css/sm-mint/sm-mint.css', 'required'=> 0 ), 'sm-simple' => array( 'file'=> 'css/sm-simple/sm-simple.css', 'required'=> 0 ) ) ) ); Templates Mc dnh mi trang s gi vào common/page.tpl nh vy bn s vit template chung cho toàn b pages vào file này, tuy nhiên nu bn mun linh hot hn bng cách vit template cho các page khác nhau vào các file khác nhau, chúng ta s khai báo thêm templates vào th <templates. 4.4. Templates 15

<templates>  <page context="index/home" template="common/page-home.tpl"></page>  <page context="content/contact" template="common/page-contact.tpl"></page> <page context="content/content" args="content_id=1" template="common/page-aboutus.tpl"></page <page context="product/product" template="common/page-product.tpl"></page> <page context="product/category" template="common/page-category.tpl"></page> <page context="product/manufacturer" template="common/page-category.tpl"></page> <page context="product/search" template="common/page-category.tpl"></page> <page context="product/special" template="common/page-category.tpl"></page> </templates> Mi page có template riêng bit dc khai báo vào th <page, da ch page bi thuc tính context và da ch.tpl xut phát trong th mc template ca theme, khai báo vào thuc tính template. Trng hp da ch page (controller) có nhiu trang con, vd: contact page : content/contact khi gi thành công s chuyn sang trang content/contact/success. Trang này cha dc khai báo trên do vy mc dnh s dng template page.tpl d hin th. Chúng ta s gi chung vào file.tpl ca trang liên h dã khai báo trên nh sau: <page context="content/contact/success" template="common/page-contact.tpl"></page> Cách khác, bn cũng có th thit lp s dng chung template vi trang chính (content/contact) bng cách thêm thuc tính child_pages="1": <page context="content/contact" child_pages="1" template="common/page-contact.tpl"></page> Cách này s áp dng template page-contact.tpl cho mi trang con t da ch content/contact. Lc page bi tham s Bn cũng có th s dng nhiu templates cho 1 trang, bng cách lc tham s URL. ví d trên, page content/content s hin th ni dung trang có id=1, khai báo tham s content_id vào thuc tính args. <page context="content/content" args="content_id=1" template="common/page-aboutus.tpl"></page> Nu nhiu hn mt tham s, các tham s cách nhau bi du & vd: arg1=value1&arg2=value2 Vit thêm mi template (.tpl) mi, bn cn khai báo vào <custom_templates. <custom_templates> <tpl><![cdata[common/page-home.tpl]]></tpl> <tpl><![cdata[common/page-contact.tpl]]></tpl> <tpl><![cdata[common/page-product.tpl]]></tpl> <tpl><![cdata[common/page-category.tpl]]></tpl>... </custom_templates> Layout Vinacart có mt s templates layout mc dnh sau: Default Page Layout Home Page Checkout Pages Login Page 16 Chapter 4. Cu hình theme

Default Product Page Maintenance Page Customer Account Pages Cart Page Product Listing Page. Ngoài ra, vinacart cho phép bn thêm layout cho ni dung category, product bn mun tùy chnh layout. Tuy nhiên vic tùy bin mi layout s không dc phép trong giao din admin. Ví d trang liên h bn mun chèn thêm block bn d s không dc, bn không th thao tác trong admin và cn khai báo thêm layout cho page bn mun thay di d liu (blocks). Vit vào file cu hình theme (theme.xml) ni dung sau: <layout> <page name="category Layout" context="product/category" default="1"> <apply context="product/manufacturer" /> </page> <page name="contact Page" context="content/contact" default="1"> </page> </layout> Tham s: name - Tên hin th layout. context - da ch page. Các tham s khác d mc dnh. Nu bn mun áp dng mt layout cho các page khác, khai báo th con <apply ging nh trên. Blocks Có 2 loi block: parent block: gm header, header_bottom, column_left, column_right, content_top, content_bottom child block: là các blocks con cha trong parent block. vd: latest, bestsellers, account,.. Vinacart quy dnh các child blocks gii hn hin th trong parent blocks. column_left, column_right, content_bottom. VD, block bestsellers mc dnh ch hin th Tuy nhiên bn có th m rng hin th các blocks v trí parent blocks khác d thun li trong vic phát trin theme. Ð làm diu này bn khai báo vào th <blocks. Xem ví d di dây: <blocks> <block>  <block_txt_id><![cdata[bestsellers]]></block_txt_id> <controller>blocks/bestseller</controller> <templates> < AUTO_INCREASE > <parent_block_txt_id><![cdata[footer_top]]></parent_block_txt_id> <template><![cdata[blocks/bestseller.tpl]]></template> </ AUTO_INCREASE > < AUTO_INCREASE > <parent_block_txt_id><![cdata[header_bottom]]></parent_block_txt_id> <template><![cdata[blocks/bestseller_home.tpl]]></template> 4.6. Blocks 17

</ AUTO_INCREASE > < AUTO_INCREASE > <parent_block_txt_id><![cdata[column_left]]></parent_block_txt_id> <template><![cdata[blocks/bestseller.tpl]]></template> </ AUTO_INCREASE > < AUTO_INCREASE > <parent_block_txt_id><![cdata[content_bottom]]></parent_block_txt_id> <template><![cdata[blocks/bestseller_home.tpl]]></template> </ AUTO_INCREASE > < AUTO_INCREASE > <parent_block_txt_id><![cdata[column_right]]></parent_block_txt_id> <template><![cdata[blocks/bestseller.tpl]]></template> </ AUTO_INCREASE > </templates> <custom_templates> < AUTO_INCREASE > <parent_block_txt_id><![cdata[footer_top]]></parent_block_txt_id> <template><![cdata[blocks/bestseller.tpl]]></template> <page valueasattrs="1" context="content/content" args="content_id=1"> </ AUTO_INCREASE > < AUTO_INCREASE > <parent_block_txt_id><![cdata[header_bottom]]></parent_block_txt_id> <template><![cdata[blocks/bestseller_home.tpl]]></template> </ AUTO_INCREASE > </custom_templates> </block> </blocks> Gii thích: block_txt_id - txt id ca block. controller - controller hin th ni dung block. templates - Khai báo parent block và template mc dnh ca block hin th < AUTO_INCREASE. custom_templates - khai báo các template dã thêm ngoài template mc dnh ca block vào dây. v trí dó, trong mi cp th Ð block này có hiu lc, bn s np li cu hình bng cách truy cp Design > My Settings > Install & Configure nhn vào tab Refresh Extensions và click Refresh Blocks Ok, quay tr li trang layout trong admin, chn layout trong danh sách bn s thy b xung các layout mi. 18 Chapter 4. Cu hình theme

Cu hình block Tt c các blocks s s dng chung cu hình ca vinacart mà bn dã thit lp (ti Admin URL: /index.php?rt=setting/setting/all). Ðôi khi mt vài block s cn thay di li giá tr, chng hn nh block bestseller, latest nm ct trái (column_left) kích thc nh theo thit k theme là nh hn so vi hin th products trang ch, trang danh mc sn phm. Kích thc nh này quy dnh bi cu hình config_image_product_width, config_image_product_height. Bn có th d dàng thay di thông s này áp dng cho parent block & child block, ging nh sau: <blocks>  <block> <block_txt_id><![cdata[column_left]]></block_txt_id> <controller>common/column_left</controller> <config> <param name="config_image_product_width"><![cdata[100]]></param> <param name="config_image_product_height"><![cdata[95]]></param> </config> </block> 4.6. Blocks 19

<block> <block_txt_id><![cdata[latest]]></block_txt_id> <controller>blocks/latest</controller> <config> <param name="config_image_product_width"><![cdata[product_small_image_width]]></param> <param name="config_image_product_height"><![cdata[product_small_image_height]]></param> </config> </block> </blocks> Lu ý: vi mi kích thc to ra s to thêm nh mi tng ng vi kích thc dó, cho nên hãy cn trng d tránh gây tha dung lng. Nu bn s dng nhiu ln giá tr cu hình cách tt nht thit vào bin d tránh vit nhm giá tr. <configuration> <item name="image_product_width_small" value="100"/> <item name="image_product_height_small" value="95"/> </configuration> <block>.. <config> <param name="config_image_product_width"><![cdata[image_product_width_small]]></param> <param name="config_image_product_height"><![cdata[image_product_height_small]]></param> </config> </block> Bn cũng có th thay di giá tr cài dt tng v trí parent, bng cách khai báo giá tr trong th <skin>. <skin> <_AI_> <name><![cdata[sb_flat]]></name> <position><![cdata[content_bottom]]></position> <config> <param name="blog_entry_image_width"><![cdata[blog_entry_image_width]]></param> <param name="blog_entry_image_height"><![cdata[blog_entry_image_height]]></param> </config> </_AI_> <_AI_> <name><![cdata[sb]]></name> <position><![cdata[column_left]]></position> <config> <param name="blog_entry_image_width"><![cdata[blog_entry_small_image_width]]></param> <param name="blog_entry_image_height"><![cdata[blog_entry_small_image_height]]></param> </config> </_AI_> </skin> Xem thêm block skin phn di. Block Skin K tha hu ht các cms hin nay nh wordpress, bn có th khai báo giao din sidebar d dàng vi vinacart. Thit lp trong file cu hình (theme.xml) Khai báo các skin s dng cho theme: 20 Chapter 4. Cu hình theme

<block_skins> <skin name="skin1"> <param name="before_title"><![cdata[<div class="title %2$s" ><h2>]]></param> <param name="after_title"><![cdata[</h2></div>]]></param> <param name="before_widget"><![cdata[<div id="%1$s" class="block %2$s" >]]></param> <param name="after_widget"><![cdata[</div>]]></param> </skin> <skin name="sidebar"> <param name="before_title"><![cdata[<h3 class="%2$s">]]></param> <param name="after_title"><![cdata[</h3>]]></param> <param name="before_widget"><![cdata[<div id="%1$s" class="aa-sidebar-widget %2$s">]]></param <param name="after_widget"><![cdata[</div>]]></param> </skin> <skin name="footer"> <param name="before_title"><![cdata[<h3 class="%2$s">]]></param> <param name="after_title"><![cdata[</h3>]]></param> <param name="before_widget"><![cdata[<div id="%1$s" class="aa-footer-widget %2$s">]]></param> <param name="after_widget"><![cdata[</div>]]></param> </skin> <skin name="blog_sidebar"> <param name="before_title"><![cdata[<h3 class="%2$s">]]></param> <param name="after_title"><![cdata[</h3>]]></param> <param name="before_widget"><![cdata[<div id="%1$s" class="aa-sidebar-widget %2$s">]]></param <param name="after_widget"><![cdata[</div>]]></param> </skin> </block_skins> Áp dng skin vào parent block. <blocks> <block> <block_txt_id><![cdata[header]]></block_txt_id> <controller>common/header</controller> <skin> <name><![cdata[skin1]]></name> <values> <param name="before_title"><![cdata[block1]]></param> <param name="before_widget"><![cdata[block_1]]></param> </values> </skin> </block> <block> <block_txt_id><![cdata[column_left]]></block_txt_id> <controller>common/column_left</controller> <skin> <name><![cdata[sidebar]]></name> <values> <param name="before_title"><![cdata[block1]]></param> <param name="before_widget"><![cdata[block_1]]></param> </values> </skin> <config> <param name="config_image_product_width"><![cdata[100]]></param> <param name="config_image_product_height"><![cdata[95]]></param> </config> </block> <block> 4.6. Blocks 21

<block_txt_id><![cdata[column_right]]></block_txt_id> <controller>common/column_right</controller> <skin> <name><![cdata[blog_sidebar]]></name> <values> <param name="before_title"><![cdata[block1]]></param> <param name="before_widget"><![cdata[block_1]]></param> </values> </skin> </block>.. </blocks> Chú ý: giá tr bin before_title, after_title th <param tng ng vi bin %2$s. Trong file.tpl d hin th skin chúng ta có các bin: {{before_widget}}.. {{ before_title}}{{ heading_title }} {{ after_title}}.. {{after_widget}} Khi dt block 2 v trí khác nhau mà chúng du hin th vào mt file, vd: bestseller block column_left & column_right du gi vào bestseller.tpl. Trng hp này bn cũng có th s dng 2 template khác nhau cho mt block các v trí parent khác nhau và khai báo s dng nhiu skin. Chúng ta s thay di skin vi nhiu v trí, nh sau: <skin> </skin> <_AI_> </_AI_> <_AI_ > </_AI_> <name><![cdata[sb]]></name> <position><![cdata[column_left]]></position> <template><![cdata[blocks/bestseller_slides.tpl]]></template> <values> <param name="before_title"><![cdata[]]></param> <param name="before_widget"><![cdata[special-product best-sale-product]]></pa </values> <name><![cdata[sb_flat]]></name> <position><![cdata[column_right]]></position> <template><![cdata[blocks/bestseller.tpl]]></template> <values> <param name="before_title"><![cdata[]]></param> <param name="before_widget"><![cdata[special-product new-product]]></param> </values> Chú ý: <_AI_> alias ca < AUTO_INCREASE > Image Configuration config_image_thumb_width config_image_thumb_height thumb image for product page. config_image_popup_width config_image_popup_height 22 Chapter 4. Cu hình theme

(listing_block) main image with media resource type for current object in page. main image for product page. config_image_product_width config_image_product_height thumb image used in block: bestseller, featured, latest, special, listing_block (for product). thumb for products listing in category manufacturer search special page config_image_additional_width config_image_additional_height thumb image in block cart additional thumb images in product page. config_image_related_width config_image_related_height main image for related products in product page. config_image_cart_width config_image_cart_height list product in account page: cart, download, invoice, wishlist, confirm, guest_step_3 config_image_grid_width config_image_grid_height block manufacturer image in manufacturer page. list manufacturer images in product page. (admin) in all grid list with image support. config_image_category_width config_image_category_height block category, listing_block (for category) list subcategories in category page. config_image_manufacturer_width config_image_manufacturer_height Conclusion: listing_block (for manufacturer) blocks: cart, category, bestseller (featured, latest, special), listing_block, manufacturer pages: single product products listing page (category manufacturer special search..) account pages (cart, download, invoice, wishlist, confirm, guest_step_3) 4.7. Image Configuration 23

24 Chapter 4. Cu hình theme

CHAPTER 5 Cài dt chung Credential S dng các tài khon cho các dch v ngoài, nh gi mail.. Các tài khon này dc lit kê trong file system/config/credentials.php <?php return array( 'sendgrid' => array( array( 'username'=> 'user1', 'password' => 'pass1', 'email'=> 'kythuat.hoangweb@gmail.com', 'apikey'=> 'sdfnsdkfr3434fsf', ), array( 'username' => 'user2', 'password' => 'pass2', 'email' => 'laptrinhweb123@gmail.com', 'apikey' => 'sdfsd32y423y432y9erkedfdf' ) ), 'mailgun' => array( array( ); ) ) Ð np tài khon bng cách sa li file credentials.php. Sau dó xóa cache ca website hoc truy cp System > settings > My Settings. Chn Install & configure nhn tab Refresh Extensions và nhn vào Refresh Credentials. 25

26 Chapter 5. Cài dt chung

CHAPTER 6 S dng layout blocks Danh sách blocks bn có th s dng: customer menu search language currency cart category breadcrumbs account newsletter_signup credit_cards special featured bestsellers chat_block html_block custom_form_block banner_block listing_block.. Tùy chnh giao din block Hin ti áp dng cho 2 block listing_data & banner_block. Tùy chnh giao din block cho phép chúng ta da thêm trng vào trang edit block và s dng các th vin jquery theo ý mun. Chúng tôi da sn các th vin javascript dáp ng nhu cu làm theme phong phú, d np mt th vin nào dó bn ch cn khai báo bi tên. Ðiu này tránh trùng lp th vin bn chèn vào site. 27

Mi file.tpl có mt file cu hình cùng tên có dnh dng.xml và nm cùng th mc vi file template.tpl dó. VD: ta có file blocks/listing_block/main_categories.tpl tng ng vi file cu hình blocks/listing_block/main_categories.xml <?xml version="1.0" encoding="utf-8"?> <block_config> <name>test 4</name> <description><![cdata[test 3 description]]></description> <author><![cdata[hoang]]></author> <preview><![cdata[images/test.jpg]]></preview> <help><![cdata[help content]]></help>  <options> <item name="field-1"> <type>selectbox</type> <title><![cdata[test_4-field1]]></title> <desc><![cdata[4e9750345urjglflfhfghf;e057435]]></desc> <attributes><![cdata[style="border:1px solid red"]]></attributes> <default_value>bestsellers</default_value> <variants> <_AI_>bestsellers</_AI_> <_AI_>latest</_AI_> <_AI_>specials</_AI_> <_AI_>featured</_AI_> </variants> </item> <item name="field-2"> <type>checkbox</type> <default_value>0</default_value> </item>... </options>  <settings> <item> <type>js_libs</type> <data> <_AI_><![CDATA[marquee/endless-div-scroll]]></_AI_> </data> </item> </settings> </block_config> <item> <type>styles</type> <data> <_AI_><![CDATA[style.css]]>]</_AI_> </data> </item> <item> <type>scripts</type> <data> <_AI_><![CDATA[js.js]]>]</_AI_> </data> </item> 28 Chapter 6. S dng layout blocks

Th <name, <description, <author, <preview, <help hin th thông tin v block template. block, bn s nhìn thy thông tin giao din dc tìm thy. trang sa ni dung Assets Khai báo s dng thêm.css,.js và th vin javascript khi block dc load trong site. Bn vit trong th <scripts.  <settings> <item> <type>js_libs</type> <data> <_AI_><![CDATA[marquee/endless-div-scroll]]></_AI_> </data> </item> <item> </item> <item> <type>styles</type> <data> <_AI_><![CDATA[style.css]]>]</_AI_> </data> <type>scripts</type> <data> 6.2. Assets 29

</settings> </item> </data> <_AI_><![CDATA[js.js]]>]</_AI_> Chú ý: dng dn file tng t nh file cu hình theme theme.xml Mt s th vin hay s dng: Background effects: bg-effects/snow bg-effects/fireworksnewyear Galleries galleries/jgallery galleries/photor... Tng t, nu bn mun b xung file ca th vin, khai báo dy d nh sau: <item> </item> <type>js_libs</type> <data> <_AI_> <param name="name"><![cdata[sliders/nivoslider]]></param>  <param name="styles"><![cdata[light.css]]></param> </_AI_> </data> Options Ð da thêm option cho block, bn khai báo trong th <options. <options> <item name="f1"> <type>selectbox</type> <title><![cdata[test_4-field1]]></title> <desc><![cdata[4e9750345urjglflfhfghf;e057435]]></desc> <attributes><![cdata[style="border:1px solid red"]]></attributes> <default_value>bestsellers</default_value> <variants> <_AI_>bestsellers</_AI_> <_AI_>latest</_AI_> <_AI_>specials</_AI_> <_AI_>featured</_AI_> </variants> </item> <item name="f2"> <type>checkbox</type> <default_value>0</default_value> </item> <item name="f3"> <type>input</type> 30 Chapter 6. S dng layout blocks

<default_value><![cdata[.next]]></default_value> </item> </options> Nu bn khai báo s dng th vin, các th vin có th có thêm options s dc b xung vào các trng bn dã khai báo trên. Chú ý: ch ly options ca th vin du tiên. S dng trong.tpl Giá tr options bn lu vi block, lu trong bin $options. Chng hn bn có th s dng options d tùy chnh th vin jquery. PHP: <script> $(window).load(function () { $("#brand_carousal").endlessscroll(<?php echo HW_SKIN_Option::build_json_options($options)?>) // Recopy the previous line to add scrolling to other divs. }); </script> Template engine: <script> $(window).load(function () { var options={{ staticcall('hw_skin_option','build_json_options',options) }}; $("#brand_carousal").endlessscroll(options); }); </script> 6.3. Options 31

32 Chapter 6. S dng layout blocks

CHAPTER 7 Template Bin s dng trong template Bin toàn cc: $vnc truy cp mi template (.tpl). {% if vnc %} {% if vnc.getvar('product') %} <h3>{{ vnc.getvar('product').name }}</h3> {% elseif vnc.getvar('category') %} <h3>{{ vnc.getvar('category').name }}</h3> <p>{{ vnc.getvar('category').description }}</p> {% elseif vnc.getvar('blog_category') %} <h1>{{ vnc.getvar('blog_category').name }}</h1> <p>{{ vnc.getvar('blog_category').description }}</p> {% elseif vnc.getvar('blog_entry') %} <h1>{{ vnc.getvar('blog_entry').entry_title }}</h1> {# elseif vnc.getvar('blog_author') %} <h1>{{ vnc.getvar('blog_author') }}</h1> #} {% elseif vnc.getvar('heading_title') %} <h3>{{vnc.getvar('heading_title') }}</h3> {% else %} <h3>empty</h3> {% endif %} {% endif %} Ly ni dung bt k block nào trong page.tpl (ngoi tr parent block (column_left,..)) //parent block, child block index: deprecated {# vnc._view.loadblock('header_bottom', 0) #} {{ registry.get('_view').loadblock('footer_top', 1) }} #or short form using {{ loadblock('header_bottom', 0) }} //get variable data from any block/page. note: make sure this block already loaded 33

{{ blockvar('blocks/bestseller','var1') }} {% set categories = blockvar('pages/product/category', 'categories') %} //or {{ registry.get('_view').blockvar(..) }} //for block blockvar('blocks/bestseller', 'products') Template tag common template tag: {% if is_admin() %} is_home() is_category() is_single_product() is_manufacturer() is_generic_pages() is_search() is_ajax() is_page('content/contact') Model Truy cp model. getmodel('catalog/product').getproduct('<id>') Components. Ngoài các blocks có sn trong layout, chúng tôi cho phép np mt s block mà không cn thêm vào layout. Thành phn hin th nh comment,.. {{ loadview('comment') }} {{ loadview('social_button') }} Form Field. {% set btn = review_button.vnc_getproperty('data') %} <button class="button submit" title="{{ btn.title? btn.title : btn.text }}" type="submit">{{ btn.text # other way <button class="button submit" title="{{ fieldvalue(review_button,'title','text') }}" type="submit">{{ Debuging: //buitin function help you print value of any variable {{ _print(..) }} {{ _debug_backtrace(debug_backtrace()) }} URL: {{ html.getseourl('account/wishlist') }} {{ html.geturl('account/wishlist') }} {{ html.getsecureurl('account/wishlist') }} {{ html.gethomeurl() }} Customer: //wishlist count {{ customer.getwishlist() length }} 34 Chapter 7. Template

User //current user {{ current_user() }} Utils functions String: //replace string at first found str_replace_first($find, $replace, $object) Config: config.get('store_main_email') {{ config.get('livechat_embed') }} Khác: {% set item = staticcall('htmlelementfactory', 'create', data) %} {{ convert(obj, 'string') }} //load helper {{ util('string') }} 7.1. Bin s dng trong template 35

36 Chapter 7. Template

CHAPTER 8 Dch v thit k website Hoangweb Chúng tôi xây dng doanh nghip trc tuyn Tt c mi th chúng tôi làm dc thit k d giúp bn nh mt ch doanh nghip thành công kinh doanh online. Chúng tôi rt say mê chia s kinh nghim, s dam mê và tình yêu ca chúng tôi vi internet s giúp bn có dc trang web tt nht. Chúng tôi bt du s mnh t khi giúp mi ngi hiu h có th d dàng tip cn th trng online tim năng và s dng nó nh th nào d phát trin kinh doanh. Các ch doanh nghip thng có ít thi gian và vic có dc website hiu qu s giúp h tit kim thi gian và có th tăng khách hàng tim năng mà không cn thêm n lc nào. Công ty thit k website Hoàng Web Chúng tôi kt hp thit k web vi xu hng marekting online hiu qu d cung cp các trang web dp và làm vic ti da d phát trin doanh nghip ca bn. Thit k web và các quy trình phát trin web ca chúng tôi dã dc tinh chnh, ti u hóa và ci thin qua nhiu năm giúp hn 4.000 doanh nghip thành công. Vì vy, chúng tôi có th t tin nói rng chúng tôi có th giúp bn. Chúng tôi s dng cách tip cn tích cc d hiu bn và doanh nghip ca bn, ngành công nghip và th trng mc tiêu cũng nh s cnh tranh ca bn d dm bo rng mi yu t thit k du hng dn các mc tiêu tip th kinh doanh ca bn. Lên k hoch trang web ca bn ngay t du Chúng tôi s thit k chin lc marketing online phù hp vi nhu cu kinh doanh ca bn bt du t vic xây dng thng hiu, phát trin trang web và tip th liên tc. Thit k web gii thiu công ty hay tin tc chúng tôi s dng nn tng Wordpress d hin th ni dung kinh doanh, bn tin, menu, giá c, cung cp dăng ký thành viên, chc năng c th ngành và nhiu hn na. Thit k web bán hàng online hay website thng mi din t chúng tôi s dng nn tng Abantecart, tính năng mnh m, dy d chc năng, dc thit k dc bit d qun lý và bán hàng trc tuyn. Chúng tôi s khuyên bn làm theo dúng con dng phát trin web da trên tm nhìn ca bn. Chúng tôi thit k trang web - bn qun lý ni dung Các trang web ca chúng tôi dc phát trin vi mt h thng qun lý ni dung (CMS) theo tiêu chun, cho phép bn truy cp và kim soát hoàn toàn d cp nht ni dung ca bn t bt k thit b nào. Nn tng WordPress dc toàn cu công nhn là tt nht và AbanteCart s giúp bn nhanh chóng thit lp trang web bán hàng trc tuyn hiu qu. Công c tìm kim thân thin, trc quan và d s dng (ging nh Microsoft Word) và nó cho phép bn t do và kim soát bn cn d gi cho trang web ca bn phát trin. 37

Ti sao chn Hoàng Web? Danh ting ln. Chúng tôi dã giúp hn 4.000 doanh nghip dc trc tuyn. Dch v thit k web chuyên nghip, uy tín ti Hà Ni. Không gii hn sa di thit k. Chúng tôi thit k cho dn khi bn hài lòng. Bn luôn có quyn kim soát trang web ca mình. Giá c phi chăng. Chúng tôi chuyên ct gim chi phí trong khi cung cp trang web cht lng. H tr tuyt vi. Ði ngũ nhân viên thân thin và giàu kinh nghim ca chúng tôi sn sàng h tr bn. CÔNG TY TNHH HOÀNG WEB Email : laptrinhweb123@gmail.com Website: http://www.hoangweb.com 38 Chapter 8. Dch v thit k website Hoangweb