Copy HTML data to another element using data-attributes

Question

I'm currently working on building a webshop. Each product on the homepage is rendered automatically in a box using a "for" loop. I created a preview button on each product-box so visitors aren't send of the homepage when they want detailed information about a product. By clicking the preview button a popup should come up with the product name (and more information).

Basically I want the dynamic text {{product.title}} be reproduced in the popup box of the corresponding product.

What's the best way to manage this? Is this by using data-attributes?

<!-- PRODUCT SECTION -->
<section id="Portfolio" class="clearfix portfolio {{ theme.product_display }}"> 
  {% for product %}
  <article class="portfolio-product">
    <figure class="portfolio-productimage">
      <a href="{{ product.url | url }}">
        <img src="{{ product.image | url_image(product.title) }}" class="img-responsive" alt="{{ product.title }}">
        <span role="button" data-popup="#quick_view_product" class="button_type_5 box_s_none color_light r_corners tr_all_hover d_xs_none">Quick View</span>
      </a>
    </figure>
    <div class="portfolio-producttitle">
      <h3>{{ product.title }}</h3>
    </div>
  </article>
  {% endfor %}
</section>
<!-- END PRODUCT SECTION -->

<!-- PRODUCT POPUP -->
<div class="popup_wrap d_none" id="quick_view_product">
  <section class="popup r_corners shadow">
    <button class="bg_tr color_dark tr_all_hover text_cs_hover close f_size_large"><i class="fa fa-times"></i></button>
    <div class="clearfix">
      <div class="full_column">
        <h2 class="m_bottom_10">{{ product.title }}</h2> // THIS IS WHERE THE AUTOMATED PRODUCT TITLE SHOULD BE DISPLAYED            
      </div>
    </div>
  </section>
</div>
<!-- END PRODUCT POPUP -->

Answer 1

You can place the popup markup in the for loop and use the variables from the for or you can use data-atributes as you sugested to pass data from the looped markup to the popup .

The avantage of data-atributes over placing the popup markup in the loop is less markup on the page ->small html page -> fast render time

Answer 2

Thanks Madalin! You made my day. I've been looking 2 days for an answer.

Here the working mark-up:

<!-- PRODUCT SECTION -->
<section id="Portfolio" class="clearfix portfolio {{ theme.product_display }}"> 
  {% for product %}
  <article class="portfolio-product">
    <figure class="portfolio-productimage">
      <a href="{{ product.url | url }}">
        <img src="{{ product.image | url_image(product.title) }}" class="img-responsive" alt="{{ product.title }}">
        <span role="button" data-popup="#quick_view_product_{{ product.id }}" class="button_type_5 box_s_none color_light r_corners tr_all_hover d_xs_none">Quick View</span>
      </a>
    </figure>
    <div class="portfolio-producttitle">
      <h3>{{ product.title }}</h3>
    </div>
  </article>
  {% endfor %}
</section>
<!-- END PRODUCT SECTION -->

<!-- PRODUCT POPUP -->
<div class="popup_wrap d_none" id="quick_view_product_{{ product.id }}">
  <section class="popup r_corners shadow">
    <button class="bg_tr color_dark tr_all_hover text_cs_hover close f_size_large"><i class="fa fa-times"></i></button>
    <div class="clearfix">
      <div class="full_column">
        <h2 class="m_bottom_10">{{ product.title }}</h2> // THIS IS WHERE THE AUTOMATED PRODUCT TITLE SHOULD BE DISPLAYED            
      </div>
    </div>
  </section>
</div>
<!-- END PRODUCT POPUP -->