@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.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.