How to set up options for prescription glasses

You can check out our demo set up for prescription glasses by clicking here

We used the product option grid.

• Go to your product in the BCPO App.
• Click Add Virtual Option
• Choose Grid for the type of product option.

In the example on our demo page I entered in this data.

For the Keys for x-Axis I entered:

SPH, CYL, AXIS, ADD

For the Keys for y-Axis I entered:

OD (Right), OS (Left)

Below are some of the numbers we used in the demo so you can easily copy and paste them into your product options.

+8.00, +7.75, +7.50, +7.25, +7.00, +6.75, +6.50, +6.25, +6.00, +5.75, +5.50, +5.25, +5.00, +4.75, +4.50, +4.25, +4.00, +3.75, +3.50, +3.25, +3.00, +2.75, +2.50, +2.25, +2.00, +1.75, +1.50, +1.25, +1.00, +0.75, +0.50, +0.25, 0.00, -0.25, -0.50, -0.75, -1.00, -1.25, -1.50, -1.75, -2.00, -2.25, -2.50, -2.75, -3.00, -3.25, -3.50, -3.75, -4.00, -4.25, -4.50, -4.75, -5.00, -5.25, -5.50, -5.75, -6.00, -6.25, -6.50, -6.75, -7.00, -7.25, -7.50, -7.75,  -8.00, -8.25, -8.50, -8.75, -9.00, -9.25, -9.50, -9.75, -10.00,-10.25, -10.50, -10.75, -11.00, -11.25, -11.50, -11.75, -12.00, -12.25, -12.50, -12.75, -13.00, -13.25, -13.50, -13.75, -14.00, -14.25, -14.50, -14.75, -15.00,

+6.00, +5.75, +5.50, +5.25, +5.00, +4.75, +4.50, +4.25, +4.00, +3.75, +3.50, +3.25, +3.00, +2.75, +2.50, +2.25, +2.00, +1.75, +1.50, +1.25, +1.00, +0.75, +0.50, +0.25, 0.00, -0.25, -0.50, -0.75, -1.00, -1.25, -1.50, -1.75, -2.00, -2.25, -2.50, -2.75, -3.00, -3.25, -3.50, -3.75, -4.00, -4.25, -4.50, -4.75, -5.00, -5.25, -5.50, -5.75, -6.00,

1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180,

0.00, +0.25, +0.50, +0.75, +1.00, +1.25, +1.50, +1.75, +2.00, +2.25, +2.50, +2.75, +3.00, +3.25, +3.50, +3.75, +4.00, +4.25, +4.50, +4.75, +5.00

• Add a new virtual option
• Make the title “PD”
• Use the option type “dropdown”
• Add the values

I used the following values:

55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,

Next I created the option for Two PD numbers.

• Add a new virtual option
• Make the title “Two PD numbers“
• Use the option type “checkbox“
• Add the value Yes

When the customer clicks Yes it will bring up the options for the second PD number. Lets set that up now.

• Add a new virtual option
• Make the title “Second PD“
• Use the option type “dropdown”
• Click the conditional checkbox
• Select “Two PD numbers”, “Yes”
• Add the values

Values

55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,

<style>
#bcpo .bcpo-table thead tr:first-child td {
background: white !important;
border: 1px solid gray !important;
color: black !important;
}</style>

This CSS handles the styling at the top. It changes the background color of the first row as well as the border color and text color. The text color is “color” in the css.