EXT: Cenoshop¶

Product listing¶

These are just some examples of the possible layouts:

Order Processing¶

This is just an example of one implementation:

Order History¶

Back end modules¶

Back end – Orders¶

Back end – Reporting¶

Requirements ^^^^^^^^^^^^

This extension requires TYPO3 >= 4.5 and php >= 5.2.0.0

It also requires static_info_tables version >= 2.2.0

Also your database must utf-8 encoded

currencyCode¶

defaultVATValue¶

mainStoragePage¶

PDMCorePage¶

DeliveryModesCorePage¶

SuppliersCorePage¶

CheckOutPage¶

ProductDetailPage¶

ConfimerdUserGroupId¶

Product Selection Tab¶

A few things about the product selection: the plugin will only display products that have a price greater than 0 and that are allowed for the front end user (meaning group privileges, start and end time, and products not hidden).

Plugin configuration¶

Linked Products¶

If you wish to display the linked products, you can define it in this tab.

Typoscript configurations¶

These are the possible typoscript set ups for the cenoshop_pi1 plugin. The whole stdwraps are for the possibility to generate images for the various text items.

Typoscript best practices¶

There are typically a few typoscript set ups that are usually performed.

The first one is regarding the setup of a lightbox for the display of the products.

Product names as images

You can achieve this very easily using the swiss knife of typo3, hereby I mean the .stdwrap.

This is what I used for example:

plugin.tx_cenoshop_pi1.displaytitle_stdWrap {
  cObject = IMAGE
  cObject.file = GIFBUILDER
  cObject.file {
    XY = [10.w]+10,20
    5 =
    10 = TEXT
    10.text.field = displaytitle
    10.fontFile = fileadmin/templates/boutique/sansc.ttf
    10.fontColor = #000000
    10.fontSize = 18
    10.offset  = 0,16
    10.align = left
    transparentBackground = 1
    10.text.csConv = windows-1252
  }
}

It created this kind of display:

Perfect Light Box

I personnally recommend the “perfectlightbox” extension.For this one, I made the following adjustements in my main shop template:

plugin.tx_cenoshop_pi1.topimage_sdtWrap.typolink {
  title.field = displayname
  parameter.cObject = IMG_RESOURCE
  parameter.cObject.file.import = uploads/tx_cenoshop/
  parameter.cObject.file.import.field = topimage
  parameter.cObject.file.maxW = 600
  parameter.cObject.file.maxH = 600
  ATagParams.field = productcode
  ATagParams.wrap= rel="lightbox[|]"
}
plugin.tx_cenoshop_pi1.images_sdtWrap.typolink {
  title.field = displayname
  parameter.cObject = IMG_RESOURCE
  parameter.cObject.file.import = uploads/tx_cenoshop/
  parameter.cObject.file.import.field = singleimage
  parameter.cObject.file.maxW = 600
  parameter.cObject.file.maxH = 600
  ATagParams.field = productcode
  ATagParams.wrap= rel="lightbox[|]"
}
plugin.tx_cenoshop_pi1.componentImages_stdWrap.typolink {
  title.field = displayname
  parameter.cObject = IMG_RESOURCE
  parameter.cObject.file.import = uploads/tx_cenoshop/
  parameter.cObject.file.import.field = componentImage
  parameter.cObject.file.maxW = 600
  parameter.cObject.file.maxH = 600
  ATagParams.field = productcode
  ATagParams.wrap= rel="lightbox[|]"
}

Face Book integration

It can be very interesting to be able to create as many pages as you have products for promoting them on facebook.

This can be (easily) achieved using typoscript an an html content element.

As you probably now, facebook renders the information of the like buttons using the opengraph protocol. So we need to manipulate the headers of the page in order to display the opengraph info using the product information of the single product displayed in the ProductDetailPage defined in the extension configuration.

Below is my commented typoscript example

