async asyncData(ctx) {
let products = await ctx.app.$api.products(ctx.params.slug, ctx.query);
return {
products: products.data,
total: products.total,
perPage: products.per_page,
}
watch: {
'$route'() {
this.getProducts();
},
},
getProducts() {
this.$api.products(this.$route.params.slug, this.$route.query).then(products => {
this.products = products.data;
this.total = products.total;
this.perPage = products.per_page;
});
},
this.$router.push({
query: {
...this.$route.query,
page: page,
},
})
<script>
import {parse} from 'himalaya'
import Product from '~/components/Product/Product.vue';
const hasProduct = parsedHtml => {
let has = false;
if (parsedHtml.children) {
parsedHtml.children.forEach(ch => {
if(has) return;
if (ch.tagName == 'product') {
has = true;
} else {
has = hasProduct(ch);
}
});
}
return has;
};
const toElement = (h, products) => parsedHtml => {
if (parsedHtml.type == 'Text') {
return [h('span', {
domProps: {
innerHTML: parsedHtml.content
},
})];
}
if (parsedHtml.tagName == 'product') {
let product = products.find(product => product.slug == parsedHtml.attributes.slug);
if (!product) return '';
return [h('div', {
'class': ['catalog', 'catalog_view_row'],
}, [
h('div', {
'class': ['catalog__cell'],
}, [
h(
'product',
{props: {product}}
)
])
])];
}
let has = hasProduct(parsedHtml);
return h(
has ? 'div' : parsedHtml.tagName,
{
'class': parsedHtml.attributes.className,
'attrs': parsedHtml.attributes,
},
parsedHtml.children
? parsedHtml.children.map(toElement(h, products))
: []
)
};
export default {
components: {
Product,
},
props: [
'html',
'products',
],
render(h) {
let tree = parse(`<div>${this.html}</div>`);
return tree.map(toElement(h, this.products))[0];
}
};
</script>
let match = article.content.match(/\$product\[([^\]]+)\]/g);
if(match != null && match.length) {
let promises = match.map(async (m) => {
let slug = m.match(/\[(.+)\]/)[1];
try {
let product = await ctx.app.$api.product(slug);
if(product) products.push(product);
} catch (e) {
}
});
await Promise.all(promises);
}