General description
The « I made it » plugin allows registered users having products(model, design, software and etc), to share the result of what they do with their products.
Features:
1. The « I made it » pages and widgets
2. The plugin configuration interface
3. A multilingual management for texts written by the users (asynchronous calls to the google Translate web service)
4. The plugin pages/interfaces for the « report inappropriate picture »
Interfaces
Widgets
Widget « I made it »
A widget should be placed on the product pages.
It consists of:
- A text « Made »
- A link « View all » referring to /ProductName/made
- An overview of the latest « made » pictures through thumbnails corresponding to the last pictures that users have uploaded ; each refers to :
/ProductName/made/Number if the user is not registered or not the creator of the made-model,
Or to
/customer/ProductName/made/Number if the user is registered and the creator of the made-model.
The number of thumbnails to be displayed in the widget is defined in the plugin configuration.
- An « I made it !» button allowing users to upload the product pictures ; it refers to /customer/ProductName/add-a-made
If the user is not registered, he/she is prior redirected to the login/registration page.
Widget MadeOption
This widget is displayed in areas "account_navigation_after" and "mobile_account_navigation_after."
Its default name is “Made”.
It allows the access to the page /customer/made and manage the highlighting of the current page in the same way as the "MY ACCOUNT" menu.
Pages
Made page: /ProductName/made
This page contains a title : Makes of « ProductName ».
« ProductName » refers to the product page : /ProductName
The number of « made » is shown in parentheses.
This page is composed of blocks comprising a thumbnail of the product and informations about users who have done/printed this product.
A block consists of :
- A thumbnail of the first picture uploaded by the maker : refers to the maker made-model page : /ProductName/made/Number
- The product’s title
- The text « Made by » followed by the name of the maker which is a link referring to :
/ProductName/made/Number if the user isn’t re gistered or if he/she isn’t the creator of the made-model or to
/customer/ProductName/made/Number if the user is registered and only if he/she is the creator of the made-model.
- The time indicator: eg: 3 hours ago – displayed to year(s)/day(s)/hour(s) or minute(s).
Texts (title and maker’s name) have to get a size adapted to the thumbnail width.
If these texts are wider than the thumbnail, add ellipsis at the end.
Add-a-made page: /customer/ProductName/add-a-made
If the user is not identified, he/she is before redirected to the login/registration page.
This page allows the maker to upload one or more pictures and write a description.
The MyAccountNavigation.cshtml menu is present.
This page displays the following informations:
- Title of the page : « I made it ! »
- Text : « Source »
- Thumbnail of the main picture’s source model
- « ModelTitle » referring to the product page /ProductName
- Text « by » followed by the « DesignerName », referring to /ManufacturerName
- Text : « Gallery »
- Text : « Upload pictures of your creation » (at least 1 mandatory picture)
- Block containing a drag&drop tool for pictures and an upload system through a « Browse… » button
The picture preview thumbnails are displayed as upload proceed.
The uploads are limited to 5 pictures max.
The allowed file formats are : JPG, JPEG, GIF, PNG
The weight of a file is limited to 500Kb
- Texts : « Description » and « Limited to 1000 characters »
- An optional text field, limited to 1000 characters having a multilangual management.
- A « Create » button which creates the made-model picture in the database and then redirect the user to his/her made-model page : /customer/ProductName/made/Number
By product, each made-model has a single Number.
Edit-a-made page: /customer/ProductName/made/Number/edit
If the user is not identified, he/she is before redirected to the login/registration page.
This page is only accessible by a registered user who is the creator of the edited made-model.
A user attempting to access a made-model edit page without being the creator of this made-model, is redirect to his/her customer account: /customer/info
The edit-a-made page is the editable version of the add-a-made page (/customer/ProductName/add-a-made).
The MyAccountNavigation.cshtml menu is present.
A « Remove it » link is present under each uploaded picture.
If the link is activated, the associated picture is deleted.
2 action buttons are placed after the description block:
- A « Save » button to backup the made-model (picture(s) and description)
- A « Delete » button to delete the made-model
If the « Delete » button is clicked, a confirmation pop-in is displayed, asking the user to confirm the deletion of his/her made-model :
Yes = Delete the made-model from the database and redirect the user to his/her specific made-model page : /ProductName/made/Number
No = Close the pop-in
User makes page : /customer/made
If the user is not identified, he/she is referred prior to the registration/login page.
The user makes page contains the MyAccountNavigation.cshtml menu.
This page consists of:
- A title "My makes - " followed by the number of makes created by the user himself/herself from the add-a-made page (/customer/ProductName/add-a-made).
- Blocks of makes (if existing), referring to the specific made page: /customer/made/Number/edit
Each comprising: The main made product thumbnail, the original product name and the maker’s name: text "Made by" followed by the maker’s name.
Texts (title and maker’s name) have to get a size adapted to the thumbnail width.
If these texts are wider than the thumbnail, add ellipsis at the end.
User specific make page : /ProductName/made/Number OR /customer/ProductName/made/Number
The specific make page shows the made-model picture(s) and complementary informations.
A user attempting to access an unknown page (eg. /Flippy-the-frog/made/23) is redirected to the product page concerned (eg. /Flippy-the-frog).
It consists of :
- The product title
- The main maker’s uploaded picture with thumbnails below corresponding to the other pictures if he/she uploaded more than 1 picture.
- A link : « Report inappropriate picture » (see details below)
- An « edit this make » link, reffering to /customer/ProductName/made/Number/edit displayed only if the user is identified and creator of the current made-model.
- The « Source » informations:
- Text : « Source »
- Thumbnail of the original product referring to /ProductName
- Original product title referring to /ProductName
- Text : « by » followed by the ManufacturerName, reffering to /ManufacturerName
- The « Also made » informations:
- Text : « Also made »
- Thumbnails of the other existing made-models, each referring to the specific make page : /ProductName/made/Number
- Link : « View all » reffering to the made page : /ProductName/made
- The description block displaying the tab corresponding to the user current language.
Configuration interface
The plugin configuration page offers for the "I made it" widget :
- a text field to enter multiple locations separated by commas. By default it is set up as : productdetails_before_collateral;mobile_productdetails_after_pictures
If this field is left blank, the widget isn’t displayed.
- the possibility to define the number of made thumbnails to be displayed in the « I made it » widget.
- the possibility to enable/disable the innapropriate picture plugin described below, through a checkbox system.
Admin interfaces
The configuration page of the plug-in lets specify:
- The location of the plug-in (the "Inappropriate picture(s)" link) (ex. "productdetails_overview_top")
- The nopCommerce email account sending the confirmation email
- The email address receiving the Bcc
- The use of a captcha to protect the complaint form (without effect if reCaptach hasn’t been enabled in the "Security settings " tab of the “ General And Miscellaneous Settings " page)
The following items are configured from the "Languages" page:
- Wording of the link on the product pages
- Texts of the complaint form and of the confirmation page
The "Message Template" page lets enter the message sent to the user (containing variables to include the text of the complaint, the IP address, the time and date of the request and the link to the product page).
Storage
The needed information to run the plugin is stored in the following table (SQL creation code is provided):
Made (Made.sql)
- Id
- ProductId (product id)
- CustomerId (product id)
- Description (description text)
Description texts storage is managed like the other textual multilingual resources, ie:
- Use of Description field in the Made table for the default version
- Storage and retrieval of the record:
- LocaleKeyGroup "MadeDescription" LocaleKey: "Description"; LocalValue: description in the LocalizedProperty table for other installed languages.
Made_Picture_Mapping (Made_Picture_Mapping.sql)
- Id
- MadeId (made id)
- PictureId (picture id)
- DisplayOrder
(made pictures storage is modeled on product pictures storage)
Records are created on first use (reading or updating) if doesn’t exist.
The above tables are neither created nor destroyed during the installation or uninstallation of the plugin. If the table or one of its field is missing during the installation, an error message is displayed.