##retrieve uid of the product to be displayed
temp.gpvar = TEXT
temp.gpvar.data = GPvar:tx_cenoshop_pi1|singleproductuidtodisplay
temp.gpvar.insertData = 1

##retrieve record of the displayed product with various information
temp.productname = RECORDS
temp.productname {
  source < temp.gpvar
  tables = tx_cenoshop_product
  conf.tx_cenoshop_product >
  conf.tx_cenoshop_product = TEXT
  conf.tx_cenoshop_product.field = displayname
}
## product image
temp.productimage < temp.productname
temp.productimage {
  conf.tx_cenoshop_product >
  conf.tx_cenoshop_product = TEXT
  conf.tx_cenoshop_product.field = images
  ##this next line is necessary if you have multiple images in order to display only the first name
  conf.tx_cenoshop_product.listNum = 0
}

## product description
temp.productdescription < temp.productname
temp.productdescription {
  conf.tx_cenoshop_product >
  conf.tx_cenoshop_product = TEXT
  conf.tx_cenoshop_product.field = description_short
}

### Change page title - first disable the pagetitle generation and then write your own header
config.noPageTitle = 2
page.headerData.5 = COA
page.headerData.5 {
  wrap=<title>Cenoshop:|</title>
  5 < temp.productname
}

### ADD OPENGRAPHICS HEADER DATA
page.headerData.120 = COA
page.headerData.120.wrap = <meta property="og:title" content="Cenoshop:|"/>
page.headerData.120.5 < temp.productname
page.headerData.130 = TEXT
page.headerData.130.value = <meta property="og:type" content="product"/>
page.headerData.140 = TEXT
page.headerData.140.data = getIndpEnv:TYPO3_REQUEST_URL
page.headerData.140.wrap = <meta property="og:url" content="|"/>
page.headerData.150 = COA
page.headerData.150.5 < temp.productimage
page.headerData.150.wrap = <meta property="og:image" content="http://www.cenotaphe.net/uploads/tx_cenoshop/|"/>
page.headerData.160 = TEXT
page.headerData.160.value = <meta property="og:site_name" content="cenoshop"/>
page.headerData.170 = COA
page.headerData.170.5 < temp.productdescription
page.headerData.170.wrap = <meta property="og:description" content="|"/>

Then you just need to add a simple html content element with the facebook generated code for the like button, that you can find here : http://developers.facebook.com/docs/reference/plugins/like/

The result, as displayed in Facebook, is the following:

tx_cenoshop_pi2 plugin – shopping cart ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

This plugin is basically the small shopping cart plugin.

It is intended to be integrated in all pages, through typoscript.To add to all pages, you just need the following typoscript:

Wheretoadd < plugin.tx_cenoshop_pi2.

Typoscript configurations¶

Payment modes¶

The payment modes were added to the plugin. At first, I wanted to put them as database records, but each of them has potentially many specific requirements in terms of code (for example paypal).Hence it seemed utopic not to “hardcode” them.

Plugin configuration¶

Typoscript configurations¶

Actually, a typoscript configuration can be set up for the static_info_tables country selector.

Ideally, you want to add this code:

javascript:var input = document.createElement('input');input.setAttribute('type', 'hidden');input.setAttribute('name', 'tx_cenoshop_pi3[submit_enterdata]');input.setAttribute('id','');input.setAttribute('value', '');document.getElementById('tx_cenoshop_pi3_form').appendChild(input);this.form.submit();

to the Onchange attribute of the static info tables constant.

This will reload the checkout page when the user selects a different country.

Checkout process¶

Once the customer goes to the shopping cart, he will follow this process until complete validation of the order.

First he will see the summary of the order, with no shipping costs defined yet. In this screen he will select his country. The country is necessary to define the eligible shipping methods.

The next step will be to enter the payment and delivery data.

If the customer is logged in, the data for address, name, email will be copied automatically from his user data.

At this moment the user will be prompted to select a payment mode and a delivery mode. The payment modes are the ones you will have selected in the pi3 flexform, and the shipping modes will be retrieved from the database using the adequate criteria that you might have defined (free shipping costs over a certain amount, weight rules, etc).

