Search the Community

Hello Everyone, I am running on the latest version of prestashop and experiencing difficultly with the quickview feature. No matter which page I am on, it does not work. The loading icon just keeps going around in circles as if it is trying to load. Any ideas? Thank you for your expertise! Carlos

Intento usar el botón de quickview en el modal blockcart, pero cuando presiono en el botón y cierro el blockcart-modal para abrir el quickview al principio me carga todos los datos del producto pero segundos después desaparece. Aquí un video de ejemplo: https://www.youtube.com/watch?v=KP47Axd8N84 Este es el el template del modal donde tengo el botón de quickview: <div id="blockcart-modal" class="modal fade quickview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close wt_close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title h6 text-xs-center" id="myModalLabel"><i class="material-icons">&#xE876;</i>{l s='Product successfully added to your shopping cart' d='Shop.Theme.Checkout'}</h4> </div> <div class="modal-body"> <div class=""> <div class="col-md-5 divide-right"> <div class="row"> <div class="col-md-6"> <img class="product-image" src="{$product.cover.medium.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" itemprop="image"> </div> <div class="col-md-6"> <h6 class="h6 product-name">{$product.name}</h6> <p class="price">{$product.price}</p> {hook h='displayProductPriceBlock' product=$product type="unit_price"} {foreach from=$product.attributes item="property_value" key="property"} <span><strong>{$property}</strong>: {$property_value}</span><br> {/foreach} <p><strong>{l s='Quantity:' d='Shop.Theme.Checkout'}</strong>&nbsp;{$product.cart_quantity}</p> </div> </div> </div> <div class="col-md-7"> <div class="cart-content"> {if $cart.products_count > 1} <p class="cart-products-count">{l s='There are %products_count% items in your cart.' sprintf=['%products_count%' => $cart.products_count] d='Shop.Theme.Checkout'}</p> {else} <p class="cart-products-count">{l s='There is %product_count% item in your cart.' sprintf=['%product_count%' =>$cart.products_count] d='Shop.Theme.Checkout'}</p> {/if} <p><strong>{l s='Total products:' d='Shop.Theme.Checkout'}</strong>&nbsp;{$cart.subtotals.products.value}</p> <p><strong>{l s='Total shipping:' d='Shop.Theme.Checkout'}</strong>&nbsp;{$cart.subtotals.shipping.value} {hook h='displayCheckoutSubtotalDetails' subtotal=$cart.subtotals.shipping}</p> {if $cart.subtotals.tax} <p><strong>{$cart.subtotals.tax.label}</strong>&nbsp;{$cart.subtotals.tax.value}</p> {/if} <p class="price-total"><strong>{l s='Total:' d='Shop.Theme.Checkout'}</strong>&nbsp;{$cart.totals.total.value} {$cart.labels.tax_short}</p> <div class="cart-content-btn"> <button type="button" class="btn btn-secondary" data-dismiss="modal">{l s='Continue shopping' d='Shop.Theme.Actions'}</button> <a href="{$cart_url}" class="btn btn-primary"><i class="material-icons">&#xE876;</i>{l s='proceed to checkout' d='Shop.Theme.Actions'}</a> <article class="ajax_block_product product-miniature js-product-miniature" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}" itemscope itemtype="http://schema.org/Product"> <div class="product-quick-view"> <a href="javascript:void(0);" onclick="dimissBlockcart();return!1" class="btn btn-info medium-button quick-view" data-toggle="tooltip" data-placement="top" data-link-action="quickview" title="quickview" rel="#"> <span class="text">Back to the same product</span> </a> </div> </article> </div> </div> </div> </div> </div> </div> </div> </div> <script> function dimissBlockcart() { $("#blockcart-modal").modal("hide") } </script>

