- Overview
- Setup Configurator Theme
- Setup IFrame
- Add Coverking Merge code & Style to Product Details page
- Turn on Coverking Add On in the Admin
- Add Coverking Products to the Catalog
- View on Product Details Page
- Appendix A: Material Group Codes and Product Codes
Overview
Implementation of the Coverking configurators requires a Dealer account with Coverking. If you don't already have a dealer account, you can apply for one here New Dealer Application - Coverking. The dealer portal to setup the configurator is located here Dealer Portal - Coverking. Follow these steps to enable the Coverking configurator and add products from Coverking’s catalog into your store.
Step 1. Setup Configurator Theme
In the Coverking Portal, go to the Iframe Theme’s page.
Select a theme for your Configurator. Coverking controls the style of this configurator.
Step 2. Setup iFrame
In the Coverking Portal, go to iFrame Setup and Configurations.
The settings marked with the green arrow are required for our integration with Coverking.
-
Cart URL: Required by Coverking. We don’t use this value, since we set this dynamically. You can set this to anything.
-
Session Variable: ON: SessionId
-
Item ID: ON: ItemID
-
Item Description: ON: ItemDescr
-
Product SKU: product_sku
-
Quantity: ON: quantity
-
Price Variable: ON: ItemPrice
-
Add to Cart Alternative Method: ON
-
Prod(Variable) ON
-
mCat (Variable) ON
-
The 3 options for the Logo are optional
Step 3. Add Coverking Merge code & Style to Product Details page
Now open your Storefront admin, and add the above code into a VisibilityArea with id=”CoverkingArea” inside the product details page:
Then add the below styling for the Coverking iFrame in the CSS Editor. Feel free to modify this to match your theme best!
Step 4. Turn on Coverking Add On in the Admin
Inside your Storefront admin go to Tools > Apps & Addons > Coverking. Enter your dealer ID into the app settings section.
Step 5. Add Coverking Products to the Catalog
Once you add a product, go to the new tab named ‘Configurators’.
Select Coverking.
Specify the Product Code and Material Code for that product. The current list of these codes are on the Dealer Portal. A snapshot of the current list is shown below:
Step 6. View on Product Details Page
Clicking on Customize & Add To Cart will display the Coverking in an iFrame.
After selecting the fitment, options and color, you can add each item to cart & it will go straight to the store cart.
Clicking on View Cart / Checkout will direct the user to the (theme setting shown below) action that happens after adding an item to the cart.
Note: The ##ITEMDESCRIPTION## merge code should be used in the Header HTML(for the small cart) and in the Large Cart, so the user can see which item is which. The following image shows the cart with the description merge code as suggested (left), and the cart without the merge code(right).
Appendix A: Material Group Codes and Product Codes
|
5 |
ALCANTARA |
CSC |
Seat Cover |
|
8 |
AUTOBODY ARMOR |
CVC |
Carcover |
|
9 |
Ballistic Solid Color |
CSC |
Seat Cover |
|
13 |
COVERBOND 4 |
CVC |
Carcover |
|
16 |
GENUINE LEATHER |
CSC |
Seat Cover |
|
19 |
Molded Carpet |
MDC |
Dash Cover |
|
20 |
Mosom Plus |
CVC |
Carcover |
|
21 |
Poly Carpet |
CDC |
Dash Cover |
|
22 |
Neoprene |
CSC |
Seat Cover |
|
23 |
Neosupreme |
CSC |
Seat Cover |
|
24 |
Poly Carpet |
CRD |
Rear Deck Cover |
|
25 |
Poly Cotton |
CSC |
Seat Cover |
|
26 |
Premium Letherrette |
CSC |
Seat Cover |
|
28 |
Custom Sunshield |
CSS |
Sunshield |
|
29 |
Saddleblanket |
CSC |
Seat Cover |
|
30 |
Satin Stretch |
CVC |
Carcover |
|
32 |
SpacerMesh |
CSC |
Seat Cover |
|
33 |
Stormproof |
CVC |
Carcover |
|
34 |
Suede |
CSC |
Seat Cover |
|
35 |
Silverguard |
CVC |
Carcover |
|
36 |
Suede |
CRD |
Rear Deck Cover |
|
37 |
Triguard |
CVC |
Carcover |
|
38 |
Suede |
CDC |
Dash Cover |
|
39 |
Velour |
CDC |
Dash Cover |
|
40 |
Velocitex |
CCL |
Custom Cargo Liners |
|
41 |
Velour |
CSC |
Seat Cover |
|
42 |
Velour |
CRD |
Rear Deck Cover |
|
43 |
Neosupreme Mossy Oak |
CSC |
Seat Cover |
|
44 |
Designer Print Velour |
CDC |
Dash Cover |
|
45 |
Neoprene Realtree |
CSC |
Seat Cover |
|
51 |
Velocitex Plus |
CMA |
Front End Mask |
|
52 |
Neoprene Camo Mossy Oak |
CSC |
Seat Cover |
|
53 |
Neosupreme Camo Real Tree |
CSC |
Seat Cover |
|
54 |
Designer Print Velour |
CRD |
Rear Deck Cover |
|
56 |
Ballistic Camo Multi-Cam |
CSC |
Seat Cover |
|
57 |
Ballistic Camo Kryptek |
CSC |
Seat Cover |
|
58 |
Neosupreme Camo Digital |
CSC |
Seat Cover |
|
59 |
Neosupreme Camo Traditional |
CSC |
Seat Cover |
|
60 |
Neosupreme Designer Print |
CSC |
Seat Cover |
|
62 |
NEXT Camo Custom |
CSC |
Seat Cover |
|
63 |
Mesh |
MSC |
Molded Seat Covers |
|
64 |
A-TACS |
CSC |
Seat Cover |
|
65 |
A-TACS Tactical |
CTSC |
Tactical Seat Cover |
|
66 |
Rhinohide |
CSC |
Seat Cover |
|
67 |
Snuggleplush Custom |
CSC |
Seat Cover |
|
71 |
Tactical Ballistic Camo Kryptek |
CTSC |
Tactical Seat Cover |
|
72 |
Tactical Ballistic Camo Multi-Cam |
CTSC |
Tactical Seat Cover |
|
73 |
Tactical Ballistic Solid Color |
CTSC |
Tactical Seat Cover |
|
74 |
Coverking Custom Frostshield |
CFS |
Frostshield |
|
75 |
Licensed Collegiate |
CSC |
Seat Cover |
|
84 |
Build Your Own Indoor Satin Stretch |
CVC |
Carcover |
|
85 |
Build Your Own Outdoor Stormproof |
CVC |
Carcover |
|
87 |
Universal Seat Cover |
USCHI |
Universal Seat Cover |
|
88 |
Value Custom Seat Cover |
FSC |
Seat Cover |
|
90 |
Moving Blanket |
CVC |
Car Cover |
|
91 |
Designer Floormat Premium Plush |
DFM |
Designer Floormat |
|
92 |
Designer Floormat Luxury Plush |
DFM |
Designer Floormat |
|
93 |
Designer Floormat Loop |
DFM |
Designer Floormat |
|
94 |
Designer Floormat Vinyl |
DFM |
Designer Floormat |
|
95 |
Steering Wheel Grup Designer |
M10 |
Steering Wheel Grip |
|
96 |
Seatbelt Cushion Designer |
M2 |
Seatbelt |
|
97 |
Utility Caddy Designer |
M7 |
Utility Caddy |
|
98 |
Steering Wheel Grip Regular |
M10 |
Steering Wheel Grip |
|
99 |
Seatbelt Cushion Regular |
M2 |
Seatbelt Cushion |
|
100 |
Utility Caddy Regular |
M7 |
Utility Caddy |
|
101 |
Neosupreme Kryptek |
CSC |
Seat Cover |
|
102 |
Skanda Digital Camo |
CSC |
Seat Cover |
|
104 |
Neosupreme Tactical Kryptek |
CTSC |
Tactical Seat Cover |
|
105 |
Universal Seat Cover Vest Collegiate |
USCHI |
Universal Seat Cover Vest Collegiate |
|
107 |
Ulti-Suede Collegiate |
CSC |
Seat Cover |
|
111 |
SpartanShield |
CSC |
Seat Cover |