This documentation is intended to provide integration and troubleshooting guidance to developers to launch the Clyde Magento 2 extension. Once your store is connected, we’ll match your products to contracts backed by our portfolio of insurers and administrators, and you will be able to prompt shoppers to add product protection to their purchase on your product page, catalog, in their cart, and through our Post Purchase program.
Prerequisites
Developers who want to effectively integrate and troubleshoot this plugin must be at least experienced with the following:
PHP
Magento 2
jQuery
RequireJS
Javascript
Developer Toolbar (Available in browsers like Chrome, Firefox, and Brave)
Xdebug
Installation
Clyde Warranty plugin can be installed using either FTP/SSH or Composer.
Once installed you’ll need to obtain login credentials by submitting a connection request or by reaching out to sales@joinclyde.com. You’ll be able to create additional accounts for your team in the Settings page of your dashboard or by contacting your customer success manager.
Installation using FTP/SSH
Unpack the extension ZIP file on your computer.
Connect to your website source folder with FTP/SFTP/SSH client and upload all the files and folders from the extension package to the “app/code” folder of your Magento installation. Please use the “Merge” upload mode. Do not replace the whole folders. Just merge them. This way your FTP/SFTP client will only add new files. This mode is used by default by most FTP/SFTP clients software.
Connect to your Magento directory with SSH.
Run the following commands: php bin/magento setup:upgrade php bin/magento setup:di:compile
If your store is in production mode, deploy the static content: php bin/magento setup:static-content:deploy
Installation using Composer
Install the plugin via Composer composer require clyde/module-warranty
Then run the following commands: php bin/magento setup:upgrade php bin/magento setup:di:compile
If your store is in production mode, deploy the static content: php bin/magento setup:static-content:deploy
Configuration
To configure the Clyde extension:
Login to the Admin panel
Navigate to Stores > Configuration > Clyde > Extended Warranty
Set the following:
Enabled: Yes
Show Warranty in Frontend: Yes
Clyde API Key: <your_clyde_api_key></your_clyde_api_key>
Locate your Clyde API keys in the Developers section of the Settings page (gear icon in the bottom part of the sidebar) on your dashboard.
Click this icon to navigate to the Settings page. And scroll down to the Developers section.
Gear icon - Settings
Copy your API keys, and make sure you have chosen “Request Signing” for API security options.
Test API Keys
Once you have finished testing Clyde on your site make sure to switch to live API keys.
Live API Keys
Troubleshooting
Below are four of the more common issues developers run into while integrating the Clyde extension with their Magento 2 store and guidance on how to resolve those issues:
1. Contract does not appear on the category page even if the products are matched
Cause: The element that has a selector (class) "clyde-product-list-sku" is missing.
Solution: Using the Developer toolbar, inspect the product that has a contract on category page. Look for the element that has a class "clyde-product-list-sku and make sure that the "widget-data" attribute has a value which is the SKU of the particular product you are checking.
2. Contract selection does not appear on the product page
Cause: The "skuList" is empty
Solution: On the product page, view the source of the page and look for "warrantyOptions" in the "<script type="text/x-magento-init"> ... </script>" tag and check if the "skuList" array has the value of the SKU of the particular product.
3. "Add Product Protection" button does not appear on the cart page on the products that have contracts
Cause:
The element that has a selector like "clyde-product-warranty-<quote_item_id>" is missing</quote_item_id>
or
The template "checkout/cart/item/renderer/warranty.phtml" was not properly injected in the layout XML "checkout_cart_index.xml"
Solution:
Using the Developer toolbar, inspect the product that has a contract on the cart page. Look for the element that has a selector (ID) like "clyde-product-warranty-<quote_item_id>". If it is not there, double-check that it is present in the template file "checkout/cart/item/renderer/warranty.phtml"</quote_item_id>
Make sure that in layout update XML app/code/Clyde/Warranty/view/frontend/layout/checkout_cart_index.xml the template was properly injected like this:
4. The Clyde modal isn’t working on the cart page after clicking the ‘Add product protection’ button
Cause: There is a JS error on the Clyde Widget
Solution: Make sure that in the "appendToSelectorWithSku" method, the third parameter which is the modal close callback does not produce any JS error.
Do not forget to change your API keys from Test to Live
Only sales made with live keys configured will be recorded and eligible.