The last step is the confirmation of the order. Now we have everything we need to complete the order, but the customer (it is a legal constraint in some countries) must have a summary of all the data and validate it.

Once the customer has confirmed the order, he is taken to a confirmation screen, and the mail with the order confirmation will have been sent.

In this case, since the customer choose the paypal method, a button allowing for the paypal payment is available.

Now the order has been completed and will be listed in the backend module.

Plugin configurations¶

Typoscript configurations¶

Simple. None.

Plugin configurations¶

Simple. None.

Typoscript configurations¶

Simple. None.

Columns¶

The columns indicate the following:

Contact is the name of the customer and the order date.

By hovering on the left name of the customer and the order date, you will see the history of the associated order.

History items are the following, for which you will see what, who and when:

• Order Payed
• Order Shipped
• Reminder mail sent
• Payment notification mail sent
• Shipping notification mail sent
• Order Confirmation mail sent
• Stock picking processed

Invoicing indicates the invoicing status of the order and the payment means. You will also have a button “view invoice”, which allows you to view either an on the fly generated invoice or the saved invoice file if there is one. If there is none, a “generate invoice file” button will also appear. If you click on this button, an html invoice will be saved in the “uploads” directory of this extension. This file will be available to the customer in the pi4 plugin.

Processing indicates the processing status of the order and the delivery mode.

Information gives information about the product value of the order and the global value including shipping

Comment are both the internal comments and comments of the customer. They are truncated, and by hovering on them you can see them completely.

Picking indicates the items to pick and whether they were picked or not (if already picked, the process stock button does not appear).

Actions show what kind of mail related actions you can perform. The following business rules are applied:

• You can send payment notice mails only if the order was payed
• You can send reminder mails only if the payment was not done
• You can send shipping notices only if the shipping was done
• You can always send the confirmation mail again

If the mail was already sent, the corresponding action button will be between parenthesis to indicate it has already been sent, except for the confirmation mail which of course has already been sent.

The screen itself is composed of different tabs.

It is composed of different tabs:

To be payed¶

This contains all the orders for which you are expecting a payment.

Once you receive the payment (whether through paypal, check or wire transfer or any other means), you can enter a payment reference and click on payed. The status of the order will be set to payed and he will disappear from this tab to appear in the 'To be picked tab'.

The following will happen if you set the order to payed: The html invoice will be generated and stored in the “uploads” folder of the extension. This invoice will also be the one that will be seen by the customer in the pi4 plugin.

To be picked¶

These are the orders that have been payed but not yet picked from your stock.

On the rightmost part of the screen, you will see the list of products to pick. Typically, you will print the invoice using the “view invoice” button and go through your physical stock to pick the stuff and prepare the parcel.

If the product to be picked is a composed product, and you do not have any in stock, the form will propose you to build the product if it is possible, and then offer you to pick the built product from stock.

Once the stock has been processed, it means the order is ready to be shipped.It will hence disappear from this tab and appear in the to be shipped tab.

Of course products with a replenishment mode of “non physical products” will not create any stock movements and will not hinder you to perform the stock picking.

To be shipped¶

Once your parcels are ready, you will usually transfer them to a postal office or whatever transporter you use.Once this is done, you can enter the delivery reference (useful if the transporter has a tracking website) and then click on the “shipped” button. The order having fulfilled its standard workflow will hence disappear from all these lists.

Delivered, to be payed¶

With some professional partners, like shops or distributors, it is common to first ship the goods and then receive the payment.

This tab allows to monitor all orders that have been shipped but not yet payed.

Search orders¶

This tab will allow you to search for any past order: it will use all text fields to search the data you entered.

Cart Orders¶

This tab shows only the “orders” that have not yet been transformed into actual orders.

Generic information¶

For all orders, the first row shows the customer name and order date. By clicking on it, you will access the full order record, that will allow you to do … well almost whatever you want.

