soul Posted February 24, 2018 Share Posted February 24, 2018 (edited) Hi im new to Prestahop and hope to find some answers. On the product page I used the customization field to have a customer upload a photos and a comment. I want to move that custom block under the attribute fields instead of above as it is the default. In product.tpl {if $product.is_customizable && count($product.customizations.fields)} {block name='product_customization'} {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations} {/block} {/if} <div class="product-actions"> {block name='product_buy'} <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} and I moved {if $product.is_customizable && count($product.customizations.fields)} {block name='product_customization'} {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations} {/block} {/if} to the bottom outside the form. Which gives me the correct layout on the page. But when selecting an attribute on the product page the URL does not update and refresh back to its previous default. I know its a form issue but not sure how to resolve it. Thanks. Edited February 24, 2018 by soul misspell (see edit history) Link to comment Share on other sites More sharing options...
TiaNex Shopping Posted February 25, 2018 Share Posted February 25, 2018 please paste the code after your change,maybe there is something wrong with the position,thanks Link to comment Share on other sites More sharing options...
soul Posted February 25, 2018 Author Share Posted February 25, 2018 (edited) Hi , I investigated and the code some more and got it somewhat working outside the add to cart form. {** * 2007-2017 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License 3.0 (AFL-3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * https://opensource.org/licenses/AFL-3.0 * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@prestashop.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <contact@prestashop.com> * @copyright 2007-2017 PrestaShop SA * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) * International Registered Trademark & Property of PrestaShop SA *} {extends file=$layout} {block name='head_seo' prepend} <link rel="canonical" href="{$product.canonical_url}"> {/block} {block name='head' append} <meta property="og:type" content="product"> <meta property="og:url" content="{$urls.current_url}"> <meta property="og:title" content="{$page.meta.title}"> <meta property="og:site_name" content="{$shop.name}"> <meta property="og:description" content="{$page.meta.description}"> <meta property="og:image" content="{$product.cover.large.url}"> <meta property="product:pretax_price:amount" content="{$product.price_tax_exc}"> <meta property="product:pretax_price:currency" content="{$currency.iso_code}"> <meta property="product:price:amount" content="{$product.price_amount}"> <meta property="product:price:currency" content="{$currency.iso_code}"> {if isset($product.weight) && ($product.weight != 0)} <meta property="product:weight:value" content="{$product.weight}"> <meta property="product:weight:units" content="{$product.weight_unit}"> {/if} {/block} {block name='content'} <section id="main" itemscope itemtype="https://schema.org/Product"> <meta itemprop="url" content="{$product.url}"> <div class="row"> <div class="col-md-6"> {block name='page_content_container'} <section class="page-content" id="content"> {block name='page_content'} {block name='product_flags'} <ul class="product-flags"> {foreach from=$product.flags item=flag} <li class="product-flag {$flag.type}">{$flag.label}</li> {/foreach} </ul> {/block} {block name='product_cover_thumbnails'} {include file='catalog/_partials/product-cover-thumbnails.tpl'} {/block} <div class="scroll-box-arrows"> <i class="material-icons left"></i> <i class="material-icons right"></i> </div> {/block} </section> {/block} </div> <div class="col-md-6"> {block name='page_header_container'} {block name='page_header'} <h1 class="h1" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1> {/block} {/block} {block name='product_prices'} {include file='catalog/_partials/product-prices.tpl'} {/block} <div class="product-information"> {block name='product_description_short'} <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div> {/block} {** removed old customization block *} <div class="product-actions"> {block name='product_buy'} <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_pack'} {if $packItems} <section class="product-pack"> <h3 class="h4">{l s='This pack contains' d='Shop.Theme.Catalog'}</h3> {foreach from=$packItems item="product_pack"} {block name='product_miniature'} {include file='catalog/_partials/miniatures/pack-product.tpl' product=$product_pack} {/block} {/foreach} </section> {/if} {/block} {block name='product_discounts'} {include file='catalog/_partials/product-discounts.tpl'} {/block} {** would like to have the customization block before the add to cart block *} {block name='product_add_to_cart'} {include file='catalog/_partials/product-add-to-cart.tpl'} {/block} {block name='product_additional_info'} {include file='catalog/_partials/product-additional-info.tpl'} {/block} {block name='product_refresh'} <input class="product-refresh ps-hidden-by-js" name="refresh" type="submit" value="{l s='Refresh' d='Shop.Theme.Actions'}"> {/block} </form> {** customization block outside cart form *} {if $product.is_customizable && count($product.customizations.fields)} {block name='product_customization'} {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations} {/block} {/if} {/block} </div> {block name='hook_display_reassurance'} {hook h='displayReassurance'} {/block} {block name='product_tabs'} <div class="tabs"> <ul class="nav nav-tabs" role="tablist"> {if $product.description} <li class="nav-item"> <a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description" role="tab" aria-controls="description" {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a> </li> {/if} <li class="nav-item"> <a class="nav-link{if !$product.description} active{/if}" data-toggle="tab" href="#product-details" role="tab" aria-controls="product-details" {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a> </li> {if $product.attachments} <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#attachments" role="tab" aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a> </li> {/if} {foreach from=$product.extraContent item=extra key=extraKey} <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}" role="tab" aria-controls="extra-{$extraKey}">{$extra.title}</a> </li> {/foreach} </ul> <div class="tab-content" id="tab-content"> <div class="tab-pane fade in{if $product.description} active{/if}" id="description" role="tabpanel"> {block name='product_description'} <div class="product-description">{$product.description nofilter}</div> {/block} </div> {block name='product_details'} {include file='catalog/_partials/product-details.tpl'} {/block} {block name='product_attachments'} {if $product.attachments} <div class="tab-pane fade in" id="attachments" role="tabpanel"> <section class="product-attachments"> <h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3> {foreach from=$product.attachments item=attachment} <div class="attachment"> <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4> <p>{$attachment.description}</p <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}"> {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted}) </a> </div> {/foreach} </section> </div> {/if} {/block} {foreach from=$product.extraContent item=extra key=extraKey} <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" role="tabpanel" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}> {$extra.content nofilter} </div> {/foreach} </div> </div> {/block} </div> </div> </div> {block name='product_accessories'} {if $accessories} <section class="product-accessories clearfix"> <h3 class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</h3> <div class="products"> {foreach from=$accessories item="product_accessory"} {block name='product_miniature'} {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory} {/block} {/foreach} </div> </section> {/if} {/block} {block name='product_footer'} {hook h='displayFooterProduct' product=$product category=$category} {/block} {block name='product_images_modal'} {include file='catalog/_partials/product-images-modal.tpl'} {/block} {block name='page_footer_container'} <footer class="page-footer"> {block name='page_footer'} <!-- Footer content --> {/block} </footer> {/block} </section> {/block} What I would like to see is the customization field just above the add to cart button. (as in the 2nd screenshot). {** * 2007-2017 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License 3.0 (AFL-3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * https://opensource.org/licenses/AFL-3.0 * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@prestashop.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <contact@prestashop.com> * @copyright 2007-2017 PrestaShop SA * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) * International Registered Trademark & Property of PrestaShop SA *} {extends file=$layout} {block name='head_seo' prepend} <link rel="canonical" href="{$product.canonical_url}"> {/block} {block name='head' append} <meta property="og:type" content="product"> <meta property="og:url" content="{$urls.current_url}"> <meta property="og:title" content="{$page.meta.title}"> <meta property="og:site_name" content="{$shop.name}"> <meta property="og:description" content="{$page.meta.description}"> <meta property="og:image" content="{$product.cover.large.url}"> <meta property="product:pretax_price:amount" content="{$product.price_tax_exc}"> <meta property="product:pretax_price:currency" content="{$currency.iso_code}"> <meta property="product:price:amount" content="{$product.price_amount}"> <meta property="product:price:currency" content="{$currency.iso_code}"> {if isset($product.weight) && ($product.weight != 0)} <meta property="product:weight:value" content="{$product.weight}"> <meta property="product:weight:units" content="{$product.weight_unit}"> {/if} {/block} {block name='content'} <section id="main" itemscope itemtype="https://schema.org/Product"> <meta itemprop="url" content="{$product.url}"> <div class="row"> <div class="col-md-6"> {block name='page_content_container'} <section class="page-content" id="content"> {block name='page_content'} {block name='product_flags'} <ul class="product-flags"> {foreach from=$product.flags item=flag} <li class="product-flag {$flag.type}">{$flag.label}</li> {/foreach} </ul> {/block} {block name='product_cover_thumbnails'} {include file='catalog/_partials/product-cover-thumbnails.tpl'} {/block} <div class="scroll-box-arrows"> <i class="material-icons left"></i> <i class="material-icons right"></i> </div> {/block} </section> {/block} </div> <div class="col-md-6"> {block name='page_header_container'} {block name='page_header'} <h1 class="h1" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1> {/block} {/block} {block name='product_prices'} {include file='catalog/_partials/product-prices.tpl'} {/block} <div class="product-information"> {block name='product_description_short'} <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div> {/block} {** removed old customization block *} <div class="product-actions"> {block name='product_buy'} <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_pack'} {if $packItems} <section class="product-pack"> <h3 class="h4">{l s='This pack contains' d='Shop.Theme.Catalog'}</h3> {foreach from=$packItems item="product_pack"} {block name='product_miniature'} {include file='catalog/_partials/miniatures/pack-product.tpl' product=$product_pack} {/block} {/foreach} </section> {/if} {/block} {block name='product_discounts'} {include file='catalog/_partials/product-discounts.tpl'} {/block} {** would like to have the customization block before the add to cart block *} {if $product.is_customizable && count($product.customizations.fields)} {block name='product_customization'} {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations} {/block} {/if} {block name='product_add_to_cart'} {include file='catalog/_partials/product-add-to-cart.tpl'} {/block} {block name='product_additional_info'} {include file='catalog/_partials/product-additional-info.tpl'} {/block} {block name='product_refresh'} <input class="product-refresh ps-hidden-by-js" name="refresh" type="submit" value="{l s='Refresh' d='Shop.Theme.Actions'}"> {/block} </form> {** customization block outside cart form *} {/block} </div> {block name='hook_display_reassurance'} {hook h='displayReassurance'} {/block} {block name='product_tabs'} <div class="tabs"> <ul class="nav nav-tabs" role="tablist"> {if $product.description} <li class="nav-item"> <a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description" role="tab" aria-controls="description" {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a> </li> {/if} <li class="nav-item"> <a class="nav-link{if !$product.description} active{/if}" data-toggle="tab" href="#product-details" role="tab" aria-controls="product-details" {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a> </li> {if $product.attachments} <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#attachments" role="tab" aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a> </li> {/if} {foreach from=$product.extraContent item=extra key=extraKey} <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}" role="tab" aria-controls="extra-{$extraKey}">{$extra.title}</a> </li> {/foreach} </ul> <div class="tab-content" id="tab-content"> <div class="tab-pane fade in{if $product.description} active{/if}" id="description" role="tabpanel"> {block name='product_description'} <div class="product-description">{$product.description nofilter}</div> {/block} </div> {block name='product_details'} {include file='catalog/_partials/product-details.tpl'} {/block} {block name='product_attachments'} {if $product.attachments} <div class="tab-pane fade in" id="attachments" role="tabpanel"> <section class="product-attachments"> <h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3> {foreach from=$product.attachments item=attachment} <div class="attachment"> <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4> <p>{$attachment.description}</p <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}"> {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted}) </a> </div> {/foreach} </section> </div> {/if} {/block} {foreach from=$product.extraContent item=extra key=extraKey} <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" role="tabpanel" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}> {$extra.content nofilter} </div> {/foreach} </div> </div> {/block} </div> </div> </div> {block name='product_accessories'} {if $accessories} <section class="product-accessories clearfix"> <h3 class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</h3> <div class="products"> {foreach from=$accessories item="product_accessory"} {block name='product_miniature'} {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory} {/block} {/foreach} </div> </section> {/if} {/block} {block name='product_footer'} {hook h='displayFooterProduct' product=$product category=$category} {/block} {block name='product_images_modal'} {include file='catalog/_partials/product-images-modal.tpl'} {/block} {block name='page_footer_container'} <footer class="page-footer"> {block name='page_footer'} <!-- Footer content --> {/block} </footer> {/block} </section> {/block} I understand thats a form within the form will not work. I wonder if I can make it work by moving the product-variants.tpl block. Or look at the attribute function and create an new upload attribute type. Thank you appriciate your time and efforts. Edited February 25, 2018 by soul (see edit history) Link to comment Share on other sites More sharing options...
soul Posted February 25, 2018 Author Share Posted February 25, 2018 I also noticed when using customized fields and make the fields mandatory the add to cart button is greyed out. In 1.6.x it gave you a prompt that you had to fill out the required fields first. Am I missing a setting to turn that on? Thanks. Link to comment Share on other sites More sharing options...
TiaNex Shopping Posted February 26, 2018 Share Posted February 26, 2018 maybe move the code out of the block </form> {/block} {** customization block outside cart form *} Link to comment Share on other sites More sharing options...
soul Posted February 26, 2018 Author Share Posted February 26, 2018 (edited) Thanks I did that before. but that then shows the fields under the add-to-cart button. Edited February 26, 2018 by soul (see edit history) Link to comment Share on other sites More sharing options...
eridamega Posted April 21, 2018 Share Posted April 21, 2018 Did you manage to solve it? I am in the same situation Link to comment Share on other sites More sharing options...
Tobias Posted May 24, 2018 Share Posted May 24, 2018 (edited) Same problem here - any suggestions for a solution? Changing positions of those blocks (customization and variants) always causes problems and won't let me correctly add a product to the cart anymore. Edited May 24, 2018 by Tobias (see edit history) Link to comment Share on other sites More sharing options...
moniq Posted April 29, 2019 Share Posted April 29, 2019 Any update? Someone who knows how to solve it? I think it would be very helpful for many of us who have the same problem :) Link to comment Share on other sites More sharing options...
dinasilva Posted June 8, 2020 Share Posted June 8, 2020 Someone who knows how to solve it?I have the same problem.🙁 Link to comment Share on other sites More sharing options...
Foxfur Posted July 26, 2020 Share Posted July 26, 2020 I'm in this boat too. It makes more sense to have it sit below the option button so you can chose some variants including to customize it and THEN you can type your customization details. Would love to see a fix to this! 1 Link to comment Share on other sites More sharing options...
prescient Posted July 20, 2023 Share Posted July 20, 2023 Has anyone found a solution for this that will work for PS 8.x? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now