We Keep Coding

Custom hit template with Algolia in Shopify

When installing the Algolia plugin in Shopify, they add a file algolia_instant_search.js.liquid and in that file, there is a code part;
// Hits
instant.search.addWidgets([
hits({
container: '.ais-hits-container',
templates: {
empty: instant.templates.empty,
item: instant.templates.product,
},
cssClasses: {
list: 'row',
item: 'col-6 col-sm-6 col-lg-3 col-md-4 col-sm-6 mb-45'
},
transformItems: function(products) {
return products.map(function(product) {
return algolia.assign({}, product, {
_distinct: instant.distinct,
can_order:
product.inventory_management !== 'shopify' ||
product.inventory_policy === 'continue' ||
product.inventory_quantity > 0,
translations: algolia.translations,
queryID: product.__queryID,
productPosition: product.__position,
index: instant.search.mainIndex.getIndexName(),
});
});
},
}),
]);
I want to change the hit template so normally I will add some HTML like this;
// Hits
instant.search.addWidgets([
hits({
container: '.ais-hits-container',
templates: {
empty: instant.templates.empty,
item: `
<div class="single-product">
<div class="single-product__image"><!-- Product Image Lazyload with Retina -->
<a class="image-wrap" href="/collections/all/products/grey-tool">
<img class="responsive-image__image popup_cart_image" src="https://cdn.shopify.com/s/files/1/0559/2632/5423/products/2_540x.jpg?v=1617194828">
</a>
<div class="single-product__floating-badges">
<span class="soldout-title">Soldout</span>
</div>
<div class="single-product__content ">
<div class="title"><h3 class="popup_cart_title"> 1. Side Ottoman</h3>
<div class="product-cart-action">
<button class="cart-disable">
<span class="cart-text">Soldout</span>
</button>
</div>
</div>
</div>
<div class="price">
<span id="product_current_price" class="discounted-price">€110,00</span>
<span class="main-price discounted ">€130,00</span>
</div>
</div>
</div>
`,
},
cssClasses: {
list: 'row',
item: 'col-6 col-sm-6 col-lg-3 col-md-4 col-sm-6 mb-45'
},
transformItems: function(products) {
return products.map(function(product) {
return algolia.assign({}, product, {
_distinct: instant.distinct,
can_order:
product.inventory_management !== 'shopify' ||
product.inventory_policy === 'continue' ||
product.inventory_quantity > 0,
translations: algolia.translations,
queryID: product.__queryID,
productPosition: product.__position,
index: instant.search.mainIndex.getIndexName(),
});
});
},
}),
]);
But because it is a .liquid file I can't add the Algolia JS tags like {{ product_image }}, any help on how to do this, and maybe some can tell me where I can find the template the originally put in with instant.templates.product

You're using tics (`) for your HTML. Have you tried it with single quotes (') instead?

React DONUT not working properly when using twice on the same page

I'm using donut twice on the same page but somehow it's appearing in one div only whereas I defined it in two different Divs
Library : React-donut
<div className={this.state.selected == 2 ? "col-xs-6 col-sm-6 selected linkpointer" : "col-xs-6 col-sm-6 linkpointer"} onClick={this.programsClickEvent}>
<div className="card p_15 program">
<div className="mahroon-block">
<strong>Programs</strong>
</div>
<div id = "program-donut">
<Donut
chartData={[
{ name: `${this.state.programCompleted} Completed`, data: this.state.programCompleted },
{ name: `${this.state.programStarted} Started`, data: this.state.programStarted },
{ name: `${this.state.programNotStarted} Not Started`, data: this.state.programNotStarted },
]}
chartWidth={100}
chartHeight={300}
title=""
chartThemeConfig={{
series: {
colors: ['#28B463', '#F39C12 ', '#E74C3C'],
},
}}
/>
</div>
</div>
</div>
<div className={this.state.selected == 3 ? "col-xs-6 col-sm-6 selected linkpointer" : "col-xs-6 col-sm-6 linkpointer"} onClick={this.coursesClickEvent} >
<div className="card p_15 course">
<div className="mahroon-block">
<strong>Courses</strong>
</div>
<div id = "course-donut">
<Donut
chartData={[
{ name: `${this.state.courseCompleted} Completed`, data: this.state.courseCompleted },
{ name: `${this.state.courseStarted} Started`, data: this.state.courseStarted },
{ name: `${this.state.courseNotStarted} Not Started`, data: this.state.courseNotStarted },
]}
chartWidth={200}
chartHeight={300}
title=""
chartThemeConfig={{
series: {
colors: ['#28B463', '#F39C12 ', '#E74C3C'],
},
}}
/>
</div>
</div>
</div>
I'm using two different divs for both the donuts but they are appearing in first div only.

