Pass $product.id_product variable between theme tempates tpl. files in Starter Theme

[tvillalbac]

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>

"

 

 

[tvillalbac]

I find the simple solution!!

I found in code it shows each modal window with its reference to id_ product but all modal windows has the same target class (.quickview) and then when I click each quickview link it shows just the first modal window, in this case product 1.

To solve this I created the modal target class .quickviewmodal-{$product.id_product} and put it on quickview link in product.tpl and on modal window in quickview.tpl.

 

Solved 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-{$product.id_product}" 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 name='product_quick_view'}
        {include file='catalog/_partials/quickview.tpl'}
    {/block}
{/block}

"

 

--Here's my SOLVED mytheme/templates/catalog/_partials/quickview.tpl file:

"

<div id="quickview-modal-{$product.id_product}-{$product.id_product_attribute}" class="modal fade quickview quickviewmodal quickviewmodal-{$product.id_product}" 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>

"

 

Best regards!!!