Skip to content

Also Bought Products

This Module keeps a running count of products purchased together and provides a template layer to display the results at a product level.

Installation

  1. Install the Also Bought Products Module on your store
  2. Set up the pdsalsobought Item ( if applicable )
    • Assign item to desired pages

Template

You may need to configure the Also Bought Product List Layout template and settings.

  1. Configure the Also Bought Product List Layout settings
  2. Update the Also Bought Product List Layout template using this template code.
<div class="g-layout">
    <div class="g-layout__item">
        <h2 class="g-type-title-2 u-text-center">Customers Also Bought</h2>
    </div>
</div>

<div class="js-carousel g-carousel u-mt-m lazyload" data-options="">
    <div class="g-carousel__arrows">
        <button type="button" class="g-carousel__arrow--prev">
            <span class="splide__arrow--icon u-icon-chevron-left"></span>
        </button>
        <button type="button" class="g-carousel__arrow--next">
            <span class="splide__arrow--icon u-icon-chevron-right"></span>
        </button>
    </div>

    <div class="g-carousel__track">
        <div class="g-carousel__slides">
            <mvt:assign name="l.product" value="l.settings:product" />
            <mvt:do file="g.Module_Feature_TUI_DB" name="l.loaded" value="ManagedTemplate_Load_ID( g.readytheme_templates:product_card_iterator:templ_id, l.loaded_paged )" />
            <mvt:foreach iterator="product" array="pdsalsobought:products">
                <mvt:comment>
                |
                |   Product Card Template
                |
                </mvt:comment>
                <div class="g-carousel__slide">
                    <mvt:do file="g.Store_Template_Path $ l.loaded_paged:filename" name="l.success" value="Template_Render( l.empty, l.settings )" />
                </div>
            </mvt:foreach>
            <mvt:assign name="l.settings:product" value="l.product" />
        </div>
    </div>
</div>
  1. Render Also Bought Product List Layout template with the below code
    <mvt:if expr="l.settings:pdsalsobought_product_count">
      <mvt:item name="pdsalsobought" />
    </mvt:if>