This article will help you install Kiwi Sizing on your PinnacleCart store v.3.9.0 and above.

Product attributes supported for matching:

PinnacleCart product attributesKiwi Sizing product matching condition
Product IDProduct ID
Search KeywordsProduct Tags
SKUProduct SKU
Manufacturer NameProduct Brand
Category NameProduct Categories

First Login and access the admin section of your PinnacleCart store.


1. On the side panel, click on Front-End > Snippets, then click "Add Snippet" button at top right

2. Fill in the Edit Snippet form and Save it

Use the following values:

Script Nameany e.g. 'Kiwi Sizing'
Script IDwill be populated automatically
Priority5
LanguageJavascript
TypeChunk
PlacementAfter Body Tag
Visible?Yes
LocationProduct Details


For the field "Paste or type your scripts below", copy and paste the following code:

<!-- KiwiSizing v1.0.0 Integration !-->
<script>
!function(t,n,s,e,i){function r(t){try{var s="; "+n.cookie,e=s.split("; "+t+"=");if(2==e.length)
return e.pop().split(";").shift()}catch(i){}return null}t[i]=t[i]||{},t[i]._queue=[];
const o="on setShopID setUserID setUserEmail setLanguage loadSizing".split(" ");
for(var a=0;a<o.length;a++){const c=o[a];t[i][c]=function(){var
n=Array.prototype.slice.call(arguments);return n.unshift(c),t[i]._queue.push(n),t[i]}}const
l=r("_ks_scriptVersion")||t.ks_version||"";var u=n.createElement(s);
n=n.getElementsByTagName(s)[0],u.async=1,void 0!==t.ks_load_async&&(u.async=t.ks_load_async),
u.src=e+"?v="+l,u.id="ks-integration",n.parentNode.insertBefore(u,n)}(window,document,"script",
"https://cdn.static.kiwisizing.com/SizingPlugin.prod.js","ks");
</script>
<!-- End KiwiSizing Integration !-->
<script>
var kiwi_shop_id = "REPLACE_ME_KIWI_SIZING_SHOP_ID";
</script>


Make sure you replace the REPLACE_ME_KIWI_SIZING_SHOP_ID with your Kiwi Sizing shop ID. The ID looks something like integrationdemo-a71e-8c00a6ecb926

 3. Open File manager on the side panel: click Settings > Advanced settings > File manager

Click edit "frame.html"

 

4. Find and open product.html

In the File Manager, navigate to the directory
[cart root] / content / engine / design-rework / templates / pages / product / then click on product.html to edit it

edit product.html

 

5. Edit product.html and append Kiwi Sizing code

edit product.html

Copy and append the following code to product.html. When done, don't forget to click the Save button in PinnacleCart to save changes.

<!-- KiwiSizing v1.0.0 product detail page snippet !-->
<script>
$(document).ready(function(){ldelim}
  ks.setShopID(kiwi_shop_id);
  {php}global $db;$pr_ = $this->get_template_vars('product');{/php}
  {if $has_logged_in}
    {php}    
    $settingsRepo = new DataAccess_SettingsRepository($db);
    $user = User::getFromSession($db, $settingsRepo);
    if ($user->id > 0) { print 'ks.setUserID("' . $user->id . '");' . "\n"; }
    {/php}
  {/if}
  ks.loadSizing({ldelim}
    productData:
    {ldelim}
      productID: {$product.product_id|json_encode},
      {if trim($product.product_sku) != ''}
        sku: {$product.product_sku|json_encode},
      {/if}
      {if trim($product.search_keywords) != ''}
        {php}          
          $my_keywords = explode(',', $pr_['search_keywords']); $my_tags = '';
          foreach ($my_keywords as $k) { $my_tags .= ($my_tags != '') ? ', ' : ''; $my_tags .= json_encode(trim($k)); }
          print 'tags: [' . $my_tags . "],\n";
        {/php}
      {/if}
      {if trim($product.manufacturer_name != '')}
        brand: {$product.manufacturer_name|json_encode},
      {/if}
      {if $product.image || $product.preview || $product.secondary_images}
        images: [
          {assign var="ksimagecount" value="0"}
          {if $product.image || $product.preview}
            "{$GlobalHttpsUrl}/{if $product.preview}{$product.preview}{else}{$product.image}{/if}"
            {assign var="ksimagecount" value="1"}
          {/if}
          {if $product.secondary_images}
            {if $ksimagecount > 0},{/if}
            {foreach from=$product.secondary_images item="secondary_image" name="ksimages"}            
              "{$GlobalHttpsUrl}/{if $secondary_image.preview}{$secondary_image.preview}{else}{$secondary_image.image}{/if}"
              {if !$smarty.foreach.ksimages.last},{/if}
            {/foreach}
          {/if}
        ],
      {/if}
      {php}
        $db->query("SELECT key_name FROM " . DB_PREFIX . "products_categories pc JOIN " . DB_PREFIX . "catalog c ON pc.cid = c.cid WHERE pc.pid = " . intval($pr_['pid']) . " AND c.is_visible = 'Yes' AND c.is_stealth = 0");
        $my_c = ''; while ($db->moveNext()) { $my_c .= ($my_c != '') ? ', ' : ''; $my_c .= json_encode(trim($db->col['key_name'])); }
        if ($my_c != '') { print 'categories: [' . $my_c . "],\n"; }
      {/php}
      title: {$product.title|json_encode}
    {rdelim}
  {rdelim});
{rdelim});
</script>
<!-- End KiwiSizing Integration !-->


6. Republish your theme

To refresh your theme cache, you'll need to republish it. First, open your theme in editor. To do so, on the side panel click Front-End > Manage themes > then click the "Edit Theme" button next to active theme's preview image:

edit product.html

Theme editor will load. Do not make any changes. Instead, on the side panel expand "Revisions", then expand the latest revision (by date) and click "Publish" (or "Republish" if the theme is already published):

edit product.html

It'll say "Revision <your revision> is now used on the store front:

edit product.html

That's it! Now you can start creating size charts in Kiwi Sizing and see them on your product pages!


Troubleshooting: Is the code really injected?

To verify that integration works on PinnacleCart side, view source HTML code of any product detail page in PinnacleCart and search for 'shopid'. You should see generated code similar to the following:

<!-- KiwiSizing v1.0.0 product detail page snippet !-->
<script>
$(document).ready(function(){
ks.setShopID(kiwi_shop_id);
ks.loadSizing({
productData:
{
productID: "test_product",
sku: "testsku",
tags: ["shirts", "xlarge"],
brand: "mybrand",
images: [
"https://yourserver.com/images/products/preview/test_product.jpg"
,"https://yourserver.com/images/products/secondary/preview/test_product-1.jpg"
],
categories: ["test_category"],
title: "Test product title"
}
});
});
</script>
<!-- End KiwiSizing Integration !-->
The values (productID, sku, title etc) should be correctly populated in the generated code.

No code generated in HTML? Then your theme overrides product.html

In an unlikely case your theme overrides product.html, instead of editing product.html in
[cart root] / content / engine / design-rework / templates / pages / product /
edit the one in
[cart root] / content / themes / < YOUR_THEME > / revisions / < YOUR_LATEST_REVISION > / templates/ pages / product /
(see steps 4-5 above) and republish your theme.

 

Question: I still don't see the size chart!

If you don't see the size charts showing up even though product conditions are set up properly, it is most likely because we couldn't inject into the shop. You will need to update the injection selector in app settings. See this guide for support.

A good place to inject size chart in PinnacleCart is before "product-price" or "product-email-to-friend" class.

edit product.html