DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
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 |
Quick Shop Template (extkey: base_quickshop)
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).
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), <http://wildt.at .die-netzmacher.de>
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¶
Installation by the Quick Shop Installer 5
Header Logo, Header Slider and Footer 9
Installation with one Click 11
Adapt HTML, CSS, JavaScript and TypoScript 12
Introduction¶
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?¶
If you like a very different layout than Quick Shop Template, it isn't useful to install.
Audience¶
- TYPO3 agencies
- TYPO3 integrators
- TYPO3 developers
Installation¶
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¶
Open the extension manager, download the extension Quick Shop Installer (extkey: base_quickshop) and install it.
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¶
Create a new backend user group.
Modul: Web List
Page tree root item (here: TYPO3 Quick Shop)
Edit area Backend usergroup
Tab [General], Field "Grouptitle": quick_shop
Pages¶
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 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
}
}
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)¶
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.
TypoScript¶
Page Quick Shop¶
Add a TypoScript template¶
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"
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¶
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¶
*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¶
We will add the header, the header image and the footer.
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¶
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¶
You need jQuery for a proper sliding effect in the header.
Result II/II¶
Slider, logo and footer depends on your content / images of course.
Use the Quick Shop¶
Now you can install the Quick Shop.
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¶
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¶
You can adapt the HTML code, the CSS and the TypoScript to your needs.
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¶
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¶
Load your own JavaScript file up to the fileadmin directory or any other directory (see Modul > File > Filelist).
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¶
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 <div>-tag in the HTML template with the subpart name as the div id.
Update¶
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¶
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¶
Nothing to do.
Further Information¶
Other extensions published by Die Netzmacher¶
- +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/
- 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/
- 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/
- 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/
- 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/
- 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/
- 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/
- 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/
- 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/
- 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/
- 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/
- 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/
- 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/
- 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/
- 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/
- 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/
About the Author¶
Dirk Wildt¶
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¶
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 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 Format should be: type_nameOfThePage_idOfTheTemplate
0 Please check all categories of Quick Shop Template
0 Width x height: 770px x 130px
0 Height: 102px
20