EXT: Webformat Shop System¶

What does it do?¶

This is a new version of the Webformat Shop System extension with new features in the presentation of products and the management of the orders. This is a small list of the features available:

- management of offer price e discount

- management of colour and size options

- advanced management of orders

- cache for product pages

- Real URL ready

- VAT management

- FE orders tracking

- in stock management

- products categories

- static address and page title for the products

- support for multilanguage

- ...

Besides the shop provides a locallang file with the translation of all the labels in the template. So, if you want a new language, you have to modify only the locallang.php file and not the template.

Screenshots¶

Backend orders management:

Frontent list orders:

Frontend order detail:

Products management¶

Let's create the products pages

Insert the Extended Shop plugin into your products page and set the view mode to 'product list'. If the products are located into another page you need to set the Starting Point.

You can already insert some products. In list module create a new “WebformatShop – Products” record. Required fields are item-number and title.There are a lot of useful fields (size, color, images etc.), for a detailed description look at the “Product records” section.

You can use another page as detailed view:

Create a new page, insert the Extended Shop plugin and set view mode to 'product page'.

Set the pidProductPage TypoScript constant to the uid of this page.

You can also create references to other products in the same category or from the same supplier:

Create the categories you want with the toi_category extension, then create the associations with the products

Create a new page, insert the Extended Shop plugin and set view mode to 'category page'.

Set pidCategoryPage constant to this page.

Create the suppliers as website users, and join them with the related products

Create a new page, insert the Extended Shop plugin and set view mode to 'supplier page'.

Set pidSupplierPage constant to this page.

To see more view modes for the Extendedshop plugin go to'Plugin configuration'section.

Buying procedure¶

Let's start creating the required pages for the buying procedure.

In this tutorial we'll use sr_feuser_registration for user registration .

Create a sysfolder and call it Orders, then set the pidOrders constant to this folder

Create another sysfolder to store users and set the pidUsers constant to this folder

Create a new page for the cart, into this page insert the Extended Shop plugin and set View mode to basket

Set pidBasket constant to this page

From now on the customer must be logged in, so create a new page and insert the frontend login plugin for the login of already registered users, and the sr_feuser_registration plugin for allow new clients to register.Insert the Extended Shop plugin and set View mode to User Registred, set the access property to the customers group.

Set pidUserInfo constant to this page

Create a new page, insert the Extended Shop plugin and set View mode to Payment.

Set pidPayment constant to this page

Create a new page, insert the Extended Shop plugin and set View mode to Finalize.

Set pidFinalize constant to this page

Now you have to configure the payment and the shipping methods. Default ones are bank transfer and cash on delivery. Go to 'Payment methods' and 'Shipping methods' section to know more.

Payment methods¶

Default methods available are bank transfer and cash on delivery.

This is the typoscript setup to modify

plugin.tx_extendedshop_pi1.payment{10.title=Bank Transfer10.message= Insert here the information for the payment10.image.file=10.priceTax=10.priceNoTax=20.title=Cash on delive ry(+3,00EURO)20.image.file=20.priceTax=3,0020.priceNoTax=20.maxAmount= 10020.minAmount=50}

- title: labels for radio input

- message: text shown in finalize page

- image.file: path of an image to be shown near radio input

- priceTax: price increment when this option is choosen

- priceNoTax: same as before, but without taxes

- maxAmount: max total products price for this option to be available

- minAmount: min total products price for this option to be available

There is also the opportunity to use other preconfigured payment gateways like “Credit Card with PayPal”, “Credit Card with Banca Sella” and “Credit Card with Hosted Payment Page” by installing, respectively, these extensions: wss_paypal, wss_bancasella and wss_constriv.

Shipping methods¶

You can choose different Shipping methods and costs for any country you like. Static_info_tables is required for this section

Create a new page (a sysfolder is suggested) where shipping methods should be stored.

Into this page create a 'shipping country' record and select country (e.g. Italy).

Click on 'create new' into the new shipping country form, open and fill the newly created record with at least a title (ie the carrier name) and the price.

Now all customers from Italy will have this shipping method available during their buying procedure. You can add a lot of different shipping methods for the same country.

You can also use preconfigured shipping methods like “DHL Shipping method” by installing the extension wss_dhl.

Orders tracking¶

The new amazing feature of this version is the orders tracking for Frontend users. It's only available if you used some kind of external user management extension instead of the integrated one.

Create a new page and set the Access to the registered customers group.

Insert the Extended Shop plugin and set View mode to Orders Info.

