Create Product Add-ons to display like MarketConnect?

[cyben76]

Is it possible to make a product add-on to disppay in cart like MarketConnect? With logo and options?

 

[brian!]

Is it possible to make a product add-on to display in cart like MarketConnect? With logo and options?

it'd be possible but would need some effort - one way would be to modify configureproduct.tpl and change the default output coding of addons to match that generated by MarketConnect.

 

alternatively, you might be able to modify the existing array to display new addons via a hook - but neither are quick or simple things to do.

[cyben76]

it'd be possible but would need some effort - one way would be to modify configureproduct.tpl and change the default output coding of addons to match that generated by MarketConnect.

 

alternatively, you might be able to modify the existing array to display new addons via a hook - but neither are quick or simple things to do.

 

So i tried using the configureproduct.tpl modification way,

 

Replaced

<div class="row addon-products">
		{foreach $addons as $addon}
		<div class="col-sm-{if count($addons) > 1}6{else}12{/if}">
			<div class="panel panel-default panel-addon{if $addon.status} panel-addon-selected{/if}">
				<div class="panel-body">
					<label><input type="checkbox" name="addons[{$addon.id}]"> {$addon.name}</label><br>
					{$addon.description}
				</div>
				<div class="panel-price">
					{$addon.pricing}
				</div>
				<div class="panel-add">
					{$LANG.addtocart}
				</div>
			</div>
		</div>{/foreach}
	</div>

 

With

<div class="addon-promo-container">
{foreach $addons as $addon}
<div class="description">
<div class="logo">
<img src="assets/img/addon/{$addon.id}/logo.png" width="60">
</div>
<h3>{$addon.name}</h3>
<p>{$addon.description}</p>
</div>
<div class="clearfix"></div>
<div class="pull-right"><strong>{$addon.billingcycle}</strong></div>
<label class="radio-inline"><input type="radio" name="addons_radio[{$addon.id}]" class="addon-selector" checked> * None<span class="pull-right">-</span></label><br>
<label class="radio-inline"><input type="radio" name="addons_radio[{$addon.id}]" value="{$addon.id}" class="addon-selector"> *  Select<span class="pull-right">{$addon.pricing}</span></label>
</div>
{/foreach}

 

Outputs:

[ATTACH=CONFIG]14745[/ATTACH]

 

The {$addon.billingcycle} doesn't output anything even if i change my add-on as monthly or annually

[cyben76]

Spotted my own mistake

 

Should be:

{foreach $addons as $addon}
<div class="addon-promo-container">
<div class="description">
<div class="logo">
<img src="assets/img/addon/{$addon.id}/logo.png" width="60">
</div>
<h3>{$addon.name}</h3>
<p>{$addon.description}</p>
</div>
<div class="clearfix"></div>
<div class="pull-right"><strong>{$addon.billingcycle}</strong></div>
<label class="radio-inline"><input type="radio" name="addons_radio[{$addon.id}]" class="addon-selector" checked>   None<span class="pull-right">-</span></label><br>
<label class="radio-inline"><input type="radio" name="addons_radio[{$addon.id}]" value="{$addon.id}" class="addon-selector">    Select<span class="pull-right">{$addon.pricing}</span></label>
</div>
{/foreach}