How can I work around the limitation of multiple root elements in Vue.js? [duplicate]

This question already has answers here:
A way to render multiple root elements on VueJS with v-for directive
(6 answers)
Closed 2 years ago.
hopefully someone here will be able to help me with this problem.
I have the following data:
[
{
title: 'Header',
children: [
{
title: 'Paragraph',
children: [],
},
],
},
{
title: 'Container',
children: [
{
title: 'Paragraph',
children: [],
},
],
},
]
I want to render this in a list of <div> like this:
<div class="sortable-item" data-depth="1" data-index="0">Header</div> <!-- Parent -->
<div class="sortable-item" data-depth="2" data-index="0">Paragraph</div> <!-- Child-->
<div class="sortable-item" data-depth="1" data-index="1">Container</div> <!-- Parent -->
<div class="sortable-item" data-depth="2" data-index="0">Paragraph</div> <!-- Child-->
I have built a component that would be recursive, this is what I have so far:
<template>
<template v-for="(item, index) in tree">
<div
class="sortable-item"
:data-depth="getDepth()"
:data-index="index"
:key="getKey(index)"
>
{{ item.title }}
</div>
<Multi-Level-Sortable
:tree="item.children"
:parent-depth="getDepth()"
:parent-index="index"
:key="getKey(index + 0.5)"
></Multi-Level-Sortable>
</template>
</template>
<script>
export default {
name: 'MultiLevelSortable',
props: {
tree: {
type: Array,
default() {
return [];
},
},
parentDepth: {
type: Number,
},
parentIndex: {
type: Number,
},
},
methods: {
getDepth() {
return typeof this.parentDepth !== 'undefined' ? this.parentDepth + 1 : 1;
},
getKey(index) {
return typeof this.parentIndex !== 'undefined' ? `${this.parentIndex}.${index}` : `${index}`;
},
},
};
</script>
As you can see not only I have a <template> as the root element I also have a v-for, two "no no" for Vue.js. How can I solve this to render the list of elements like I pointed out above?
Note: I have tried vue-fragment and I was able to achieve the structure I wanted, but then when I tried using Sortable.js it didn't work, as if it wouldn't recognise any of the .sortable-item elements.
Any help will be greatly appreciated! Thank you!

Thanks to #AlexMA I was able to solve my problem by using a functional component. Here is what it looks like:
import SortableItemContent from './SortableItemContent.vue';
export default {
functional: true,
props: {
tree: {
type: Array,
default() {
return [];
},
},
},
render(createElement, { props }) {
const flat = [];
function flatten(data, depth) {
const depthRef = typeof depth !== 'undefined' ? depth + 1 : 0;
data.forEach((item, index) => {
const itemCopy = item;
itemCopy.index = index;
itemCopy.depth = depthRef;
itemCopy.indentation = new Array(depthRef);
flat.push(itemCopy);
if (item.children.length) {
flatten(item.children, depthRef);
}
});
}
flatten(props.tree);
return flat.map((element) => createElement('div', {
attrs: {
'data-index': element.index,
'data-depth': element.depth,
class: 'sortable-item',
},
},
[
createElement(SortableItemContent, {
props: {
title: element.title,
indentation: element.indentation,
},
}),
]));
},
};
The SortableItemContent component looks like this:
<template>
<div class="item-content">
<div
v-for="(item, index) in indentation"
:key="index"
class="item-indentation"
></div>
<div class="item-wrapper">
<div class="item-icon"></div>
<div class="item-title">{{ title }}</div>
</div>
</div>
</template>
<script>
export default {
name: 'SortableItemContent',
props: {
title: String,
indentation: Array,
},
};
</script>
Given the data I have posted on my question, it now renders the HTML elements like I wanted:
<div data-index="0" data-depth="0" class="sortable-item">
<div class="item-content">
<div class="item-wrapper">
<div class="item-icon"></div>
<div class="item-title">Header</div>
</div>
</div>
</div>
<div data-index="0" data-depth="1" class="sortable-item">
<div class="item-content">
<div class="item-indentation"></div>
<div class="item-wrapper">
<div class="item-icon"></div>
<div class="item-title">Paragraph</div>
</div>
</div>
</div>
<div data-index="1" data-depth="0" class="sortable-item">
<div class="item-content">
<div class="item-wrapper">
<div class="item-icon"></div>
<div class="item-title">Container</div>
</div>
</div>
</div>
<div data-index="0" data-depth="1" class="sortable-item">
<div class="item-content">
<div class="item-indentation"></div>
<div class="item-wrapper">
<div class="item-icon"></div>
<div class="item-title">Paragraph</div>
</div>
</div>
</div>
Thank you again #AlexMA for the tip on Functional Components.

