forward, be sure to follow the instructions below to ensure a successful installation.<\/p>\n\n\n\n
![\"Configuring](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/configuration-installation.webp\")
<\/figure>\n\n\n\n- \n
- Upload the module folder to your stores
{root}\/modules<\/code> folder<\/li>\n\n\n\n- Once uploaded, login to your Prestashop Back Office and head over to the Modules section<\/li>\n\n\n\n
- Search for the module and click Install<\/li>\n\n\n\n
- After a successful installation, the module configuration screen is presented to you. More details on this in the next section.<\/li>\n<\/ul>\n\n\n\n
Creating your first product<\/h2>\n\n\n\n
To best understand how to configure the module, lets embark on a step by step guide to creating your first prescription glasses product for your Prestashop online store.<\/p>\n\n\n\n
After installing the module, open up the module configuration<\/strong> and you will be presented with the following tabs: Steps, Lens Types, Lens Packages, Prescription Templates, Options<\/strong> and Mass Assign<\/strong>.<\/p>\n\n\n\n
Lets\u2019 start by creating some steps.<\/p>\n\n\n\n
Steps<\/h3>\n\n\n\n
When a customer arrives at the product page for your prescription glasses, they will see a button titled Chooose Lens which will open a full screen modal configurator. This modal will allow the customer to walk through a series of steps to fully customize aspects of the Frame and lenses they wish to purchase.<\/p>\n\n\n\n
There are 4 possible step types available for you to add, namely:<\/p>\n\n\n\n
Lens Type<\/strong><\/p>\n\n\n\n
This allows your customer to choose the type of lens, for example, lenses for Distance, Reading or Progressive. The module installs some predefined lens types for you (accessible under the Lens Types tab).<\/p>\n\n\n\n
Therefore this step in the modal, will display the lens types for the customer to select.<\/p>\n\n\n\n
Prescription<\/strong><\/p>\n\n\n\n
This step will display the prescription related fields for your customer to enter.<\/p>\n\n\n\n
Lens Package<\/strong><\/p>\n\n\n\n
The step allows the customer to select the lens package they wish to purchase. This is for the different quality \/ thickness of lenses you may offer. The step is optional.<\/p>\n\n\n\n
Options<\/strong><\/p>\n\n\n\n
This step allows you to add additional options from a rich variety of option types; such as color, dropdowns, Checkboxes etc.<\/p>\n\n\n\n
The purpose of this step is to allow the glasses package to be further customized by the customer, for example – tint of the frame or gradient choice etc. This step is also optional and furthermore you may add more one Options Step which is useful if your glasses product will contain many options which are best organised across multiple steps in the modal.<\/p>\n\n\n\n
The module by default will already have installed 3 of the 4 steps for you (Lens Types, Prescription Templates and Lens Packages). If you need to add additional steps for options click the
New Step<\/code> button, which will present you with the form to add a new step.<\/p>\n\n\n\nLens Types<\/h3>\n\n\n\n
Lens Types should be the first step that the customer arrives at when purchasing prescription glasses. The module comes with some pre-defined lens types for you to use. You can edit them if you need to adjust the images or descriptions installed by default.<\/p>\n\n\n\n
Later, when setting up the product configuration, we\u2019ll be able to define price impacts and also associate lens types with different prescription templates.<\/p>\n\n\n\n
If you need to add your own Lens Type, simply click the
New Lens Type<\/code> button from the top right corner of the scree. This will present you with a short form where you can setup the title \/ descriptions of the new lens type.<\/p>\n\n\n\nLens Packages<\/h3>\n\n\n\n
Under the lens packages tab you will see the global default lens packages installed by the module for the purposes of demonstration. Lens Packages allow you to offer different grades of lenses at an additional price to the customer. Lens Packages often used to offer different lens thicknesses therefore you can even limit which lens packages are available based on the Sph values the customer has provided during the prescription step. For this reason when setting up our product later it will be important to ensure this step is displayed after the Prescription step – but more on that later.<\/p>\n\n\n\n
You can customize existing lens packages installed by the module or add your own step by clicking the New Lens Package button in the top right
of the screen.<\/p>\n\n\n\nPrescription Templates<\/h3>\n\n\n\n
Prescription Templates allow you to control which fields are available to the customer to provide prescription related information. Each template
you create may offer different options or range of values.<\/p>\n\n\n\nClick on the
New Prescription Template<\/code> and you will see something similar to the below:<\/p>\n\n\n\n![\"Managing](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/configuration-prescription-template.webp\")
<\/figure>\n\n\n\nYou can expand each panel, for example the Sph Panel, where you\u2019ll see a list of possible values as shown below.<\/p>\n\n\n\n
Select all the values you want to be made available for this option (in our case – sph).<\/p>\n\n\n\n
Now repeat the same step for all the other options.<\/p>\n\n\n\n
Now save your prescription template and we can use it later when we\u2019re setting up a product.<\/p>\n\n\n\n
Options<\/h3>\n\n\n\n
The options tabs allow you to set up global custom options which you can later use to assign to products. These can then be organised into steps and the customer will be able to further customize their product based on the options you provide them with.<\/p>\n\n\n\n
Click on the New Option<\/strong> button to add a new global option. You\u2019ll see the following form fields:<\/p>\n\n\n\n
Internal Name<\/strong>
An internal name used to help you identify the option in the back office.<\/p>\n\n\n\nOption Title (multi language)<\/strong>
The title of the option as the customer will see it.<\/p>\n\n\n\nOption Hint (multi language)<\/strong>
Additional information displayed to the user relating to the option,<\/p>\n\n\n\nOption Type<\/strong>
Select the type of option, the following types are available:<\/p>\n\n\n\nCheckboxes,
Colors,
Date,
Dropdown,
File,
Images,
Radio,
Textbox<\/p>\n\n\n\nThe types available are pretty much self explanatory. For options with multiple values (checkboxes and dropdowns for example). After creating the option, you\u2019ll have an additional interface available to add and and manage the values to appear within the option.<\/p>\n\n\n\n
For multi language stores you can use the language dropdown selector to provide titles and description for each language.<\/p>\n\n\n\n
Mass Assign<\/h3>\n\n\n\n
The Mass assign tab becomes more useful after we\u2019ve setup and created our first product (which we will do next). The Mass Assign will allow you to clone the entire product configuration of a source product and apply it across multiple destination products or categories.<\/p>\n\n\n\n
Below is the mass assign interface<\/p>\n\n\n\n
![\"Mass](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/configuration-mass-assign.webp\")
<\/figure>\n\n\n\nIn the Product field, search for a product which contains the product configuration you wish to clone. After selecting the product from the search results, either choose a single category (which will also allow you to optionally select specific products in that category) or choose multiple categories.<\/p>\n\n\n\n
Click Save<\/strong> and the product config will now be duplicated across the categories or products you have selected.<\/p>\n\n\n\n
Now that we have reviewed the global configuration, we can now setting up our first product.<\/p>\n\n\n\n
Product Configuration<\/h2>\n\n\n\n
To begin setting up a product, navigate to Catalog > Products and edit the product you wish to setup. Under the modules tab, choose to configure the Prescription Glasses module. You should see the following screen:<\/p>\n\n\n\n
![\"Setting](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/product-configuration-options.webp\")
<\/figure>\n\n\n\nFrom the sidebar, set the module enabled for this product to yes and then click the save changes<\/strong> button.<\/p>\n\n\n\n
Next, add some steps to the product, in the following order:<\/p>\n\n\n\n
Lens Type
Prescription
Lens Package
Options (if you have created an additional step for some custom options).<\/p>\n\n\n\nLens Type Step<\/h3>\n\n\n\n
A Panel for each step should now appear. Under the Lens Type panel, click the
Add Lens Type<\/code> button, and from the new entry now, select the lens type<\/strong> and associated Prescription Template<\/strong> from the corresponding drop downs. You can also define a price impact for the lens type if appropriate. The Lens Type and Prescription templates we created earlier in the global module configuration will appear here for selection.<\/p>\n\n\n\n![\"Assigning](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/product-configuration-lens-types.webp\")
<\/figure>\n\n\n\nRepeat this step for any other lens types you wish to add for this product.<\/p>\n\n\n\n
Prescription Step<\/h3>\n\n\n\n
The Prescription step doesn\u2019t require any configuration. The step wil populated with the relevant fields from the prescription template based on the lens type the customer selects.<\/p>\n\n\n\n
However, you may wish to add some custom options here. The most common would be a file upload field and a text field (for additional information the customer can provide related to the prescription). These fields will then appear in the Prescription step during the customer purchase flow.<\/p>\n\n\n\n
To add these options, first ensure you have created them in the global configuration we discussed earlier (under the Options tab). From the sidebar, under the Add new option<\/strong> section, select the field you wish to add and then click
add<\/code>. When you add the field it will appear in the main area, use the drag handle to drag the option into the prescription step where it will be placed.<\/p>\n\n\n\n![\"Assigning](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/product-configuration-prescription.webp\")
<\/figure>\n\n\n\nLens Package Step<\/h3>\n\n\n\n
The setup for this step is similar to the Lens type step. Click the Add Lens Package button, which will allow you to select a lens package from the global list of Lens Packages you created under the global module configuration and optionally enter a price impact for it. Repeat this for all the lens packages you wish to add for this product.<\/p>\n\n\n\n
Options Step<\/h3>\n\n\n\n
If you\u2019ve created any additional steps for custom options related to this product, such as color or transition options, you should ideally place them within options steps. In most cases you will require one Options step, but you may add as many options steps as you need which may be useful if your prescription glasses will contain a larger number of custom options and you wish to organise them into separate steps.<\/p>\n\n\n\n
Ensure you\u2019ve added the Options step and after doing do so; add a new option and drag into the Options step. From here you can add and manage values and price impacts for each of the options you add, similar to Lens Types and Lens Packages above.<\/p>\n\n\n\n
![\"Assigning](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/product-configuration-custom-options.webp\")
<\/figure>\n\n\n\nNow you\u2019re all done, the product has been setup. Click the Save changes button again and we\u2019re ready to review the product in the store front.<\/p>\n\n\n\n
Front End<\/h2>\n\n\n\n
After fully configuring our product, the module should appear in your store. The product page will offer the customer the ability to choose their lens and frame options via a button:<\/p>\n\n\n\n
![\"Choose](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/front-end-product-choose-lenses.webp\")
<\/figure>\n\n\n\nThe button will then open up a full screen modal which will walk the customer through the various steps we have have configured for the product. The first step would be the lens type for the customer to choose:<\/p>\n\n\n\n
![\"Choose](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/front-end-product-lens-type-step.webp\")
<\/figure>\n\n\n\nAfter which the Prescription fields (based on the prescription template we have associated with the selected lens type) along with additional options such as the possibility to upload a prescription and add additional information:<\/p>\n\n\n\n
![\"Enter](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/front-end-product-prescription-step.webp\")
<\/figure>\n\n\n\nThe next step would be the lens packages we configured as follows:<\/p>\n\n\n\n
![\"Choose](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/front-end-product-lens-packages-step.webp\")
<\/figure>\n\n\n\nAnd finally, some additional options such as lens transition options, frame colors etc:<\/p>\n\n\n\n
![\"Choose](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/front-end-product-options-step.webp\")
<\/figure>\n\n\n\nAt the final step of the walk through the customer can add the entire set of options to their basket. The basket will show the customer their prescription and other relevant information:<\/p>\n\n\n\n
![\"Prescriuption](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/cart.webp\")
<\/figure>\n\n\n\nFrom here the customer can proceed through the checkout process as they would with any other normal product.<\/p>\n\n\n\n
Back Office<\/h2>\n\n\n\n
Orders placed for prescription glasses appear in the back office as normal orders would in the orders management system. However additional details are displayed in the order details page where you can see the details of the prescription information the customer has chosen, along with information relating to the lens type and package selected. Further any additional custom options you have added will also appear in this location. A typical order may look something like the below:<\/p>\n\n\n\n
![\"Prescription](\"\/blog\/wp-content\/uploads\/documentation-images\/prescriptionglasses\/back-office-order-details.webp\")
<\/figure>\n\n\n\nThis concludes the user guide for the Prescription Glasses module for Prestashop. An easy way to sell prescription glasses online in your E-commerce store.<\/p>\n\n\n\n