In the Shadows ReadyThem, Is there something I need to do to activat the Roundabout –
Product / Image Carousel?
Is there any instruction on this feature?
Is there any instruction on this feature?
<section class="x-product-list x-product-list--carousel"> <mvt:do name="l.result" file="g.Module_Library_DB" value="Category_Load_Code(l.settings:readytheme:productlisting:prod_cat, l.settings:product_list_category)" /> <mvt:assign name="l.uri:store_id" value="g.Store:id" /> <mvt:assign name="l.uri:screen" value="''" /> <mvt:assign name="l.uri:page_id" value="0" /> <mvt:assign name="l.uri:cat_id" value="l.settings:product_list_category:id" /> <mvt:assign name="l.uri:product_id" value="0" /> <mvt:do file="g.Module_Feature_URI_DB" name="l.have_uri" value="URI_Load_Item_Canonical(l.uri, l.settings:canonical_uri)" /> <mvt:comment> The above code will load the category code used to pull the category name and then load the cannonical URI. </mvt:comment> <h4 class="c-heading-delta u-text-bold u-text-center u-text-uppercase x-product-list__heading">&mvt:product_list_category:name;</h4> <div class="x-carousel" data-hook="product-carousel"> <button class="x-carousel__button u-icon-triangle-left" data-hook="carousel__button-previous"></button> <div class="x-carousel__container x-carousel--animate" data-hook="carousel__container"> <mvt:foreach iterator="product" array="readytheme:products"> <div class="o-layout__item u-width-6 u-width-3--m u-text-center x-product-list__item"> <a class="u-block x-product-list__link" href="&mvte:product:link;" title="&mvte:product:name;"> <img class="x-product-list__image" src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;"> <strong class="x-product-list__name">&mvte:product:name;</strong> <mvt:if expr="l.settings:product:base_price GT l.settings:product:price"> <span class="x-product-list__price u-color-gray-30">Was: <s>&mvt:product:formatted_base_price;</s></span> <span class="x-product-list__price u-text-bold u-color-red">Now: &mvt:product:formatted_price;</span> <mvt:else> <span class="x-product-list__price">&mvt:product:formatted_price;</span> </mvt:if> </a> </div> </mvt:foreach> </div> <button class="x-carousel__button x-carousel__button-right u-icon-triangle-right" data-hook="carousel__button-next"></button> </div> </section> <br>
$.loadScript(theme_path + 'extensions/carousel/roundabout.js', function () { $.hook('product-carousel').roundabout({ autoStart: true }); });
(function (window, document, undefined) { var ride = function () { 'use strict'; var defaults = { autoStart: false, carouselDelay: 5000, group: false, groupClass: 'x-carousel__item', groupTiny: 2, groupSmall: 2, groupMedium: 4, groupLarge: 4, groupWide: 4, groupWrapper: 'figure' };
Comment