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 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), <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

Screenshots

Without Content

Frame24

With Quick Shop

Frame24

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.

Frame24 Frame24

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.

Frame24 Frame24

Modul: Web List

Page tree root item (here: TYPO3 Quick Shop)

Edit area Backend usergroup

Tab [General], Field "Grouptitle": quick_shop

Pages

Frame24 Frame24

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

}

}

Frame24 Frame24

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

Frame24

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"

Frame24 Frame24

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

Frame24

*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 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

Frame24

Slider, logo and footer depends on your content / images of course.

Use the Quick Shop

Frame24

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

Frame24

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

Manual in PDF

You find this manual as PDF file at

doc/manual.pdf

About the Author

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

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