There are some additional functions:

Once an order has been set to payed or shipped, a button will appear on top of the list that will allow you to send a confirmation mail for this order.

These buttons are always available if the adequate status has been reached, meaning you can resend them as many times as you want. The mail template that is used is the one defined in the pi3 plugin that was used to confirm the order.

Products - All Products¶

This gives you a view of all products. Each field is editable by clicking on it.

Inventory - View stock coverage¶

This screen allows you to see the stock coverage of your products.

The notion of stock coverage is defined as follows: current stock level of the items divided by the consumption (which is number of items per weel). The stock coverage hence tells you how many weeks of supply you have with your current stock level.

There is a graphical representation of your stock coverage.

For each article, there are two lines:

The first one is your current coverage. If your coverage is lower than the target coverage (the second line, in gray), then the first line will turn progressively from green to red to indicate the potential stock issue.

Inventory – Build composed products¶

This screens allows you to enter in stock composed products, which are assembled from other products.

After having entered the quantity to build, what it will do when you click on the “build product” button, it will decrease the stock level of the components, and increase the stock level of the composed product.

If there are not enough component products available you will get an error message.

Inventory – Input classical products¶

This screen will allow you to enter simple (meaning without components) products into your stock, for example following a replenishment.

For example, with this screen if Enter is pressed, the ACC: SYLVANIA stock will be reaised to 18, the ALK-AURLOKS: 1 – Starter en will be raised to 6 and the ALK-AURLOKS: 1 – Starter fr will be raised to 24.

Inventory - Scrap products¶

Sadly it can happen that you have to scrap products: plants, destroyed products, whatever the reason.

This is also tracked in the application. The screen is exactly the same as previously, but this time you will enter per products the quantity of scrapped products.

inventory - Inventory corrections¶

Of course no inventory keeping is ever perfect. This means from time to time you will perform an inventory to actualize the stock level.

When you perform the inventory you will need to update the stock levels of the products. This will be achieved through this screen:

In the input boxes, you will enter the counted level of the actual physical stock.

Inventory - Define consumptions¶

As you probably understood, the weekly consumption of your articles is a very important data for your products and replenishment calculation. So we need to be able to define it precisely.

Hence this screen.

It will show you per product the consumtpion in various forms:

The weekly consumption over a certain list of weeks (default values are 12 → 3 months, 26 → 6 months and 52 → one year)

The weekly consumption over the whole lifespan of the product.

The maximum consumption for the ranges previously defined.

The parent consumption: If the product is used as part of a component, the parent consumption will be displayed there, in orange if the target consumption of the product is smaller than the consumption of its parent.

By clicking on a column name, you will overwrite the targeet weekly consumption with all the values of this column. If you click on a single calculated consumption, it will overwrite the target consumption of this product with the clicked value.

In the lower part of the screen, you will have an array with the history of all consumptions per product per week and year.

The consumptions taken into account are all the sales consumptions, and also the assembly consumptions if the product has the replenishment method “all consumptions”.

Inventory - Calculate replenishment¶

The final goal of this logistics module is of course to calculate the replenishment orders for all your products.

The replenishment calculation screen looks like this:

These are the various available columns:

Stock : Current stock level

Cons : Weekly Consumption that you have defined in the previous screen

Supplier del. Time : Delivery time o the supplier

Packing quantity : The multiple of items you must order. For example, the “MC: aimant carré de 20mm “ product is order by packs of 120.

Stock on delivery : The theoretical stock you will have on delivery of the supplier order: it is calculated like this: stock level – (weekly consumption x supplier delivery time)

Coverage : number of weeks of stock coverage on delivery from the supplier

Target coverage : This comes from the product information, it is the target coverage you wish to achieve everytime you order this product

Additional stock required : This field has two uses: either you have a fair or any other event that requires a specific additional amount of items, or you have no consumption information in the case of a new product for example. Then you can enter here the additional quantity of products you wish to order/manufacture.

