Getting Started with Magento

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

1. Unpack the extension ZIP file on your computer.
   
2. 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.
   
3. Connect to your Magento directory with SSH.
   
4. Run the following commands:
   php bin/magento setup:upgrade
   php bin/magento setup:di:compile
5. If your store is in production mode, deploy the static content:
   php bin/magento setup:static-content:deploy

Installation using Composer

1. Install the plugin via Composer
   composer require clyde/module-warranty
   
   
2. 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:

1. Login to the Admin panel
2. Navigate to Stores > Configuration > Clyde > Extended Warranty
3. Set the following:

• Enabled: Yes
• Show Warranty in Frontend: Yes
• Clyde API Key: <your_clyde_api_key></your_clyde_api_key>
• Clyde Secret Key: <your_clyde_secret_key></your_clyde_secret_key>
• Clyde API Environment URL: <clyde_api_environment_url> </clyde_api_environment_url>

‍

How to obtain API keys

1. Log in to the Clyde Dashboard at https://app.joinclyde.com/login
2. 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.

3. Copy your API keys, and make sure you have chosen “Request Signing” for API security options.

4. Once you have finished testing Clyde on your site make sure to switch to 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.