Image Roundabout?

[lickx]

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?

[Matt Zimmermann]

Hi Stephen,

The Roundabout instructions are part of the Elements Framework documentation https://docs.miva.com/elements/exten...oduct-carousel

[lickx]

Thanks Matt, I think I was asking for the wrong feature, All though I will use the code you sent me. I guess I am looking for a way to scroll or arrow click through the product page images like it is done at
https://luxe.mivareadythemes.com/floral-silk-tie.html

[Matt Zimmermann]

Hi Stephen,

At this time, I have not coded up this functionality. There will be an extension created for a future ReadyTheme which will be able to be added to a Shadows based site.

[lesliekirk]

Hi Stephen,

The Roundabout instructions are part of the Elements Framework documentation https://docs.miva.com/elements/exten...oduct-carousel

I think I did something wrong, I am trying to use the autoStart: true, function, but it doesn't seem to want to scroll, it just does a little stutter.

[Matt Zimmermann]

Hi Leslie,

Can you post a link to the site?

[lesliekirk]

Hi Leslie,

Can you post a link to the site?

I wish I could - it's behind a protective wall. I can PM you the access if you like

[Matt Zimmermann]

Hi Leslie,

It looks like you might have an extra element in your code. Can you post the code you are using?

[lesliekirk]

This is the ReadyTheme Product Listing featured products

<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>

[Matt Zimmermann]

Hi Leslie,

Looks like there might be a couple of things going on here.Since you have grouping enabled in your script call and only have four items in the carousel, there is no "next" to go to.I would recommend adding more products to the featured category and see if the issue clears up.

[lesliekirk]

Hi Leslie,

Looks like there might be a couple of things going on here. Since you have grouping enabled in your script call and only have four items in the carousel, there is no "next" to go to.I would recommend adding more products to the featured category and see if the issue clears up.

Wait, what? All I did was use the code posted in the docs, minus the link to the "Shop All"

I have more than 4 items assigned, there are 7 products.

[Matt Zimmermann]

Hi Leslie,

Let's see if removing grouping will show all seven product:

$.loadScript(theme_path + 'extensions/carousel/roundabout.js', function () {
    $.hook('product-carousel').roundabout({
        autoStart: true
    });
});

[lesliekirk]

Well, getting warmer, the arrows now appear, it doesn't auto scroll and only one item displays at a time.

[lesliekirk]

Well, getting warmer, the arrows now appear, it doesn't auto scroll and only one item displays at a time.

Do I need to edit the roundabout.js to fix this?

[lesliekirk]

I'm looking at the roundabout.js and it looks okay

(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'
        };

But it's only displaying 1 product instead of 4