Now your customers can see a list of their orders, the status of the pending ones, and leave a comment for you.

In stock management¶

You can activate the “in stock functionality”, so the products will be automatically non more available when stocks are out.

Go to your typoscript constants editor and set enable_instock_management to 1.

Disable cache for the extension, otherwisesold out product's won't disappear. Setplugin.tx_extendedshop_pi1 to USER_INT into your template's setup.

Fill the 'in stock' field into the product records with the stock quantity.

That's all, you'll get an email when a product runs out.

Product records¶

To insert a product you can follow the link “Create new record” and select “WebformatShop - products”. There are a lot of fields you can use:

• Itemnumber: the code of the product (required)
• Title: the name of the product (required)
• Page title:the title of the page in the detail page of the product. If empty than the “Title” of the product will become the page title. This is true only if you have configured in the TypoScript this functionality.
• Summary: a short description of the product.
• Description: a complete description of the product.
• Image: the product images.
• Price: the product price.The point (.)is the decimal separator. Warning: if you want to insert the value ‘155.20’ you must write ‘155.2’, if you don’t follow this tip TYPO3 will generate a warning message.
• VAT: Value Added Tax. You have to create some “VAT option” record in a Sys Folder
• In stock: number of items available for selling.
• Category: the category of the product. You must use toi_category extension for this purpose
• www: an external url.
• Ordered: shows the number of orders for this product.
• Weight: weight of the product. Soon the wss_dhl extension will be available for the automaticreckoning of the shipping price for the DHL carrier.
• Volume: volume of the product. Soon the wss_dhl extension will be available for the automaticreckoning of the shipping price for the DHL carrier.
• Offer price:the new price. If this field is filled, the new price of the product is this and the discount percentage will be calculated automatically.
• Discount:the percentage of discount. If this field is filled, the offer price will be calculated automatically. To be used only if offer price is empty.
• Sizes: the sizes of the product. If more then one the values need to be separated be the special character “!”
• Colors: as for sizes.
• Correlated products: the products that are correlated with this. You can select them from the list of the existing products.
• Documents list: you can include brochures or digital documentation relative to the product
• Document labels: here you can specify the labels displayed for related documents separating them with new line.
• Correlated pages: select one or more pages of your website which are related with this product
• Direct Price: price made to you by the supplier.
• Supplier: select here the supplier from a list of website users
• Thumbnails type: select which configuration to apply to images. For more information look at the 'Images configuration' section
• Categories: you can assign some toi_categories to the products to let you organize them when you use 'Category Mode' in the plugin.
• Max items for order: you can define the maximum number of items at time that can be ordered.

You have the possibility to increase the number of fields available for the product, see 'Adding product fields' section.

Shipping destinations record¶

Here you can choose witch shipping methods are available in different countries (chosen from static_info_tables records). So a user coming from a particular country can choose only the shipping methods available on that country)

• Country: drop-down selector box with a list of countries coming from static_info_tables records.
• Shipping methods: here you con create shipping methods records that will be available for that country

Shipping methods records¶

Those records are to be created only into “Shipping destinations” record creation form to let you assign them to different countries.

The “Shipping methods” records consist on these fields:

• Title: the name that identify the shipping method (required)
• Description: a brief description of the shipping method
• Image: a logo that will be shown when the user have to choose the shipping method
• Price: the cost of that particular shipping (with or without Tax)

Order and Order rows records¶

These records are created by theFE plugin when a user complete the buying procedure, organizing them in sysFolder tree (1 ^st level: year, 2 ^nd level: month). So the usual behavior is not to create them by your self, but only to modify some fields if there is the need (ex: choosing the “Order Status” for the shipping steps like 'Ready to shipment', 'Shipping', 'Arrived').

Order status records¶

To let you define the different “Order status” available in Order records. In this record you can set the name of Shipping method and the Priority.

Added fields on tt_address, fe_user and fe_groups¶

This extension adds some files on ff_address, fe_users and fe_groups tables. The most interesting are:

• User/Group discount: used to define a discount to some FE users or groups
• Private: user to choose if the FE user is a private or a company
• VAT code: defines the VAT code for a user or a address record

Add the fields in the HTML template¶

You need to update the HTML template in order to include the fields you have defined (remember to use upper case for field name).

The model for markers you have to use in the HTML template is like ###PRODUCT_[fieldName]### for the value of field and ###LABEL_[fieldName]### for the label.

You have also to add language labels for the additional database fields, adding those lines to TypoScript Setup:

plugin.tx_extendedshop_pi1._LOCAL_LANG.[languageCode].LABEL_[fiel dName] = [fieldLabel]

Change images appearance¶

Every product can be associated with more than one image, so there's the possibility to create a different appearance for every photo you selected.

Following the order in the product record selection box, first image will be created by the default typoscript configuration:

plugin.tx_extendedshop_pi1.{image{file.maxW=250imageLinkWrap={$plugi n.tx_extendedshop_pi1.clickEnlarge}imageLinkWrap{enable=1bodyTag=<BO DYbgColor=black>wrap=<Ahref="javascript:close();">|</A>width=400JSwin dow=1JSwindow.newWindow=1JSwindow.expand=17,20}}}

For the following ones you can create your own typoscript code. Use image2 for the second image, image3 for the third and so on.

For example: if you want the first image to be 200px wide , and all others images 100px, insert into your custom template this code:

plugin.tx_extendedshop_pi1.{image{file.width=200}image2{file.width=1 00}}

image2 configuration applies to the second image and to all the following ones.

Same rules apply on this images:

- plugin.tx_extendedshop_pi1.listImage: these are the thumbnails in the product list view mode

-plugin.tx_extendedshop_pi1.correlatedImage: images of the correlated products

If you want all images in a particular product to have the same apperance you created for image2, you can use the Thumbnails type field in the product record. Simply insert image2 in the field.

Mini basket¶

A plugin to show a mini-basket in your website is also available. This is a typoscript setup integration example :

page.20 < plugin.tx_extendedshop_pi2

If you make any change to the configuration of this plugin (ie you want to use a custom html file as template) add this row after your modifications:

plugin.tx_extendedshop_pi1.minibasket_conf < plugin.tx_extendedshop_pi2

Ajax functionalities¶

Webformat Extended Shop allows asynchronous calls for product navigation and mini-basket updating, to use ajax functionalities you have to install xajax library extension for TYPO3.

Product preview

You can have the datailed view of the product directly into the list view, instead of loading another page.

In your template setup add this row:

plugin.tx_extendedshop_pi1.xajax_preview = 1

if you still want to have a link to the detail page you can add this in your template setup:

plugin.tx_extendedshop_pi1.xajax_preview.linkTitle = 0

then create a new link into the shop.html file done as this:

<a href=”#” onclick=”###AJAX_PREVIEW###”>Preview</a>

Mini-basket update

To have the minibasket auto-updating when a new product is putted into the cart insert this row In your template setup:

plugin.tx_extendedshop_pi1.xajax_cart_update = 1

Update is connected with a visual effect.. Default animation in inside the page, otherwise you can activate a full page message.

For the second one add this row in your template setup:

plugin.tx_extendedshop_pi1.minibasket_lightbox = 1

Constants¶

plugin.tx_extendedshop_pi1

Setup¶

plugin.tx_extendedshop_pi1

Basket hooks¶

saveCustomFieldsInBasket: this can be used to save custom fields in the cookie;

getShippingTitle: this can be used to modify the shipping Title before showing it to the user;

getShippingPriceTax: this can be used to modify the shipping price with Tax included before showing it to the user;

freeshipping: this can be used to modify the freeshipping string shown to the user (instead of '0');

getShippingPriceNoTax: this can be used to modify the shipping price without Tax included before showing it to the user;

checkFreeShipping: this can be used to force “free shipping”.

Order custom fields hooks¶

saveCustomOrderFields: this can be used to save custom fields in main order record;

saveCustomFields: this can be used to save custom fields in order row.

Product custom fields hooks¶

evaluateCustomCorrelatedFields: this can be used to evaluate custom fields;

evaluateCustomProductFields: this can be used to evaluate custom fields.

User custom fields hooks¶

saveCustomDeliveryFields: this can be used to save custom delivery fields.

FE hooks¶

checkReturnValues: this can be used to do register parameters to be intercepted to decide if user is coming back from an online payment;

processAdvancedSearch: this can be used to manage the advanced search behaviour;

evaluateCustomBasketTotals: this can be used to manage custom total prices;

evaluateBasketArray: this can be used to manage the basket settings;

after_finalization_process: this can be used to do something after order finalization;

getDefaultConfiguration: this is used to init the payment options with external payment extensions;

evaluateShippingConfArray: this can be used to modify the shipping confArray before showing it to the user.

FE orders management hooks¶

evaluateOrderArray: this can be used to manage custom markers.