Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webデザイナー向け!EC-CUBE3勉強会2

amidaike
September 27, 2015

 Webデザイナー向け!EC-CUBE3勉強会2

amidaike

September 27, 2015
Tweet

More Decks by amidaike

Other Decks in Programming

Transcript

  1. ରԠϒϥ΢βʹ͍ͭͯ OS ϒϥ΢β Windows (Windows7Ҏ߱) Internet Explorer10 Ҏ߱ Google Chrome

    ࠷৽൛ Firefox ࠷৽൛ Mac Safari ࠷৽൛ iOS(7Ҏ߱) Safari ࠷৽൛ Android(4.1Ҏ߱) ඪ४ϒϥ΢β ࠷৽൛
  2. σόοάϞʔυͷ༗ޮԽ • ௨ৗ / ΍/index.phpͰΞΫηε͍ͯ͠Δͱ͜ΖΛ /index_dev.php ͱॻ͖׵͑ͯΞΫηε͢Δ͜ͱʹΑΓɺtwigϑΝΠϧ͕Ωϟο γϡ͞ΕͣʹσόοάϞʔυ͕༗ޮʹͳΓ·͢ɻ
 
 http://localhost/index_dev.php

    • You are not allowed to access this file. Check index_dev.php for more information.ͱΤϥʔ͕දࣔ͞ΕΔ৔߹ɺindex_dev.phpΛ ։͖ɺΞΫηεݩͷIPΛҎԼͷ഑ྻʹ௥Ճ͍ͯͩ͘͠͞ɻ 
 $allow = array( '127.0.0.1', 'fe80::1', '::1', );
  3. ϑϩϯτը໘ͷϨΠΞ΢τ フロン → c div#main → m div#main_top ※C  E

    div#main_middle ドロ div#main_bottom レイアウト管理画面とフロントの対比イメージ header#header div#contents_top ↑ このエリアが div#contentsで 囲われている ↓ div#side_left.side div#side_right.side ※レ レイ ①  ②  div#contents_bottom ③  footer#footer ④ 
  4. σΟϨΫτϦߏ੒ͷઆ໌ σΟϨΫτϦ໊ ػೳ໊ default௚Լ ڞ௨ɺτοϓϖʔδ Block ϒϩοΫ؅ཧ Cart Χʔτ Contact

    ͓໰͍߹Θͤ Entry ձһొ࿥ Forgot ύεϫʔυϦϚΠϯμʔ Form ϑΥʔϜ߲໨༻ςϯϓϨʔτ Help ϔϧϓ Mail ϝʔϧૹ৴༻ςϯϓϨʔτ Mypage ϚΠϖʔδ Product ঎඼Ұཡɺৄࡉ Shopping ߪೖ
  5. ϑΝΠϧͷઆ໌ • BlockσΟϨΫτϦ௚Լʹ͸ը໘Λߏ੒͢Δͨ ΊͷϨΠΞ΢τ༻twigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ cart.twig ΧʔτදࣔϨΠΞ΢τ category.twig ΧςΰϦදࣔϨΠΞ΢τ

    footer.twig ϑολʔ༻ϨΠΞ΢τ free.twig ϑϦʔΤϦΞ༻ϨΠΞ΢τ garally.twig ΪϟϥϦʔ༻ϨΠΞ΢τ login.twig ϩάΠϯ༻ϨΠΞ΢τ logo.twig γϣοϓϩΰ༻ϨΠΞ΢τ new_product.twig ৽ண঎඼༻ϨΠΞ΢τ news.twig ৽ண৘ใ༻ϨΠΞ΢τ search_product.twig ঎඼ݕࡧ༻ϨΠΞ΢τ
  6. ϑΝΠϧͷઆ໌ • MailσΟϨΫτϦ௚Լʹ͸ϝʔϧૹ৴ςϯϓ Ϩʔτ༻twigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ contact_mail.twig ͓໰͍߹Θͤ༻ϝʔϧςϯϓϨʔτ customer_withdraw_mail .twig

    ձһୀձ༻ϝʔϧςϯϓϨʔτ entry_complete.twig ձһొ࿥׬ྃ༻ϝʔϧςϯϓϨʔτ entry_confirm.twig ձһԾొ࿥༻ϝʔϧςϯϓϨʔτ forgot_mail.twig ύεϫʔυϦϚΠϯμ֬ೝ༻ϝʔϧςϯϓ Ϩʔτ order.twig ߪೖ׬ྃ༻ϝʔϧςϯϓϨʔτ reset_complete_mail.twi ύεϫʔυมߋ׬ྃ༻ϝʔϧςϯϓϨʔτ
  7. ϑΝΠϧͷઆ໌ • MypageσΟϨΫτϦ௚Լʹ͸ϩάΠϯޙͷձһ৘ ใ΍஫จཤྺ౳ʑΛදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ chage.twig ձһ৘ใมߋೖྗը໘ change_complete.twig ձһ৘ใมߋ׬ྃը໘

    delivery.twig ͓ಧ͚ઌҰཡը໘ delivery_edit.twig ͓ಧ͚ઌೖྗ/มߋը໘ favorite.twig ͓ؾʹೖΓը໘ history.twig ߪೖཤྺৄࡉը໘ index.twig ߪೖཤྺҰཡը໘ login.twig ϩάΠϯը໘ mail_view.twig ϝʔϧૹड৴ཤྺը໘ navi.twig ϚΠϖʔδઐ༻λϒ withdraw.twig ձһୀձը໘ withdraw_complete.twig ձһୀձ׬ྃը໘ withdraw_confirm.twig ձһୀձ֬ೝը໘
  8. ϑΝΠϧͷઆ໌ • ShoppingσΟϨΫτϦ௚Լʹ͸ߪೖϑϩʔ࣌ ʹදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ complete.twig ߪೖ׬ྃը໘ index.twig ߪೖ֬ೝը໘

    login.twig γϣοϐϯά༻ϩάΠϯը໘ nonmember.twig ඇձһ৘ใೖྗը໘ shipping.twig ͓ಧ͚ઌࢦఆը໘ shipping_edit.twig ͓ಧ͚ઌ৽نೖྗը໘ shipping_multiple.twig ͓ಧ͚ઌෳ਺ࢦఆը໘ shopping_error.twig ߪೖΤϥʔը໘
  9. Twigͷઆ໌ Twigͷߏจ {{ ... }}: "ग़ྗ͢Δ": ม਺΍ࣜͷ݁ՌΛςϯϓϨʔτʹදࣔ {% ... %}:

    "ॲཧ͢Δ": ςϯϓϨʔτͷϩδοΫΛ੍ޚ͢ΔλάͰɺforϧʔϓͳͲͷ໋ྩͷ࣮ߦ ʹ࢖༻ {# ... #}: "ίϝϯτ": ͜ͷߏจͰ͸ɺPHP ͷ /* comment */ ͱಉ͡Α͏ʹෳ਺ߦʹ౉Δίϝ ϯτ΋هड़Մೳ {{ hoge|upper }}: "ϑΟϧλʔ": ϑΟϧλʔΛ࢖͏ͱɺϨϯμϦϯά͞ΕΔલʹίϯςϯπΛम ০͢Δ͜ͱ͕Ͱ͖·͢ɻ͜ͷྫͰ͸ɺϑΟϧλʔΛ࢖ͬͯม਺ hoge ͷ಺༰Λ͢΂ͯେจࣈʹม׵ͯ͠ ग़ྗ
  10. Twigͷઆ໌ ɾdefault_frame.twig <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

    /> <title>{% block title %}ςετΞϓϦέʔγϣϯ{% endblock %}</title> </head> <body> <div id="main_middle"> {% block main %}{% endblock %} </div> </body> </html>
  11. Twigͷઆ໌ ɾindex.twig {% extends 'default_frame.twig' %} {% block title %}ϒϩάهࣄͷҰཡ{%

    endblock %} {% block main %} {% for entry in blog_entries %} <h2>{{ entry.title }}</h2> <p>{{ entry.body }}</p> {% endfor %} {% endblock %}