access array of objects inside template

I make one collection Recipes and then define its schema and i have one array of objects ingredients in my schema and now i want to access those array of objects in my template but unable to show them can you please guide me how to do it?
collections.js
Recipes = new Mongo.Collection('recipes');
Recipes.attachSchema(new SimpleSchema({
name: {
type: String,
label: "Recipe Name",
max: 100
},
ingredients: {
type: [Object],
minCount: 1
},
"ingredients.$.name": {
type: String
},
"ingredients.$.amount": {
type: String
},
description: {
type: String,
label: "How to prepare ",
},
time: {
type: Number,
label: "Time (Minutes)",
},
image: {
type: String,
autoform: {
afFieldInput: {
type: "cfs-file",
collection: 'recipesImages',
label: 'Recipe Picture'
}
}
}
}));
router.js
Router.route('/show_recipe/:_id', {
name: 'show_recipe',
template: 'show_recipe',
data: function() {
return Recipes.findOne(this.params._id);
}
});
show_recipe.html
<template name="show_recipe">
<div class="container">
<div class="row">
<div class="col-md-8">
{{#with FS.GetFile "recipesImages" image}}
<img class="img-responsive mt" src="{{url}}"/>
{{/with}}
</div>
<div class="col-md-4" >
<ul class="list-group">
<h3> Ingredients</h3>
<li class="list-group-item">{{ingredients.name}} - {{ingredients.amount}}</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4>{{name}}</h4>
<p> {{description}}</p>
</div>
</div>
</div>
</template>

You're only missing an {{#each}} to iterate over the ingredients array. Using it will set the data context to one element of the array and then you can just access the keys directly:
<h3> Ingredients</h3>
{{#each ingredients}}
<li class="list-group-item">{{name}} - {{amount}}</li>
{{/each}}

How do I get Angular.js and Mixitup.js to work together

There is a great tut which illustrates how to accomplish this, however I can't seem to get it right. Here is the example and here is my take on it. And even stranger I am not getting any errors in the console.
Here is the HTML from my project locally.
<div ng-controller="DrawingsController">
<div class="controls">
<label>Filter:</label>
<button class="filter" data-filter="all">All</button>
<button class="filter" data-filter=".category-{{category}}" ng-repeat="category in categories">{{category}}</button>
<label>Sort:</label>
<button class="sort" data-sort="myorder:asc">Asc</button>
<button class="sort" data-sort="myorder:desc">Desc</button>
</div>
<div class="test">
<div id="MixItUpContainer1" class="container">
<div class="mix category-{{drawing.category}}" data-myorder="{{drawing.value}}" ng-repeat="drawing in drawings">Value : {{drawing.name}}</div>
</div>
</div>
<div class="gap"></div>
<div class="gap"></div>
</div> <!-- end of DrawingsController -->
JS:
rustyApp.controller('DrawingsController', function DrawingsController($scope) {
$scope.categories = ['Soft', 'Elements'];
$scope.drawings = [{
category: 'Elements',
value: '1',
source: 'http://placehold.it/350x150'
}, {
category: 'Elements',
value: '1',
source: 'http://placehold.it/350x150'
}, {
category: 'Elements',
value: '2',
source: 'http://placehold.it/350x150'
}, {
category: 'Soft',
value: '2',
source: 'http://placehold.it/350x150'
}, {
category: 'Soft',
value: '3',
source: 'http://placehold.it/350x150'
}];
});