Hello,
I need help with installing Mobicred widget for calculating monthly installments. They provided some instructions but I'm not exactly sure where the code must be implemented. I need clear instructions on how to do this. I'm using Dawn theme.
Please see below guide from Mobicred Merchant Portal:
Implementation
In order to implement the Instalment Widget onto your website, add the script below to either your header or footer:
<rel="pre"><script src="https://mobicred.co.za/plugins/instalment.js"></script></rel="pre">
Then once the script has been installed, paste the HTML code below wherever you would like the widget to appear:
<rel="pre"><div id="instalmentCalc" data-amount="1000"></div></rel="pre">
Please note that only one instance of the widget can be implemented per page! The above example represents the most basic implementation of the widget and will use the application's default values to generate your widget. Should you wish to customise either the text or styling check out the Configuration tab for more information.
Passing in the Finance Amount
In order for the widget to work correctly, you will need to dynamically pass the numeric value you want to offer finance on into the widget's data-amount property. Depending on your development environment this can be accomplished in many ways. We will not offer support on this aspect of the integration, however if you would like assistance on the integration, please log a ticket with us.
When using Shopify, the most common place to display the Instalment Widget would be on the product detail page.
You can find this under your Theme code in the "Sections" folder. Look for the product-template.liquid file and place the code below the "price" section. (Around lines 80-100 if you are using a standard template.)
When working on this template page, you will have access to the product object.
Using this object you can gain access to the product.price variable. Due to how Shopify formats currency, you will need to make a few small modifications in order to pass the currency value in correctly.
Once you have added in the necessary currency conversion, you can now pass the variable directly into the data-amount property to dynamically add the price the widget:
<rel="pre"><div id="instalmentCalc"
data-amount="{{product.price | money_without_currency | replace:',','' }}"
data-before="Credit Amount:"
data-after="per month"
data-textColor="#666"
data-bgColor="transparent"
data-padding="0"
data-margin="5"
data-fontFamily="inherit"
data-fontSize="16"
data-fontWeight="normal"> </div></rel="pre">