When you click on the Calculate replenishment button, the following screen will appear:

It will indicate you, per supplier, the quantities to order, with the supplier reference and the costs related.

Price lists¶

There are two main parts:

The first part of the screen shows the price lists available for the customers, and the associate margin based on the product costs:

Public price means default availability, even for not logged users.

Then, if a record exists, the specific price for this user group will be displayed. As usual, and you might have noticed it, everything that is blue is clickable and leads to the possibility to modify the associated data.

The second part of the screen allows to mass generate price lists.

Basically, unselect the products for which you do not wish to generate the price list, select the target user group, enter a factor, and give a name to your price list (only internal at this time).

The price lists will be automatically generated and displayed when the screen reloads.

Delivery modes¶

Please refer to the description of the delivery modes table.

Linked Products¶

In the pi1 plugin, you have the possibility to display linked products. Typical usage in a shop is “Customers who have bought this product have also bought....”.

As explained before, this list is not generated on the fly in the pi1 plugin, but will display what you wish to display. In some cases, you will want to put forward some specific products, even if they are not the related best sellers.

This screen allows you to perform this:

It will display, for all the products belonging to the selected folder and its sub folders, the following info:

The currently linked products (Column “Linked Products”)

The relate best sellers (Column “Proposed products”), with the quantities sold behind it (in relation to the current product of course).

And the list of all products, to allow you to select what you wish.

By clicking on the items, they will be added to the “Linked Products”. Then you just need to save.

The “Clear all linked products” button will clear everything.

The “Copy suggested products” will copy the contents of the “Proposed products” column into the “linked products” Column.

Yearly results¶

The yearly results reports page actually delivers a lot of different information.

Operational results:

This table describes the operational results (profits and loss) per year. It is basically the sum of all payed orders and the sum of all payed supplied orders for each year.

Also, there is a forecast for the current year, which is calculated based upon the turnover of the previous year and the current date.

Pure product view

This is the theoretical product margin: For oll orders of every year (that were payed), it compares the product costs and the product sales price, hence providing a theoretical product margin.

Since the costs of the product are written in the order at the time of the order creation, change the proudct cost does not impact older orders. The same is of course true for the selling price.

Shipping costs

Shipping costs are the sum per year of what you have invoiced your customers regarding shipping costs. It is always interesting to compare to the next table, when you take a look at your specific supplier(s) for shipping.

Costs per Supplier

This table displays, per year again, the sum of money you spent with the various suppliers. Basically it sums up the amounts of each payed supplier order.

Theoretical margin per user group

Again, for all invoiced orders, this will display the following: the product related turnover, costs, margin for all users and user groups. This has been done to monitor and report the volumes and turnover made with different actors : Wholesalers usually make much more volume than normal non logged customers, but at a much cheaper price.

One little hint here: For the confirmed user group (normal logged users who have no specific user group assigned to them), we don't wan't to see all individual customers. This is achieved by the “ConfimerdUserGroupId” item in the extension configuration.

Referers¶

This report displayes the referers for the orders.

It shows the total amount of orders (and only of orders) and from where they were generated. It also shows how many orders are still in cart modus, and how much where payed.

By clicking on the name of the referrer, you will see all the orders concerned and the precise link from which the customers came.

A full analytical solution of browsing and so on will not be provided in this extension: there are very professional and powerful solutions on the market, such as google analytics.

So if you want to know the bounce rate per page, or the referrers that visit your site, use these solutions.

If you want to know which sites generate how much turnover, then the referrers report is adequate.

Two graphs with the time repartition of cart orders and payed orders are also available:

Products """"""""

This report indicates the turnover per product per year.

A small gimmick has been added here: the higher the turnover, the lighter the cell is. This allows to see very easily which are your best sellers, or how they evolve per year.

Like in the product families, graphs are displayed for turnover and margin.

Product Families¶

It is basically the same report as previously, but it indicates the results per product page, meaning product families.