Hello everyone. I decided to modify the Quick View plugin to fit my needs by adding a few lines of code to the global.js file. The code I edited is: function quick_view() { $(document).on('click', '.quick-view:visible, .quick-view-mobile:visible', function(e){ e.preventDefault(); var url = this.rel; var anchor = ''; if (url.indexOf('#') != -1) { anchor = url.substring(url.indexOf('#'), url.length); url = url.substring(0, url.indexOf('#')); } if (url.indexOf('?') != -1) url += '&'; else url += '?'; if (!!$.prototype.fancybox) var myfancybox = $.fancybox({ 'padding': 0, 'width': 800, 'height': 610, 'autoSize': false, 'type': 'ajax', 'href': url + 'content_only=1' + anchor, beforeShow: function(){ $('#short_description_content').remove(); //$("#availability_statut").appendTo("#product_reference"); $("#availability_statut").remove(); $("#views_block").hide(); $("#views_block").hide(); $(".resetimg").hide(); $(".attribute_label").hide(); $(".unit-price").remove(); $("#feedback_quick_order").remove(); $("#product_reference").insertAfter("h1"); $(".content_prices").insertAfter(".product_attributes"); $("#quantity_wanted_p").insertAfter("#attributes"); $('<p id="add_to_cart1" class="buttons_bottom_block popup_second no-print" style="padding: 13px 0px 20px;"> <button type="submit" name="Submit" class="exclusive noicon" style="float: right;"> <span>Оформить заказ</span> </button></p>').insertAfter(".box-cart-bottom div"); $('<p id="add_to_cart" class="buttons_bottom_block popup_first no-print" style="padding: 13px 0px 20px;"> <button type="submit" name="Submit" class="exclusive noicon" style="float: right;"> <span>Продолжить покупку</span> </button><a title="Закрыть" class="popup_close" href="javascript:;"></a></p>').insertAfter(".box-cart-bottom div"); $(".pb-center-column").appendTo(".pb-right-column"); $(".pb-center-column").removeClass("col-xs-12 col-sm-4"); $(".pb-right-column").removeClass("col-sm-4 col-md-3").addClass("col-sm-7"); $(".primary_block.row").css({margin: "0 auto"}); $("#quantity_wanted_p").css({float: "right", marginTop: "6px", width: "177px"}); $(".product_attributes").css({height: "199px", boxShadow: "none", padding: "0px 19px 17px"}); $(".content_prices").css({float: "left", padding: "0px 19px"}); $("#our_price_display").css({fontSize: "27px"}); $(".exclusive").css({float: "right"}); $(".box-info-product").css({boxShadow: "none"}); $(".box-cart-bottom").css({boxShadow: "none"}); $(".buttons_bottom_block").css({padding: "13px 0px 20px"}); $(".box-cart-bottom").css({maxWidth: "380px"}); $(".pb-left-column").css({padding: "0px"}); $(".pb-center-column").css({clear: "both", maxWidth: "380px", marginTop: "42px", paddingLeft: "18px"}); } }); }); } Instead of (type: Iframe) I used (type: ajax) and added BeforeShow callback. The fancybox Quick view opens fine, but after closing it I can't go to the next page using the blocklayered module. As soon as you try to change the page, it throws an error $(...).slider is not a function. When you reload the page, you can change the page just fine using the same plugin blocklayered, but if you click Quick View once, then that's it, you are stack with the loading page circle on top with that error in the JavaScript console. If I use (type: Iframe) I don't get that error, but I can't modify the content using BeforeShow callback. I also tried to remove the BeforeShow, but still no luck. I guess that fancybox removes some Js from cache for the blocklayered module on load. Is there any work around or a fix for this? The Prestashop version is 1.6.1.9. Any help will be appreciated.

When I am trying to open Quick View of product in product list, it making ajax load for 2 seconds than reloading page to main product page, Cannot see any errors in console log, Prestashop version is 1.6.1.17 , tried to restart that option from theme configurator and cleared cache, still does not working, maybe some module not giving ajax to load properly

Hello everybody! I'm programming a new theme based on starter theme and fully bootstrap 4 and now customizing the file mytheme/templates/catalog/_partials/miniatures/product.tpl. My issue is related to mytheme/templates/catalog/_partials/quickview.tpl that I created because it don't exist in Starter theme. I wanted to use a bootstrap 4 modal window for show a quickview window when you click on quickview link in product lists miniatures as I want to minimize the javascript code in my theme and leave just the embed bootstrap 4 javascript. I created the modal bootstrap 4 link for show the quickview in product.tpl and add a include of my quickview.tpl file at the end too. Then created my quickview.tpl file and include $product.id_product and $product.id_product_attribute variables. The issue I found is when I click wichever product quickview link in product list it shows always modal window I created but with product id 1. It always shows the same product in modal window. I hope that someone has an idea of what I'm doing wrong. Thank you very much in advance! -Here's my mytheme/templates/catalog/_partials/miniatures/product.tpl code: " {block name='product_miniature_item'} <article class="nk-product" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}" itemscope itemtype="http://schema.org/Product"> {block name='product_thumbnail'} <a href="{$product.url}" class="nk-product-image" title="{$product.name}" style=" {if $product.id_image == $product.id_image2} background-image: url('{$link->getImageLink($product.link_rewrite, $product.id_image1, 'home_default')|escape:'html':'UTF-8'}') {else} background-image: url('{$link->getImageLink($product.link_rewrite, $product.id_image2, 'home_default')|escape:'html':'UTF-8'}') {/if} "> <img class = "nk-img-stretch" src = "{$product.cover.bySize.home_default.url}" alt = "{$product.cover.legend}" data-full-size-image-url = "{$product.cover.large.url}" > </a> {/block} {block name='product_category_name'} <div class="nk-product-category"> In <a href="{$product.id_category_default}-{$product.category}">{$product.category_name}</a> </div> {/block} {block name='product_name'} <h2 class="nk-product-title h5" itemprop="name"><a href="{$product.url}">{$product.name}</a></h2> {/block} {block name='product_variants'} {include file='catalog/_partials/variant-links.tpl' variants=$product.main_variants} {/block} {block name='product_reviews'} <div class="hook-reviews"> {hook h='displayProductListReviews' product=$product} </div> {/block} {block name='product_price_and_shipping'} {if $product.show_price} <div class="product-price-and-shipping left"> {hook h='displayProductPriceBlock' product=$product type="before_price"} <span itemprop="price" class="price left">{$product.price}</span> {if $product.has_discount} {hook h='displayProductPriceBlock' product=$product type="old_price"} {if $product.discount_type === 'percentage'} <span class="discount-percentage bg-main-1 text-white">{$product.discount_percentage}</span> {/if} <span class="regular-price text-danger">{$product.regular_price}</span> {/if} {hook h='displayProductPriceBlock' product=$product type="unit_price"} {hook h='displayProductPriceBlock' product=$product type="weight"} </div> {/if} {/block} {block name='product_flags'} <ul class="product-flags"> {foreach from=$product.flags item=flag} <li class="{$flag.type}">{$flag.label}</li> {/foreach} </ul> {/block} {block name='product_availability'} {if $product.show_availability} {* availability may take the values "available" or "unavailable" *} <span class='product-availability {$product.availability}'>{$product.availability_message}</span> {/if} {/block} <div class="nk-product-button"> {block name='product_list_actions'} <div class=""> {block name='quick_view'} <a class="nk-product-quick-view quick-view" href="#" data-toggle="modal" title="{l s='Quick view' d='Shop.Theme.Actions'}" data-target=".quickviewmodal" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}"> <span class="icon"> <i class="ion-eye"></i> </span> </a> {/block} {if $product.add_to_cart_url} <a class = "add-to-cart" href = "{$product.add_to_cart_url}" rel = "nofollow" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}" data-link-action="add-to-cart" > <span class="icon"><em class="ion-bag"></em></span> {l s='Add to cart' d='Shop.Theme.Actions'} </a> {/if} {hook h='displayProductListFunctionalButtons' product=$product} </div> {/block} </div> </article> {/block} {block name='product_quick_view'} {include file='catalog/_partials/quickview.tpl'} {/block} " -Here's my mytheme/templates/catalog/_partials/quickview.tpl file: " <div id="quickview-modal-{$product.id_product}-{$product.id_product_attribute}" class="modal fade quickview quickviewmodal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6 col-sm-6 hidden-xs-down"> {block name='product_cover_thumbnails'} {include file='catalog/_partials/product-cover-thumbnails.tpl'} {/block} <div class="arrows js-arrows"> <i class="material-icons arrow-up js-arrow-up"></i> <i class="material-icons arrow-down js-arrow-down"></i> </div> </div> <div class="col-md-6 col-sm-6"> <h1 class="h1">{$product.name}</h1> {block name='product_prices'} {include file='catalog/_partials/product-prices.tpl'} {/block} {block name='product_description_short'} <div id="product-description-short" itemprop="description">{$product.description_short nofilter}</div> {/block} {block name='product_buy'} <div class="product-actions"> <form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh"> <input type="hidden" name="token" value="{$static_token}"> <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id"> <input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id"> {block name='product_variants'} {include file='catalog/_partials/product-variants.tpl'} {/block} {block name='product_add_to_cart'} {include file='catalog/_partials/product-add-to-cart.tpl'} {/block} {block name='product_refresh'} <input class="product-refresh" data-url-update="false" name="refresh" type="submit" value="{l s='Refresh' d='Shop.Theme.Actions'}" hidden> {/block} </form> </div> {/block} </div> </div> </div> <div class="modal-footer"> {hook h='displayProductAdditionalInfo' product=$product} </div> </div> </div> </div> "

Thanks to one customer of Presta Theme Maker I found the following bug and I would like to share the solution because I think sooner or later someone would ask. The problem The problem is in the quick view if the description text is shorter than the height of the product image. The product image is covering also the buttons of social buttons. (see BUG.PNG) The solution Go to your_theme/assets/css/theme.css and find this line: .quickview .images-container{ .... position:absolute; .... Remove the "position:absolute". Then make sure to clear the cache and the problem is fixed. (FIXED.PNG) That's all

Hello, I'm using Presta 1.5.4.1, i made a fancybox in product list, to have a quick view of selected product. I use Link_product&content_only=1 . My problem is while click add to cart, the product is added but when i close the fancybox the ajax cart doesnt refresh automatically, until i refresh the whole page. I cant wait for suggestions..

hello, I'm trying to reduce of the page width to 70% on the default theme (1.6.0.9) however, whenever I reduce the header-container to 70% and attempt to align it to the centre, the quickview breaks...I can't figure out why though. Does anyone know how correctly resize the theme without breaking other stuff? thank you for any help. live development: http://farera.com/test/presta/ -Vince

Hi I have prestashop 1.6 and the default theme. My product quickview has become very slow and it takes a very long time to load. this is my website, http://lobaab.com/ it's in persian so the red button on the products is for the quick view. I would appreciate if you could help me maybe with debugging tools or any suggestions.

با سلام من از پرستا 1.6 استفاده میکنم و قالب پیش فرض نمایش سریع محصولات خیلی کند شده و زمان خیلی زیادی میبره باز شدنش این سایتم هست lobaab . com ممنون میشم کمک کنید

Bonjour, J'aimerai modifier des éléments du Popup QuickView, mais je ne vois pas ou le fichier TPL se trouve Merci pour tout aide

Hi, I´installed new prestashop 1.6, I found free template called Ikon, it´s seemed to me as a nice theme. After first installation websites works well as live demo. I could click on "quick view" it openned nice popup. Now? I have no choice to click on "quick-view" button. In detail of product was litle thumbnails when I clicked on them there were lightbox with bigger image of product, now is opening new page-list with image. There is also blank facebook box. If i installed that template for the first time and it would be broken, I choose another template, but now I know that template was working but after reinstallation to new clear Prestashop 1.6 it doesn´t work. I find some information in a forum but it was only about allowing "quickview" in a configuration of template, but it still doesn´t work. Thank you for help

Hello I have successfuly changed the font colour itself of the "quick view", however it has a dark background behind the font which is due to the inherited style (which i dont wish to change) i just want to alter the font background for the quick view only without it affecting other parts of the site. When i add" background: transparent; " just under the line where i successfully changed the font colour, instead of it changing the background of the font, it changes the background of the outer square. how can i change the background of the actual text font? please see attatched image for better understanding.

Hi, I disabled Quick View in Theme Configurator module. BUT, even though it is disabled, I still see the "Quick View" button displayed over the product. (If I tap it then it dosn't go quickview, but to the full product page (as it is supposed to). How do I stop the "quick view" button from being displayed? PS 1.6.0.6. Thanks, Peter

Bonjour, J'ai un souci sur ma boutique. En effet je veux modifier une traduction mais elle est indisponible pour ce module. Je vais donc voir le code mais impossible de le trouver... Ensuite je vais voir dans le footer car le code est en footer (je vais voir le code avec un Inspecteur de code) il est bien en footer. Je continue par chercher dans le footer dans l'hébergement impossible. Avez-vous une idée ou il pourrez être ? Je pense que c'est une chose chargé en js mais impossible de le trouver aussi... Merci à vous pour vos réponse... Cordialement