Jump to content

Products Carousel Free Prestashop 1.6 module


Recommended Posts

  • Replies 263
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Responsive Products Carousel Module Prestashop 1.6 module:  themeszonecarousel.zip version: 0.9.5 by https://themes.zone   update 0.9.5: Added options provided by @myselfidem update 0.9.4: Fixed fe

Hello,   How to duplicate themeszonecarousel ?   I've made like this :   1 - Rename the main folder : themeszonecarousel2   2 - Rename : themeszonecarousel.php as themeszonecarousel2.php   3

Hello, thanks for this free module, it's realy cool.   Here is how i used Hook to have 3 different themeszonecarousel on my home page:   1 - Add custom hook in /themes/yourtheme/index.tpl   add the f

Posted Images

Great module, works perfectly on PS1.6.0.13. Thank you so much!

If I want to achieve effect like the attachment (discounted amount shown in red), which file shall I edit? The current one displays old price and new price, but not the amount. 

Merci!

post-734648-0-06029900-1427273316_thumb.jpg

post-734648-0-57975600-1427273325_thumb.jpg

Share this post


Link to post
Share on other sites

Hello

 

The products layout is in hook.tpl file. So you need to edit this one.

It's the way the price displayed. I will check hook.tpl and see if I can achieve that effect 

Merci!

Share this post


Link to post
Share on other sites

Hello

 

The products layout is in hook.tpl file. So you need to edit this one.

 

Seems the code I used to have is not working. By the way, there is a typing error in your hook.tpl. Sale is typed as Sall. 

 

I have the code for that before:

{if $product.specific_prices.reduction_type == 'amount'}
<span class="price-amount-reduction">-{$product.specific_prices.reduction|floatval}</span>
{/if}
 
And then in css file:
.price-amount-reduction {
  background: #f13340;
  border: 1px solid #d02a2c;
  font: 600 21px/24px "Open Sans", sans-serif;
  color: white;
  padding: 0 5px 0 3px;
  display: inline-block; }
  .price-amount-reduction.small {
    font: 700 14px/17px Arial, Helvetica, sans-serif;
    padding: 1px 6px; }

Share this post


Link to post
Share on other sites

Hello!

 

Great work you've done here!

 

Pardon me for asking this, but can you provide a step by step guide on how to duplicate this module manually?

 

I tried it on my own, replacing 'themeszonecarousel' in every file I could find it, but it didn't work..

  • Like 1

Share this post


Link to post
Share on other sites

 

Responsive Products Carousel Module Prestashop 1.6 module
version: 0.9.5

by https://themes.zone

 

update 0.9.5: Added options provided by @myselfidem

update 0.9.4: Fixed featured products bug (typo indeed), added functionality kindly provided by @myselfidem

update 0.9.3: Added fixes kindly provided by @myselfidem and functionality to hide Buttons and Qty

update 0.9.2: Small CSS Fix.

update 0.9.1: Added functionality, now you can also chose a category to display in the carousel.

 

LIVE DEMO

 

Please share it with others:

@ThemesZone

 

Help and Support at https://themes.zone

 

Hello, Thank you for this module I really appreciate it.

 

I wanted to report on small error I've noticed. The 'Sale' badge is misspelled. It is spelled 'Sall'. I have corrected this by changing this file: your site/modules/themeszonecarousel/views/templates/hook/hook.tpl and editing this line: <span class="sale-label">{l s='Sall' mod='themeszonecarousel'}</span> with: <span class="sale-label">{l s='Sale!' mod='themeszonecarousel'}</span> (in case anyone needs to correct this). I thought you would like to know.

Share this post


Link to post
Share on other sites

Tanks Elise B. for the help about misspelled word.

 

I've made some changes Inside hook.tlp to show the old price and the new price and the colored box reduction.

Added also the Sale! box.

 

Here is the full hook.tlp file used and works fine for me.

 

hook.tlp

