Skip to main content

Compare Products

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

The product comparison page will list products to compare. Users can add products of their choice for comparison from the list.

QG11


Arguments

ContextTypeDescription
titleStringTitle of the product
subtitleStringSubtitle of the product. It can be descriptive
itemsObjectObject containing all details of the product
compare_productObjectcompare_products has product details which you have compared with another product
compare_slugArrayArray has a unique key to compare another product

context.product

This will be an object with all details regarding two similar products for comparison. Refer this for sample response for a product. You can use this data to render the UI as required.

Example:

The below example will render a sample compare product card.

theme/templates/pages/compare-products.vue
// Product Comparison Example

<div className="product-comparison" v-if="context && context.compared_products">
<h1>{{context.similars.title}}</h1>
<p>Description: {{context.similars.subtitle}}</p>

<ul v-for="compare in context.items">
<li>
<div>
Name: {{compare.name}}
Type: {{compare.type}}
</div>
<img src="compare.logo.url" />
</li>
</ul>
</div>

Was this section helpful?