.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt =================== Quick Shop Template =================== :Created: 2011-02-07T22:40:19 :Changed by: Dirk Wildt :Changed: 2013-12-29T00:59:20 :Classification: base_quickshop :Description: Quick Shop Template is a template especially for the extension Quick Shop. You can use this template for any other TYPO3 website too. The template will installed automatically by the Quick Shop Installer (quickshop_installer). :Keywords: forAdmins, forDevelopers, quick, shop, template :Author: Dirk Wildt (Die Netzmacher) :Email: http://wildt.at.die-netzmacher.de :Website: http://die-netzmacher.de :Language: en |img-1| |img-2| Quick Shop Template (extkey: base\_quickshop) |img-3| .. _Quick-Shop-Template: Quick Shop Template =================== Quick Shop Template is a template especially for the extension Quick Shop. You can use this template for any other TYPO3 website too. The template will installed automatically by the Quick Shop Installer (quickshop\_installer). |img-4| Version: 3.0.6 - 2013-12-28 Extension Key: base\_quickshop Language: en Keywords: forAdmins, forDevelopers, quick, shop, template Copyright 2010-2013, Dirk Wildt (Die Netzmacher), This document is published under the Open Content License available from `http://www.opencontent.org/opl.shtml `_ The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.org .. _Table-of-Contents: Table of Contents ----------------- `Quick Shop Template 1 <#__RefHeading__7563_479221451>`_ `Screenshots 3 <#__RefHeading__7565_479221451>`_ `Without Content 3 <#__RefHeading__1222_426349308>`_ `With Quick Shop 3 <#__RefHeading__1224_426349308>`_ `Introduction 4 <#__RefHeading__7567_479221451>`_ `What does it do? 4 <#__RefHeading__7569_479221451>`_ `What does it not do? 4 <#__RefHeading__7571_479221451>`_ `Audience 4 <#__RefHeading__1226_426349308>`_ `Installation 5 <#__RefHeading__7573_479221451>`_ `Installation by the Quick Shop Installer 5 <#__RefHeading__7575_479221451>`_ `Extension Manager 5 <#__RefHeading__7577_479221451>`_ `Backend Group 5 <#__RefHeading__7579_479221451>`_ `Pages 6 <#__RefHeading__7581_479221451>`_ `Page Configuration 7 <#__RefHeading__7583_479221451>`_ `TypoScript 8 <#__RefHeading__7585_479221451>`_ `Header Logo, Header Slider and Footer 9 <#__RefHeading__1228_426349308>`_ `Use the Quick Shop 11 <#__RefHeading__7589_479221451>`_ `Installation with one Click 11 <#__RefHeading__7591_479221451>`_ `Manual Installation 11 <#__RefHeading__7593_479221451>`_ `Adapt HTML, CSS, JavaScript and TypoScript 12 <#__RefHeading__7595_479221451>`_ `HTML and CSS 12 <#__RefHeading__7597_479221451>`_ `JavaScript 12 <#__RefHeading__1230_426349308>`_ `TypoScript 13 <#__RefHeading__7599_479221451>`_ `Update 14 <#__RefHeading__7601_479221451>`_ `From 2.x to 3.x 14 <#__RefHeading__1232_426349308>`_ `Helpful suggestions 15 <#__RefHeading__1234_426349308>`_ `Forum 15 <#__RefHeading__7603_479221451>`_ `To-Do List 16 <#__RefHeading__7605_479221451>`_ `Further Information 17 <#__RefHeading__1236_426349308>`_ `Other extensions published by Die Netzmacher 17 <#__RefHeading__2867_347248282>`_ `Manual in PDF 18 <#__RefHeading__7613_479221451>`_ `About the Author 18 <#__RefHeading__7615_479221451>`_ `Change Log 19 <#__RefHeading__7617_479221451>`_ `Illustration Index 20 <#__RefHeading__7619_479221451>`_ .. _Screenshots: Screenshots ----------- .. _Without-Content: Without Content ^^^^^^^^^^^^^^^ |img-5| .. _With-Quick-Shop: With Quick Shop ^^^^^^^^^^^^^^^ |img-5| .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ - Quick Shop Template is a template for the Quick Shop. - Quick Shop Template is easy to install. And if you are using the `Quick Shop Installer `_ (quickshop\_installer) it will installed automatically. - Quick Shop Template is useful, - if you will start with Quick Shop, but you don't have a designed TYPO3 installation. - if you want a full designed website very quick, but have no time for building an own template. - You can use Quick Shop Template for any website and without the extension Quick Shop. - If you like, you can change everything - HTML - CSS - TypoScript .. _What-does-it-not-do: What does it not do? ^^^^^^^^^^^^^^^^^^^^ If you like a very different layout than Quick Shop Template, it isn't useful to install. .. _Audience: Audience ^^^^^^^^ - TYPO3 agencies - TYPO3 integrators - TYPO3 developers .. _Installation: Installation ------------ .. _Installation-by-the-Quick-Shop-Installer: Installation by the Quick Shop Installer ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The extension Quick Shop Installer (quickshop\_installer) installs the template automatically. If you are interested in the installer please visit: `http://typo3.org/extensions/repository/view/quickshop\_installer/ `_ .. _Extension-Manager: Extension Manager ^^^^^^^^^^^^^^^^^ Open the extension manager, download the extension Quick Shop Installer (extkey: base\_quickshop) and install it. |img-5| |img-5| Quick Shop Installer depends on Template Auto-parser (automaketemplate).Please install this extension too. Install Quick Shop Installer. If you like "RealURL: speaking paths for TYPO3 (realurl)" please install it too. .. _Backend-Group: Backend Group ^^^^^^^^^^^^^ Create a new backend user group. |img-5| |img-5| Modul: Web List Page tree root item (here: TYPO3 Quick Shop) Edit area Backend usergroup Tab [General], Field "Grouptitle": quick\_shop .. _Pages: Pages ^^^^^ |img-5| |img-5| Modul: Web List Page tree root item (here: TYPO3 Quick Shop) Edit area Create new page - Page (inside) Create a page list (pages and sysfolders) like in the illustration above and the tree below \|-- TYPO3 Quick Shop \`-- Quick Shop \|-- Quick Shop Products [sysfolder] \`-- Libraries [sysfolder] \|-- header \|-- logo \`-- slider \`-- footer .. _Page-Configuration: Page Configuration ^^^^^^^^^^^^^^^^^^ .. _Page-Quick-Shop: Page Quick Shop """"""""""""""" We like the backend user group "Quick Shop" as the default group for new pages. Every backend user with the group "Quick Shop" will have full access to this pages. If the id of the backend user group "Quick Shop" is 1, than copy the code from below to the tsConfig field of the root page without any changing. TCEMAIN { permissions { // 1: quick\_shop groupid = 1 group = show,edit,delete,new,editcontent } } |img-5| |img-5| Modul: Web List Page tree Quick Shop Edit area Edit page properties (click on the pen on the top of the area) Select tab [Options] Paste the code snippet from above to the field "Tsconfig". .. _Quick-Shop-Products-sysfolder: Quick Shop Products (sysfolder) """"""""""""""""""""""""""""""" Please repeat the steps from the page "Quick Shop" with the code snippet below for the sysfolder "Quick Shop Products" TCEMAIN { clearCacheCmd = pages } The code above effects, that all pages will removed from the TYPO3 cache, if product data change. .. _Header-Logo-Header-Slider-and-Footer: Header Logo, Header Slider and Footer """"""""""""""""""""""""""""""""""""" Repeat the step "Quick Shop Products (sysfolder)" for the subpages of the Header page and for the Footer page. .. _TypoScript: TypoScript ^^^^^^^^^^ .. _Page-Quick-Shop: Page Quick Shop """"""""""""""" .. _Add-a-TypoScript-template: Add a TypoScript template ~~~~~~~~~~~~~~~~~~~~~~~~~ |img-5| Modul: Web List Page tree Quick Shop Edit area System Records > template Select tab [General] Field [Template title]: page\_quickshop\_001 `:sup:`0` <#sdfootnote1sym>`_ Field [Website title]: Quick Shop" |img-5| |img-5| Edit area Select tab [Options] Enable fields:[x] Constants[x] Setup[x] Rootlevel Select tab [Includes] Enable field:[x] Include static templates AFTER basic template Include static templatesCSS Styled Content (css\_styled\_content)Base Quick-Shop (base\_quickshop) .. _Constant-Editor: Constant Editor ~~~~~~~~~~~~~~~ Configure Quick Shop Template supported by the Constant Editor: Modul: Web Template Page tree Quick Shop Edit area [Constant Editor] Category [QUICK SHOP TEMPLATE - \*] `:sup:`0` <#sdfootnote2sym>`_ Please clear the TYPO3 cache. .. _Result-I-II: Result I/II """"""""""" |img-5| \*You have to create some content elements with images `:sup:`0` <#sdfootnote3sym>`_ in Quick Shop > Header > SliderYou have to create a content element with an image `:sup:`0` <#sdfootnote4sym>`_ in Quick Shop > Header > Logo Than your result will look like the illustration above. .. _Header-Logo-Header-Slider-and-Footer: Header Logo, Header Slider and Footer ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ We will add the header, the header image and the footer. .. _Header-Logo: Header Logo """"""""""" Page tree Quick Shop > Libraries > Header > Logo Edit area: Add a new record Create a new content element > Image The best hight of the image is 102px. .. _Header-Slider: Header Slider """"""""""""" Page tree Quick Shop > Libraries > Header > Slider Edit area: Add a new record Create a new content element > Image The best format of an image for the slider is 770px x 130px. Repeat step 1 to 3 for some other images. .. _jQuery: jQuery ~~~~~~ You need jQuery for a proper sliding effect in the header. .. _Footer: Footer """""" The footer the same steps like the header above. But the content element should be of type "text" .. _Result-II-II: Result II/II """""""""""" |img-5| Slider, logo and footer depends on your content / images of course. .. _Use-the-Quick-Shop: Use the Quick Shop ------------------ |img-5| Now you can install the Quick Shop. .. _Installation-with-one-Click: Installation with one Click ^^^^^^^^^^^^^^^^^^^^^^^^^^^ The Quick Shop can installed with one click only: Please use the Quick Shop Installer (quickshop\_installer) Quick Shop Installer (quickshop\_installer) `http://typo3.org/extensions/repository/view/quickshop\_installer/ `_ Bear in mind: if you like to use the Quick Shop Installer, there isn't any need to install the Quick Shop Template manually! .. _Manual-Installation: Manual Installation ^^^^^^^^^^^^^^^^^^^ A manual installation isn't recommended. See details at See Quick Shop (quick\_shop). `http://typo3.org/extensions/repository/view/quick\_shop/ `_ .. _Adapt-HTML-CSS-JavaScript-and-TypoScript: Adapt HTML, CSS, JavaScript and TypoScript ------------------------------------------ You can adapt the HTML code, the CSS and the TypoScript to your needs. .. _HTML-and-CSS: HTML and CSS ^^^^^^^^^^^^ Load your own HTML template or CSS file up to the fileadmin directory or any other directory (see Modul > File > Filelist). .. _Constant-Editor: Constant Editor """"""""""""""" Adapt the properties supported by the Constant Editor. Modul: Web Template Page tree Quick Shop Edit area [Constant Editor] Category [QUICK SHOP TEMPLATE – PATHS] .. _JavaScript: JavaScript ^^^^^^^^^^ Load your own JavaScript file up to the fileadmin directory or any other directory (see Modul > File > Filelist). .. _Constant-Editor: Constant Editor """"""""""""""" Adapt the properties supported by the Constant Editor. Modul: Web Template Page tree Quick Shop Edit area [Constant Editor] Category [QUICK SHOP TEMPLATE – PATHS] field "Slider jQuery" .. _TypoScript: TypoScript ^^^^^^^^^^ |img-5| Modul: Web Template Page tree Quick Shop Edit area [TypoScript Object Browser] [Setup] Click the plus icon [+] of the element [page]Click the plus icon [+] of the element [10] Click the plus icon [+] of the element [subparts] Every subpart corresponds with the
-tag in the HTML template with the subpart name as the div id. .. _Update: Update ------ .. _From-2-x-to-3-x: From 2.x to 3.x ^^^^^^^^^^^^^^^ - Please include the static template [Quick Shop – Basic Template (base\_quickshop)] to your root page - Constant Editor (root page)Please maintain the ids for the pages: - header - footer .. _Helpful-suggestions: Helpful suggestions ------------------- .. _Forum: Forum ^^^^^ If you have helpful suggestions, feel free to publish any question, bug or code snippet on Quick Shop forum. `http://typo3-quick.shop.de/forum/ `_ Posts are welcome in English and German. .. _To-Do-List: To-Do List ---------- Nothing to do. .. _Further-Information: Further Information ------------------- .. _Other-extensions-published-by-Die-Netzmacher: Other extensions published by Die Netzmacher ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - |img-6| +AOE Linkhandler Configurator: Configure the AOE linkhandler supported by userinterfaces. Out-of-the-box templates for cal, org, tt\_news and tt\_products. Don't edit page TSconfig any longer. `http://typo3.org/extensions/repository/view/linkhandlerconf/ `_ - |img-7| autositemap: A smart site-map optimised for the footer. It groups menus in columns. Great menus will get two columns. Configuration is based on TypoScript HMENU. `http://typo3.org/extensions/repository/view/autositemap/ `_ - |img-8| Browser – TYPO3 without PHP. Develop your TYPO3 extension 8 times faster! You need one line TypoScript for a result list with a search form, a record browser and an index browser. Images are wrapped self-acting. SEO, Search Engine Optimization, is integrated. `http://typo3.org/extensions/repository/view/browser/ `_ - |img-9| Caddy – the TYPO3 shopping cart. You can use it for your own needs. You need a database with products or any other items only. You can install Caddy out of the box with one mouse click – see Quick Shop below. `http://typo3.org/extensions/repository/view/caddy/ `_ - |img-10| Flip it! offers lovely and smooth page flip transitions. It enables you to run over pages in PDF documents like in a real magazine. It is based on flash. Flipt it! can convert PDF documents to swf files automatically. `http://typo3.org/extensions/repository/view/flipit/ `_ - |img-11| Green Cars (Grüne Autos) - Database optimized for ecological cars. It is a case study and demonstrates, how to get a complex database with the browser (see above) in three hours only. `http://typo3.org/extensions/repository/view/green\_cars/ `_ - |img-12| Jobmarket is a catalogue with job offers. Views, the a-z-browser, the page-browser, the search, social bookmarks and a lot of other stuff can configured by the Browser plugin with the mouse. `http://typo3.org/extensions/repository/view/job\_market/ `_ - |img-13| Organiser – TYPO3 for the lobby and the organisers. Handle news, events, staff, headquarters, locations, workshops and a calendar with one extension. Sell online tickets! Install the Organiser with one mouse click! `http://typo3-organiser.de/ `_ - |img-3| Quick Shop – the fastest shop in the history of TYPO3. Install it with one mouse click! Quick Shop is based on the browser (see above) and powermail. `http://typo3-quick-shop.de/ `_ - |img-14| PDF Controller: Easy to install. Add to your HTML page the PDF-controller-button. Link from the button to the controller. Adjust the controller by mouseclicks. The PDF Controller supports CSS 3. `http://typo3-pdfcontroller.de/ `_ - |img-15| Radial Search (German: Umkreissuche) for your TYPO3 database. Your data must have a latitude and a longitude. The Browser – TYPO3 without PHP – has it integrated. `http://typo3.org/extensions/repository/view/radialsearch/ `_ - |img-16| Route – Publish your routes with GoogleMaps or OpenStreetMap. Routes have points of interest (POI). You can categorise and filter both: routes and POI. Address data can geocoded automatically. `http://typo3.org/extensions/repository/view/route/ `_ - |img-17| seo\_dynamic\_tag: Search Engine Optimization for the title tag, the canonical tag and the meta tags author, description and keywords. Configuration by a user interface. `http://typo3.org/extensions/repository/view/seo\_dynamic\_tag/ `_ - |img-18| TSconfig Pages and Users by extManager (extkey: tsconf): Configure the the eight most commonly used TSconfig porperties with the mouse - like page tree uids, activated extended view, activated clipboard, ... `http://typo3.org/extensions/repository/view/tsconf/ `_ - |img-19| tt\_news select configuration (extkey: ttnews\_selectconf) enables to select tt\_news by any SQL clause. The extension adds an andWhere clause to the SQL query of the tt\_news plugin. `http://typo3.org/extensions/repository/view/ttnews\_selectconf/ `_ - |img-20| Wine Catalogue provides a data base for wine with regions, wineries, styles, variety and ageing among others. It is localized. English, German and Spanish ist of the box. Wine based on the extension browser (see above). `http://typo3.org/extensions/repository/view/wine/ `_ .. _Manual-in-PDF: Manual in PDF ^^^^^^^^^^^^^ You find this manual as PDF file at doc/manual.pdf .. _About-the-Author: About the Author ^^^^^^^^^^^^^^^^ .. _Dirk-Wildt: Dirk Wildt """""""""" |img-21| Illustration 18: The Author - a little bit blurred Dirk Wildt (\* 1963 Hamburg/Germany) Founder of `Die Netzmacher `_ (Erfurt/Weimar) Founder of `TYPO3 Usergroup Thuringia `_ Member of `TYPO3 Usergroup Leipzig `_ 2003: Founding `think visually! `_ It is `Die Netzmacher `_ since 2009. 2000 - 2002: Financial Controller, `G.E.B.B `_ 1999 - 2000: Financial Controller, `G\|M\|Z - Tagesspiegel-Gruppe `_ 1997 - 1999: Spokesman, `Senatsverwaltung für Finanzen, Berlin `_ 1989 - 1997: Editor and Financial Controller, `taz, die tageszeitung `_ 1982 - 1989: Freelancing Press Photographer .. _Change-Log: Change Log ---------- 3.0.6 **Feature** \* #53359: Fit it into TYPO3 6.x 3.0.5 **Improvement** \* #i0007: Update manual 3.0.4 **Feature** \* #52111: Integration of JSS slider script 3.0.3 **Improvements** \* #i0006: Improve CSS\* input is removed in basic.css\* border: none; is removed in basic.css 3.0.2 **Improvements** \* #i0005: Improve CSS 3.0.1 **Feature** \* #47016: Ready TypoScript SEO configuration\* #i0004: Simplified HTML caddy\* without\* options\* tax reduced **Improvement** \* #i0003: Improve CSS 3.0.0 **Improvement** \* #i0002: TypoScript template is movedfrom /static/base\_quickshop > static/\* #i0001: Adapting to Quick Shop version 3.0.x 2.0.0 **Improvement** - Individual layout for each product 1.4.0 **Improvement** - myConst.pages.root is moved to myConst.pages.quick\_shop 1.0.1 **Initial release** .. _Illustration-Index: Illustration Index ------------------ Illustration 1: Quick Shop Template without content. 3 Illustration 2: Quick Shop Template with the extension Quick Shop 3 Illustration 3: Dependence on automaketemplate 5 Illustration 4: Both extensions after installation 5 Illustration 5: Create Backend User Group 5 Illustration 6: Call it "quick\_shop" 5 Illustration 7: Create pages 6 Illustration 8: The finished page tree 6 Illustration 9: Edit the page properties 7 Illustration 10: Add the TS configuration 7 Illustration 11: Page Quick Shop: Add a TypoScript 8 Illustration 12: tab [Options] 8 Illustration 13: tab [Includes] 8 Illustration 14: Result in the frontend\* 9 Illustration 15: The template in the frontend 10 Illustration 16: This is our template extended with the extension Quick Shop and with some products. 11 Illustration 17: The subpart array in the TypoScript 13 Illustration 18: The Author - a little bit blurred 18 `0 <#sdfootnote1anc>`_ Format should be: type\_nameOfThePage\_idOfTheTemplate `0 <#sdfootnote2anc>`_ Please check all categories of Quick Shop Template `0 <#sdfootnote3anc>`_ Width x height: 770px x 130px `0 <#sdfootnote4anc>`_ Height: 102px 20 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.jpeg .. :border: 0 .. :height: 20 .. :id: graphics41 .. :name: graphics41 .. :width: 69 .. |img-3| image:: img-3.png .. :border: 0 .. :height: 16 .. :id: graphics6 .. :name: graphics6 .. :width: 18 .. |img-4| image:: img-4.png .. :align: bottom .. :border: 0 .. :height: 269 .. :id: graphics5 .. :name: graphics5 .. :width: 302 .. |img-5| image:: data: :alt: Frame24 .. :align: bottom .. :id: Frame24 .. :name: Frame24 .. |img-6| image:: img-6.png .. :border: 0 .. :height: 16 .. :id: graphics1 .. :name: graphics1 .. :width: 18 .. |img-7| image:: img-7.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics18 .. :name: graphics18 .. :width: 18 .. |img-8| image:: img-8.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics26 .. :name: graphics26 .. :width: 18 .. |img-9| image:: img-9.png .. :align: bottom .. :border: 0 .. :height: 18 .. :id: graphics27 .. :name: graphics27 .. :width: 18 .. |img-10| image:: img-10.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics37 .. :name: graphics37 .. :width: 18 .. |img-11| image:: img-11.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: Grafik4 .. :name: Grafik4 .. :width: 18 .. |img-12| image:: img-12.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: Grafik5 .. :name: Grafik5 .. :width: 18 .. |img-13| image:: img-13.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics50 .. :name: graphics50 .. :width: 18 .. |img-14| image:: img-14.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics80 .. :name: graphics80 .. :width: 18 .. |img-15| image:: img-15.png .. :align: bottom .. :border: 0 .. :height: 18 .. :id: graphics93 .. :name: graphics93 .. :width: 18 .. |img-16| image:: img-16.png .. :align: bottom .. :border: 0 .. :height: 18 .. :id: graphics2 .. :name: graphics2 .. :width: 18 .. |img-17| image:: img-17.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: Grafik8 .. :name: Grafik8 .. :width: 18 .. |img-18| image:: img-18.png .. :border: 0 .. :height: 16 .. :id: graphics91 .. :name: graphics91 .. :width: 18 .. |img-19| image:: img-19.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics92 .. :name: graphics92 .. :width: 18 .. |img-20| image:: img-20.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics70 .. :name: graphics70 .. :width: 18 .. |img-21| image:: img-21.jpeg .. :align: left .. :border: 0 .. :height: 132 .. :id: graphics20 .. :name: graphics20 .. :width: 100