{if isset($products) && $products}

    <div class="tz-carousel">
    <h2 class="title_block">
					{$title}
			</h2>

        <!-- Products list -->
        <ul id="owl-slider" class="owl-carousel product_list grid">
            {foreach from=$products item=product name=products}

                <li class="item ajax_block_product">
                    <div class="product-container" itemscope itemtype="http://schema.org/Product">
                        <div class="left-block">
                            <div class="product-image-container">
                                <a class="product_img_link"	href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
                                    <img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
                                </a>
                                {if isset($quick_view) && $quick_view}
                                    <a class="quick-view" href="{$product.link|escape:'html':'UTF-8'}" rel="{$product.link|escape:'html':'UTF-8'}">
                                        <span>{l s='Quick view' mod='themeszonecarousel'}</span>
                                    </a>
                                {/if}
                                {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                                    <div class="content_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                        {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
                                            {if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
                                                {hook h="displayProductPriceBlock" product=$product type="old_price"}
                                                <span class="old-price product-price">
											{displayWtPrice p=$product.price_without_reduction}
										</span>
                                            {/if}
                                            <span itemprop="price" class="price product-price">
										{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
									</span>
                                            <meta itemprop="priceCurrency" content="{$currency->iso_code}" />

                                            {hook h="displayProductPriceBlock" product=$product type="price"}
                                            {hook h="displayProductPriceBlock" product=$product type="unit_price"}
                                        {/if}
                                    </div>
                                {/if}
                                {if isset($product.new) && $tzc_new_show && $product.new == 1}
                                    <a class="new-box" href="{$product.link|escape:'html':'UTF-8'}">
                                        <span class="new-label">{l s='New' mod='themeszonecarousel'}</span>
                                    </a>
                                {/if}
                                {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                                    <a class="sale-box no-print" href="{$product.link|escape:'html':'UTF-8'}">
                                        <span class="sale-label">{l s='Sale!' mod='themeszonecarousel'}</span>
                                    </a>
                                {/if}
                            </div>
                            {hook h="displayProductDeliveryTime" product=$product}
                            {hook h="displayProductPriceBlock" product=$product type="weight"}
                        </div>
                        <div class="right-block">
                            <h5 itemprop="name">
                                {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
                                <a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
                                    {$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
                                </a>
                            </h5>
                            {hook h='displayProductListReviews' product=$product}
                            <p class="product-desc" itemprop="description">
                                {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
                            </p>
                            {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
					        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_price">
						        {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
							        <span itemprop="price" class="price product-price">
								       {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
							        </span>
							        <meta itemprop="priceCurrency" content="{$priceDisplay}" />
							        {if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
								        <span class="old-price product-price">
									        {displayWtPrice p=$product.price_without_reduction}
								        </span>
								        {if $product.specific_prices.reduction_type == 'percentage'}
									        <span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
								        {/if}
							       {/if}
						       {/if}
					        </div>
					        {/if}
                            <div class="button-container">
                                {if ( $tzc_but_show && ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE)}
                                    {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
                                        {if isset($static_token)}
                                            <a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart' mod='themeszonecarousel'}" data-id-product="{$product.id_product|intval}">
                                                <span>{l s='Add to cart' mod='themeszonecarousel'}</span>
                                            </a>
                                        {else}
                                            <a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart' mod='themeszonecarousel'}" data-id-product="{$product.id_product|intval}">
                                                <span>{l s='Add to cart' mod='themeszonecarousel'}</span>
                                            </a>
                                        {/if}
                                    {else}
                                        <span class="button ajax_add_to_cart_button btn btn-default disabled">
									<span>{l s='Add to cart' mod='themeszonecarousel'}</span>
								</span>
                                    {/if}
                                {/if}
                                {if ($tzc_more_show) }
                                <a itemprop="url" class="button lnk_view btn btn-default" href="{$product.link|escape:'html':'UTF-8'}" title="{l s='View' mod='themeszonecarousel'}">
                                    <span>{if (isset($product.customization_required) && $product.customization_required)}{l s='Customize' mod='themeszonecarousel'}{else}{l s='More' mod='themeszonecarousel'}{/if}</span>
                                </a>
                                {/if}
                            </div>
                            {if isset($product.color_list)}
                                <div class="color-list-container">{$product.color_list}</div>
                            {/if}
                            <div class="product-flags">
                                {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                                    {if isset($product.online_only) && $product.online_only}
                                        <span class="online_only">{l s='Online only' mod='themeszonecarousel'}</span>
                                    {/if}
                                {/if}
                                {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                                {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                                    <span class="discount">{l s='Reduced price!' mod='themeszonecarousel'}</span>
                                {/if}
                            </div>
                            {if ($tzc_qty_show && (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order))))}

                                {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}
                                    <span itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="availability">
								{if ($product.allow_oosp || $product.quantity > 0)}
                                    <span class="{if $product.quantity <= 0 && !$product.allow_oosp}out-of-stock{else}available-now{/if}">
										<link itemprop="availability" href="http://schema.org/InStock" />{if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if}
									</span>
								{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}
									<span class="available-dif">
										<link itemprop="availability" href="http://schema.org/LimitedAvailability" />{l s='Product available with different options' mod='themeszonecarousel'}
									</span>
								{else}
									<span class="out-of-stock">
										<link itemprop="availability" href="http://schema.org/OutOfStock" />{l s='Out of stock' mod='themeszonecarousel'}
									</span>
                                {/if}
							</span>
                                {/if}

                            {/if}
                        </div>
                        {if $page_name != 'index'}
                            <div class="functional-buttons clearfix">
                                {hook h='displayProductListFunctionalButtons' product=$product}
                                {if isset($comparator_max_item) && $comparator_max_item}
                                    <div class="compare">
                                        <a class="add_to_compare" href="{$product.link|escape:'html':'UTF-8'}" data-id-product="{$product.id_product}">{l s='Add to Compare' mod='themeszonecarousel'}</a>
                                    </div>
                                {/if}
                            </div>
                        {/if}
                    </div><!-- .product-container> -->
                </li>
            {/foreach}
        </ul>

        {addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL}
        {addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL}
        {addJsDef comparator_max_item=$comparator_max_item}
        {addJsDef comparedProductsIds=$compared_products}
    <script>

        $(document).ready(function() {

            var owl = $("#owl-slider");

            owl.owlCarousel({

                items : {$items_wide}, //10 items above 1000px browser width
                itemsDesktop : [1000,{$items_desktop}], //5 items between 1000px and 901px
                itemsDesktopSmall : [900,{$items_desktop_small}], // 3 items betweem 900px and 601px
                itemsTablet: [600,{$items_tablet}], //2 items between 600 and 0;
                itemsMobile : {$items_mobile}, // itemsMobile disabled - inherit from itemsTablet option
                autoPlay: {$tzc_autoplay},
                navigation: {$tzc_nav},
                navigationText: false,
                pagination: false,
                //rewindNav: false, // add this to stop the rewinding
                rewindSpeed: 5000 // add this to slow the rewind down to 5 seconds

            });

        });
    </script>
    </div>
{/if}

post-777922-0-50727600-1428156745_thumb.jpg

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

 

Tanks Elise B. for the help about misspelled word.

 

I've made some changes Inside hook.tlp to show the old price and the new price and the colored box reduction.

Added also the Sale! box.

 

Here is the full hook.tlp file used and works fine for me.

 

hook.tlp

{if isset($products) && $products}

    <div class="tz-carousel">
    <h2 class="title_block">
					{$title}
			</h2>

        <!-- Products list -->
        <ul id="owl-slider" class="owl-carousel product_list grid">
            {foreach from=$products item=product name=products}

                <li class="item ajax_block_product">
                    <div class="product-container" itemscope itemtype="http://schema.org/Product">
                        <div class="left-block">
                            <div class="product-image-container">
                                <a class="product_img_link"	href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
                                    <img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
                                </a>
                                {if isset($quick_view) && $quick_view}
                                    <a class="quick-view" href="{$product.link|escape:'html':'UTF-8'}" rel="{$product.link|escape:'html':'UTF-8'}">
                                        <span>{l s='Quick view' mod='themeszonecarousel'}</span>
                                    </a>
                                {/if}
                                {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                                    <div class="content_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                        {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
                                            {if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
                                                {hook h="displayProductPriceBlock" product=$product type="old_price"}
                                                <span class="old-price product-price">
											{displayWtPrice p=$product.price_without_reduction}
										</span>
                                            {/if}
                                            <span itemprop="price" class="price product-price">
										{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
									</span>
                                            <meta itemprop="priceCurrency" content="{$currency->iso_code}" />

                                            {hook h="displayProductPriceBlock" product=$product type="price"}
                                            {hook h="displayProductPriceBlock" product=$product type="unit_price"}
                                        {/if}
                                    </div>
                                {/if}
                                {if isset($product.new) && $tzc_new_show && $product.new == 1}
                                    <a class="new-box" href="{$product.link|escape:'html':'UTF-8'}">
                                        <span class="new-label">{l s='New' mod='themeszonecarousel'}</span>
                                    </a>
                                {/if}
                                {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                                    <a class="sale-box no-print" href="{$product.link|escape:'html':'UTF-8'}">
                                        <span class="sale-label">{l s='Sale!' mod='themeszonecarousel'}</span>
                                    </a>
                                {/if}
                            </div>
                            {hook h="displayProductDeliveryTime" product=$product}
                            {hook h="displayProductPriceBlock" product=$product type="weight"}
                        </div>
                        <div class="right-block">
                            <h5 itemprop="name">
                                {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
                                <a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
                                    {$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
                                </a>
                            </h5>
                            {hook h='displayProductListReviews' product=$product}
                            <p class="product-desc" itemprop="description">
                                {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
                            </p>
                            {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
					        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_price">
						        {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
							        <span itemprop="price" class="price product-price">
								       {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
							        </span>
							        <meta itemprop="priceCurrency" content="{$priceDisplay}" />
							        {if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
								        <span class="old-price product-price">
									        {displayWtPrice p=$product.price_without_reduction}
								        </span>
								        {if $product.specific_prices.reduction_type == 'percentage'}
									        <span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
								        {/if}
							       {/if}
						       {/if}
					        </div>
					        {/if}
                            <div class="button-container">
                                {if ( $tzc_but_show && ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE)}
                                    {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
                                        {if isset($static_token)}
                                            <a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart' mod='themeszonecarousel'}" data-id-product="{$product.id_product|intval}">
                                                <span>{l s='Add to cart' mod='themeszonecarousel'}</span>
                                            </a>
                                        {else}
                                            <a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart' mod='themeszonecarousel'}" data-id-product="{$product.id_product|intval}">
                                                <span>{l s='Add to cart' mod='themeszonecarousel'}</span>
                                            </a>
                                        {/if}
                                    {else}
                                        <span class="button ajax_add_to_cart_button btn btn-default disabled">
									<span>{l s='Add to cart' mod='themeszonecarousel'}</span>
								</span>
                                    {/if}
                                {/if}
                                {if ($tzc_more_show) }
                                <a itemprop="url" class="button lnk_view btn btn-default" href="{$product.link|escape:'html':'UTF-8'}" title="{l s='View' mod='themeszonecarousel'}">
                                    <span>{if (isset($product.customization_required) && $product.customization_required)}{l s='Customize' mod='themeszonecarousel'}{else}{l s='More' mod='themeszonecarousel'}{/if}</span>
                                </a>
                                {/if}
                            </div>
                            {if isset($product.color_list)}
                                <div class="color-list-container">{$product.color_list}</div>
                            {/if}
                            <div class="product-flags">
                                {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                                    {if isset($product.online_only) && $product.online_only}
                                        <span class="online_only">{l s='Online only' mod='themeszonecarousel'}</span>
                                    {/if}
                                {/if}
                                {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                                {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                                    <span class="discount">{l s='Reduced price!' mod='themeszonecarousel'}</span>
                                {/if}
                            </div>
                            {if ($tzc_qty_show && (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order))))}

                                {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}
                                    <span itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="availability">
								{if ($product.allow_oosp || $product.quantity > 0)}
                                    <span class="{if $product.quantity <= 0 && !$product.allow_oosp}out-of-stock{else}available-now{/if}">
										<link itemprop="availability" href="http://schema.org/InStock" />{if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if}
									</span>
								{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}
									<span class="available-dif">
										<link itemprop="availability" href="http://schema.org/LimitedAvailability" />{l s='Product available with different options' mod='themeszonecarousel'}
									</span>
								{else}
									<span class="out-of-stock">
										<link itemprop="availability" href="http://schema.org/OutOfStock" />{l s='Out of stock' mod='themeszonecarousel'}
									</span>
                                {/if}
							</span>
                                {/if}

                            {/if}
                        </div>
                        {if $page_name != 'index'}
                            <div class="functional-buttons clearfix">
                                {hook h='displayProductListFunctionalButtons' product=$product}
                                {if isset($comparator_max_item) && $comparator_max_item}
                                    <div class="compare">
                                        <a class="add_to_compare" href="{$product.link|escape:'html':'UTF-8'}" data-id-product="{$product.id_product}">{l s='Add to Compare' mod='themeszonecarousel'}</a>
                                    </div>
                                {/if}
                            </div>
                        {/if}
                    </div><!-- .product-container> -->
                </li>
            {/foreach}
        </ul>

        {addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL}
        {addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL}
        {addJsDef comparator_max_item=$comparator_max_item}
        {addJsDef comparedProductsIds=$compared_products}
    <script>

        $(document).ready(function() {

            var owl = $("#owl-slider");

            owl.owlCarousel({

                items : {$items_wide}, //10 items above 1000px browser width
                itemsDesktop : [1000,{$items_desktop}], //5 items between 1000px and 901px
                itemsDesktopSmall : [900,{$items_desktop_small}], // 3 items betweem 900px and 601px
                itemsTablet: [600,{$items_tablet}], //2 items between 600 and 0;
                itemsMobile : {$items_mobile}, // itemsMobile disabled - inherit from itemsTablet option
                autoPlay: {$tzc_autoplay},
                navigation: {$tzc_nav},
                navigationText: false,
                pagination: false,
                //rewindNav: false, // add this to stop the rewinding
                rewindSpeed: 5000 // add this to slow the rewind down to 5 seconds

            });

        });
    </script>
    </div>
{/if}

Bonjour merci pour ce partage, je viens de faire la modif cela ne change rien pour moi sur version 1.6.14 ! Amitiés

Share this post


Link to post
Share on other sites

Have you thought to clear the cache ? It may be useful to validate again ThemesZoneCarousel module (simply use the button register).

 

As-tu pensé à vider le cache ? Il peut être utile de valider à nouveau le module ThemesZoneCarousel (simplement : enregistrer).

 

Fonctionne parfaitement sur la version PS 1.6.0.6 !

 

 

Share this post


Link to post
Share on other sites

Have you thought to clear the cache ? It may be useful to validate again ThemesZoneCarousel module (simply use the button register).

 

As-tu pensé à vider le cache ? Il peut être utile de valider à nouveau le module ThemesZoneCarousel (simplement : enregistrer).

 

Fonctionne parfaitement sur la version PS 1.6.0.6 !

Merci du retour, je lai fait, je vais le refaire , sinon la modif le prix barré et la case rouge ?

Share this post


Link to post
Share on other sites

To show the specific prices with réductions we need to add them Inside products.

 

Look at the PrestaShop manual !

 

Afin que s'affichent les prix promotionnels avec les réductions, il faut le définir dans les produits :

 

cf manuel de l'utilisateur PretaShop : Section : Prix spécifiques, gérer les réductions de prix

 

http://doc.prestashop.com/pages/viewpage.action?pageId=20840569

 

 

Friendly

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Afin que s'affichent les prix promotionnels avec les réductions, il faut le définir dans les produits :

 

cf manuel de l'utilisateur PretaShop : Section : Prix spécifiques, gérer les reductions de prix

 

http://doc.prestashop.com/pages/viewpage.action?pageId=20840569

Merci du retour, je n'ai pas de soucis a se niveau je connais cette démarche, Excuse moi je me suis mal exprimer, ce que je voulais te dire cela concerne la modif que tu as apporté au hook.tpl chez moi avec ou sans le prix est barré et de plus j'ai bien la case pourcentage elle n'est pas rouge ? Ci-joint capture ! Amitiés

post-475475-0-01917000-1428270050_thumb.png

Edited by Soyons Solidaires (see edit history)

Share this post


Link to post
Share on other sites

Afin de modifier la couleur pour l'affichage du pourcentage pour le rabais, modifier le fichier : global.css

 

Dans mon fichier, cela se trouve à la ligne 5924  : couleur rouge : #f13340

.price-percent-reduction {
  background: #f13340;  /* couleur rouge */
  border: 1px solid #d02a2c;
  font: 600 21px/24px "Open Sans", sans-serif;
  color: white;
  padding: 0 5px 0 3px;
  display: inline-block; }

Friendly

Share this post


Link to post
Share on other sites

Afin de modifier la couleur pour l'affichage du pourcentage pour le rabais, modifier le fichier : global.css

 

Dans mon fichier, cela se trouve à la ligne 5924  : couleur rouge : #f13340

.price-percent-reduction {
  background: #f13340;  /* couleur rouge */
  border: 1px solid #d02a2c;
  font: 600 21px/24px "Open Sans", sans-serif;
  color: white;
  padding: 0 5px 0 3px;
  display: inline-block; }

Friendly

Bonjour mon ami myselfidem, tu vas me rendre fou...mdr, la modification que tu as apporté au fichier hook.tpl elle change quoi ? Comme je t'ai dit chez moi elle ne change rien ? ou j'ai glissé quelque part :) Sinon pour avoir .price-percent-reduction { background: #f13340; /* couleur rouge */ moi je fais comme ça  : Modules themeconfigurator = css = theme6.css ligne 138  background: #f13340; ça fonctionne :P Bonne journée ! Amitiés

Edited by Soyons Solidaires (see edit history)

Share this post


Link to post
Share on other sites

Bonjour "Soyons Solidaires" !

 

La modification du fichier hook.tpl ajoute la boîte de réduction (en francs, euros, ou %), de même l'ordre des prix est modifié :

à gauche : prix final ; ensuite : ancien prix barré ; ensuite : boîte rouge avec rabais en pourcentage.

 

Visiblement cela fonctionne parfaitement pour toi, comme je le constate sur l'image que tu as postée précédemment !

;-)

 

Amicalement

 

You can see on the attached images the displayed prices with the old hook.tpl and the new hook.tlp I shared!

post-777922-0-68557900-1428302554_thumb.jpg

post-777922-0-47000300-1428302568_thumb.jpg

Edited by myselfidem (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

Bonjour "Soyons Solidaires" !

 

La modification du fichier hook.tpl ajoute la boîte de réduction (en francs, euros, ou %), de même l'ordre des prix est modifié :

à gauche : prix final ; ensuite : ancien prix barré ; ensuite : boîte rouge avec rabais en pourcentage.

 

Visiblement cela fonctionne parfaitement pour toi, comme je le constate sur l'image que tu as postée précédemment !

;-)

 

Amicalement

Oui justement je ne comprenais pas, avec ou sans ça fonctionne  :) Amitiés

Share this post


Link to post
Share on other sites

Tu dis que le fichier précédent hook.tlp fonctionne pour toi ?

 

De même la modification du fichier hook.tlp n'apporte aucune modification ?

 

Dans mon cas cela fait toute la différence !

 

You don't see any difference with the old hook.tpl and the new hook.tpl ?

 

Look at post 102 shared by sbt :

 

https://www.prestashop.com/forums/topic/380202-products-carousel-free-prestashop-16-module/?p=2014544

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Tu dis que le fichier précédent hook.tlp fonctionne pour toi ?

 

De même la modification du fichier hook.tlp n'apporte aucune modification ?

 

Dans mon cas cela fait toute la différence !

 

You don't see any difference with the old hook.tpl and the new hook.tpl ?

 

Look at post 102 shared by sbt :

 

https://www.prestashop.com/forums/topic/380202-products-carousel-free-prestashop-16-module/?p=2014544

Regarde se que ça fait chez moi sans le module installer ci-joint capture ! ou j'ai pas compris ? Amitiés

post-475475-0-87415500-1428304599_thumb.png

Edited by Soyons Solidaires (see edit history)

Share this post


Link to post
Share on other sites

C'est exact pour les étiquettes de produits ; mais avec le module ThemesZoneCarousel, le résultat dans le carrousel est modifié de la même manière.

 

La modification du fichier hook.tpl permet d'obtenir ainsi dans le carrousel un affichage à l'identique !

 

Ce qui n'était pas le cas avec l'ancien fichier hook.tlp !

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

C'est exact pour les étiquettes de produits ; mais avec le module ThemesZoneCarousel, le résultat dans le carrousel est modifié de la même manière.

 

La modification du fichier hook.tpl permet d'obtenir ainsi dans le carrousel un affichage à l'identique !

 

Ce qui n'était pas le cas avec l'ancien fichier hook.tlp !

Merci j'ai compris :o mille excuses mon ami, je mets le fichier modifié, merci à notre ami Myselfidem ! Amitiés 

hook.zip

Edited by Soyons Solidaires (see edit history)

Share this post


Link to post
Share on other sites

Merci pour ce module, mais je trouve qu'il y a un trop grand espace en dessous du carousel.

 

Sinon j'ai un petit problème avec les boutons au lieu d’être l'un a coté de l'autre il sont l'un dessus l'autre.

Edited by vendugeek (see edit history)

Share this post


Link to post
Share on other sites

Hello,

 

If you want buttons one beside the other, change Inside style.css the lines ; it's already inside the last 0.9.5 ThemesZoneCarousel version !

.owl-buttons {
    position: absolute;
    right:0;
    top: -72px;
}

.owl-buttons .owl-prev, .owl-buttons .owl-next {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 50px !important;
    text-align: center;
}

.owl-prev{
    margin-right: 1px !important;
}

.owl-next{
    margin-right: 15px !important;
}

.owl-buttons .owl-prev:before{
    font-family: "FontAwesome";
    content: "\f104";
    display: inline-block;
    color: white;
}

.owl-buttons .owl-next:before {
    font-family: "FontAwesome";
    content: "\f105";
    display: inline-block;
    color: white;
}

A propos des boutons, modifier le code dans style.css, comme indiqué ci-dessus afin qu'ils soient l'un à côté de l'autre.

 

Amicalement

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Hello!

 

Great work you've done here!

 

Pardon me for asking this, but can you provide a step by step guide on how to duplicate this module manually?

 

I tried it on my own, replacing 'themeszonecarousel' in every file I could find it, but it didn't work..

 

That would really help me too

Share this post


Link to post
Share on other sites

Hello,

 

I suggest to add a new feature to disable the Quick View only on the ThemesZoneCarousel.

 

Adding some code :

 

themeszonecarousel.php :

protected function initConfig() {
 $config['tzc_quick_view'] = true;  (on line 77)
 
 --------------------------------------
 
 public function hookDisplayHome($params) {
 
  'tzc_quick_view' => $config['tzc_quick_view'] ? true : false, (on line 143) 
  
  ------------------------------------
  
 public function renderForm() {
   
   array(  (from line 306)
       'type' => 'switch',
       'label' => $this->l('Show Quick View'),
       'name' => 'tzc_quick_view',
       'is_bool' => true,
       'desc' => $this->l('Should the Quick View button be displayed?'),
       'values' => array(
             array(
                  'id' => 'active_on',
                          'value' => true,
                          'label' => $this->l('Yes')
                     ),
                            array(
                                'id' => 'active_off',
                                'value' => false,
                                'label' => $this->l('No')
                            )
                        ),
                    ),
                    
-------------------------------------

  public function postProcess() {
  
   $config['tzc_quick_view'] = Tools::getValue('tzc_quick_view');  (on line 498)                 

Inside : hook.tpl :

{if isset($quick_view) && $tzc_quick_view}

Now we can add Quick View for all product except for ThemeZoneCarousel !

 

Tested and works fine for me.

 

If needed here is the new French tanslated file.

 

Friendly

fr.zip

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Bonjour "Soyons Solidaires" !

 

Cela a déjà été signalé, et la correction est la suivante et l'affichage sera en français.

Fonctionne parfaitement pour moi :

 

hook.tpl (ligne 50)

 <span class="sale-label">{l s='Sale!' mod='themeszonecarousel'}</span>

Amicalement

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Bonjour "Soyons Solidaires" !

 

Cela a déjà été signalé, et la correction est la suivante et l'affichage sera en français.

Fonctionne parfaitement pour moi :

 

hook.tpl (ligne 50)

 <span class="sale-label">{l s='Sale!' mod='themeszonecarousel'}</span>

Amicalement

Salut

Merci, justement j'ai modifier ça na pas marcher chez moi ? oblige de changer Sale! par Promo! 

Amitiés

Edited by Soyons Solidaires (see edit history)

Share this post


Link to post
Share on other sites

"Soyons Solidaires"

 

Pour le fichier hook.tpl, il faut simplement vérifier le fichier de traduction française pour : Promo!

 

Poue l'image "En filigrane" utiliser le module Filigrane

 

Sélectionner l'image au format .gif souhaitée, et décider si celle-ci apparaît ou non pour les visiteurs du site.

 

Exemple créé pour aider en pièce jointe.

 

L'mage est personnelle et personnalisable par tes soins !

post-777922-0-40365600-1429025205_thumb.jpg

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

"Soyons Solidaires"

 

Pour le fichier hook.tpl, il faut simplement vérifier le fichier de traduction française pour : Promo!

 

Poue l'image "En filigrane" utiliser le module Filigrane

 

Sélectionner l'image au format .gif souhaitée, et décidé si celle-ci apparaît ou non pour les visiteurs du site.

 

Exemple créé pour aider en pièce jointe.

 

L'mage est personnelle et personnalisable par tes soins !

Merci du retour sur version 1.0.6.14 il n'ya pas moyen d'avoir la même chose que les images des produits sur l'accueil ? Amitiés

Share this post


Link to post
Share on other sites

Dear !

 

Sorry but it would be nice to write in English for other members !

 

You would have with ThemesZoneCarousel the same watermark image ?

 

Select the images sizes for watermark images and works fine also with ThemesZoneCarousel.

 

Friendly ;-)

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites
  • 2 weeks later...

[Version française]

Bonjour à tous,

 

Merci pour ce module !

 

Je l'utilise pour afficher les produits d'une catégorie ; un petit problème de configuration à signaler : dans themeszonecarousel.php, dans la fonction privée getProducts,$nb n'est pas passée en paramètre et est par défaut à 10000... Pour que le nombre de produits de la catégorie affichée soit bien celui indiquée dans le backoffice, il faut :

- dans la fonction hookDisplayHome mettre 

 case 'category':
                if ( isset($config['cat_id']) && $config['cat_id'] > 0 ) $product_set = $this->getProducts($config['cat_id'], $config['items_number']);
                break;

- changer le fonctionnement de la fonction getProducts :

private function getProducts($cat_id, $nb=100){
        $products = false;
        if (!$cat_id) return;
        $category = new Category((int)$cat_id, (int)Context::getContext()->language->id);
        $products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 10));
        if (!$products)
            return;
        return $products;
    }

Je rencontre un petit problème avec l'affichage de la liste des couleurs. En fait, dans hook.tpl on appelle $product.color_list... et quand je demande l'affichage de $product à smarty avec {$product|@print_r}, je vois que color_list n'est pas une propriété de $product... comment faire pour l'obtenir ? Merci d'avance !

 

[English version]

Hi all,

 

Thanks for this module!

 

I use it to show category products; I noticed a problem: in themeszonecarousel.php, in the private getProducts function,$nb is not passed as a parameter and defaults to 10000... To dusplay the number of category products as indicated in the backoffice, you must :

- in hookDisplayHome function put; 

case 'category':
if ( isset($config['cat_id']) && $config['cat_id'] > 0 ) $product_set = $this->getProducts($config['cat_id'], $config['items_number']);
break; 

- change the operation of the function getProducts: 

 private function getProducts($cat_id, $nb=100){
        $products = false;
        if (!$cat_id) return;
        $category = new Category((int)$cat_id, (int)Context::getContext()->language->id);
        $products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 10));
        if (!$products)
            return;
        return $products;
}

I have now a problem with color list of a product

I'm having a little problem with the display of the color list on a product. In fact, in hook.tpl $product.color_list is called ... and when I print $product with {$ product|@print_r} I see that color_list is not a property of $product ... how do you get it? Thank you in advance!

  • Like 1

Share this post


Link to post
Share on other sites

 

Responsive Products Carousel Module Prestashop 1.6 module
version: 0.9.5

by https://themes.zone

 

update 0.9.5: Added options provided by @myselfidem

update 0.9.4: Fixed featured products bug (typo indeed), added functionality kindly provided by @myselfidem

update 0.9.3: Added fixes kindly provided by @myselfidem and functionality to hide Buttons and Qty

update 0.9.2: Small CSS Fix.

update 0.9.1: Added functionality, now you can also chose a category to display in the carousel.

 

LIVE DEMO

 

Please share it with others:

@ThemesZone

 

Help and Support at https://themes.zone

 

 

Esta excelente el modulo, lo voy a instalar en mi tienda.

 

Solo tengo una consulta, como puedo hacer que se vean más pequeños los cuadros?, que sea igual por ejemplo a como muestra por defecto en prestashop. he intentado con css, pero, me cuesta bastante, no logro entender bien.

 

Saludos! y una vez más gracias por el aporte!

Share this post


Link to post
Share on other sites

Hi

 

I installed the latest update on ps 1.6.14 but it doesn't work . just white space displaying. i unhooked all homefeatured , best sellers and new products from DisplayTab and TabContents and i only have this module enable , but it seems there is a problem .

 

i really appreciate anyone helping me about that .

 

thank you .

 

_________________

 

I found out the problem. the module works well with LTR themes, but in RTL themes you need to do a littlle css modification .

 

Big Thanks For authors

Edited by the_raven (see edit history)

Share this post


Link to post
Share on other sites

your module only display one category. I want to display several block with different category. Like Men's Shopping, Women's Shopping, Gadgets etc. Please help me in this regard.

Share this post


Link to post
Share on other sites
  • 2 weeks later...

I changed it and nothing happend. See at our shop www.seagarden.pl We would like to reduce the time when carousel is not moving.  When I look on Carusel is 5 pictures . I wouldn't wait so long to see next product-this is the main point. DO you know is it possible to show the produce random, now is a to z.

Friendly :)

Share this post


Link to post
Share on other sites

Hello,

 

If you want to reduce the time between images, look at the owl.carousel.js file and change the value to suit your needs :

if (base.options.autoPlay === true) {
          base.options.autoPlay = 2000; /*5000;*/

For my example I use owl.carousel.js !

 

This file was include inside the first ThemesZoneCarousel.

 

If you want use the owl.carousel.js you need also to change the themeszonecarousel.php file, on line 101 :

$this->context->controller->addJS($this->_path .'/js/'. 'owl.carousel.js');

Friendly

owl.carousel.zip

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Hello!

 

Where and what to change in slider module files (?) to remove blank area over and under my carousel: www.alestyle.pl ?

 

Of course ...great module! :)

 

Jan

Share this post


Link to post
Share on other sites

Hello,

 

You can try to change the values Inside : .\modules\themeszonecarousel\css\owl.carousel.css (from line : 28) : Example

.owl-carousel .owl-wrapper-outer {
    overflow: hidden;
    padding-bottom: 60px; /* 80px */
    padding-top: 5px;  /* 20 px */
    position: relative;
    width: 100%;

Friendly

  • Like 1

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Hi,Thank you for this module.And here I need to display products as per date of products added,because it displaying in ascending order i.e, old products first.Please clarify me if...

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Hi, thx you so much for this module! 

One question. I need 3 slider (from different categories) on main page. How to dublicate module correctly? because I try to dublicate all and changes all "themeszonecarousel" on "themeszonecarousel2" . 

For example 

http://picsee.net/upload/2015-06-24/b31fb3ba58c8.jpg

http://picsee.net/upload/2015-06-24/8006ee17de43.jpg

 

The module is installed. But there is only one module in module list:

http://picsee.net/upload/2015-06-24/945061c9491b.jpg

 

thanks in advance for your reply

Share this post


Link to post
Share on other sites

Hello, 

 

I would like to translate "add to cart" and other terms to lithuanian language, but when I edit hook.tpl the text is missing. It is because I use lithuanian special symbols and the encoding do not fits. Please advice me, where should I edit file encoding in order to get appropriate text screening? 

 

thank you 

Share this post


Link to post
Share on other sites

edit translations with prestashop tool to define translations

you can do the same for this module as i did for facebook here:

 

just instead block facebook - search for this one, the rest is the same

Share this post


Link to post
Share on other sites

Hi,Products showing on carousel are in ascending order,I also tried to change on performance tab and at product but its not working on this module.Kindly please tell me if there is script to change the order of products in descending order at this module.

 

Thanks

Regards

vanakkamshoppers.com

Share this post


Link to post
Share on other sites

edit translations with prestashop tool to define translations

you can do the same for this module as i did for facebook here:

 

just instead block facebook - search for this one, the rest is the same

 

 

Not work. There is no words to translate "add to card, more, in stock" etc....

Share this post


Link to post
Share on other sites
A very good module

But I encountered a problem, there is a problem with the phone open website.

img.png

 

He just shows how one product?

Sorry my English is not good

Share this post


Link to post
Share on other sites

Well, You can alter the CSS file for OWL slider so that the buttons are on left and right side. To be specific:

Open css/style.css file in the module'd folder, there locate the following code:

.owl-buttons{
    position: absolute;
    right:0;
    top: -54px;
}

.owl-buttons .owl-prev, .owl-buttons .owl-next{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 50px !important;
    text-align: center;
}

.owl-prev{
    margin-right: 1px !important;
}

.owl-next{
    margin-right: 15px !important;
}

and change it to this:

.owl-buttons{
   position: relative;
}

.owl-buttons .owl-prev, .owl-buttons .owl-next{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 50px !important;
    text-align: center;
}

.owl-prev{

    position: absolute;
    top: 50%;
    left: 0;
}

.owl-next{

    position: absolute;
    top: 50%;
    right: 0;
}

something like this, most likely you will have to adjust the positions.

Hi I did that but buttons are not showing at all...any help?

Share this post


Link to post
Share on other sites

 

Responsive Products Carousel Module Prestashop 1.6 module
version: 0.9.5

by https://themes.zone

 

update 0.9.5: Added options provided by @myselfidem

update 0.9.4: Fixed featured products bug (typo indeed), added functionality kindly provided by @myselfidem

update 0.9.3: Added fixes kindly provided by @myselfidem and functionality to hide Buttons and Qty

update 0.9.2: Small CSS Fix.

update 0.9.1: Added functionality, now you can also chose a category to display in the carousel.

 

LIVE DEMO

 

Please share it with others:

@ThemesZone

 

Help and Support at https://themes.zone

 

Hi,Nice module and thank you for this fabulous work.Here I am facing little problem on sorting of products,i.e.,products to be arranged in descending order on carousel.I also tried to change pagination on preference/product tab but here on carousel not changing.Help me recover this problem.

Share this post


Link to post
Share on other sites

Well, You can alter the CSS file for OWL slider so that the buttons are on left and right side. To be specific:

Open css/style.css file in the module'd folder, there locate the following code:

.owl-buttons{
    position: absolute;
    right:0;
    top: -54px;
}

.owl-buttons .owl-prev, .owl-buttons .owl-next{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 50px !important;
    text-align: center;
}

.owl-prev{
    margin-right: 1px !important;
}

.owl-next{
    margin-right: 15px !important;
}

and change it to this:

.owl-buttons{
   position: relative;
}

.owl-buttons .owl-prev, .owl-buttons .owl-next{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 50px !important;
    text-align: center;
}

.owl-prev{

    position: absolute;
    top: 50%;
    left: 0;
}

.owl-next{

    position: absolute;
    top: 50%;
    right: 0;
}

something like this, most likely you will have to adjust the positions.

Hi, thanks for this great module but I have some problems.

I'm using default theme and PS 1.6.14 and when I installed the module my buttons are only seen on mouse hover and they are aligned on top right corner vertical not horizontal ( see pic)

post-1058276-0-07462500-1437387803_thumb.jpg

I try like it saying on upper post but my "prev" button is gone ( cant find it) and my "next" button is on my CMS page.

post-1058276-0-21170700-1437387937_thumb.jpg

 

Please help me how to position buttons in horizontal align and prev on left side and next on right side of carousel and how to make them visable not only on mouse hover.

 

Thank you.

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Hi, thanks for this great module but I have some problems.

I'm using default theme and PS 1.6.14 and when I installed the module my buttons are only seen on mouse hover and they are aligned on top right corner vertical not horizontal ( see pic)

attachicon.gifcarusel.jpg

I try like it saying on upper post but my "prev" button is gone ( cant find it) and my "next" button is on my CMS page.

attachicon.gifcarusel2.jpg

 

Please help me how to position buttons in horizontal align and prev on left side and next on right side of carousel and how to make them visable not only on mouse hover.

 

Thank you.

try with this style.css

style.css

Share this post


Link to post
Share on other sites

Hello,

 

How to duplicate themeszonecarousel ?

 

I've made like this :

 

1 - Rename the main folder : themeszonecarousel2

 

2 - Rename : themeszonecarousel.php as themeszonecarousel2.php

 

3 - Inside themeszonecarousel2.php change to :

class ThemesZoneCarousel2 extends Module {

    public function __construct() {
        $this->name = 'themeszonecarousel2'; // internal identifier, unique and lowercase
        $this->tab = ''; // backend module coresponding category - optional since v1.6
        $this->version = '0.9.6'; // version number for the module

Change and rename js and css names files to :

public function hookHeader() {
        $this->context->controller->addCSS($this->_path .'/css/'. 'owl.carousel2.css');
        $this->context->controller->addCSS($this->_path .'/css/'. 'owl.theme2.css');
        $this->context->controller->addCSS($this->_path .'/css/'. 'owl.transitions2.css');
        $this->context->controller->addCSS($this->_path .'/css/'. 'style2.css');
        $this->context->controller->addJS($this->_path .'/js/'. 'owl.carousel2.js');
        $this->context->controller->addJS($this->_path .'/js/'. 'script2.js');
    }

Rename hook.tpl ( inside views\templates\hook\hook.tpl) to hook1.tpl

return $this->display(__FILE__, 'hook1.tpl');

Rename all tzc_XXX to tc_XXX : inside themeszonecarousel2 and hook1.tpl

 $config['tc_but_show'] = true;
        $config['tc_more_show'] = true;
        $config['tc_new_show'] = true;
        $config['tc_qty_show'] = true;

Inside the folder : hook1.tpl change : "owl-slider"

<!-- Products list -->
        <ul id="owl-slider" class="owl-carousel product_list grid">

To : "owl-slider2"

<!-- Products list -->
        <ul id="owl-slider2" class="owl-carousel product_list grid">

And at the bottom of the hook1.tpl change to :

 var owl = $("#owl-slider2");

Change : "tzc-carousel" to "tc-carousel"

<div class="tc-carousel">

Inside style2.css change : tzc-carousel to tc-carousel

tc-carousel {
    position: relative;
    margin-top: 40px; 
}

Inside : config.xml and your config-xx.xml files

<name>themeszonecarousel2</name>

	<version><![CDATA[0.9.6]]></version>

Inside the folder : translations (lang.php) : change themeszonecarousel and hook to themeszonecarousel2 and hook1

<?php

global $_MODULE;
$_MODULE = array();
...
$_MODULE['<{themeszonecarousel2}prestashop>themeszonecarousel2_876f23178c29dc2552c0b48bf23cd9bd'] = 'Etes-vous sûr de vouloir désinstaller ce module ?';
$_MODULE['<{themeszonecarousel2}prestashop>themeszonecarousel2_f4f70727dc34561dfde1a3c529b6205c'] = 'Paramètres';
$_MODULE['<{themeszonecarousel2}prestashop>themeszonecarousel2_b78a3223503896721cca1303f776159b'] = 'Titre';
...
$_MODULE['<{themeszonecarousel2}prestashop>hook1_c91e4ee170226d66e90f99ba917e4c20'] = 'Aperçu rapide';
$_MODULE['<{themeszonecarousel2}prestashop>hook1_cb3c718c905f00adbb6735f55bfb38ef'] = 'Produit valable avec options';
$_MODULE['<{themeszonecarousel2}prestashop>hook1_b55197a49e8c4cd8c314bc2aa39d6feb'] = 'Hors stock';

Save all your changes and create a zip file : themeszonecarousel2.zip

 

Add the new addon as usual from the Back-Office.

 

Works fine for me...

 

Hope that can help.

 

Friendly

Edited by myselfidem (see edit history)
  • Like 3

Share this post


Link to post
Share on other sites

Hello,

 

How to duplicate themeszonecarousel ?

 

I've made like this :

 

1 - Rename the main folder : themeszonecarousel2

 

2 - Rename : themeszonecarousel.php as themeszonecarousel2.php

 

3 - Inside themeszonecarousel2.php change to :

class ThemesZoneCarousel2 extends Module {

    public function __construct() {
        $this->name = 'themeszonecarousel2'; // internal identifier, unique and lowercase
        $this->tab = ''; // backend module coresponding category - optional since v1.6
        $this->version = '0.9.6'; // version number for the module

Change and rename js and css names files to :

public function hookHeader() {
        $this->context->controller->addCSS($this->_path .'/css/'. 'owl.carousel2.css');
        $this->context->controller->addCSS($this->_path .'/css/'. 'owl.theme2.css');
        $this->context->controller->addCSS($this->_path .'/css/'. 'owl.transitions2.css');
        $this->context->controller->addCSS($this->_path .'/css/'. 'style2.css');
        $this->context->controller->addJS($this->_path .'/js/'. 'owl.carousel2.js');
        $this->context->controller->addJS($this->_path .'/js/'. 'script2.js');
    }

Rename hook.tpl ( inside views\templates\hook\hook.tpl) to hook1.tpl

return $this->display(__FILE__, 'hook1.tpl');

Rename all tzc_XXX to tc_XXX : inside themeszonecarousel2 and hook1.tpl

 $config['tc_but_show'] = true;
        $config['tc_more_show'] = true;
        $config['tc_new_show'] = true;
        $config['tc_qty_show'] = true;

Inside the folder : hook1.tpl change : "owl-slider"

<!-- Products list -->
        <ul id="owl-slider" class="owl-carousel product_list grid">

To : "owl-slider2"

<!-- Products list -->
        <ul id="owl-slider2" class="owl-carousel product_list grid">

And at the bottom of the hook1.tpl change to :

 var owl = $("#owl-slider2");

Change : "tzc-carousel" to "tc-carousel"

<div class="tc-carousel">

Inside style2.css change : tzc-carousel to tc-carousel

tc-carousel {
    position: relative;
    margin-top: 40px; 
}

Inside : config.xml and your config-xx.xml files

<name>themeszonecarousel2</name>

	<version><![CDATA[0.9.6]]></version>

Inside the folder : translations (lang.php) : change themeszonecarousel and hook to themeszonecarousel2 and hook1

<?php

global $_MODULE;
$_MODULE = array();
...
$_MODULE['<{themeszonecarousel2}prestashop>themeszonecarousel2_876f23178c29dc2552c0b48bf23cd9bd'] = 'Etes-vous sûr de vouloir désinstaller ce module ?';
$_MODULE['<{themeszonecarousel2}prestashop>themeszonecarousel2_f4f70727dc34561dfde1a3c529b6205c'] = 'Paramètres';
$_MODULE['<{themeszonecarousel2}prestashop>themeszonecarousel2_b78a3223503896721cca1303f776159b'] = 'Titre';
...
$_MODULE['<{themeszonecarousel2}prestashop>hook1_c91e4ee170226d66e90f99ba917e4c20'] = 'Aperçu rapide';
$_MODULE['<{themeszonecarousel2}prestashop>hook1_cb3c718c905f00adbb6735f55bfb38ef'] = 'Produit valable avec options';
$_MODULE['<{themeszonecarousel2}prestashop>hook1_b55197a49e8c4cd8c314bc2aa39d6feb'] = 'Hors stock';

Save all your changes and create a zip file : themeszonecarousel2.zip

 

Add the new addon as usual from the Back-Office.

 

Works fine for me...

 

Result : http://www.librairie-eauvive.ch

 

Hope that can help.

 

Friendly

Cool It´s works!!! thanks, 

Share this post


Link to post
Share on other sites