@bva/recommendations
Advanced tools
Not in NPM yet. Will be soon
If you're using Node you can install this package in the following ways:
Yarn
yarn add @bva/recommendations
NPM
npm install @bva/recommendations
If you're not using Yarn or NPM, see below in Usage for more info on adding the minified file directly to your projects.
Recommendations is a simple widget using Shopify's native recommendations API that can be included on any Shopify website. Check out how easy it is to implement using ES6 modules:
import Recommendations from '@bva/recommendations';
const options = {
productId: 10590155084,
limit: 5,
};
const recommendation = new Shopify.Recommendations(options);
recommendation.initialize();
If you're not using NPM and ES6 import/export syntax, you can also grab the minified dist/recommendations.min.js and include it in your HTML before your custom JS. Its equally simple:
<body>
...
<script src="recommendations.min.js"></script>
<script>
var options = {
productId: 10590155084,
limit: 6
};
var recommendation = new Shopify.Recommendations(options);
recommendation.initialize();
</script>
Perfect for your new slate projects
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:
{& 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 typeThe default template looks like:
<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>
recommendations.initialized: Fires when a recommendation instance is initialized. The callback you will find the product data in event.detail.data and the current instance in event.detail.context.FAQs
JS recommendations widget using Shopify native recommendations API
The npm package @bva/recommendations receives a total of 0 weekly downloads. As such, @bva/recommendations popularity was classified as not popular.
We found that @bva/recommendations demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.