Developing themes
Everything within reach, including example code.
Everything within reach, including example code.
Javascript functionalities
To keep the code clean, compact and orderly a number of javascript functions were made available. Naturally it is possible to add an extra functionality such as javascript functions and event handlers to Scripts.js or in the file Index.tpl.
EnterPressed()
Function that will check if the key pressed is indeed the “enter” key.
Get(string sDOMId)
Function that will select the value of an input field.
| Parameter | Datatype | Description |
| sDOMId | String | The ID of the input field. E.g. <input type="text" id="SearchField" value=""/> |
GoTo(string sLocation)
Function that forwards user to location indicated.
| Parameter | Datatype | Description |
| Location | String | Location to which user is forwarded. |
SubscribeToNewsletter(event)
Signing on a visitor to the newsletter by means of this method is outdated. Use the action hook SubscribeToNewsletter..
CSS declarations
PredefinedButton
To simply add a button in the selected style and colour, a span element with the declaration PredefinedButton should be implemented. This span is automatically converted to a stylized button.
Example<span class="PredefinedButton" onclick="javascript:GoTo('{$sBasketPageDeeplink}');">shoppingcart</span>
List of variables
Variables are small pieces of code with a specific name ( the variable name) that represent a specific functionality. This functionality may vary from displaying a piece of text to loading the content modules of the webshops. Below you will find the available variables and their description.
Variables that load files
| Variable | Description |
| {$_IncludeHead} | Include of global head data, Template.css and Scripts.js. |
| {$_IncludeContent} | Include of the contentpage in question (homepage, category, guestbook, productdetails, order route etc. etc.). |
| {$_IncludeTail} | Include of global tail-data, such as measuring pixels and statistics. |
Variables in relation to URLS and file locations
| Variable | Description |
| {$sProtocol} | Gives 'http://' or'https://' back depending on the reserved page. |
| {$sAbsoluteMediaLocation} | Absolute path to the map to which the files were uploaded. HTP or HTPS is automatically specified depending on the reserved page. |
| {$sRelativeMediaLocation} | Relative path to the map to which files were uploaded. This variable is meant for usage in the file Template.css to prevent security conflicts. |
| {$sCustomerLoginPageDeeplink} | Link to the login page. |
| {$sCustomerLogoutPageDeeplink} | Link that provides log-out if customer presses the “log-out” button. |
| {$sCustomerRegistrationPageDeeplink} | Link to the registration page. This link is only available if the choice for the login system is switched on and registration is possible. |
| {$sCurrentPage} |
Gives back what type of page is reserved. Based on this several layout pages can be developed. This variable may contain following values:
|
| {$sSearchPageDeeplink} | The URL to the search page. This variable should be used to forward your own search functionality to the right page. The search words entered should be added to this variable. The construction of SearchPageDeeplink} consists of {$sProtocol} + website main domain + '/website/index.php?Show=Search&KeyWord='. |
| {$sBasketPageDeeplink} | The URL to the shopping basket. This variable should be used to forward a shopping cart overview developed by yourself to the correct page. |
Settings
| Variable | Setting |
| {$bShowPricesToGuests} |
Setting: Show prices to guests Location: Starting point/My webshop/Settings/ Loginsystems Value: true of false. |
| {$bCustomerLoginActive} |
Setting: Users Login Location: Startingpoint/My webshop/ Settings/ Loginsystems Value: false if 'off', otherwise true. |
| {$sCustomerLoginSystemType} |
Setting: Users Login Location: Startingpoint/My webshop/ Settings/ Loginsystems Value: - Inactive, loginsystem is off. - ActiveWithRegistration, loginsysteem staat aan met de mogelijkheid tot registreren. - ActiveNoRegistration, loginsysteem is on but no option of registering. Attentention {$sCustomerRegistrationPageDeeplink} does not contain a value. - ActiveAutomaticRegistration, loginsysteem is on , after placing an order an account is created automatically. |
| {$sCurrency} |
Setting: Valuta Location: Startingpoint/My webshop/Settings/ Order proces settings. Value: - USA, American Dollar - CAD, Canadian Dollar - DKK, Danish Crowns - EU, Euro - UK, English Pound - RON, Romanian Lei - SRD, Surinam Dollar - TL, Turkish Lira - SEK, Swedish Crown - CHF, Swiss Franc |
Ambient variables
| Variable | Description |
| {$sBodyLogic} | Adds logic to the <body>-tag for processing the electronic payments . This variable should be used as follows: <body {$sBodyLogic}>. |
| {$sPageTitleH1} | <h1>-tag for the current page. This variable structures the crumb path within the category structure and product detail page. |
| {$iSelectedCategoryId} | Gives back the ID of the selected product category. |
| {$iSelectedSubCategoryId} | Gives back the ID of the selected product subcategory. |
| {$iSelectedPageId} | Gives back the ID of the selected page. |
| {$sResellerName} | Gives back the name of the reseller. |
| {$sResellerDeeplink} | Gives back the link of the reseller's website. |
| {$sPoweredBy} | Gives back the reseller's HTML-code 'Powered by'. |
| {$bCustomerLoggedIn} | Geeft aan met true of false of de klant is ingelogd. |
| {$sCustomerName} | Gives back the customer name of the logged in customer. |
| {$fCustomerDiscount} | Indicates the discount percentage of the customergroup of the customer. This variable only contains a value if the customer in question is in a customergroup. |
List of objects
Blog
Objectproperties| Property | Description |
| Title | Title of blog item. |
| Content | Textual content of blog item. |
| ImageDeeplink | Link to the image that was added to the blog item. |
| Deeplink | Link to the blog item. |
| CreateDate | Date when blog item was created. |
| Author | Author of blog item. |
| AuthorWebsiteDeeplink | Link to author's website. |
| CommentCount | Number of reactions to blog item. |
Available in code fragment
| Code fragment | Variable | Description |
| Last blogs | {$aBlogs} | An array of Blog-objects ( last 10). |
Decorator\Protom
| Diagram |
|
Decorator\Protom\Page
Objectproperties| Type | Property | Description |
Decorator\Protom\Page\Product\Breadcrumb\Crumbs
Objectproperties| Type | Property | Description |
| int | $Id | The Id of the Crumb |
| string | $Name | The name of the Crumb |
| string | $Alias | The Alias of the Crumb |
| string | $Href | The url |
| boolean | $FirstCrumb | First |
Decorator\Protom\Page\Product\Breadcrumb\CurrentItem
Objectproperties| Type | Property | Description |
| string | $Name | The Name of the currentitem |
Decorator\Protom\Page\Product\Question\Email
Objectproperties| Type | Property | Description |
| string | $Name | Name of the platform |
| string | $Deeplink | Linkt to platform |
Decorator\Protom\Page\Product\Question\SocialMedia
Objectproperties| Type | Property | Description |
| string | $Platform | socialmedia platform |
| string | $AccountName | accountnaam van het platform |
| string | $Deeplink | De link naar het socialmedia account |
Decorator\Protom\Page\Product\Question\SocialMediaCollection
Objectproperties| Type | Property | Description |
| SocialMedia[] | $SocialMedia |
Decorator\Protom\Page\Product\Question\Telephone
Objectproperties| Type | Property | Description |
| string | $Name | Name of the platform |
| string | $Deeplink | Link to Platform |
Decorator\Protom\Page\Product\Question\WhatsApp
Objectproperties| Type | Property | Description |
| string | $Name | Name of Platform |
| string | $Deeplink | De link van WhatsApp |
Decorator\Protom\Page\Product\Review\Field
Objectproperties| Type | Property | Description |
| string | $Name | name of the field |
| string | $FieldName | systemname of the field |
| string | $Type | Type of the field, score, textarea or text |
| boolean | $Required | required yes or no |
Decorator\Protom\Page\Product\Breadcrumb
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Is the Breadcrumb functionality visible |
| Crumbs[] | $Crumbs | all the crumbs |
| CurrentItem | $CurrentItem |
Decorator\Protom\Page\Product\Compare
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Is the compare functionality visible |
Decorator\Protom\Page\Product\MostViewed
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Is visible |
| Product[] | $Products | array of Products |
Decorator\Protom\Page\Product\Question
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Is Visible |
| string | $Image | Image beschikbaar |
| SocialMediaCollection | $SocialMedia | |
| Telephone | $Telephone | |
Decorator\Protom\Page\Product\Review
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | |
| boolean | $IsPostingAllowed | |
| boolean | $IsApprovalEnabled | |
| boolean | $IsNameRequired | |
| string | $ApprovalText | |
| Field[] | $Fields | |
| int | $ItemsPerPage | |
| CreditPoint | $CreditPoint |
Decorator\Protom\Page\Product\Template
Objectproperties| Type | Property | Description |
| string | $Name | |
| string | $Path | |
| boolean | $IsProtom |
Decorator\Protom\Page\Product\ViewedByOthers
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Is visible |
| Product[] | $Products | array of Products |
Decorator\Protom\Page\Product\ViewedRecently
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Is visible |
| Product[] | $Products | array of Products |
Decorator\Protom\Page\Product\Wishlist
Objectproperties| Type | Property | Description |
| int | $Id | Id of the Wishlist |
| string | $Name | name of the Wishlist |
Decorator\Protom\Page\Product\WishlistCollection
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Is visible |
| Button | $Button | of the wishlist |
| Wishlist[] | $Wishlists | array of wishlists |
Decorator\Protom\Page\Product\Wishlist\Button
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Is the button visible |
| string | $Caption | Caption of the button |
| Icon | $Icon | The icon of the button |
Decorator\Protom\Page\Product\Wishlist\Icon
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Is the icon visible |
| string | $Icon | HTML string of the icon |
Decorator\Protom\Page\Metadata
Objectproperties| Type | Property | Description |
| string | $Keywords | |
| string | $Description | |
| string | $PageTitle | |
| boolean | $IsNoIndex | |
| boolean | $IsNoFollow | |
| string | $Uri | The URI of this page |
| string | $Alias | The alias of the page |
Decorator\Protom\Page\Product
Objectproperties| Type | Property | Description |
| string | $Title | The page title |
| Template | $Template | The template to use |
| Metadata | $Metadata | of the page |
| Review | $Review | Review settings of the page |
| Product | $Product | The Currently viewed product of the product page |
| Question | $Question | The question settings |
| ViewedRecently | $ViewedRecently | Recently viewed products |
| ViewedByOthers | $ViewedByOthers | Product viewed by others |
| MostViewed | $MostViewed | Most viewed products |
| Compare | $Compare | Compare setting |
| Breadcrumb | $Breadcrumb | The breadcrumb |
| WishlistCollection | $CustomerWishlist | The wishlist |
Decorator\Protom\Product
Objectproperties| Type | Property | Description |
| int | $Id | The id |
| int | $WebsiteId | Id of the website |
| string | $Name | Productname |
| string | $ProductNumber | Article number |
| string | $EAN | EAN |
| string | $MPN | MPN |
| string | $SKU | SKU only available in |
| string | $ShortDescription | Short description |
| string | $Description | Full descirption |
| string | $Unit | Unity of product. |
| boolean | $OrderWithoutStock | Can this product be ordered without stock |
| string | $Weight | Weight of the product |
| string | $Memo | Memo |
| string | $Specs | Specification link |
| DateTime | $CreateDate | Created date |
| DateTime | $LastModified | Modified date |
| string | $Brand | Brand |
| string | $Supplier | Suppplier |
| string | $Condition | Condition |
| KeywordCollection | $Keyword | Collection of keywords |
| PropertyGroupCollection | $Property | Collection of properties |
| RelevantProductCollection | $RelevantProduct | Collection of relevant products |
| Price | $Price | Price of the product |
| PhotoCollection | $Photo | Collection of photo's |
| StaggeredPrice | $StaggeredPrice | Collection of prices |
| AttachmentCollection | $Attachment | Collection of attachments |
| UploadCollection | $Upload | Collection of uploads |
| VideoCollection | $Video | Collection of video's |
| ReviewCollection | $Review | Collection of reviews |
| BundleCollection | $Bundle | Collection of product bundels |
| CreditPoint | $CreditPoint | Creditpoint information |
| VariationCollection | $Variation | Collection of Variation |
| ProConCollection | $ProCon | Collection of Pro's and con's |
| AttributeCollection | $Attribute | Collection of Attributes |
| Button | $Button | The button of this product |
| Amount | $Amount | Amount information |
| boolean | $IsActive | Is the product active |
| Color | $Color | Color information of this product |
| boolean | $IsVisible | Is this product visible |
| CategoryCollection | $Category | Collection of categories |
| Shipping | $Shipping | Shipping information |
| Stock | $Stock | Stock information |
| Deposit | $Deposit | Deposit information |
| string | $Uri | The URI of this product |
| string | $Alias | The alias of the product |
Attribute\Combination
Objectproperties| Type | Property | Description |
| Attribute[] | $Attributes | array of attributes |
| Combination | $Combination | attribute combination |
Attribute\Option
Objectproperties| Type | Property | Description |
| int | $Id | id of the option |
| string | $Option | option |
| int | $Type | Type of the option, dropdown or input |
| Attribute[] | $Attributes | array of attributes |
| boolean | $IsRequired | Is the option Required |
Attribute\OptionCollection
Objectproperties| Type | Property | Description |
| Option[] | $Options | array of options |
Attribute\SelectedCollection
Objectproperties| Type | Property | Description |
| Attribute[] | $Attributes | array of attributes |
| boolean | $AreRequiredAttributesSelected | Are all required attributes selected? |
| int | $CombinationId | attribute combination id |
Bundle\Product
Objectproperties| Type | Property | Description |
| boolean | $IsFree | Is Free |
| boolean | $HasAttribute | Has attributes |
| SelectedCollection | $Selected | Selected attributes |
| Product | $Product | Product |
Button\Basket
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Is the button visible |
| boolean | $IsActive | Is the button active |
| string | $Caption | Caption of the button |
| string | $Hook | the hook of he button |
Button\Quotation
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Is the button visible |
| boolean | $IsActive | Is the button active |
| string | $Caption | Caption of the button |
| string | $Hook | the hook of he button |
ProductCategory\DescriptionPhoto
Objectproperties| Type | Property | Description |
| int | $Id | Id |
| string | $Path | Dynamic path of the photo |
| string | $Alt | Alt text of the photo |
| int | $Position | Position of the photo |
| string | $Location | Location of the photo |
| boolean | $IsVisible | Is the photo visible |
Shipping\Delivery
Objectproperties| Type | Property | Description |
| string | $Message | Delivery message |
| boolean | $IsVisible | Is the delivery message visible |
| string | $Color | What color has the delivery message |
| string | $Label | The info tekst of the delivery |
Stock\Warning
Objectproperties| Type | Property | Description |
| string | $Message | Warning message of Stock |
| boolean | $IsVisible | Is the warning message visible |
Upload\File
Objectproperties| Type | Property | Description |
| string | $Filename | The original filename |
| string | $Tempname | The filename on the server |
| string | $Deeplink | The deeplink to the path |
| string | $Icon | The deeplink to the icon |
Variation\Product
Objectproperties| Type | Property | Description |
| boolean | $UseColor | Use color |
| Color | $Color | Color object |
| Photo | $Photo | Photo object |
| Product | $Product | Product |
Video\Adapter\Unknown
Objectproperties| Type | Property | Description |
Video\Adapter\Vimeo
Objectproperties| Type | Property | Description |
Video\Adapter\YouTube
Objectproperties| Type | Property | Description |
Video\Adapter
Objectproperties| Type | Property | Description |
Amount
Objectproperties| Type | Property | Description |
| int | $Precision | How many number behind seperator |
| float | $MinimalOrderAmount | Minimal amount which has to be ordered |
| float | $Step | The step which you can increase / decrease the amount |
| double | $Amount | Amount of what the customer wants |
| boolean | $IsFixed | Are there fixed amounts |
| boolean | $IsVisible | Is the exact number visible |
| Amount[] | $FixedAmounts | array of fixed amounts |
Attachment
Objectproperties| Type | Property | Description |
| int | $Id | Id of the attachment |
| string | $Language | Language of the attachment |
| string | $Path | Path to the attachment |
| string | $Name | name of the attachment |
| string | $Position | Sorting position |
| string | $Size | File size |
| string | $Icon | File Icon of the file |
AttachmentCollection
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Are product attachments visible |
| Attachment[] | $Attachments | array of attachments |
Attribute
Objectproperties| Type | Property | Description |
| int | $Id | Id of the attribute |
| string | $Option | Option |
| string | $Value | Value |
| Price | $Price | Price of the attribute |
| boolean | $IsSelected | Is the attribute selected |
| boolean | $IsVisible | Is the attribute visible |
AttributeCollection
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Are the attributes visible? |
| SelectedCollection | $Selected | Selected attributes |
| OptionCollection | $Option | Collection of options |
| boolean | $HasRequiredAttribute | Has this colection required attributes (no text fields) |
Bundle
Objectproperties| Type | Property | Description |
| int | $Id | Id used of bundle |
| boolean | $IsRecommended | Recomended yes or no |
| string | $Name | Name of the bundle |
| string | $Description | When recomended the description of the bundle |
| Price | $Price | Price of the bundle |
| Product[] | $Products | array of BundleProducts |
| string | $Uri | The URI of this product |
| string | $Alias | The alias of the product |
| Button | $Button | The order button of this bundle |
| string | $LinkDescription | The description of the bundle (all product names) |
BundleCollection
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Are product bundles visible |
| string | $DiscountText | Text of the product bundle |
| Bundle[] | $Bundles | array of bundles |
Button
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Is the button visible |
| string | $Hook | Defines the js hook of this button |
| boolean | $IsActive | Is the button active |
| string | $Caption | Caption of the button |
CategoryCollection
Objectproperties| Type | Property | Description |
| ProductCategory[] | $Categories | array of categories |
| boolean | $IsVisibleInCategories | Is this product visible in categories |
Color
Objectproperties| Type | Property | Description |
| boolean | $IsEmpty | Is the color visible |
| string | $Class | css class of the color |
| string | $Style | css style of the color |
| string | $Hex | Color in HEX |
| string | $Name | Name of the Color |
| boolean | $IsDark | Is this color dark? |
CreditPoint
Objectproperties| Type | Property | Description |
| boolean | $IsActive | Are creditpoints active |
| boolean | $IsVisible | Are creditpoints visible |
| string | $Name | Name of creditpoints |
| boolean | $IsCustom | Are custom creditpoints applied? |
| int | $Amount | Amount of creditpoints earned when buying this product |
Deposit
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Are the deposits visible |
| Price | $Container | Price of the container deposit |
| Price | $Safety | Price of the safety depost |
Keyword
Objectproperties| Type | Property | Description |
| string | $Keyword | A keyword |
| string | $Deeplink | The deeplink too the keyword page |
KeywordCollection
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Are the keywords visible |
| Keyword[] | $Keywords | array of keywords |
Photo
Objectproperties| Type | Property | Description |
| int | $Id | Id |
| string | $Path | Dynamic path of the photo |
| string | $Alt | Alt text of the photo |
| int | $Position | Position of the photo |
PhotoCollection
Objectproperties| Type | Property | Description |
| Photo[] | $Photos | Array of photo's |
| Photo | $MainPhoto | Main photo |
Price
Objectproperties| Type | Property | Description |
| double | $OriginalPrice | Original price of the product |
| string | $OriginalPrice_Format | Original price formatted |
| string | $OriginalPrice_FormatWithCurrency | Original price formatted with currency |
| double | $OriginalPrice_Inc | Price inc. VAT |
| string | $OriginalPrice_Inc_Format | Price inc. VAT formatted |
| string | $OriginalPrice_Inc_FormatWithCurrency | Price inc. VAT formatted with currency |
| double | $OriginalPrice_Exc | Price exc. VAT |
| string | $OriginalPrice_Exc_Format | Price exc. VAT formatted |
| string | $OriginalPrice_Exc_FormatWithCurrency | Price exc. VAT formatted with currency |
| string | $Currency | currency |
| double | $Discount | Discount |
| int | $DiscountPercentage | Discount in percentage |
| double | $Discount_Inc | Discount inc. VAT |
| string | $Discount_Inc_Format | Discount inc. VAT formatted |
| string | $Discount_Inc_FormatWithCurrency | Discount inc. VAT formatted with currency |
| double | $Discount_Exc | Discount exc. VAT |
| string | $Discount_Exc_Format | Discount exc. VAT formatted |
| string | $Discount_Exc_FormatWithCurrency | Discount exc. VAT formatted with currency |
| double | $SellPrice | Sellprice based on the settings this is inc. or exc. vAT |
| string | $SellPrice_Format | Sellprice formatted |
| string | $SellPrice_FormatWithCurrency | Sellprice formatted with currency |
| double | $SellPrice_Inc | Sellprice inc. VAT |
| string | $SellPrice_Inc_Format | Sellprice inc. VAT formatted |
| string | $SellPrice_Inc_FormatWithCurrency | Sellprice inc. VAT formatted with currency |
| double | $SellPrice_Exc | Sellprice exc. VAT |
| string | $SellPrice_Exc_Format | Sellprice exc. VAT formatted |
| string | $SellPrice_Exc_FormatWithCurrency | Sellprice exc. VAT formatted with currency |
| double | $Amount | Amount of what the customer wants |
| boolean | $IsVisible | Is the price visible |
| double | $Vatrate | What is the VAT rate |
| string | $NotVisibleCaption | When the price is not visible display why |
ProCon
Objectproperties| Type | Property | Description |
| int | $Id | id of the pro and con |
| DateTime | $CreateDate | |
| string | $Type | Pro or con |
| string | $Value | Value of this pro or con |
| string | $Icon | Icon of this pro or con |
ProConCollection
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | are the pro's and con's visible |
| ProCon[] | $ProCons | array of pro's and con's |
ProductCategory
Objectproperties| Type | Property | Description |
| string | $Id | Id of the Category |
| int | $Parent | Id of the parent category |
| string | $Name | name of the category |
| string | $Description | description of the category |
| DescriptionPhoto | $DescriptionPhoto | Description photo |
| Photo | $Photo | The category photo |
Property
Objectproperties| Type | Property | Description |
| string | $Name | name of property |
| string | $Description | Description of the property |
| string | $Value | Value of the property |
| string | $Icon | optional icon |
| string | $Type | Type of the property |
PropertyGroup
Objectproperties| Type | Property | Description |
| string | $Name | Name of the property group |
| Property[] | $Properties | array of properties |
PropertyGroupCollection
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | are properties visible |
| FeaturedCollection | $Featured | Collection of properties |
| PropertyGroup[] | $Groups | array of property groups |
| Property[] | $Properties | Array of properties |
Property\FeaturedCollection
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | are featured properties visible |
| Property[] | $Properties | Array of featured properties |
RelevantProductCollection
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Are relevant products visible |
| Product[] | $Products | array of products |
Review
Objectproperties| Type | Property | Description |
| int | $Id | if of the review |
| string | $Review | The review text |
| int | $Points | number of points |
| DateTime | $DateCreated | create date |
| string | $Name | Name of the reviewer |
| boolean | $Approved | Is review approved |
| int | $UserId | Id of the reviewer |
ReviewCollection
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Are reviews visible |
| int | $Count | Number of reviews |
| int | $Score | Average score of reviews |
| Review[] | $Reviews | Array of reviews |
Shipping
Objectproperties| Type | Property | Description |
| Price | $Price | Shipping price |
| string | $DeeplinkDetails | Link to the details of this shipping |
| Delivery | $Delivery | Delivery information |
| string | $BasedOn | Prices based on (vast bedrag or weight) |
StaggeredPrice
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Are staggered prices visible |
| boolean | $IsActive | Are staggered prices active |
| Price[] | $Prices | array of prices |
| Price | $Selected | Which price is selected |
Stock
Objectproperties| Type | Property | Description |
| boolean | $IsEnabled | Is stock enabled |
| boolean | $IsVisible | Is stock number visible |
| int | $Amount | What is the amount of stock |
| string | $Type | Stock based on product or attribute |
| string | $DisplayType | Display level as icons or text |
| string | $Level | High, medium, or low stock level |
| string | $IconSet | What icon set to use |
| Warning | $Warning | Warning when product is not available based on stock |
Upload
Objectproperties| Type | Property | Description |
| int | $Id | id of upload |
| string | $Description | Description of the upload |
| boolean | $IsRequired | Is this upload required |
| string | $Position | Sorting position |
| File | $File | file object |
UploadCollection
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Are product attachments visible |
| Upload[] | $Uploads | Array of uploads |
VariationCollection
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Is this variation collection visible |
| boolean | $UseColor | Use color or images as icons |
| Product[] | $Variations | Array of different variations |
Video
Objectproperties| Type | Property | Description |
| int | $Id | id of the video |
| string | $Name | name of the video |
| int | $Position | Used for sorting |
| string | $VideoLink | Link of the video |
VideoCollection
Objectproperties| Type | Property | Description |
| boolean | $IsVisible | Are the video's visible? |
| Video[] | $Videos | Array of video's; |
Decorator\Protom\CreditPoint
Objectproperties| Type | Property | Description |
| boolean | $IsActive | Are creditpoints active |
| boolean | $IsVisible | Are creditpoints visible |
| string | $Name | Name of creditpoints |
| boolean | $IsCustom | Are custom creditpoints applied? |
| int | $Amount | Amount of creditpoints earned when buying this product |
Products
Available in code fragment| Code fragment | Variable | Description |
| Fetch products | {foreach \Factory\Protom\Products::Fetch([]) as $Product} {/foreach} | Fetch an array of products based on the arguments in supplied as parameter. The result array contains DisplayedProduct objects, not to confuse with Products |
| Parameter | Description |
| Category | One category id |
| Categories | Array of category id's. Please suplly the sub category id's also. |
Brand
Objectproperties| Property | Description |
| Name | Brand name. |
Available in code fragment
| Codefragment | Variable | Description |
| List of brands | {$aBrands} | An array of Brand-objects. |
Crumb
Objectproperties| Property | Description |
| Title | Title of category or page. |
| Deeplink | Deeplink to the category or page in question. Value of the last crumb is empty. |
Available in code fragment
| Codefragment | Variable | Description |
| Crumb path | {$aCrumbs} | An array of Crumb-objects. |
Language
Objectproperties| Property | Description |
| FlagIcon | Deeplink to the standard flag icon, to be used in <img />. |
| Code | Country code, two digits (ISO 3166-1). |
| Domain | Domain of the language. |
Available in code fragment
| Codefragment | Variable | Description |
| Language flags | {$aLanguages} | An array of Language-objects. |
NewsItem
Objectproperties| Property | Description |
| Title | Title of newsitem. |
| Content | Content of newsitem. |
| Date | Date of precessing. |
| Deeplink | Link to news item. |
Available in code fragment
| Codefragment | Variable | Description |
| List of newsitems | {$aNewsItems} | An array of NewsItem-objects. |
OrderRow
Objectproperties| Property | Description |
| ProductNumber | Product number/Article number. |
| ProductName | Name of products. |
| Count | Number of products. E.g. 2 if two identical products are in the shopping cart. |
| Tax | VAT-value as integer. E.g. 0,6 or 21. |
| Unit | Product unit. |
| Price | Selling price (if a discount is applicable, it is deducted ) Examples values: 10, 10.1 and 10.95. |
| FromPrice | The original price (if discount is applicable is will differ from Price) Example values: 10, 10.1 en 10.95. |
| Discount | Discount on a product (if applicable) . Value contains discountvalue. Example values: 10, 10.1 en 10.95. |
| TotalPrice | Total price of this product (Count * Price). Example values: 10, 10.1 en 10.95. |
| PriceFormatted | Formatted selling price (if a discount is applicable is is deducted). Example values: 10,00, 10,10 en 10,95. |
| FromPriceFormatted | Formatted original price (if a discount is applicable it differs from Price ). Example values: 10,00, 10,10 en 10,95. |
| DiscountFormatted | Formatted discount on a product (if applicable). Example values: 10,00, 10,10 en 10,95. |
| TotalPriceFormatted | Formatted total price of this product (Count * Price). Example values: 10,00, 10,10 en 10,95. |
| Deeplink | Deeplink to product detail page. |
| MainImageDeeplink | Deeplink to main image of product. |
| MainImageThumbnailDeeplink | Deeplink to thumbnail of main image of product. |
Available in code fragment
| Codefragment | Variable | Description |
| Small shopping basket | {$aOrderRows} | An array of OrderRow-objects. |
Page
Objectproperties| Property | Description |
| Id | Unique page ID. |
| Title | Page title (also used as link name). |
| PageType |
Page type of the page. Optional page types:
|
| Deeplink | Link to linked page. |
Available in code fragment
| Codefragment | Variable | Description |
| Pages | {$aPages} | An array of Page-objects. |
Product
Objectproperties| Property | Description |
| ProductName | Name of product. |
| ProductNumber | Productnumber/article number. |
| ShortDescription | Short description (max. 200 characters). |
| Description | Full description. |
| Unit | Unity of product. |
| Tax | VAT-value as integer. E.g. 0, 6 of 21. |
| Stock | Current stock. |
| StockDeliveryStandard | Standard delivery time for the product |
| BrandID | Product brand |
| Weight | Current weight of product |
| Specs | Specification URL |
| Attributes | Product attributes |
| EANNumber | EAN Number |
| MPNNumber | MPN Number |
| Price | Selling price (if a discount is applicable, it is deducted). Example values: 10, 10.1 en 10.95. |
| FromPrice | Original price (if discount is applicable it will differ from Price. Example values: 10, 10.1 en 10.95 |
| Discount | Discount on a product (if applicable). Value contains discount value. Example values: 10, 10.1 en 10.95. |
| PriceFormatted | Formatted selling price (if a discount is applicable, it is deducted). Example values: 10,00, 10,10 en 10,95. |
| FromPriceFormatted | Formatted original price (if discount is applicable it differs from Price). Example values: 10,00, 10,10 en 10,95. |
| DiscountFormatted | Formatted discount on a product (if applicable). Example values: 10,00, 10,10 en 10,95 |
| Deeplink | Deeplink to product page. |
| MainImageDeeplink | Deeplink to main image of product. As standard a measurement of 500px wide with matching space. The platform offers a render farm that allows you to scale to any measure you desire. This may make quite a difference in bandwidth. To scale an mage ( and automatically saving it, following code is used: {$oProduct->MainImageDeeplink|replace:'/Large':'/150'}. Using this code that normally was served as 500 px width – the image will be served as an image of 150px width. If the image of 150px width did not exist as yet, it is automatically created. Images cannot be made larger than the orginal uploaded file. |
| MainImageThumbnailDeeplink | Deeplink to the thumbnail of the main image of the product. |
| ImageDeeplink | Deeplink to all the images of product. As standard a measurement of 500px wide with matching space. The platform offers a render farm that allows you to scale to any measure you desire. This may make quite a difference in bandwidth. To scale an mage ( and automatically saving it, following code is used: {$oProduct->ImageDeeplink|replace:'/Large':'/150'}. Using this code that normally was served as 500 px width – the image will be served as an image of 150px width. If the image of 150px width did not exist as yet, it is automatically created. Images cannot be made larger than the orginal uploaded file. |
| ImageThumbnailDeeplink | Deeplink to the thumbnail of all the images of the product. |
| CreateDate | Y-m-d H:i:s Date when product was created. |
| OrderButtonType | Type of button that was advised in product management: - OrderButton, orderbutton (consult hook_AddProductToCart for implementation documentation). - OfferButton, offerbutton - NoButton, no button |
| ShowOrderButton | true of false |
| ReviewsTotal | Product reviews available |
| ReviewsAverage | Average review rating |
| ReviewsMin | Min. rating available string '0' |
| ReviewsMax | Max. rating available string '5' |
Determine true of false for property ShowOrderButton
The property ShowOrderButton contains the value true or false depending on several combinations of settings and product properties. Factors that should be taken into account are:
| Setting | Location |
| Show prices to guest | Starting point/My webshop/Settings/General/Login systems |
| Hide orderbutton if no more stock is available | Starting point / My webshop / Settings / Orderprocess and stock / Stockmanagement / Stock options |
| Product has stock | Starting point / My products/Product management / product in question/Tab Stock |
| Stocktype | Starting point / My products / Product management / Product in question / Tab Stock |
| Stock | Starting point / My products / Product management / Product in question / Tab stock |
| Show order / offer button at product | Starting point / My products / Productmanagement / Product in question / Tab Options |
The propertyShowOrderButton is only true for following combinations:
-
Show prices to guests [=Yes]and also
Hide orderbutton if no stock is available[=checked]and also
Product has stock [=Yes] and also
Stock is [=Bigger than 0] and also
Show order/offerbutton with product[=Orderbutton] -
Show prices to guests[=Yes]and also
Hide orderbutton if no stock is available [=Unchecked]and also
Show order/offerbutton with product[=Orderbutton] -
Show prices to guests[=Yes] and also
Product has stock [=Unchecked] and also
Show order/offerbutton with product[=Orderbutton] -
Show prices to guests[=Yes] and also
Product type [=Attribute] and also
Show order/offerbutton with product [=Orderbutton] -
Show prices to guests [=No] and also
Customer logged in [=No] and also
Hide order button if there is no stock available [=Checked] and also
Product has stock [=Checked] and also
Stock [=Bigger than 0] and also
Show order/offerbutton with product[=Orderbutton] -
Show prices to guests [=No] and also
Customer logged in [=Yes] and also
Hide orderbutton if no stock is available [=Unchecked]and also
Show order/offer button with product [=Orderbutton] -
Show prices to guests [=No] and also
Customer logged in [=Yes] and also
Product has stock [=Unchecked] and also
Show order/offer button with product [=Orderbutton] -
Show prices to guests [=No] and also
Customer logged in [=Ja] and also
Stocktype [=Attribute] and also
Show order/offer button with product [=Orderbutton]
Available in code fragment
| Codefragment | Variable | Description |
| BestSellers | {$aBestSellers} | An array of Product-object maximum 25. |
| Product on offer | {$oSpecialOffer} | A Product-object |
| Example product category image | {$aProductCategoryProducts} | An array of Product-objects. This code fragment is available in the filesProductCategory1.sub.tpl, ProductCategory2.sub.tpl, ProductCategory3.sub.tpl and ProductCategory4.sub.tpl and be used as layout for category pages and certain elements on the modular page. |
ProductCategory
Within the platform, product categories can be used in several places , however, it depends on the location what object properties a ProductCategory-object has. ProductCategory-objects are available in following places:
- - Index.tpl
- - ProductCategory1.sub.tpl
- - ProductCategory2.sub.tpl
- - ProductCategory3.sub.tpl
- - ProductCategory4.sub.tpl
- - SubCategory1.sub.tpl
- - SubCategory2.sub.tpl
ProductCategory in Index.tpl
ProductCategory-objects in the file Index.tpl are usually used to build the navigation structure within the theme. In below tables the object properties are named and it is mentioned in which code fragments these object properties are available.
Objectproperties| Property | Description |
| Id | Unique ID of product category. |
| ParentId | ID of upper category. |
| Name | Name of category. |
| Description | Description of category |
| ShowOrderButton | true of false.This attribute may be used to determine if an order button should be shown or not. This depends on the setting chosen for the category in question in the catalogue module. |
| ApplyPhotoEnlargement | true of false.This attribute may be used to determine if a large picture should be shown or not. This depends on the setting chosen for the category in question in the catalogue module. |
| ApplyPhotoCanvas | true of false.This attribute may be used to determine if a canvas image shoud be used or not. This depends on the setting chosen for the category in question in the catalogue module. |
| ProductsPerPage | Number of products that is shown per page within the category in question. This depends on the setting chosen for the category in question in the catalogue module. |
| Deeplink | Link to the product category page. |
| SubCategories | An array of ProductCategory-objects, within the main category if the main category contains sub categories. With in a sub categorie is possible to loop the sub categories again. This can up to three deep. |
Available in code fragment
| Codefragment | Variable | Description |
| Catalogue (with subcategories) | {$aCategories} | An array of ProductCategory- objects. |
| Catalogue (without subcategories) | {$aCategories} | An array of ProductCategory- objects. |
ProductCategory in ProductCategory(1|2|3|4).sub.tpl
ProductCategory-objects within the files ProductCategory1.sub.tpl, ProductCategory2.sub.tpl, ProductCategory3.sub.tpl and productCategory4.sub.tpl are used to give supplementary information within a product category description. In below tables the object properties are mentioned as well as the code fragments in which the object properties are available.
Object properties| Property | Description |
| ProductCount | Total number of products in the product category. |
| CurrentSubPage | Currently active subpage. |
| ProductsPerPage | The number of products that can be displayed for each page. |
| ShowOrderButton | true of false. This attribute can be used to determine if an order button should be shown or not. This depends on the chosen setting for the category in question in the catalogue module. |
| ApplyPhotoEnlargement | true of false. This attribute can be used to determine if a large picture should be shown or not. This depends on the setting chosen for the category in question in the catalogue module. |
| ApplyPhotoCanvas | true of false. This attribute can be used to determine if a canvas image should be used or not. This depends on the setting chosen for the category in question in the catalogue module. |
Available in code fragment
| Codefragment | Variable | Description |
| Example product category image | {$oProductCategory} | A Productcategory-object. |
ProductCategory in SubCategory(1|2).sub.tpl
ProductCategory-objects in the files SubCategory1.sub.tpl and SubCategory2.sub.tpl are used to show the subcategories within a product category image. In below tables the object properties are named. and also in which code fragments these object properties are available.
Objectproperties| Property | Description |
| Name | Name of subcategory. |
| Description | Description of subcategory. |
| ShowOrderButton | true of false. This attribute can be used to determine if an order button should be shown or not. This depends on the chosen setting for the category in question in the catalogue module true of false. |
| ApplyPhotoEnlargement | true of false. This attribute can be used to determine if a large picture should be shown or not. This depends on the setting chosen for the category in question in the catalogue module. |
| ApplyPhotoCanvas | true of false. This attribute can be used to determine if a canvas image should be used or not. This depends on the setting chosen for the category in question in the catalogue module. |
| Deeplink | Link to the product category page. |
| MainImageDeeplink | Link to the image of the product category. |
Beschikbaar in codefragment
| Codefragment | Variable | Description |
| Example subcategories within category | {$aProductCategorySubCategories} | An array of ProductCategory-objects. |
RSSFeed
Object properties| Property | Description |
| Name |
Name of feed:
|
| Deeplink | Link to RSS feed in question. |
Available in codefragement
| Codefragment | Variable | Description |
| List of RSS feeds | {$aRSSFeeds} | An array of RSSFeed-objects |
SocialMediaAccount
Object properties| Property | Description |
| Platform |
Name of platform:
|
| AccountName | Accountnaam on platform |
| Deeplink | Link to account in question. |
Available in codefragment
| Codefragment | Variable | Description |
| Social Media Accounts | {$aSocialMediaAccounts} | An array van SocialMediaAccount-objects. |
End user settings
If you develop a theme for an end user who does not have any knowledge of web development, you can add end user settings to your theme. End user settings are managed through the dialogue window “End user settings”. A minimum of one end user category setting should be created to be able to create end user settings. The end user himself does not need to make any changes in the source code of the theme, but is shown a dialogue window based on the categories and settings, where these settings can be given values. Every category created is presented as a separate tab for the end user.
In order to create structure and overview end user settings should be distinguished into categories. Each category is represented as a separate tab for the end user, where for each tab/category the settings created for the end user can be represented. Examples of categories may be: “General”, “Colours”, Main page” etc.
An end user setting
| Inputfield | Description |
| Label | Label of the setting. This is the naming of the setting in the dialogue window for the end user. |
| Variable name | Name of the variable the value can be read out with. The chosen variable name should be unique for each separate theme. In order to print the value of a variable the entering {$oEndUserSetting->VariableName} is used, 'VariableName' being the chosen variable name. The variable name may exclusively contain alfa numeric characters. |
| Type |
|
| Standard value | The standard value for the setting if end user has not selected a a value. |
Implementing an end user setting.
The end user settings that were created are shown in the item “Code fragments” as a special item. By clicking an end user setting it is placed in the active editor. If the work field layout “Theme file as well as separate CSS window” is used, this means that the implementation code is placed in the editor for theme file or CSS file. The end user settings may be used in the theme files Index.tpl, Template.css and Scrtipts.js.
Multilingual support
If your webshop uses multilingual spport you may want to include multiligual variables in the theme you develop. E.g. a shoppingcart image you developed yourself. You may wish to show “Shopping basket”, but to your English visitors you may like to show “Shoppingcart”. Following documentation and examples will teach you how to realise this.
If you do not specify a translation for a certain language ( read following syntax-structure) , and the webshop is represented in that language, the translation you specified first will be shown automatically. It makes no difference in which order the translations are placed.
Each text you wish to present multilangually, should get a multilingual definition.
The syntax of such a definition consists of a number of elements:
Syntax structure
| Syntax | Description |
| {* ml | This indicates that a multilingual translation will start. Attention: spacing at the end is obligatory!. |
| sPlaceHolderName | Name of the variable that is defined. |
|
:nl[Vertaling] :en[Translation] :de[Uebersetzung] :fr[Traduction] :tr[Çeviri] |
Here the translation is given for each language. A language starts with a semicolon followed by the language code. The translation per language is represented by square brackets. |
| /ml *} | This indicates the end of a multilingual translation. |
Available languages
| Language code | Language |
| nl | Dutch. |
| en | English. |
| de | German. |
| fr | French. |
| tr | Turkish. |
Examples
Extensive notation: {* mlsHelloWorld
:nl[Hallo wereld]
:en[Hello world]
:de[Hallo Welt]
:fr[Bonjour monde]
/ml *}
My multilingual variable: {$sHelloWorld}
Shortened notation: {* ml sHelloWorld:nl[Hallo wereld]:en[Hello world]:de[Hallo Welt]:fr[Bonjour monde]/ml *}
My shortened notation multilingual variable: {$sHelloWorld}
No translation for every language:
Note: In this example the active language of the webshop is Dutch, the English language will be shown. {* ml
sHelloWorld
:en[Hello world]
:de[Hallo Welt]
/ml *}
My multilingual variable: {$sHelloWorld}
AJAX widgets
AJAX Widgets are widgets that can contain a certain content and can be restored “below water” (showing formatting and styles) without the page the visitor is on at that moment having to be loaded again. AJAX stands for Asynchronous Javascript And XML meaning that the data will be retrieved asynchronously from the webserver. This is a technique that allows you to make pages interactive without having to restore a whole page. Below is described how to recognize and apply an AJAX Widget, followed by the description of AJAX Widgets available.
Syntax structure
| Syntax | Description |
| {* plugin *} | This indicates the start of an AJAX Widget. |
| <div id=""> | The div in which the AJAX Widget-code is placed. The ID of the div should be a valid AJAX Widget-name (see available AJAX Widgets). If no valid ID is specified and the syntax is correct, the theme is filed but there is no callback-function in the webshop that will trigger this AJAX Widget. |
| </div> | The closing tag of the div in which the AJAZX widget-code is placed. |
| {* /plugin *} | This indicates that an AJAX Widget ends. |
Example: {* plugin *}
<div id="SmallBasket">
// Widget code
</div>
{* /plugin *}
Available AJEX widgets
Following AJAX Widgets are available:
- Shopping basket
Shopping basket
The shopping basket is a typical example of anAJAX Widget. It is often an item that you wish to present clean-cut, well-organized and well-considered. A shopping basket as AJAX Widget is very user friendly because the option “Show dialogue window shopping cart”( My webshop/Settings/Orderproces and stock/Order proces settings) is available. The shopping basket information is automatically updated as soon as a visitor places a product in the shopping basket, without the page reloading again.
Basic code {* plugin *}
<div id="SmallBasket">
</div>
{* /plugin *} Available variables within this widget
| Variable | Content and data type of variable |
| {$aOrderRows} | An array of OrderRow-objects (see 'List of objects') |
Example: {* plugin *}
<div id="SmallBasket">
{if $aOrderRows|@count eq 0}
{* ml
sBasketLine
:nl[Er zijn nog geen producten in uw winkelmand geplaatst.]
:en[There are no products in your shopping cart yet.]
:de[Es gibt keine Produkte in Ihrem Warenkorb.]
:fr[Il n'y a aucun produit dans votre panier pour le moment.]
/ml *}
{$sBasketLine}
{else}
<table cellpadding="0" cellspacing="0" width="100%">
{$fTotal = 0}
{foreach from=$aOrderRows item=oOrderRow}
{$fTotal = $fTotal + $oOrderRow->TotalPrice}
<tr>
<td style="width:30px; text-align:center;">{$oOrderRow->Count}</td>
<td style="width:15px;"> × </td>
<td>{$oOrderRow->ProductName|middle_truncate:50:3}</td>
<td style="width:15px; text-align:center;"> {$sCurrency} </td>
<td style="width:50px; text-align:right;">{$oOrderRow->PriceFormatted}</td>
</tr>
{/foreach}
<tr>
<td colspan="3"></td>
<td style="width:15px; text-align:center;"> {$sCurrency} </td>
<td style="width:50px; text-align:right;">{$fTotal|number_format:'2':',':'.'}</td>
</tr>
</table>
{* ml
sPayButton
:nl[Afrekenen]
:en[Checkout]
:de[Abrechnen]
:fr[Régler]
/ml *}
<input type="button" value="{$sPayButton}" onclick="window.location = '{$sBasketPageDeeplink}';"/>
{/if}
</div>
{* /plugin *}
Action Hooks
Action Hooks are the link between your Pro-Tom design and the internal functionality of the webshop platform. Action Hooks are marked out because they are hooked via the class-attribute.
hook_AddProductToCart
Adds a product to the visitor's shopping basket.
Conditional functioning based on settings.| Settings “Functioning order button & shoppingcart' | |
| Location | Startingpoint / My webshop / Settings / Order proces settings |
| Behaviour based on value |
|
Data-attributes
| Attribute | Obligatory | Description |
| data-product-id | Yes | Unique product id (Product::Id) |
| data-quantity | No | Quantity ordered. The action hook only accepts an integer-value, all other values are converted to '1'. |
Example
<span class="hook_AddProductToCart PredefinedButton" data-product-id="123">
Bestellen
</span>
Example with order quantity input field
<script type="text/javascript">
$(document).ready(function() {
$('.change-quantity').keyup(function() {
// Controleren op een integer-invoerwaarde, anders de waarde 1 toekennen
var iNewQuantity = Math.floor($(this).val()) == $(this).val() && $.isNumeric($(this).val())
? $(this).val()
: 1;
$(this)
.parent()
.find('.hook_AddProductToCart')
.attr(
'data-quantity',
iNewQuantity
);
});
});
</script>
<div>
<input type="text" class="change-quantity" value="1"/>
<span class="hook_AddProductToCart PredefinedButton" data-product-id="123" data-quantity="1">
Bestellen
</span>
</div>
hook__global__product-order
Adds a product to the visitor's shopping basket.
Conditional functioning based on settings.| Settings “Functioning order button & shoppingcart' | |
| Location | Startingpoint / My webshop / Settings / Order proces settings |
| Behaviour based on value |
|
Data-attributes
| Attribute | Obligatory | Description |
| data-product-id | Yes | Unique product id (Product::Id) |
form requirements
| input name | Obligatory | Description |
| product_amount | No | Input field for the amount of products you would like to order. |
| product_attribute{$Option->Id} | No | Input field used for each of the product attributes. it is essential to use the {$Option->Id} within the name for this to work correctly. |
| product_upload | No | Input field for uploading a file, like an image that needs to be printed onto the product. |
| Button hook | No | The button hook can be used instead of defining the hook manually, but this can only be done while using the factory products implementation. |
Callbacks (ajaxRequest)
Callbacks can be used to fetch the result of the hook action.
| Callback | Type | Description |
| doOrder | Callback function name. | This is the callback function name used for obtaining the original call's result. |
| onSuccess | Succes | Adding the product to the basket was succesfull. |
| onError | Error | Adding the product to the basket didn't happen due to any errors. |
Callback content
The content of any returned callback.
| Name | Type | Description |
| product_id | (number), the product id. | The product id can be used to target a specific error or success class on the page. |
| messages | Array of messages. | Result messages of a callback. |
| message: attributecombinations | attributecombinations | Result message, attributecombination error defined as name: attributecombinations |
| message: amount | amount | Result message, amount error, like minimal amount not reached, defined as name: amount |
| message: stock | stock | Result message, stock error, like product is out of stock, defined as name: stock |
Example of the button (manual)
<span class="hook__global__product-order PredefinedButton" data-product-id="123">
Bestellen
</span>
Example of the button (using the factory products)
<a class="cs-button cs-button--primary product__button--order {$Product->Button->Hook}" data-product-id="{$Product->Id}" tabindex="0">{$Product->Button->Caption}</a>
Example with a form, including a quantity input field.
<div>
<form name='form-product'>
<input type="text" name="product_amount" class="change-quantity" value="1"/>
<span class="hook__global__product-order PredefinedButton" data-product-id="123">
Bestellen
</span>
</form>
</div>
Example with a form, including a quantity input field and some attribute combination fields.
<div>
<form name='form-product'>
{foreach $Product->Attribute->Option->Options as $Option}
{if $Option->Type == 2 || $Option->Type == 3}
<div class="product__attribute product__attribute--input">
<label>{$Option->Option} {if $Option->IsRequired}*{/if}</label>
<input type="text" name="product_attribute[{$Option->Id}]" value="{$Option->Attributes[0]->Value}">
</div>
{else}
<div class="product__attribute product__attribute--select">
<label>{$Option->Option} {if $Option->IsRequired}*{/if}</label>
<select name="product_attribute[{$Option->Id}]">
{foreach $Option->Attributes as $Attribute}
<option value="{$Attribute->Id}"
{if $Attribute->IsSelected}selected="selected"{/if}>
{$Attribute->Value}
</option>
{/foreach}
</select>
</div>
{/if}
{/foreach}
<input type="text" name="product_amount" class="change-quantity" value="1"/>
<span class="hook__global__product-order PredefinedButton" data-product-id="123">
Bestellen
</span>
</form>
</div>
Example of using callbacks.
$(document).ready(function() {
ajaxRequest.doOrder({
onError: function(data) {
$.each(data.messages, function (index, message) {
$('.error__' + data.product_id + '__' + message.toLowerCase()).show();
});
}
});
});
<div class="error-messages error__{$Product->Id}__attributecombinations" style="display:none;"> Attribute combination error!</div>
<div class="error-messages error__{$Product->Id}__amount" style="display:none;"> The minimal order amount is not reached!</div>
<div class="error-messages error__{$Product->Id}__stock" style="display:none;"> This product is currently not in stock!</div>
hook_SubscribeToNewsletter
Sign on a visitor for the newsletter on the mailing list “Logged on via website”. In input-elements the action hook will check if enter was pressed and will try to sign on the visitor. The action hook reacts on click-events on all other element types. A succesful log on ensues if a name and valid email address have been entered.
Attention: the implementation code should be nested in an element with the id NewsMailRegistration, otherwise the action hook logic required will not be loaded!
| Element | Obligatory | Description |
| input#NewsEmailEmail | Yes | Mail address of the subschriber. |
| input#NewsEmailName | No | Name of subscriber. |
| input#NewsEmailBName | No | Company name of subscriber. |
Result shown
| Element | Description |
| #NewsLetterEmailError |
Is filled with the result of the logon: - You were succesfully signed on for the newsletter - This email address was added to the list - This is an invalid email address |
Example
<div id="NewsMailRegistration">
<div id="NewsLetterEmailError"></div>
<input type="text" id="NewsMailName" class="hook_SubscribeToNewsletter" placeholder="Uw naam"/><br/>
<input type="text" id="NewsMailEmail" class="hook_SubscribeToNewsletter" placeholder="Uw e-mailadres"/><br/>
<a href="#" class="hook_SubscribeToNewsletter PredefinedButton">
Aanmelden
</span>
</div>
Product Page
You can customize the entire product page, from rearrage to delete or add content, even put confetti on your order button when pressed. Here I will describe how you do all of this. There are a couple of things you need to know before you start. The available variabels, hooks, placeholders an javascript objects. Lets start with the variabels.
Variables
In ProductLayout1.tpl and ProductLayout2.tpl are 2 variabels availble, namely $Page and $Product
| Type | Variabel | Description |
| \Decorator\Protom\Page\Product | $Page | The current product page |
| \Decorator\Protom\Product | $Product | An easy to use product var, the same as $Page->Product |
Placeholders
Place holders are classes where pieces of content will be loaded when hooks or ajaxrequests are triggered. When not implemented the page will not be dynamic. The functions and placeholders have a link based on their name. For example the content of "function ProductPhoto" will be loaded in element with the class "page__product__photo". It is possible to use the same placeholder multiple times.
| Function | Placeholder |
| ProductShortDescription | page__product__short-description |
| ProductReview | page__product__review |
| ProductStock | page__product__stock |
| ProductPrice | page__product__price |
| ProductStaggeredPrice | page__product__staggered-price |
| ProductVariation | page__product__variation |
| ProductAttribute | page__product__attribute |
| ProductAmount | page__product__amount |
| ProductCreditpoint | page__product__creditpoint |
| ProductButton | page__product__button |
| Wishlist | page__wishlist |
| Compare | page__compare |
| ProductMainPhoto | page__product__main-photo |
| ProductDescription | page__product__description |
| ProductProCon | page__product__pro-con |
| ProductKeyword | page__product__keyword |
| ProductProperty | page__product__property |
| ViewedRecently | page__viewed-recently |
| ProductRelevant | page__product__relevant |
| ViewedByOthers | page__viewed-by-others |
| MostViewed | page__most-viewed |
| ProductBundle | page__product__bundle |
| ProductVideo | page__product__video |
| ProductUpload | page__product__upload |
| ProductAttachment | page__product__attachment |
| ProductImage | page__product__image |
| ProductPhoto | page__product__photo |
| Breadcrumb | page__breadcrumb |
| ProductReviewSummary | page__product__review-summary |
| Question | page__question |
| ProductDeposit | page__product__deposit |
| ProductVariations | page__product__variations |
| ProductAttributes | page__product__attributes |
| WishList | page__wish-list |
| ProductInformation | page__product__information |
| ProductProcon | page__product__procon |
| ProductCreditPoint | page__product__credit-point |
Ajax request
Ajax request performs actions and update placeholders with the current data. You as a developer can catch the success and error events of those ajax requests. Or load placeholders with ajax instead on page load to increase performance.
| Action | Description |
| ajaxRequest.load | The "functions" function will be loaded with ajax and place in the correspondending placeholder, see example below |
| ajaxRequest.doOrder | Adds the current $Product to the basket |
| ajaxRequest.doAmountChange | Performs an amount change |
| ajaxRequest.doAttributeChange | Perfomrs an attribute change |
| ajaxRequest.doAddReview | Adds an review to the product |
| ajaxRequest.doProductUpload | Uploads a file to the $Product |
| ajaxRequest.doQuotation | Add the current $Product to the quoation |
Example #1
Loads functions in their places on document ready
$(document).ready(function () {
ajaxRequest.load({
functions: ['ViewedRecently', 'ProductRelevant', 'MostViewed', 'ViewedByOthers', 'ProductBundle'],
onSuccess: function () {
InitViewedRecently();
InitProductRelevant();
InitMostViewed();
InitViewedByOthers();
},
});
});
Example #2
Puts confetti on your screen when order button is pressed.
{if $Page->Template->IsProtom}
<script src="https://cdn.jsdelivr.net/gh/mathusummut/confetti.js/confetti.min.js"></script>
{/if}
<script>
$(document).ready(function () {
ajaxRequest.doOrder({
onSuccess: function () {
confetti.start()
},
});
});
</script>
Hooks
Hooks are class on buttons/links that perform an actions. The mostly do Ajax requests to change a property of the page/product object
| Hook | Description |
| hook__product-upload--delete | Hook to delete an upload, will trigger ajax request: doUpload |
| hook__product-upload | Hook to do an upload, will trigger ajax request: doUpload |
| hook__product-amount--minus | Hook to change amount with minus 1, will trigger ajax request: doAmountChange |
| hook__product-amount--plus | Hook to change amount with plus 1, will trigger ajax request: doAmountChange |
| hook__product-amount | Hook to change amount with the value of [name=product_amount], will trigger ajax request: doAmountChange |
| hook__product-attribute | Hook to change the selected attributes defined in [name=product_attribute] , will trigger ajax request: doAttributeChange |
| hook__product-order | Hook to order the current $Product on the products page |
| hook__product-add-review | Hook to add an review with the content of .form-add-review, will trigger ajax request doAddReview |
| hook__bundle-order | Hook to order the complete bundle defined by attribute data-bundle-id |
| hook__bundle-attribute-dialog | Hook to open a dialog for selecting attributes for the bundle with attribute data-bundle-id |
| hook__product-quotation | hook to add product to a quotation |