Bundle Images

Ceri
@adolygwr
9 years ago
370 posts

Is there any way to prevent bundle images overlapping text on item list pages? For an example of what I mean see the following link or the attached screenshot:- https://americymru.net/john-good-sioni-dda/bundle/p=2

--
Ceri Shaw - AmeriCymru
updated by @adolygwr: 07/21/16 09:37:24AM

@michael
9 years ago
7,791 posts

you don't like that?

The template is:
/modules/jrFoxyCartBundle/templates/item_list.tpl

The code is around line 28 and looks like this:

                    <div class="block_image">
                        {jrCore_module_function function="jrImage_stacked_image" module="{$item.stacked_image_module}" type="{$item.stacked_image_type}" item_id="{$item.stacked_image_item_id}" size="icon" alt="{$item.bundle_title}" border_width=0}
                    </div>

The jrImage_stacked_image() function was made to show the images of the things in the bundle. You can replace it with a single image if that's better.

Or you could just reduce the number of images to one. That item_id="{$item.stacked_image_item_id}" will translate to item_id="3,4,5" of the items in the bundle, if you made that just one, then only one image would show.

Think you're familiar with making changes, but just in case someone else reads this:

Docs: "Altering a modules template"
https://www.jamroom.net/the-jamroom-network/documentation/development/1051/altering-a-modules-template

@douglas
9 years ago
2,800 posts

You could also change the size of the div the images are in so they do not overlap the text on the right.

In your modules/jrFoxyCartBundle/templates/item_list.tpl, find this:

            <div class="row" style="margin-top:12px;">
                <div class="col3">
                    <div class="block_image">
                        {jrCore_module_function function="jrImage_stacked_image" module="{$item.stacked_image_module}" type="{$item.stacked_image_type}" item_id="{$item.stacked_image_item_id}" size="icon" alt="{$item.bundle_title}" border_width=0}
                    </div>
                </div>
                <div class="col8">
                    <div class="p5 pl10">
                        <h2>{jrCore_lang module="jrFoxyCartBundle" id="43" default="Includes the following items"}:</h2><br>
                        {if is_array($item.bundle_items)}
                        {foreach $item.bundle_items as $_i}
                            <div style="float:left; width:49%"><h3>&bull; <a href="{$_i.item_url}">{$_i.item_title}</a></h3></div>
                        {/foreach}
                        {/if}
                    </div>
                </div>
                <div class="col1 last">
                    <div class="p5 center">
                    {* show savings if we can *}
                    {if isset($item.bundle_item_savings) && $item.bundle_item_savings > 0}
                        <h2><b>{jrCore_lang module="jrFoxyCartBundle" id="44" default="Save"}<br>&#36;{$item.bundle_item_savings|number_format:2}</b></h2>
                    {/if}
                    </div>
                </div>
            </div>

and change it to this:

            <div class="row" style="margin-top:12px;">
                <div class="col4">
                    <div class="block_image">
                        {jrCore_module_function function="jrImage_stacked_image" module="{$item.stacked_image_module}" type="{$item.stacked_image_type}" item_id="{$item.stacked_image_item_id}" size="icon" alt="{$item.bundle_title}" border_width=0}
                    </div>
                </div>
                <div class="col7">
                    <div class="p5 pl10">
                        <h2>{jrCore_lang module="jrFoxyCartBundle" id="43" default="Includes the following items"}:</h2><br>
                        {if is_array($item.bundle_items)}
                        {foreach $item.bundle_items as $_i}
                            <div style="float:left; width:49%"><h3>&bull; <a href="{$_i.item_url}">{$_i.item_title}</a></h3></div>
                        {/foreach}
                        {/if}
                    </div>
                </div>
                <div class="col1 last">
                    <div class="p5 center">
                    {* show savings if we can *}
                    {if isset($item.bundle_item_savings) && $item.bundle_item_savings > 0}
                        <h2><b>{jrCore_lang module="jrFoxyCartBundle" id="44" default="Save"}<br>&#36;{$item.bundle_item_savings|number_format:2}</b></h2>
                    {/if}
                    </div>
                </div>
            </div>

Hope this helps!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Ceri
@adolygwr
9 years ago
370 posts

Many thanks....went for option 2....worked like a charm

--
Ceri Shaw - AmeriCymru

solved Bundle Images