Dynamic image div based on product

[ramisrour92]

I have created a popup whenever a product is added to cart, using HTML, CSS (possibly some JavaScript involved, as i started with a template). But now I want to display the first image of the product page, in the header of the popup(I know where I should place this), and I just need help to know what JavaScript code i would need to extract this first image, and place it inside the popup. Appreciate any help.

EDIT: Also, is there any way to create a button inside this popup, that closes it? I know the popup closes when i press outside the popup, is there any way to link a click outside this popup div, that equals a click outside it? Thanks.

[WebSteve]

If you want any helpful replies, you’ll need to provide the script for the page that is placing the first image on the page. Without seeing that, we are blind and can’t give any pointers.

[ramisrour92]

Hi, you’re right. Here goes;

HTML:

<div id="dytmpl-${dyVariationId}">
  <h2 id="handlevogn">
    <span class="egui icon-******-checked-big">
    </span>
    Produktet er blitt lagt til i handlevognen
  </h2>
-----------I WANT IT TO DISPLAY THE IMAGE HERE-----------
  <div class="img_${dyVariationId}"></div>
  <div class="content_${dyVariationId}">
    <div class="title_${dyVariationId}">${Title}</div>
    <div class="secondary_text_${dyVariationId}">${Secondary Text}</div>
    <p>IaV - *</p>
    <h2>499</h2>
    <a class="lesMer" href="">Les mer om installasjon</a></br>
  </div>
  <a class="button_${dyVariationId}" href="${Button URL}">${Button Text}</a>
</div>

So, I do not have any js, because I’m working with an overlay which overwrites the original page code. Is this sufficent?
Edit:
I also forgot to mention the class name for the product image on the PDP(product description page) is .first-product-image

[TechnoBear]

Off Topic:

@ramisrour92: when you post code on the forums, you need to format it so it will display correctly. (I’ve edited your last post for you.)

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.