@bva/recommendations
Advanced tools
JS wrapper around Shopify's Recommendation API that provides an easy to use interface to get HTML on the page.
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 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>
<div data-recommendations-insertion></div>
<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
"recommendations::hide") Tag that hides specific products"[data-recommendations-insertion]") HTML element that the reviews will be inserted into4)The amount of products that will be displayed (max 10)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 2 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.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.