In addition, the product families provide a cumulated bar graph of the sales per month.

Hover on the items of the bar chart to get the product family name and the associated turnover amount.

There are always two graphics: one with the turnover and one with the theoretical margin. The margin graph contains a reminder of the corresponding turnover, it is the only part of the bar chart (on the top ) that has no color.

You can also drill down by selecting the page in the treeview: Only products belonging to this page and its subpages will be displayed.

Product Data Management and records -----------------------------------

This chapter deals with describing the elements in the tables and how they work in the TCA.

It is recommended to store your different products related records in system folders, depending on how they are structured. These ordering of products in the back has no influence whatsoever on the front end rendering: Only the categories and single products defined in the plugins drive the rendering.

Back end ordering and classification is for your administrative comfort only.

Following is a description of the various records that are used.

The display in the frontend are not linked to the storage folders or pages where the records are stored. The structure of the storage folders you will define is just for your own usage and for easily retrieving records.

All fields (values, options, etc) that are not localizable and managed through the 'l10n_mode' => 'exclude' option in the TCA.

fe_group¶

name¶

displayname¶

description_long¶

description_short¶

Images¶

price¶

taxgroup¶

Components¶

stocklevel¶

Weight¶

Productcode¶

Unit cost¶

Initial cost¶

weeklyconsumption¶

toreplenish¶

replenishment_packing¶

replenishment_info¶

delivery_time¶

target_coverage¶

Supplier¶

additional_files¶

linked_products¶

date_order¶

date_payment¶

date_shipping¶

date_invoice¶

address_delivery¶

address_invoicing¶

address_delivery_country¶

product_list¶

processingstatus¶

invoicingstatus¶

Iscart¶

shipping_costs¶

Contact mail¶

Contact Name¶

Comments¶

Comments internal¶

deliverymode¶

Payment mode¶

delivery_reference¶

payment_reference¶

session_id¶

invoice¶

invoicetemplate¶

mailtemplate¶

userlanguage¶

referer¶

pi3source¶

stockprocessed¶

user¶

Crdate¶

Quantity¶

linkedproduct¶

linkedorder¶

reason¶

Name¶

Name internal¶

Description¶

Weight grid¶

value_min¶

value_max¶

weight_min¶

weight_max¶

packing_weight¶

default_cost¶

free_limit¶

countries¶

tracking_url¶

Excludedproducts¶

Allowed products¶

Name¶

Address¶

Comments¶

Supplier¶

Comments¶

date_order¶

date_payement¶

date_reception¶

payableamount¶

attachments¶

Crdate¶

cruser_id¶

order_id¶

Reason¶

Details¶

product¶

Price¶

Taxgroup¶

Shopping cart plugin (pi2) not refreshed in due time.¶

It is possible that the pi2 shopping cart you included through your typoscript is not refreshed correctly. This is due to the execution sequence of the plugins:

If the plugin pi1 with the product display, which also performs adding products to the cart; is executed after the shopping cart plugin, the shopping cart will still display the old values. If you use a standard implementation of typo3, without templavoilà, please refer to this link: http://www.bugs.typo3.org/bug_view_page.php?bug_id=9846

If you use templavoilà, make sure that, in the template html, the container containing the shopping cart plugin is placed after the main content where the pi1 plugin will be displayed.

Products not displayed in the pi1 plugin¶

Please check the following:

The products must have a price. Only products with a price greater than 0 will appear in the front end plugin. If a product has no price, it is considered as not for sale.

Stock display policy in the pi1 plugin: If you set the policy to “Do not display out of stock products” and that the product has 0 stock (which is the default value of the stock when you create a new product), it will not be displayed either.

OpenGRAPHICS Tags not refreshed¶

Since the OpenGraphics tags are generated by the typoscript, make sure that the page is set to “no cache” or “disable cache” in the page properties. Of course you need to do this only for the product detail page, the pi1 plugin itself works with no cache.