@bva/recommendations - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

package.json

 {
   "name": "@bva/recommendations",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "JS recommendations widget using Shopify native recommendations API",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -29,7 +29,7 @@ Recommendations
 
-const options = {
+const config = {
   productId: 10590155084,
   limit: 5,
 };
-const recs = new Recommendations(options);
+const recs = new Recommendations(config);
 recs.initialize();
@@ -65,3 +65,3 @@ ```
 - **limit** - (default: `4`)The amount of products that will be displayed (max 10)
-- **template** - (see below for default) Template literal of the HTML for a single product
+- **template** - (see below for default) A function that returns a string of HTML for a single product
 
@@ -121,30 +121,22 @@ ## Product Id
 
-A template is the HTML that is displayed for each product in the recommendations widget. Pass in a template literal to your `options` object and write out whatever JS works for your project. To dynamically add in product data, there are a few tags you'll want to use throughout your template and they use a format that is very similar to the Liquid code you're used to writing:
+A template is the HTML that is displayed for each product in the recommendations widget. The template config option is a function that takes 1 argument `product`, which is the product object returned from Shopify. The return vaue should be a string of HTML. The `product` argument has access to all imformation that would usually be accessible when pulling product data from Shopify.
 
-- `{& product_featured_image &}`: Replaced by the product's featured image
-- `{& product_title &}`: Replaced by the product's title
-- `{& product_price &}`: Replaced by the product's price in USD
-- `{& product_url &}`: Replaced by the url to the product's PDP
-- `{& product_handle &}`: Replaced by the product's handle
-- `{& product_id &}`: Replacced by the product's ID
-- `{& product_tags &}`: Replaced by a comma separated list of the product's tags
-- `{& product_images &}`: Replaced by a comma separated list of the product's images
-- `{& product_description &}`: Replaced by the product's description
-- `{& product_compare_at_price &}`: Replaced by the product's compare at price in (USD)
-- `{& product_type &}`: Replaced by the product's type
-
 The default template looks like:
 
-```html
-<div class="recommendation__product" data-recommendations-product-id="{& product_id &}">
-  <a href="{& product_url &}" class="recommendation__wrapper">
-    <div class="recommendation__product-image-wrapper">
-      <img class="recommendation__product-image" src="{& product_featured_image &}" alt="{& product_title &} image" />
+```javascript
+function(product) {
+  return(`
+    <div class="recommendation__product" data-recommendations-product-id="${product.id}">
+      <a href="${product.url}" class="recommendation__wrapper">
+        <div class="recommendation__product-image-wrapper">
+          <img class="recommendation__product-image" src="${product.featured_image}" alt="${product_title} image" />
+        </div>
+        <div class="recommendation__product-details">
+          <h3 class="recommendation__product-title">${product_title}</h3>
+          <span class="recommendation__product-price">${product_price}</span>
+        </div>
+      </a>
     </div>
-    <div class="recommendation__product-details">
-      <h3 class="recommendation__product-title">{& product_title &}</h3>
-      <span class="recommendation__product-price">{& product_price &}</span>
-    </div>
-  </a>
-</div>
+  `);
+}
 ```
@@ -151,0 +143,0 @@

src/_default-options.js

@@ -0,1 +1,3 @@
+import convertCentsToDollars from './helpers/convert-cents-to-dollars';
+
 export default {
@@ -5,15 +7,19 @@ hiddenTag: 'recommendations::hide',
   limit: 4,
-  template: `
-    <div class="recommendation__product" data-recommendations-product-id="{& product_id &}">
-      <a href="{& product_url &}" class="recommendation__wrapper">
-        <div class="recommendation__product-image-wrapper">
-          <img class="recommendation__product-image" src="{& product_featured_image &}" alt="{& product_title &} image" />
-        </div>
-        <div class="recommendation__product-details">
-          <h3 class="recommendation__product-title">{& product_title &}</h3>
-          <span class="recommendation__product-price">{& product_price &}</span>
-        </div>
-      </a>
-    </div>
-  `,
+  template: function (product) {
+    const price = convertCentsToDollars(product.price);
+
+    return(`
+      <div class="recommendation__product" data-recommendations-product-id="${product.id}">
+        <a href="${product.url}" class="recommendation__wrapper">
+          <div class="recommendation__product-image-wrapper">
+            <img class="recommendation__product-image" src="${product.featured_image}" alt="${product.title} image" />
+          </div>
+          <div class="recommendation__product-details">
+            <h3 class="recommendation__product-title">${product.title}</h3>
+            <span class="recommendation__product-price">${price}</span>
+          </div>
+        </a>
+      </div>
+    `);
+  },
 };

src/_setup-html-string.js

@@ -1,3 +0,1 @@
-import convertCentsToDollars from './helpers/convert-cents-to-dollars';
-
 /**
@@ -21,15 +19,4 @@ * Sets up the product HTML based on the product and the HTML template
 
-    return context.options.template
-      .replace(/{& product_featured_image &}/g, product.featured_image)
-      .replace(/{& product_title &}/g, product.title)
-      .replace(/{& product_price &}/g, convertCentsToDollars(product.price))
-      .replace(/{& product_url &}/g, product.url)
-      .replace(/{& product_handle &}/g, product.handle)
-      .replace(/{& product_id &}/g, product.id)
-      .replace(/{& product_tags &}/g, product.tags.join(','))
-      .replace(/{& product_images &}/g, product.images.join(','))
-      .replace(/{& product_description &}/g, product.description)
-      .replace(/{& product_compare_at_price &}/g, convertCentsToDollars(product.compare_at_price))
-      .replace(/{& product_type &}/g, product.type);
-  }).join('');
+    return context.options.template(product);
+  });
 };

src/index.js

@@ -6,3 +6,3 @@ /**
 
-import _ from 'lodash-es';
+import { assign } from 'lodash-es';
 
@@ -40,3 +40,3 @@ import dispatchEvent from './helpers/dispatch-event';
       throw new Error(
-        '`Product ID was not provided by config object nor insertion element'
+        'Product ID was not provided by config object nor insertion element'
       );
@@ -48,5 +48,5 @@ }
     const updatedOptions = {};
-    _.assign(updatedOptions, defaultOptions);
+    assign(updatedOptions, defaultOptions);
     if (config) {
-      _.assign(updatedOptions, config);
+      assign(updatedOptions, config);
     }
@@ -104,3 +104,3 @@ this.options = updatedOptions;
   updateOptions(config) {
-    _.assign(this.options, config);
+    assign(this.options, config);
   }
@@ -107,0 +107,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

203780

decreased by-28.73%

Lines of code

247

decreased by-55.66%

Number of lines in readme file

167

decreased by-4.57%

No dependency changes